XamarinAndroid組件教程RecylerView適配器設置動畫示例

XamarinAndroid組件教程RecylerView適配器設置動畫示例

【示例1-3】下面將在RecylerView的子元素進行滾動時，使用適配器動畫。具體的操做步驟以下：

（1）建立一個名爲RecylerViewAnimatorsAdapter的項目。

（2）將RecyclerViewAnimators.dll、Square.OkHttp.dll、Square.OkIO.dll、Square.Picasso.dll、Xamarin.Android.Arch.Core.Common.dll、Xamarin.Android.Arch.Lifecycle.Common.dll、Xamarin.Android.Arch.Lifecycle.Runtime.dll、Xamarin.Android.Support.Animated.Vector.Drawable.dll、Xamarin.Android.Support.Annotations.dll、Xamarin.Android.Support.Compat.dll、Xamarin.Android.Support.Core.UI.dll、Xamarin.Android.Support.Core.Utils.dll、Xamarin.Android.Support.Fragment.dll、Xamarin.Android.Support.Media.Compat.dll、Xamarin.Android.Support.v4.dll、Xamarin.Android.Support.v7.AppCompat.dll、Xamarin.Android.Support.v7.RecyclerView.dll和Xamarin.Android.Support.Vector.Drawable.dll庫添加到RecylerViewAnimatorsAdapter項目的引用中。

（3）添加圖片chip.jpg到RecylerViewAnimatorsAdapter項目的Resources下方的drawable文件夾中。

（4）建立一個xml文件，命名爲layout_list_item。

（5）打開layout_list_item.cs文件，構建RecylerView的子元素。代碼與RecylerViewAnimatorsItemAnimator項目同樣。只不過須要將TextView的顏色設置爲黑色。

（6）建立一個適配器文件，命名爲DataAdapter。

（7）打開DataAdapter.cs文件，添加如下代碼：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using Android.App;

using Android.Content;

using Android.OS;

using Android.Runtime;

using Android.Views;

using Android.Widget;

using Square.Picasso;

using Android.Support.V7.Widget;

namespace RecylerViewAnimatorsAdapter

{

    class DataAdapter : RecyclerView.Adapter

    {

        Context context;

        List<string> dataset;

        public DataAdapter(Context context, List<string> dataset)

        {

            this.context = context;

            this.dataset = dataset;

        }

        //子元素的個數

        public override int ItemCount

        {

            get

            {

                return dataset.Count;

            }

        }

        //返回一個自定義的ViewHolder

        public override RecyclerView.ViewHolder OnCreateViewHolder(ViewGroup parent, int viewType)

        {

            var v = LayoutInflater.From(context).Inflate(Resource.Layout.layout_list_item, parent, false);

            return new ViewHolder(v);

        }

        //填充onCreateViewHolder()方法返回的ViewHolder中的控件

        public override void OnBindViewHolder(RecyclerView.ViewHolder holder, int position)

        {

            var h = (ViewHolder)holder;

            Picasso.With(context).Load(Resource.Drawable.image).Into(h.Image);

            h.Text.Text = dataset[position];

        }

        private class ViewHolder : RecyclerView.ViewHolder

        {

            public ImageView Image { get; private set; }

            public TextView Text { get; private set; }

            public ViewHolder(View itemView)

                : base(itemView)

            {

                Image = itemView.FindViewById<ImageView>(Resource.Id.image);

                Text = itemView.FindViewById<TextView>(Resource.Id.text);

            }

        }

    }

}

（8）打開Main.axml文件，構建RecyclerView。代碼以下：

<?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="match_parent"

              android:background="#FFFFFF">

  <android.support.v7.widget.RecyclerView

       android:id="@+id/list"

       android:layout_width="match_parent"

       android:layout_height="match_parent"/>

</LinearLayout>

（9）打開MainActivity.cs文件，在RecylerView滾動時使用適配器動畫。代碼以下：

using Android.App;

using Android.Widget;

using Android.OS;

using Android.Support.V7.Widget;

using System.Linq;

using RecyclerViewAnimators.Adapters;

using Android.Views.Animations;

namespace RecylerViewAnimatorsAdapter

{

    [Activity(Label = "RecylerViewAnimatorsAdapter", MainLauncher = true, Icon = "@mipmap/icon")]

    public class MainActivity : Activity

    {

        static readonly string[] data = {

            "Apple", "Ball", "Camera", "Day", "Egg", "Foo", "Google", "Hello", "Iron", "Japan", "Coke",

            "Dog", "Cat", "Yahoo", "Sony", "Canon", "Fujitsu", "USA", "Nexus", "LINE", "Haskell", "C++",

            "Java", "Go", "Swift", "Objective-c", "Ruby", "PHP", "Bash", "ksh", "C", "Groovy", "Kotlin",

            "Chip", "Japan", "U.S.A", "San Francisco", "Paris", "Tokyo", "Silicon Valley", "London",

            "Spain", "China", "Taiwan", "Asia", "New York", "France", "Kyoto", "Android", "Google", "C#",

            "iPhone", "iPad", "iPod", "Wasabeef", "Xamarin", "South Africa", "Cape Town", "Microsoft"

        };

        protected override void OnCreate(Bundle savedInstanceState)

        {

            base.OnCreate(savedInstanceState);

            SetContentView(Resource.Layout.Main);

            var recyclerView = FindViewById<RecyclerView>(Resource.Id.list);

            recyclerView.SetLayoutManager(new LinearLayoutManager(this));

            var adapter = new DataAdapter(this, data.ToList());

            var alphaAdapter = new AlphaInAnimationAdapter(adapter);             //建立適配器動畫

            var scaleAdapter = new ScaleInAnimationAdapter(alphaAdapter);  //建立複合適配器動畫

            scaleAdapter.SetFirstOnly(false);                                                                           //不是顯示一次動畫效果

            scaleAdapter.SetInterpolator(new OvershootInterpolator());                   //設置插值器

            recyclerView.SetAdapter(scaleAdapter);                                                //設置適配器

        }

    }

}

運行程序後，初始狀態如圖1.3所示。當滾動子元素後，會看到動畫效果。