RecyclerView和ConstraintLayout的介绍和使用方式

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介绍，其效率更好

RecyclerView添加Header的正确方式

Android新特性介绍，ConstraintLayout完全解析

android ConstraintLayout 约束布局

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 205,236评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,867评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,715评论 0赞 340
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,899评论 1赞 278
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,895评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,733评论 1赞 283
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,085评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,722评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,025评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,696评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,816评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,447评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,057评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,009评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,254评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,204评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,561评论 2赞 343

推荐阅读更多精彩内容