RecyclerView 和 ConstraintLayout

作者: kevenZheng | 来源:发表于2018-07-26 11:37 被阅读226次

RecyclerView

RecyclerView 优点：

RecyclerView 架构提供了一种插拔式的体验，它具有高度的解耦，异常的灵活性和更高的效率，通过设置它提供的 LayoutManager、ItemDecoration、ItemAnimator 可实现更加丰富多样的效果。

RecyclerView 的使用

配置 build.gradle

implementation 'com.android.support:appcompat-v7:27.1.1'
implementation 'com.android.support:recyclerview-v7:27.1.1'

使用 RecyclerView

布局中引用：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

</LinearLayout>

代码中设置：

public class MainActivity extends AppCompatActivity {

    private RecyclerView mRecyclerView;
    private List<String> mList = new ArrayList<>();
    private MyRecyclerViewAdapter mAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        for (int i = 0; i < 15; i++) {
            mList.add("第 " + i + " 个");
        }
        initView();
    }

    private void initView() {
        mRecyclerView = findViewById(R.id.recyclerView);
        //设置布局管理器
        mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
        //设置 item 增加和删除时的动画
        mRecyclerView.setItemAnimator(new DefaultItemAnimator());
        mAdapter = new MyRecyclerViewAdapter(mList, this);
        mRecyclerView.setAdapter(mAdapter);
    }
}

使用 RecyclerView 需要设置布局管理器用于设置条目的排列样式，上述使用的是线性排列（默认为垂直排列），如果想要设置为水平排列，则设置为：

LinearLayoutManager linearLayoutManager=new LinearLayoutManager(this);
linearLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
mRecyclerView.setLayoutManager(linearLayoutManager);

RecyclerView 的 Adapter 的最大改进就是对 ViewHolder 进行了封装定义，我们只需要自定义一个 ViewHolder 继承 RecyclerView.ViewHolder 就可以了。此外，Adapter 继承了 RecyclerView.Adapter，在 onCreateViewHolder 中加载条目布局，在 onBindViewHolder 中将视图与数据进行绑定。

public class MyRecyclerViewAdapter extends RecyclerView.Adapter<MyRecyclerViewAdapter.MyViewHolder> {
    private List<String> mList = new ArrayList<>();
    private Context mContext;

    public MyRecyclerViewAdapter(List<String> list, Context context) {
        mList = list;
        mContext = context;
    }

    @NonNull
    @Override
    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        MyViewHolder holder = new MyViewHolder(LayoutInflater.from(mContext).inflate(R.layout.item_recyclerview, parent, false));
        return holder;
    }

    @Override
    public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
        holder.tv.setText(mList.get(position));
    }

    @Override
    public int getItemCount() {
        return mList.size();
    }

    public class MyViewHolder extends RecyclerView.ViewHolder {
        TextView tv;

        public MyViewHolder(View itemView) {
            super(itemView);
            tv = itemView.findViewById(R.id.tv_item);
        }
    }
}

至于条目的布局，很简单，只有一个 TextView

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#ffffff">
    <TextView
        android:id="@+id/tv_item"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:gravity="center"
        android:text="keven"
    />
</FrameLayout>

实现效果图为：

Markdown

自定义分割线

public class DividerItemDecoration extends RecyclerView.ItemDecoration {
    private static final int[] ATTRS = new int[]{android.R.attr.listDivider};
    public static final int HORIZONTAL_LIST = LinearLayoutManager.HORIZONTAL;
    public static final int VERTICAL_LIST = LinearLayoutManager.VERTICAL;
    private Drawable mDivider;
    private int mOrientation;

    public DividerItemDecoration(Context context, int orientation) {
        final TypedArray a = context.obtainStyledAttributes(ATTRS);
        mDivider = a.getDrawable(0);
        a.recycle();
        setOrientation(orientation);
    }

