[2018.01.03] 04. 머티리얼 디자인 - Hero 전환 1

도입

이번 포스팅에서는 안드로이드에서 머티리얼 디자인에서 "Hero 전환"를 실습할 예정이다.

그 중에서도 액티비티 간의 View를 공유하는 디자인을 실습할 예정이다.

Hero 전환의 개념

머티리얼 디자인 Google 가이드라인에 따르면 

일반적으로 머티리얼 디자인에서 UI 와 콘텐츠 요소는 갑자기 나타나거나 사라지지 않으며, 자신의 위치로 자연스럽게 이동해야 한다. 어떤 아이템을 클릭하여 상세 화면으로 전환되는 경우, 옆의 그림과 같이 선택된 아이템이 목록 화면에서 상세 화면으로 자연스럽게 전환되는 '히어로(Hero) 전환' 을 적용한다.

또한, 지난 포스팅(http://heepie.tistory.com/242)에서 살펴 본 것처럼 머티리얼 디자인에서 모든 행동은 의미를 가져야 한다. 

'Hero 전환'의 의미는

사용자에게 사용자 행동(클릭, 드레드 등)에 따른 

1) 결과를 자연스럽게 보여주고 

2) 변화에 흐름을 만들어 주고 

3) 재미를 제공

한다고 생각한다. (나의 생각)

실습

실습할 내용은 리스트 글을 선택하면 글의 내용으로 넘어가는 실습을 할 예정이다.

Step1. 테마 설정 및 매니패스트 설정

<style name="MaterialAnimations" parent="@style/Theme.AppCompat.Light.NoActionBar">
    <!-- ... -->
    <item name="android:windowContentTransitions">true</item>
    <item name="android:windowAllowEnterTransitionOverlap">false</item>
    <item name="android:windowAllowReturnTransitionOverlap">false</item>
    <item name="android:windowBackground">@color/light_grey</item>
</style>

<application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:supportsRtl="true"
    android:theme="@style/MaterialAnimations">

Step2. transitionName 설정 및 intent 설정

item_post.xml (※ 전달하는 xml, 받는 xml 모두 설정해야 함)

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
 
    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="3dp"
        >
 
            <RelativeLayout
                android:id="@+id/layout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_margin="4dp">
 
                <de.hdodenhof.circleimageview.CircleImageView
                    style="@style/CircleImage"
                    android:id="@+id/imgView"
                    android:layout_alignParentStart="true"
                    android:layout_alignParentTop="true"
                    android:layout_marginStart="14dp"
                    android:src="@android:color/black"
                    android:transitionName="@string/shared_img_view"
                    app:setImgRes="@{model.colorResId}"/>
 
                <TextView
                    android:id="@+id/txtView"
                    style="@style/DefaultText"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:layout_marginStart="13dp"
                    android:layout_toEndOf="@+id/imgView"
                    android:transitionName="@string/shared_txt_view"
                    android:text="@{model.name}"/>
 
            </RelativeLayout>
    </android.support.v7.widget.CardView>
</LinearLayout>

RecyclerAdapter.java

@Override
public void onBindViewHolder(Holder holder, int position) {
    holder.bind(mData.get(position));
    holder.mBinding.layout.setOnClickListener((v) -> {
        Intent intent = new Intent(activity, SecondActivity.class);
        
        Pair<View, String> pair1 
                    = Pair.create(holder.mBinding.imgView, 
                                  holder.mBinding.imgView.getTransitionName());
        Pair<View, String> pair2 
                    = Pair.create(holder.mBinding.txtView, 
                                  holder.mBinding.txtView.getTransitionName());
        ActivityOptionsCompat options = ActivityOptionsCompat
                    .makeSceneTransitionAnimation(activity, pair1, pair2);
        intent.putExtra("model", mData.get(position));
        activity.startActivity(intent, options.toBundle());
 
    });
}

Step3. 애니메이션 설정 및 더미 데이터 생성

MainActivity.java

private void makeDummyData() {
    data = Arrays.asList(
                new Item(android.R.color.holo_orange_light, "Hello"),
                new Item(android.R.color.holo_blue_dark, "Heepie"),
                new Item(android.R.color.holo_red_light, "YoLo"),
                new Item(android.R.color.holo_green_light, "GooD")
           );
}
 
private void setupWindowAnimations() {
    // 다시 액티비티로 리턴 될 때 애니메이션 설정
    Slide slideTransition = new Slide();
    slideTransition.setSlideEdge(Gravity.LEFT);
    slideTransition.setDuration(getResources().getInteger(R.integer.anim_duration_long));
    getWindow().setReenterTransition(slideTransition);
    getWindow().setExitTransition(slideTransition);
}

스크린 샷

적용 전	적용 후

#머티리얼 디자인 #Material Design #Hero 전환