[Android] View Collapse & Expand Animation

Collpase & Expand Animation

1. Collpase/Expand UI를 만들 때, Animation을 주는 방법

   TransitionManager를 이용하면 간단하게 만들 수 있다!

    
   TransitionManager.beginDelayedTransition(ViewGroup, Transition) // ViewGroup은 root view를 넣어주면 된다.
   

   • Transition의 종류

     • Android 5.0(API 레벨 21) 이하에서 사용할 경우

       1. AutoTransition() : Android가 자동으로 Animation을 설정
       2. ChangeBound() : Collpase/Expand Animation

     • Android 5.0(API 레벨 21) 이상일 경우(위 2개 포함)는 아래 주소 참조 https://developer.android.com/training/material/animations.html?hl=ko#Transitions의 사용

2. Code

   1. activity_main.xml

       
      <?xml version="1.0" encoding="utf-8"?>
      <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="match_parent"
          xmlns:app="http://schemas.android.com/apk/res-auto"
          android:id="@+id/container"
          android:layout_height="match_parent">
      ​
          <android.support.v7.widget.RecyclerView
              android:id="@+id/recycler_view"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              app:layoutManager="LinearLayoutManager"/>
      ​
      </RelativeLayout>
      

   2. row_list_item.xml

       
      <?xml version="1.0" encoding="utf-8"?>
      <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:orientation="vertical" android:layout_width="match_parent"
          android:layout_height="wrap_content">
      ​
          <TextView
              android:id="@+id/group_title"
              android:padding="15dp"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:background="?selectableItemBackground"
              android:drawableRight="@android:drawable/arrow_down_float"/>
      ​
          <TextView
              android:id="@+id/child_contents"
              android:layout_marginLeft="15dp"
              android:padding="15dp"
              android:layout_width="match_parent"
              android:layout_height="wrap_content" />
      </LinearLayout>
      

   3. MainActivity.java

       
      import android.content.Context;
      import android.content.Intent;
      import android.os.Bundle;
      import android.support.annotation.Nullable;
      import android.support.v7.app.AppCompatActivity;
      import android.support.v7.widget.RecyclerView;
      import android.transition.ChangeBounds;
      import android.transition.TransitionManager;
      import android.view.LayoutInflater;
      import android.view.View;
      import android.view.ViewGroup;
      import android.widget.TextView;
      ​
      public class MainActivity extends AppCompatActivity {
      ​
          public static void createInstance(Context context) {
              Intent intent = new Intent(context, MainActivity.class);
              context.startActivity(intent);
          }
      ​
          @Override
          protected void onCreate(@Nullable Bundle savedInstanceState) {
              super.onCreate(savedInstanceState);
              setContentView(R.layout.activity_main);
              RecyclerView recyclerView = findViewById(R.id.recycler_view);
              recyclerView.setAdapter(new BasicAdapter((ViewGroup) findViewById(R.id.container)));
          }
      ​
          class BasicAdapter extends RecyclerView.Adapter<BasicAdapter.ViewHolder> {
      ​
              private ViewGroup mRootView;
      ​
              public BasicAdapter(ViewGroup rootView) {
                  mRootView = rootView;
              }
      ​
              @Override
              public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
                  return new ViewHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.row_list_item, parent, false));
              }
      ​
              @Override
              public void onBindViewHolder(final ViewHolder holder, int position) {
                  holder.setItem(position);
                  holder.itemView.setOnClickListener(new View.OnClickListener() {
                      @Override
                      public void onClick(View view) {
                          TransitionManager.beginDelayedTransition(mRootView, new ChangeBounds());
                          holder.changeViewState();
                      }
                  });
              }
      ​
              @Override
              public int getItemCount() {
                  return 5;
              }
      ​
              class ViewHolder extends RecyclerView.ViewHolder {
      ​
                  private TextView groupTitle;
                  private TextView childContents;
      ​
                  public ViewHolder(View itemView) {
                      super(itemView);
                      groupTitle = itemView.findViewById(R.id.group_title);
                      childContents = itemView.findViewById(R.id.child_contents);
                  }
      ​
                  public void setItem(int position) {
                      groupTitle.setText("Group Title " + (position+1));
                      childContents.setText(new String(new char[position+1]).replace("\0", "Child!!!!!\n"));
                  }
      ​
                  public void changeViewState() {
                      childContents.setVisibility(childContents.getVisibility() == View.VISIBLE ? View.GONE : View.VISIBLE);
                      int arrow = (childContents.getVisibility() == View.GONE ? android.R.drawable.arrow_down_float : android.R.drawable.arrow_up_float);
                      groupTitle.setCompoundDrawablesWithIntrinsicBounds(0, 0, arrow, 0);
                  }
              }
          }
      }
      

3. 예제 화면