    private void setOrientation(int orientation) {
        if (orientation != HORIZONTAL_LIST && orientation != VERTICAL_LIST) {
            throw new IllegalArgumentException("invalid orientation");
        }
        mOrientation = orientation;
    }

    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
        if (mOrientation == VERTICAL_LIST) {
            drawVertical(c, parent);
        } else {
            drawHorizontal(c, parent);
        }
    }

    private void drawHorizontal(Canvas c, RecyclerView parent) {
        final int top=parent.getPaddingTop();
        final int bottom=parent.getHeight()-parent.getPaddingBottom();
        final int childCount=parent.getChildCount();
        for (int i=0;i<childCount;i++){
            final View child=parent.getChildAt(i);
            final RecyclerView.LayoutParams params= (RecyclerView.LayoutParams) child.getLayoutParams();
            final int left=child.getRight()+params.rightMargin;
            final int right=left+mDivider.getIntrinsicWidth();
            mDivider.setBounds(left,top,right,bottom);
            mDivider.draw(c);
        }
    }

    private void drawVertical(Canvas c, RecyclerView parent) {
        final int left = parent.getPaddingLeft();
        final int right = parent.getWidth() - parent.getPaddingRight();
        final int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++) {
            final View child = parent.getChildAt(i);
            final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();
            final int top = child.getBottom() + params.bottomMargin;
            final int bottom = top + mDivider.getIntrinsicHeight();
            mDivider.setBounds(left, top, right, bottom);
            mDivider.draw(c);
        }
    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        if(mOrientation==VERTICAL_LIST){
            outRect.set(0,0,0,mDivider.getIntrinsicHeight());
        }else {
            outRect.set(0,0,mDivider.getIntrinsicWidth(),0);
        }
    }
}

给 RecyclerView 设置分割线

mRecyclerView.addItemDecoration(new DividerItemDecoration(MainActivity.this, DividerItemDecoration.VERTICAL_LIST));

效果图如图：

Markdown

如果 RecyclerView 为横向显示，则将在设置自定义分割线的时候传入 DividerItemDecoration.HORIZONTAL_LIST 即可。

自定义点击事件

在 Adapter 中定义接口并提供回调。

public interface OnItemClickListener {
        void onItemClick(View view, int position);
    }
public void setOnClickListener(OnItemClickListener onItemClickListener){
        this.mOnItemClickListener =onItemClickListener;
    }

接下来在 onBindViewHolder 方法中对 itemView 进行点击事件的监听并回调给我们自定义的监听。

@Override
    public void onBindViewHolder(@NonNull final MyViewHolder holder, final int position) {
        holder.tv.setText(mList.get(position));
        if(mOnItemClickListener!=null){
            holder.tv.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    int pos=holder.getLayoutPosition();
                    mOnItemClickListener.onItemClick(holder.tv,pos);
                }
            });
        }
    }

接下来在 Activity 中设置点击监听即可。

 mAdapter.setOnClickListener(new MyRecyclerViewAdapter.OnItemClickListener() {
            @Override
            public void onItemClick(View view, int position) {
                Toast.makeText(MainActivity.this,"点击了"+position,Toast.LENGTH_SHORT).show();
            }
        });

ConstraintLayout

初识 ConstraintLayout

首先需要引入我们的 ConstraintLayout，在build.gradle中加入：

implementation 'com.android.support.constraint:constraint-layout:1.1.2'

我们如果要实现如下图效果，之前的第一想法肯定是 RelativeLayout 来做，但是，现在我们可以使用 ConstraintLayout 来完成。

Markdown

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context=".P1_ConstraintLayout.ConstranintLayoutActivity">
    
    <TextView
        android:id="@+id/tv1"
        android:layout_width="140dp"
        android:layout_height="86dp"
        android:layout_marginLeft="12dp"
        android:layout_marginTop="12dp"
        android:background="#fd3"
        app:layout_constraintLeft_toLeftOf="parent"
    />
    <TextView
        android:id="@+id/tv2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="12dp"
        android:text="今天北京又下雨又下雨啊又下雨，今天北京又下雨又下雨啊又下雨"
        android:textColor="#000000"
        android:textSize="16sp"
        app:layout_constraintLeft_toRightOf="@id/tv1"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@id/tv1"
    />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="12dp"
        android:layout_marginTop="12dp"
        android:text="8分钟"
        android:textColor="#333"
        android:textSize="12dp"
        app:layout_constraintBottom_toBottomOf="@id/tv1"
        app:layout_constraintRight_toRightOf="parent"
    />

