android实现Materia Design风格APP（五）：RecyclerView自定义item动画和共享元素动画

最新推荐文章于 2024-07-29 20:39:04 发布

wozuihaole

最新推荐文章于 2024-07-29 20:39:04 发布

阅读量1.4k

点赞数

分类专栏： UI动画类 android实现Materia Design风格APP 文章标签： android LayoutAnimation 共享元素

本文链接：https://blog.csdn.net/wozuihaole/article/details/89244477

版权

UI动画类同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

android实现Materia Design风格APP

6 篇文章 0 订阅

订阅专栏

1.RecyclerView自定义item动画

使用布局动画可以很方便的实现这个功能，布局动画的定义过程就是创建在res下创建anim路径，然后自定义我们的layoutAnimation和set动画集合，然后在RecyclerView的xml中把layoutAnimation赋值给android:layoutAnimation属性。

需要注意的是你的item布局里如果有ImageView一定不要给它在xml里设置src属性，否则动画失效。

res->anim->item_anim_detail.xml代码：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:shareInterpolator="true">

    <translate android:fromYDelta="-20%"
        android:toYDelta="0.0"/>

    <alpha android:fromAlpha="0.0"
        android:toAlpha="1.0"/>
</set>

res->anim->item_anim.xml代码：

<?xml version="1.0" encoding="utf-8"?>
<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
    android:animation="@anim/item_anim_detail"
    android:delay="0.5"
    android:animationOrder="normal">

</layoutAnimation>

xml布局文件：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ListARecyclerViewAnimtor">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolBar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:layout_scrollFlags="scroll|enterAlways|snap"/>
    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layoutAnimation="@anim/item_anim"/>

</android.support.design.widget.CoordinatorLayout>

2.共享元素。

这个感觉说起来有点抽象，直接看效果吧。模拟器有点卡。

item的xml布局文件，注意里面的android:transitionName属性：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/card"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:cardCornerRadius="10dp"
    android:layout_margin="10dp"
    android:elevation="8dp"
    xmlns:app="http://schemas.android.com/apk/res-auto">


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/pic"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:transitionName="pic"/>

            <TextView
                android:id="@+id/name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:layout_gravity="bottom"
                android:text="apple"
                android:textSize="15sp"
                android:layout_margin="10dp"
                android:transitionName="name"/>

        </LinearLayout>


</android.support.v7.widget.CardView>

第二个activity的xml布局文件，里面的对应控件的android:transitionName属性应与上边的一致。

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ShareEnumActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolBar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:layout_scrollFlags="scroll|enterAlways|snap"/>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="250dp"
                app:cardCornerRadius="10dp"
                android:layout_marginTop="30dp"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:elevation="8dp">

                <ImageView
                    android:id="@+id/share_pic"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="fitXY"
                    android:transitionName="pic"/>

            </android.support.v7.widget.CardView>

            <TextView
                android:id="@+id/share_name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:layout_marginTop="30dp"
                android:transitionName="name"/>
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

</android.support.design.widget.CoordinatorLayout>

第一个activity的java代码，主要就是利用ActivityOptionsCompat.makeSceneTransitionAnimation设置共享元素，然后startActivity的时候将ActivityOptionsCompat.toBundle作为参数传进去：

public class ListARecyclerViewAnimtor extends AppCompatActivity {

    @BindView(R.id.toolBar)
    Toolbar toolbar;
    @BindView(R.id.recycler)
    RecyclerView recyclerView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_list_arecycler_view_animtor);
        ButterKnife.bind(this);

        setSupportActionBar(toolbar);

        //设置recyclerView
        final Fruit[] fruits = {new Fruit("苹果", R.drawable.apple), new Fruit("香蕉", R.drawable.banana),
                new Fruit("橘子", R.drawable.orange), new Fruit("葡萄", R.drawable.grape),
                new Fruit("西瓜", R.drawable.watermelon), new Fruit("樱桃", R.drawable.cherry),
                new Fruit("芒果", R.drawable.mango), new Fruit("梨", R.drawable.pear),
                new Fruit("草莓", R.drawable.strawberry), new Fruit("凤梨", R.drawable.pineapple)};
        final ArrayList<Fruit> data = new ArrayList<>();
       data.addAll(Arrays.asList(fruits));

        final MyAdapter adapter = new MyAdapter(data);
        adapter.setOnItemClickListener(new MyAdapter.OnItemClickListener() {
            @Override
            public void onClick(int position, Fruit fruit, MyAdapter.MyViewHolder holder) {

                Intent intent = new Intent(ListARecyclerViewAnimtor.this, ShareEnumActivity.class);
                intent.putExtra("resId", fruit.getResId());
                intent.putExtra("name", fruit.getName());
                ActivityOptionsCompat optionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(
                        ListARecyclerViewAnimtor.this,
                        new Pair<View, String>(holder.imageView, "pic"),
                        new Pair<View, String>(holder.name, "name")
                        );
                startActivity(intent, optionsCompat.toBundle());
            }
        });
        LinearLayoutManager manager = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(manager);
        recyclerView.setAdapter(adapter);
    }
}

第二个activity的java代码：

public class ShareEnumActivity extends AppCompatActivity {

    @BindView(R.id.share_pic)
    ImageView imageView;
    @BindView(R.id.share_name)
    TextView textView;
    @BindView(R.id.toolBar)
    Toolbar toolbar;
    private int resId;
    private String name;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_share_enum);
        ButterKnife.bind(this);

        setSupportActionBar(toolbar);

        Intent intent = getIntent();
        if (null != intent) {
            resId = intent.getIntExtra("resId", -1);
            name = intent.getStringExtra("name");
            Glide.with(this)
                    .load(resId)
                    .override(500, 500)
                    .centerCrop().into(imageView);
            textView.setText(name);
        }
    }
}