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