前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >D8-Android自定义控件之DotNum及item复用问题

D8-Android自定义控件之DotNum及item复用问题

作者头像
张风捷特烈
发布2018-09-29 11:25:39
3780
发布2018-09-29 11:25:39
举报
文章被收录于专栏:Android知识点总结
零、前言

今天写了一个圆点数字控件,效果如下: 最主要是想借此讲一下关于ListView,或RecyclerView的复用问题。 本案例在图片选择中测试,有时间会把我的图形选择小项目写一下,现在先看这个小控件吧。 本控件绘图部分使用我的LogicCanvas绘图库:基础使用在此, 喜欢的话可以到github上看看,顺便给个star 支持属性依次:大圆颜色,圆的高度(原生宽高无效),文字,是否选中,小圆颜色。

代码语言:javascript
复制
 toly:z_Dot_BigColor="@color/cornsilk"
 toly:z_Dot_Height="@dimen/dp_56"
 toly:z_Dot_text="H"
 toly:z_Dot_isChecked="false"
 toly:z_Dot_SmallColor="@color/small_circle"

效果图.gif


一、绘制
1.绘制思路:大圆+小圆+文字+状态控制
成员变量
代码语言:javascript
复制
    /**
     * 大圆高
     */
    private float mBigHeight = dp2px(20);
    /**
     * 大圆颜色
     */
    private int mBigCircleColor = 0x88000000;
    /**
     * 小圆颜色
     */
    private int mCenterColor = 0x885DFBF9;
    /**
     * 文字
     */
    private String mText = "";
    /**
     * 是否选中
     */
    private boolean isChecked;
自定义属性
代码语言:javascript
复制
    <!--圆点数字自定义控件-->
    <declare-styleable name="DotNumView">
        <!--自定义属性名 和 类型-->
        <attr name="z_Dot_Height" format="dimension"/>
        <attr name="z_Dot_text" format="string"/>
        <attr name="z_Dot_BigColor" format="reference|color"/>
        <attr name="z_Dot_SmallColor" format="reference|color"/>
        <attr name="z_Dot_isChecked" format="boolean"/>
    </declare-styleable>
代码语言:javascript
复制
mBigHeight = ta.getDimension(R.styleable.DotNumView_z_Dot_Height, mBigHeight);
mBigCircleColor = ta.getColor(R.styleable.DotNumView_z_Dot_BigColor, mBigCircleColor);
mCenterColor = ta.getColor(R.styleable.DotNumView_z_Dot_SmallColor, mCenterColor);
mText = ta.getString(R.styleable.DotNumView_z_Dot_text);
isChecked = ta.getBoolean(R.styleable.DotNumView_z_Dot_isChecked, false);
ta.recycle();//一定记得回收!!!
绘制
代码语言:javascript
复制
 //获取绘画者
 Painter painter = PainterEnum.INSTANCE.getInstance(canvas);
 float R = mBigHeight / 2;
 if (isChecked) {//选中状态绘制
     painter.draw(sa.deepClone().r(R).ang(360).p(R, -R).fs(mCenterColor));
     painter.drawText(st.deepClone()
             .size((int) (0.6 * mBigHeight)).str(mText)
             .p(R, R + (int) (0.2 * mBigHeight)).fs(Color.WHITE));
 } else {//未中状态绘制
     painter.draw(sa.deepClone().r(R).ang(360).p(R, -R).fs(mBigCircleColor));
     painter.draw(sa.deepClone().r((float) (0.3 * R)).ang(360).p(R, -R).fs(mCenterColor));
 }
测量:取大圆高
代码语言:javascript
复制
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension((int) mBigHeight, (int) mBigHeight);
    }
更新视图方法:
代码语言:javascript
复制
        //属性的get、set方法略
    /**
     * 更新视图
     * @param text 文字
     * @param checked 是否选中
     */
    public void update(String text, boolean checked) {
        mText = text;
        this.isChecked = checked;
        invalidate();
    }
