RecyclerView 和 ConstraintLayout 的介绍和使用方式

RecyclerView

RecyclerView 优点:

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

RecyclerView 的使用

  1. 配置 build.gradle
implementation 'com.android.support:appcompat-v7:27.1.1'
implementation 'com.android.support:recyclerview-v7:27.1.1'
  1. 使用 RecyclerView

布局中引用:




    


代码中设置:

public class MainActivity extends AppCompatActivity {

    private RecyclerView mRecyclerView;
    private List 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 {
    private List mList = new ArrayList<>();
    private Context mContext;

    public MyRecyclerViewAdapter(List 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



    

实现效果图为:


RecyclerView 和 ConstraintLayout 的介绍和使用方式_第1张图片
Markdown
  1. 自定义分割线
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

给 RecyclerView 设置分割线

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

效果图如图:


RecyclerView 和 ConstraintLayout 的介绍和使用方式_第2张图片
Markdown

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

  1. 自定义点击事件

在 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 来完成。

RecyclerView 和 ConstraintLayout 的介绍和使用方式_第3张图片
Markdown


    
    
    
    


通过看上面布局的代码,我们看到了几个不熟悉的模式属性,如 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 自身就支持宽高比设置


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

RecyclerView 和 ConstraintLayout 的介绍和使用方式_第4张图片
Markdown

增加几个底部 Tab

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

 
    
    

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

RecyclerView 和 ConstraintLayout 的介绍和使用方式_第5张图片
Markdown

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

RecyclerView 和 ConstraintLayout 的介绍和使用方式_第6张图片
Markdown

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

RecyclerView 和 ConstraintLayout 的介绍和使用方式_第7张图片
Markdown

增加浮动按钮


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

RecyclerView 和 ConstraintLayout 的介绍和使用方式_第8张图片
Markdown

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

你可能感兴趣的:(RecyclerView 和 ConstraintLayout 的介绍和使用方式)