使用RecyclerView来创建一个颜色选择板¶
颜色选择器，或者叫颜色选择板。给用户展示各种颜色，用户可以点击选取自己想要的颜色。
实现的效果
- 能够添加多个颜色，数量不定；能够滑动
- 选择板的选项有点击选中效果
- 选中的颜色要能通知出来
效果图如下：
实现思路¶
首先我们要把候选的颜色展示出来。 可以看到一列有多个颜色。 每个颜色item要能响应点击，而且要有选中效果。那么就是要存储选中的状态。
实现代码¶
| 文件 | 作用 |
|---|---|
| CircleImageView.java | 自定义UI，圆点显示颜色；这里是一个能改变颜色的圆点 |
| ColorBoardListAdapter.java | RecyclerView.Adapter；适配器 |
| color_item_view.xml | 圆点的布局文件 |
| attr.xml | 圆点的自定义属性 |
| ColorBoardActivity.java | 用于演示 |
| activity_color_board.xml | 用于演示 |
给RecyclerView设定点击事件，获取点击position；然后通知各个item，改变状态。 圆点的大小和背景大小是预先设定好的。
代码片段说明¶
CircleImageView.java 自定义圆点UI；一定要复写setSelected(boolean selected)方法。
这是个自定义View。用canvas来绘制圆。
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mPaint.setAntiAlias(true);
mPaint.setStyle(Paint.Style.FILL);
mPaint.setStrokeWidth(1.5f);
if (mSelected) {
mPaint.setColor(Color.WHITE);// 若被选中，则画一个圆形背景
canvas.drawCircle(getWidth() / 2, getHeight() / 2, mRadius, mPaint);
}
mPaint.setColor(mColor);
canvas.drawCircle(getWidth() / 2, getHeight() / 2, mRadius - 10, mPaint);
}
@Override
public void setSelected(boolean selected) {
mSelected = selected;// 确定此UI是否被选中
super.setSelected(selected);
invalidate();
}
ColorBoardListAdapter.java适配器中默认点中的item position为-1
// 供外部调用，获取点击的position；通知item更改
public void setSelectedPosition(int position) {
this.mSelectedPosition = position;
notifyDataSetChanged();
notifyItemChanged(position);
}
// ......
@Override
public void onBindViewHolder(ViewHolder holder, final int position) {
holder.mImageView.setColor(mDataList.get(position).color);
holder.mImageView.setSelected(mSelectedPosition == position);// 判断是否被选中
if (mOnItemClickListener != null) {
holder.mImageView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mOnItemClickListener.onItemClick(v, position);
}
});
holder.mImageView.setOnLongClickListener(new View.OnLongClickListener() {
@Override
public boolean onLongClick(View v) {
mOnItemClickListener.onItemLongClick(v, position);
return true;
}
});
}
}
ColorBoardActivity.java设定点击事件，然后传回点击position。
候选颜色是在这里进行配置的，想要几个颜色就添加几个颜色。
示例中的颜色是我们自己指定。实际项目中也可以接收后台传来的数据。
// activity
private void initColorBoard() {
final ArrayList<ColorBoardListAdapter.ColorItemViewEntity> colorItemEntities = new ArrayList<>();
colorItemEntities.add(new ColorBoardListAdapter.ColorItemViewEntity(1, Color.rgb(0, 10, 50)));
// 想加几个加几个......
GridLayoutManager gridLayoutManager = new GridLayoutManager(this, 3);// 3行
gridLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
mColorBoard.setLayoutManager(gridLayoutManager);
final ColorBoardListAdapter colorBoardListAdapter = new ColorBoardListAdapter(colorItemEntities);
colorBoardListAdapter.setOnItemClickListener(new ColorBoardListAdapter.OnItemClickListener() {
@Override
public void onItemClick(View view, int position) {
int clickID = colorItemEntities.get(position).id;
int color = colorItemEntities.get(position).color;
colorBoardListAdapter.setSelectedPosition(position);// 点击item位置传回去
Log.d(TAG, "onItemClick: " + clickID + "; color = " + color);
}
@Override
public void onItemLongClick(View view, int position) {
}
});
mColorBoard.setAdapter(ColorBoardListAdapter);
}
LinearLayoutManager.HORIZONTAL。
指定行数为3行。
当接收到item的点击事件，需要操作数据，把选中的数据记录下来。通知RecyclerView刷新。
使用RecyclerView，添加子项非常方便。扩展也很方便。
项目地址： https://github.com/RustFisher/aboutView
参考：
http://stackoverflow.com/questions/27194044/how-to-properly-highlight-selected-item-on-recyclerview
RecyclerView滑动时忽略间隔¶
RecyclerView内容没有填满时，有一个padding间隔。内容增加后，可以开始滑动。
滑动时可以盖过原来的padding间隔。需要设置android:clipToPadding="true"。
<android.support.v7.widget.RecyclerView
android:id="@+id/rv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="4dp"
android:clipToPadding="true"
android:paddingEnd="12dp"
android:paddingStart="12dp" />
本站说明
一起在知识的海洋里呛水吧。广告内容与本站无关。如果喜欢本站内容，欢迎投喂作者，谢谢支持服务器。如有疑问和建议，欢迎在下方评论~