xamarin学习笔记A05(安卓RecycleView简单显示)

每次学习一点xamarin就写个博客和做个学习笔记视频来加深记忆巩固知识)
如有不正确的地方,请帮我指正。

首先从Nuget下载好下面两个包
Xamarin.Android.Support.v7.AppCompat
Xamarin.Android.Support.v7.RecyclerView

RecyclerView里的主要类说明

RecyclerView.Adapter 创建每个Item
RecyclerView.LayoutManager 设置Item的布局形式
RecyclerView.ItemDecoration 设置Item装饰效果
RecyclerView.ViewHolder 用于缓存Item
RecyclerView.ItemAnimator 设置Item的动画效果

实现一个简单的书本列表功能
这里写图片描述

一.新建布局文件Book.axml

<?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:minWidth="25px"
    android:minHeight="25px">
    <android.support.v7.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/recyclerView1" />
</LinearLayout>

二.新建布局文件BookItem.axml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <ImageView
        android:id="@+id/image_book"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_marginLeft="20dp"/>
    <TextView
        android:textSize="24sp"
        android:id="@+id/text_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical" />
</LinearLayout>

三.新建一个Book类

public class Book
    {
        private string name; //书名
        private int imageId; //图片Id

        public string Name { get => name; set => name = value; }
        public int ImageId { get => imageId; set => imageId = value; }

        public Book(string name, int imageId)
        {
            Name = name;
            ImageId = imageId;
        }
}

四.新建BookAdapter类

public class BookAdapter : RecyclerView.Adapter
    {
        private List<Book> m_BookList;

        public BookAdapter(List<Book> bookList)
        {
            m_BookList = bookList;
        }

        public override int ItemCount
        {
            get { return m_BookList.Count; }
        }

        //一个Item的数据绑定事件
        public override void OnBindViewHolder(RecyclerView.ViewHolder holder, int position)
        {
            Book book = m_BookList[position];
            BookViewHolder bookHolder = holder as BookViewHolder;

            bookHolder.Book = book;
            bookHolder.BookImage.SetImageResource(book.ImageId);
            bookHolder.NameText.Text = book.Name;
            bookHolder.BookImage.Tag = position; //保存position到Tag里
        }

        //一个Item的初始化事件
        public override RecyclerView.ViewHolder OnCreateViewHolder(ViewGroup parent, int viewType)
        {
            View view = LayoutInflater.From(parent.Context).Inflate(Resource.Layout.BookItem, parent, false);
            BookViewHolder holder = new BookViewHolder(view);
            return holder;
        }

        public override void OnViewRecycled(Java.Lang.Object holder)
        {
            base.OnViewRecycled(holder);
            BookViewHolder bookHolder = holder as BookViewHolder;        }

        protected class BookViewHolder:RecyclerView.ViewHolder
        {
            public ImageView BookImage;
            public TextView NameText;
            public Book Book;

            public BookViewHolder(View view):base(view)
            {
                BookImage = view.FindViewById(Resource.Id.image_book) as ImageView;
                NameText = view.FindViewById(Resource.Id.text_name) as TextView;
            }
        }
}

五.新建BookActivity

public class BookActivity : AppCompatActivity
    {
        private List<Book> m_BookList = new List<Book>();

        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);

            SetContentView(Resource.Layout.Book);

            InitBooks(); //初始化数据
            RecyclerView recyclerView = this.FindViewById(Resource.Id.recyclerView1) as RecyclerView;
            LinearLayoutManager layoutManager = new LinearLayoutManager(this);
            BookAdapter adapter = new BookAdapter(m_BookList);


            recyclerView.SetLayoutManager(layoutManager);   //给recyclerView设置布局管理器对象
            recyclerView.SetAdapter(adapter);   //给recyclerView设置适配器对象
            recyclerView.AddItemDecoration(new BookItemDecoration(this)); //给recyclerView设置装饰对象
        }

        private void InitBooks()
        {
            int count = 0;
            Book book = null;
            for (int i = 0; i <= 2; i++) //初始化15本书的数据
            {
                book = new Book("Book" + count.ToString("000"), Resource.Drawable.a1);
                m_BookList.Add(book);
                count++;

                book = new Book("Book" + count.ToString("000"), Resource.Drawable.a2);
                m_BookList.Add(book);
                count++;

                book = new Book("Book" + count.ToString("000"), Resource.Drawable.a3);
                m_BookList.Add(book);
                count++;

                book = new Book("Book" + count.ToString("000"), Resource.Drawable.a4);
                m_BookList.Add(book);
                count++;

                book = new Book("Book" + count.ToString("000"), Resource.Drawable.a5);
                m_BookList.Add(book);
                count++;
            }
        }
    }

六.添加分割线

/// <summary>
    /// RecyclerView的Item的装饰对象(扩展自RecyclerView.ItemDecoration)
    /// </summary>
    public class BookItemDecoration : RecyclerView.ItemDecoration
    {
        private Paint m_Paint;
        private float m_SplitLine; //分割线厚度
        private Bitmap m_BitMap;


        public BookItemDecoration(Context context)
        {
            m_Paint = new Paint();
            m_Paint.AntiAlias = true;//设置抗锯齿
            m_Paint.Color = Color.Blue;

            m_BitMap = BitmapFactory.DecodeResource(context.Resources, Resource.Drawable.Mark);
        }

        public override void GetItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state)
        {
            base.GetItemOffsets(outRect, view, parent, state);

            if (parent.GetChildAdapterPosition(view) == 0)//第一个BookItem不需要设置top值
            {
                outRect.Top = 0;
            }
            else
            {
                outRect.Top = 2;
                m_SplitLine = 2; //将分隔线的厚度保存到m_OutRectTop变量中以供OnDraw中使用
            }
        }

        public override void OnDraw(Canvas c, RecyclerView parent, RecyclerView.State state)
        {
            base.OnDraw(c, parent, state);

            int itemCount = parent.ChildCount;
            for (int i = 0; i < itemCount; i++)
            {
                View view = parent.GetChildAt(i);
                int position = parent.GetChildAdapterPosition(view);

                if (position == 0) //第一个BookItemView不要绘制
                    continue;

                float outRectTop = view.Top - m_SplitLine;
                float outRectLeft = parent.PaddingLeft;
                float outRectBottom = view.Top;
                float outRectRight = parent.Width - parent.PaddingRight;

                if(i%2==0) //偶数行画蓝色线
                    m_Paint.Color = Color.Blue;
                else
                    m_Paint.Color = Color.Red;

                c.DrawRect(outRectLeft, outRectTop, outRectRight, outRectBottom, m_Paint);
            }
        }

        public override void OnDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state)
        {
            base.OnDrawOver(c, parent, state);
            int itemCount = parent.ChildCount;
            for (int i = 0; i < itemCount; i++)
            {
                View view = parent.GetChildAt(i);
                int position = parent.GetChildAdapterPosition(view);

                if (position < 3) //把前三本书的图片上覆盖上"包邮"的图片
                    c.DrawBitmap(m_BitMap, 1, view.Top, m_Paint);
            }
        }
    }

分割线的原理
是利用RecyclerView.ItemDecoration 装饰类来实现的。
通过给每一个ItemView的外面画一个OutRect,利用OutRect与ItemView的空隙用上背景色来做模拟分割线或者其它东西。
这里写图片描述

这里写图片描述
这个例子中只设置了outRect.Top=2,所以OutRect与ItemView的上面空隙为2px,实现了厚度为2px的分割线。利用Paint类在OnDraw方法来设置OutRect的背景色。

视频和完整代码上传到了CSDN的资源中http://download.csdn.net/download/junshangshui/9865033

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值