</android.support.constraint.ConstraintLayout>

通过看上面布局的代码，我们看到了几个不熟悉的模式属性，如 tv1 中的

app:layout_constraintLeft_toLeftOf="parent"

从字面意思看出，这个属性的意思是 tv1 左侧与父布局对齐，当我们希望两个控件左对齐时，就可以使用这个属性。

类似的还有

app:layout_constraintLeft_toRightOf

即当前属性的左侧在谁的右侧，当我们希望控件 A 在控件 B 的右侧时，可以设置。

与之类似的还有几个属性：

layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
layout_constraintBaseline_toBaselineOf

具体含义，类推即可。

上述布局中 tv2 的宽度我们设为 0dp，其实在 ConstraintLayout 中 0 代表：MATCH_CONSTRAINT，在 ConstraintLayout 中已经不支持 MATCH_PARENT 这个值了，你可以通过 MATCH_CONSTRAINT 配合约束实现类似的效果。

增加一个 banner

我们现在增加一个 banner，宽度占据整个屏幕，高度比为 16:6，ConstraintLayout 自身就支持宽高比设置

<TextView
        android:id="@+id/tv_banner"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#765"
        android:gravity="center"
        android:text="banner"
        android:textSize="16sp"
        app:layout_constraintDimensionRatio="16:6"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

记得不要使用 match_parent 了，而是设置 match_contraint，即 0，让约束来控制布局宽高。

Markdown

增加几个底部 Tab

现在我们使用 ConstraintLayout 来实现底部三个 Tab 平分

 <TextView
        android:id="@+id/tab1"
        android:layout_width="0dp"
        android:layout_height="30dp"
        android:background="#f67"
        android:gravity="center"
        android:text="tab1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/tab2"
    />
    <TextView
        android:id="@+id/tab2"
        android:layout_width="0dp"
        android:layout_height="30dp"
        android:background="#A67"
        android:gravity="center"
        android:text="tab2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@id/tab1"
        app:layout_constraintRight_toLeftOf="@id/tab3"
    />
    <TextView
        android:id="@+id/tab3"
        android:layout_width="0dp"
        android:layout_height="30dp"
        android:background="#767"
        android:gravity="center"
        android:text="tab3"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@id/tab2"
        app:layout_constraintRight_toRightOf="parent"
    />

我们增加 3 个 textview 来替代 tab。我们看横向的依赖，3 个 tab 两两设置了约束（即你在我们的左边，我在你的右边），最外层的设置了 parent 约束；再加上我们把宽度都设置为了 match_constraint，这样我们就完成了 3 个 tab 等分。

Markdown

如果你想动态分配下面三个 Tab 的比重，不是均分，那你可以使用 app:layout_constraintHorizontal_weight 属性，如果我们设置为 2,1,2，那么看到的效果则是：

Markdown

官网还介绍了如下属性，效果也如图所示

Markdown

增加浮动按钮

<TextView
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:background="#612"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.9"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.9" />

代码中 layout_constraintHorizontal_bias 、
layout_constraintVertical_bias 属性及设置间隙比例分别为 90% 和 10%。效果图如下：

Markdown

ConstraintLayout 中还可以使用 Guideline 进行辅助布局，该类比较简单，主要用于辅助布局，即类似为辅助线，横向的、纵向的。该布局是不会显示到界面上的。如果有兴趣的可以自行尝试。

RecyclerView 和 ConstraintLayout

RecyclerView

ConstraintLayout

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

安卓开发

Android技术知识

Android开发经验谈

程序员

Android开发

安卓面试