使用RecyclerView来创建一个颜色选择板

举报
AnRFDev 发表于 2021/06/02 12:49:51 2021/06/02
【摘要】 使用RecyclerView来创建一个颜色选择板颜色选择器,或者叫颜色选择板。给用户展示各种颜色,用户可以点击选取自己想要的颜色。实现的效果能够添加多个颜色,数量不定;能够滑动选择板的选项有点击选中效果选中的颜色要能通知出来效果图如下: 实现思路首先我们要把候选的颜色展示出来。可以看到一列有多个颜色。每个颜色item要能响应点击,而且要有选中效果。那么就是要存储选中的状态。 实现代码文件作...

使用RecyclerView来创建一个颜色选择板

颜色选择器,或者叫颜色选择板。给用户展示各种颜色,用户可以点击选取自己想要的颜色。

实现的效果

  • 能够添加多个颜色,数量不定;能够滑动
  • 选择板的选项有点击选中效果
  • 选中的颜色要能通知出来

效果图如下:

demo_ColorBoard.gif

实现思路

首先我们要把候选的颜色展示出来。
可以看到一列有多个颜色。
每个颜色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);
}

横向滚动,每列的item数量确定,我们用GridLayoutManager。并且指定滚动方向为横向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" />
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。