[2018.01.04] 06.머티리얼 디자인 - Hero 전환 2

도입

이번 포스팅에서는 지난 포스팅에 이어 "Hero 전환"을 실습할 예정이다.

이번에는 머티리얼 디자인의 개념에 언급했던

종이와 잉크를 기반으로 사용자에게 물질의 질감, 광원 효과, 그림자 효과 등으로 더 실감나는 효과를 제공한다.

이러한 효과를 나타내볼 예정이다.

---

실습

Item을 클릭 시, 잉크처럼 번지는 현상을 표현할 예정이다.

 

Step1. 필요한 테마 설정

<style name="MaterialAnimations" parent="@style/Theme.AppCompat.Light.NoActionBar">
    <item name="android:colorPrimary">@color/material_animations_primary</item>
    <item name="android:colorPrimaryDark">@color/material_animations_primary_dark</item>
    <item name="android:colorAccent">@color/material_animations_accent</item>
    <item name="android:textColorPrimary">@android:color/black</item>
    <item name="android:textColorPrimaryInverse">@color/text_light</item>
    <item name="android:statusBarColor">@color/material_animations_primary_dark</item>
    <item name="android:textColor">@color/text_dark</item>
    <item name="android:windowContentTransitions">true</item>
    <item name="android:windowBackground">@color/light_grey</item>
    <item name="android:windowAllowEnterTransitionOverlap">false</item>
    <item name="android:windowAllowReturnTransitionOverlap">false</item>
</style>
 
<style name="MaterialAnimations.Yellow" parent="MaterialAnimations">
    <item name="android:colorPrimary">@color/theme_yellow_background</item>
    <item name="android:colorPrimaryDark">@color/theme_yellow_primary</item>
    <item name="android:textColorPrimary">@color/theme_yellow_text</item>
    <item name="android:statusBarColor">@color/theme_yellow_primary_dark</item>
    <item name="android:windowBackground">@color/theme_yellow_background</item>
    <item name="android:colorAccent">@color/theme_yellow_accent</item>
</style>
 
<style name="MaterialAnimations.Red" parent="MaterialAnimations">
    <item name="android:colorPrimary">@color/theme_red_background</item>
    <item name="android:colorPrimaryDark">@color/theme_red_primary</item>
    <item name="android:textColorPrimary">@color/theme_red_text</item>
    <item name="android:statusBarColor">@color/theme_red_primary_dark</item>
    <item name="android:windowBackground">@color/theme_red_background</item>
    <item name="android:colorAccent">@color/theme_red_accent</item>
</style>
 
<style name="MaterialAnimations.Blue" parent="MaterialAnimations">
    <item name="android:colorPrimary">@color/theme_blue_background</item>
    <item name="android:colorPrimaryDark">@color/theme_blue_primary</item>
    <item name="android:textColorPrimary">@color/theme_blue_text</item>
    <item name="android:statusBarColor">@color/theme_blue_primary_dark</item>
    <item name="android:windowBackground">@color/theme_blue_background</item>
    <item name="android:colorAccent">@color/theme_blue_accent</item>
</style>
 
<style name="MaterialAnimations.Green" parent="MaterialAnimations">
    <item name="android:colorPrimary">@color/theme_green_background</item>
    <item name="android:colorPrimaryDark">@color/theme_green_primary</item>
    <item name="android:textColorPrimary">@color/theme_green_text</item>
    <item name="android:statusBarColor">@color/theme_green_primary_dark</item>
    <item name="android:windowBackground">@color/theme_green_background</item>
    <item name="android:colorAccent">@color/theme_green_accent</item>
</style>

Step2. transitionName 설정 및 intent 설정

item_post.xml

<de.hdodenhof.circleimageview.CircleImageView
    android:id="@+id/shared_img"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:layout_marginBottom="8dp"
    android:layout_marginStart="16dp"
    android:layout_marginTop="8dp"
    android:src="@android:color/holo_orange_dark"
    android:transitionName="@string/shared_img_view"
    />
 
<TextView
    style="@style/DefaultText"
    android:id="@+id/shared_txt"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_marginBottom="8dp"
    android:layout_marginStart="16dp"
    android:layout_marginTop="8dp"
    android:transitionName="@string/shared_txt_view"
    />

activity_detail.xml

<android.support.v7.widget.Toolbar
    android:id="@+id/tool_bar"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:background="?android:colorPrimary"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:contentInsetStart="0dp"
    >
 
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
 
        <FrameLayout
            android:id="@+id/background"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:orientation="vertical">
 
            <de.hdodenhof.circleimageview.CircleImageView
                android:visibility="visible"
                android:id="@+id/imgView"
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:layout_gravity="center"
                android:src="@android:color/holo_orange_dark"
                android:transitionName="@string/shared_img_view"
                />
 
        </FrameLayout>
 
        <TextView
            style="@style/DefaultText"
            android:id="@+id/txtView"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:gravity="center"
            android:transitionName="@string/shared_txt_view" />
 
    </RelativeLayout>
</android.support.v7.widget.Toolbar>