二、使用:在适配器中获取item的布局时使用
代码语言:javascript
复制
//获取ImageView
final ImageView itemIv = holder.getView(R.id.id_iv_photo);
//获取DotNumView
final DotNumView dotNum = holder.getView(R.id.id_dot_check);
//设置默认图片
itemIv.setImageResource(R.drawable.no_photo);
//加点灰
itemIv.setColorFilter(Color.parseColor("#11000000"));
//加载图片
final String filePath = currentDir + File.separator + data;
//通过文件路径加载图片
ImageLoader.getInstance(3, ImageLoader.Type.LIFO).loadImage(mContext, filePath, itemIv);
代码语言:javascript
复制
//点击选中,添加遮罩
itemIv.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {//已被选择
        //如果文件夹包含了路径
        if (mSelectedImg.contains(filePath)) {
            unSelect();//移除选中
        } else {
            select();//选中
        }
        mTvSelectCount.setText("已选" + mSelectedImg.size() + "张");
    }

    /**
     * 选中时的操作
     */
    private void select() {
        //如果选中的小于9个
        if (mSelectedImg.size() < 9) {
            //将选中的filePath加入集合
            mSelectedImg.add(filePath);
            //更新dotNum的状态
            dotNum.update(mSelectedImg.size() + "", true);
            //item背景加深灰
            itemIv.setColorFilter(Color.parseColor("#77000000"));
        } else {
            //否则警告
            String alert = ResUtils.getString(mCtx, R.string.select_max_count);
            Toast.makeText(mCtx, alert, Toast.LENGTH_SHORT).show();
        }
    }

    /**
     * 移除选中的操作
     */
    private void unSelect() {
        mSelectedImg.remove(filePath);
        itemIv.setColorFilter(Color.parseColor("#22000000"));
        dotNum.update(mSelectedImg.size() + "", false);
        mTvSelectCount.setText("已选" + mSelectedImg.size() + "张");
    }
});

三、复用问题的解决方法:

百度了几个说得云里雾里,不太明白。仔细想一下,还是发挥自己的聪明才智吧 思路:用一个Map装一下选中的点和对应的数字,布局加载是动态判断一下,是否是该position的点,然后更新状态 一开始用List,然后发现需要两个字段,才改成Map 一开始声明后在获取item布局时才初始化map,怎么搞的都不对,然后想想--这是不对的

1.新建mCheckedMap
代码语言:javascript
复制
private Map mCheckedMap = new HashMap<Integer, Integer>();
2.动态恢复
代码语言:javascript
复制
//所有dotNum更新到状态
dotNum.update("", false);
//检查mCheckedMap,动态回复状态
if (mCheckedMap.containsKey(position)) {
    L.d("position:" + position + L.l());
    dotNum.update(mCheckedMap.get(position)+"", true);
    itemIv.setColorFilter(Color.parseColor("#77000000"));
}
3.选中加入Map
代码语言:javascript
复制
mCheckedMap.put(position, mSelectedImg.size());
4.不选了从Map移除
代码语言:javascript
复制
mCheckedMap.remove(position);

对于任何复用问题都可以使用这种思路来解决,好了,就到这里


后记、
1.声明:

1本文由张风捷特烈原创,转载请注明

2欢迎广大编程爱好者共同交流

3个人能力有限,如有不正之处欢迎大家批评指证,必定虚心改正

4你的喜欢与支持将是我最大的动力

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.09.12 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 零、前言
  • 一、绘制
    • 1.绘制思路:大圆+小圆+文字+状态控制
      • 成员变量
      • 自定义属性
      • 绘制
    • 测量:取大圆高
      • 更新视图方法:
      • 二、使用:在适配器中获取item的布局时使用
      • 三、复用问题的解决方法:
        • 1.新建mCheckedMap
          • 2.动态恢复
            • 3.选中加入Map
              • 4.不选了从Map移除
              • 后记、
                • 1.声明:
                领券
                问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档