RecyclerView的介绍
RecyclerView是 android-support-v7-21 开始提供的一个控件，官方对于它的介绍是：RecyclerView是 ListView的升级版本，更加先进和灵活，用于在有限的窗口中展示大量数据集。整体上看RecyclerView架构，提供了一种插拔式的体验，高度的解耦，异常的灵活，通过设置它提供的不同LayoutManager、ItemDecoration、ItemAnimator，可以实现相当不错的效果。
不同组件的作用：
-
Adapter：包装数据集合并且为每个条目创建视图。
-
ViewHolder：保存用于显示每个数据条目的子View。
-
LayoutManager：将每个条目的视图放置于适当的位置，可以控制整体显示的布局。
-
ItemDecoration：在每个条目的视图的周围或上面绘制一些装饰视图，最简单的使用是控制Item间的间隔。
-
ItemAnimator：在条目被添加、移除或者重排序时添加动画效果。
RecyclerView的使用
1、添加依赖
在app/build.gradle里添加RecyclerView的依赖
dependencies {
implementation 'com.android.support:recyclerview-v7:26.1.0'
}
2、自定义Adapter、ViewHolder
Adapter主要是继承RecyclerView.Adapter，实现onCreateViewHolder (每个Item的布局)、onBindViewHolder（每个Item的View绑定的数据）、getItemCount（item的总数量）。
ViewHolder主要是继承RecyclerView.ViewHolder，用于获取ItemView的子控件，便于绑定数据。
class HomeAdapter extends RecyclerView.Adapter<HomeAdapter.MyViewHolder> {
@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View v = LayoutInflater.from(MainActivity.this).inflate(R.layout.item_home, parent, false);
MyViewHolder holder = new MyViewHolder(v);
return holder;
}
@Override
public void onBindViewHolder(MyViewHolder holder, int position) {
holder.tv.setText(mDatas.get(position));
}
@Override
public int getItemCount() {
//Adapter绑定的数据
return mDatas.size();
}
class MyViewHolder extends RecyclerView.ViewHolder {
TextView tv;
public MyViewHolder(View view) {
super(view);
tv = (TextView) view.findViewById(R.id.id_num);
}
}
}
3、初始化RecyclerView、Adatper、Adapter的数据
public class MainActivity extends AppCompatActivity {
private RecyclerView mRecyclerView;
private List<String> mDatas;
private HomeAdapter mAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initData();
mAdapter = new HomeAdapter();
mRecyclerView = (RecyclerView) findViewById(R.id.id_recyclerview);
mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
mRecyclerView.setAdapter(mAdapter);
}
private void initData() {
mDatas = new ArrayList<String>();
for (int i = 'A'; i <= 'z'; i++) {
mDatas.add("" + (char) i);
}
}
}
这样就完成RecyclerView的基本使用。
4、LayoutManager、ItemDecoration、ItemAnimator的使用
LayoutManager
RecyclerView提供三种类型LayoutManager布局管理器
-
LinearyLayoutManager线性布局管理器，支持横向、纵向 -
GridLayoutManager网格布局管理器 -
StaggeredGridLayoutManager瀑布流式布局管理器
使用时，初始化对应的LayoutManager即可，如上述
mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
ItemDecoration
RecyclerView可以单独设置分割线的样式，但需要自己自定义。
基本使用如下：
DividerItemDecoration mDivider = new DividerItemDecoration();
mRecyclerView.addItemDecoration(mDivider);
DividerItemDecoration 是实现RecyclerView.ItemDecoration的自定义类，具体实现可参考DividerItemDecoration
ItemDecoration
RecyclerView可以单独设置添加或者移除item的动画，提供了默认实现类DefaultItemAnimator。
基本使用如下：
// 设置item动画
mRecyclerView.setItemAnimator(new DefaultItemAnimator());
当调用Adapter.notifyItemInserted()或者notifyItemRemoved()，就可以看到默认的动画。
RecyclerView的进阶
1、点击事件的实现
RecyclerView没有提供点击事件的回调，需要自己实现，可以在adapter中自己提供回调，参考实现如下。
class HomeAdapter extends RecyclerView.Adapter<HomeAdapter.MyViewHolder> {
//...
public interface OnItemClickLitener{
void onItemClick(View view, int position);
}
private OnItemClickLitener mOnItemClickLitener;
public void setOnItemClickLitener(OnItemClickLitener mOnItemClickLitener {
this.mOnItemClickLitener = mOnItemClickLitener;
}
public void onBindViewHolder(final MyViewHolder holder, final int position) {
holder.tv.setText(mDatas.get(position));
// 如果设置了回调，则设置点击事件
if (mOnItemClickLitener != null){
holder.itemView.setOnClickListener(new OnClickListener(){
@Override
public void onClick(View v) {
int pos = holder.getLayoutPosition();
mOnItemClickLitener.onItemClick(holder.itemView, pos);
}
});
}
}
//...
2、不同类型的Item
上述的例子只涉及一种类型ViewHolder，如果多种类型的ViewHolder，那么结合Adapter.getItemViewType()实现不同类型的ViewHolder。
例如有一种头部的HeaderViewHolder和一种普通的ItemViewHolder，实现方式如下：
class HomeAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
private static final int TYPE_HEADER = 1;
private static final int TYPE_ITEM = 2;
@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
if (viewType == TYPE_HEADER) {
//...
return new HeaderViewHolder(v);
} else {
//...
return new MyViewHolder(v);
}
}
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
if (holder instanceof HeaderViewHolder) {
//...
} else if (holder instanceof MyViewHolder) {
//...
}
}
@Override
public int getItemCount() {
return mDatas.size() + 1; //增加头部ItemView
}
@Override
public int getItemViewType(int position) {
if (position == 0) {
return TYPE_HEADER;
} else {
return TYPE_ITEM;
}
}
class HeaderViewHolder extends RecyclerView.ViewHolder {
//...
}
class MyViewHolder extends RecyclerView.ViewHolder {
//...
}
}
3、复杂布局：线性和网格夹杂在一起
例如这样的布局，头部子View占一行，其他子View在2列的网格布局里。
image.png
首先想到RecyclerView设置的布局管理器是GridLayoutManager
mRecyclerView.setLayoutManager(new GridLayoutManager(this, 2));
但是，直接这样设置，那么Header子View就变成在2列网格里，不是单独占一行。
这时可以采用GridLayoutManager提供的方法setSpanSizeLookup，设置每个position上的item占据的单元格个数。上述的情况即header的item占据2个单元格，正常情况下占据1个单元格。具体的实现如下：
class HomeAdapter extends RecyclerView.Adapter<> {
//…
@Override
public void onAttachedToRecyclerView(RecyclerView recyclerView) {
super.onAttachedToRecyclerView(recyclerView);
RecyclerView.LayoutManager manager = recyclerView.getLayoutManager();
if(manager instanceof GridLayoutManager) {
final GridLayoutManager gridManager = ((GridLayoutManager) manager);
gridManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
@Override
public int getSpanSize(int position) {
return getItemViewType(position) == TYPE_HEADER
? gridManager.getSpanCount() : 1;
}
});
}
}
//...
}
ConstraintLayout的介绍
ConstraintLayout是从Android Studio 2.2开始，新增的功能之一。它非常适合使用可视化的方式来编写界面。
ConstraintLayout有一个优点，可以有效地解决布局嵌套过多的问题。它是使用约束的方式来指定各个控件的位置和关系的，有点类似于RelativeLayout，但远比RelativeLayout要更强大。
ConstraintLayout的使用
1、添加依赖
在app/build.gradle里添加RecyclerView的依赖
dependencies {
implementation 'com.android.support.constraint:constraint-layout:1.1.2'
}
2、添加约束
ConstraintLayout可以在AS的可视化视图中添加约束，可参考郭霖的Android新特性介绍，ConstraintLayout完全解析
其实，对应在XML文件的约束属性即为app:layout_constraintXXX_toYYYof，表示的意思是这个控件的XXX方向受某个控件的YYY方向的约束。
例子1
TextView在父布局的右上角，即TextView的顶部受到父布局的顶部约束，TextView的右边受到父布局的右边约束，XML为
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
例子2
TextView2在TextView1的下面10dp位置，则需要将TextView2的顶部与TextView1的底部做好约束，即
<TextView
android:id="@+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="Hello World!"
app:layout_constraintTop_toBottomOf="@+id/text1">
从这点看，这是ConstraintLayout的缺点，实现一些简单的线性布局就比较麻烦，需要设置每个控件之间约束，因此这种场景就不适合用ConstraintLayout。
例子3
一个TextView在一个ImageView上居中显示，其XML可以为
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="@+id/image"
app:layout_constraintLeft_toLeftOf="@+id/image"
app:layout_constraintRight_toRightOf="@+id/image"
app:layout_constraintTop_toTopOf="@+id/image"/>
</android.support.constraint.ConstraintLayout>
即将TextView四边与Image的四边建立约束。
从这点看，这是ConstraintLayout的优点，
用好约束属性，可以实现复杂的布局，减少嵌套的布局。
ConstraintLayout的进阶
1、设置偏移
用到的属性是
layout_constraintHorizontal_bias 水平方向
layout_constraintVertical_bias 垂直方向
当左右方向都设置约束时，左右相对的间距百分比，默认为0.5，即居中显示，布局如下：
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
如果左右方向都设置约束时，但不居中，而是左对齐，则左间距占百分比为0，右间距占百分比为1，布局如下：
app:layout_constraintHorizontal_bias="0"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="parent"
如果设置app:layout_constraintHorizontal_bias="0.3"，则左边间距占0.3 右边间距0.7，效果可能如下图：
image.png
2、设置引导线Guideline
这是一个不可见的组件，可用于提供约束，组件如下：
<android.support.constraint.Guideline
android:id="@+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5"/>
对应的可视化控件是
guideline.png
例子
两个button一起居中显示
可以先设置上面占中间的垂直引导线，然后让左边的button的右方向与Guideline建立约束，右边的button的左方向与Guideline建立约束，具体如下：
<android.support.constraint.ConstraintLayout
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">
<Button
android:id="@+id/left_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginTop="16dp"
android:text="Button"
app:layout_constraintEnd_toStartOf="@+id/guideline"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="@+id/right_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="Button"
app:layout_constraintStart_toStartOf="@+id/guideline"
app:layout_constraintTop_toTopOf="parent"/>
<android.support.constraint.Guideline
android:id="@+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5"/>
</android.support.constraint.ConstraintLayout>
参考
Android RecyclerView 使用完全解析 体验艺术般的控件
Android新组件RecyclerView介绍，其效率更好
网友评论