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 进行辅助布局，该类比较简单，主要用于辅助布局，即类似为辅助线，横向的、纵向的。该布局是不会显示到界面上的。如果有兴趣的可以自行尝试。
网友评论