Step3. RecyclerAdapter 설정

// ... RecyclerAdapter 설정 후
class Holder extends RecyclerView.ViewHolder {
    private View layout, sharedTxt, sharedImg;
    private Item mItem;
    private Intent intent;
 
    public Holder(View itemView) {
        super(itemView);
        layout = itemView.findViewById(R.id.layout);
        sharedImg = itemView.findViewById(R.id.shared_img);
        sharedTxt = itemView.findViewById(R.id.shared_txt);
 
        initListener();
    }
 
    private void initListener() {
        intent = new Intent(activity, NextActivity.class);
 
        layout.setOnClickListener(new View.OnClickListener() {
            @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
            @Override
            public void onClick(View v) {
                Pair<View, String> pair1 = Pair.create(sharedImg, sharedImg.getTransitionName());
                Pair<View, String> pair2 = Pair.create(sharedTxt, sharedTxt.getTransitionName());
 
                ActivityOptionsCompat transitionActivityOptions
                    = ActivityOptionsCompat.makeSceneTransitionAnimation(activity, pair1, pair2);
                activity.startActivity(intent, transitionActivityOptions.toBundle());
            }
        });
    }
 
    public void setItem(Item item) {
        this.mItem = item;
        intent.putExtra("model", item);
    }
 
    public void setDataToScreen() {
        ((CircleImageView)sharedImg).setImageResource(mItem.getColorResId());
        ((TextView)sharedTxt).setText(mItem.getName());
    }
}

Step4. MainActivity 리사이클러뷰 연결, DetailActivity 애니메이션 설정

MainActivity.java

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    makeDummyData();
 
    setContentView(R.layout.recycler_main);
    initView();
    initRecyclerView();
}
 
private void initView() {
    recyclerView = findViewById(R.id.recyclerView);
    titleTxtView = findViewById(R.id.titleTxtView);
}
 
private void initRecyclerView() {
    RecyclerAdapter adapter = new RecyclerAdapter(this);
    adapter.setDataAndRefresh(data);
 
    recyclerView.setAdapter(adapter);
    recyclerView.setLayoutManager(new LinearLayoutManager(this));
}
 
private void makeDummyData() {
    data = Arrays.asList(
            new Item(R.color.theme_yellow_primary_dark, "Hello"),
            new Item(R.color.theme_blue_primary_dark, "Heepie"),
            new Item(R.color.theme_red_primary_dark, "YoLo"),
            new Item(R.color.theme_green_primary_dark, "GooD")
           );
}

DetailActivity.java

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // setTheme 메소드 설정을 위해 onCreate 후 바로 실행
    initData();
    setContentView(R.layout.activity_next);
 
    initView();
    initListener();
}
 
private void animateRevealShow(View viewRoot, @ColorRes int colorResId) {
    viewRoot.setBackgroundResource(colorResId);
        
    // 번지는 시작 위치 설정 x,y
    int cx = (viewRoot.getLeft() + viewRoot.getRight()) / 2;
    int cy = (viewRoot.getTop() + viewRoot.getBottom()) / 2;
    int finalRadius = Math.max(viewRoot.getWidth(), viewRoot.getHeight());
 
    Animator anim = ViewAnimationUtils.createCircularReveal(viewRoot, cx, cy, 0, finalRadius);
    viewRoot.setVisibility(View.VISIBLE); 
    anim.setDuration(1000);
    anim.setInterpolator(new AccelerateInterpolator());
    anim.start();
}
 
private void initView() {
    background = findViewById(R.id.background);
    imgView = findViewById(R.id.imgView);
    txtView = findViewById(R.id.txtView);
 
    imgView.setImageResource(mItem.getColorResId());
    txtView.setText(mItem.getName());
}
 
private void initData() {
    mItem = getIntent().getParcelableExtra("model");
    setCustomTheme(mItem.getColorResId());
}
 
// item에 따른 테마 설정
private void setCustomTheme(@ColorRes int colorResId) {
    @StyleRes int styleResId;
 
    switch (colorResId) {
    case R.color.theme_red_primary_dark:    styleResId = R.style.MaterialAnimations_Red;    break;
    case R.color.theme_blue_primary_dark:   styleResId = R.style.MaterialAnimations_Blue;   break;
    case R.color.theme_green_primary_dark:  styleResId = R.style.MaterialAnimations_Green;  break;
    case R.color.theme_yellow_primary_dark: styleResId = R.style.MaterialAnimations_Yellow; break;
    default:                                styleResId = R.style.MaterialAnimations;        break;
    }
    setTheme(styleResId);
}
 
private void initListener() {
    Transition transition = TransitionInflater.from(this).inflateTransition(R.transition.changebounds);
    getWindow().setSharedElementEnterTransition(transition);
    transition.addListener(new Transition.TransitionListener() {
        // ...
        @Override
        public void onTransitionEnd(Transition transition) {
            animateRevealShow(background, mItem.getColorResId());
        }
    });
}

---

스크린 샷

적용 전	적용 후

---

Source Code

Heepie/MaterialDesign

 

 

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