美文网首页
自定义View - 评分点星 控件

自定义View - 评分点星 控件

作者: cao苗子 | 来源:发表于2019-07-26 14:01 被阅读0次

先看效果图:

评分

分析:两张图片,一张默认 一张选中图片
使用 canvas.drawBitmap()
跟之前有不同地方是:资源属性是一张图片 在自定义的view的时候 要采用bitmap的方式,通过BitmapFactory来加载资源文件。

获取资源属性代码:

TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.StarView);

mStarCount = typedArray.getInt(R.styleable.StarView_starCount,mStarCount);

mStarMargin = (int)typedArray.getDimension(R.styleable.StarView_starMargin,mStarMargin);

int mStarNormalId = typedArray.getResourceId(R.styleable.StarView_starNormal, 0);

if(mStarNormalId ==0){

throw new RuntimeException("请先设置属性");

}

int mStarFocusId = typedArray.getResourceId(R.styleable.StarView_starFocus,0);

if(mStarFocusId ==0){

throw new RuntimeException("请先设置属性");

}

mStarNormalBitmap = BitmapFactory.decodeResource(getResources(), mStarNormalId);

mStarFocusBitmap = BitmapFactory.decodeResource(getResources(),mStarFocusId);

typedArray.recycle();

重写OnDraw()方法

for(int i=0;i<mStarCount ; i ++ ) {

int width =mStarNormalBitmap.getWidth() * i + getPaddingLeft() + i *mStarMargin;

canvas.drawBitmap(mStarNormalBitmap,width,0,null);

if(mStarFocusCount > i){

canvas.drawBitmap(mStarFocusBitmap,width,0,null);

}

}

重写onMeasure()方法计算宽高   注意padding问题

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    int width =mStarNormalBitmap.getWidth();

    //高度 为 图片的高度 宽度为 图片数量乘以图片宽度

    width = (mStarCount-1) *mStarMargin + getPaddingLeft() + getPaddingRight() + width *mStarCount;

    int height =mStarNormalBitmap.getHeight() + getPaddingTop() + getPaddingBottom();

    setMeasuredDimension(width,height);

}

还要重写 onTouchEvent() 才能够实现滑动的效果:

重写onTouchEvent事件的时候 要返回true 否则无法滑动 为什么呢?后面会有笔记

只需要考虑 x 抽的问题就行

float x1 = event.getX();

doUpdate(x1);

private void doUpdate(float downX){

if(0 < downX && downX < getWidth()){

downX = downX - getPaddingLeft();

        if(downX <=0){

mStarFocusCount =0;

        }else {

int bx =mStarNormalBitmap.getWidth() +mStarMargin;

            int a = (int)( downX / bx );

            Log.d("TAG=>结果",a+"");

            mStarFocusCount = a +1;

        }

invalidate();

    }

}

以上代码存在内存需要优化的问题,请大家注意:每次滑动都会不断的调用onDraw()方法

应该是在星星范围内才滑动才好

if(count !=mStarFocusCount){

mStarFocusCount = count;

    invalidate();

}

好了,源码地址:

GitHub - panshimu/StarView

相关文章

  • 自定义View - 评分点星 控件

    先看效果图: 分析:两张图片,一张默认 一张选中图片使用 canvas.drawBitmap()跟之前有不同地方是...

  • 自定义View记录

    自定义View只要有三种类型:自绘控件、组合控件、继承控件。 自绘控件 自定义View主要是因为系统的内置View...

  • 自定义View仿抖音视频加载BufferLineView

    自定义View仿抖音视频加载BufferLineView 自定义视频选帧控件 自定义View 视频截取控件 自定义动画线

  • 自定义视频选帧控件

    自定义View仿抖音视频加载BufferLineView 自定义视频选帧控件 自定义View 视频截取控件 项目中...

  • 自定义View 视频截取控件

    自定义View仿抖音视频加载BufferLineView 自定义视频选帧控件 自定义View 视频截取控件 抖音最...

  • 自定义控件基础总结

    前言 自定义控件按照使用方式不同可分为自定义View和自定义ViewGroup,自定义View一般用在没有子控件的...

  • 自定义ViewGroup的简单流程

    自定义ViewGroup的步骤 1、自定义属性 参考UI控件:自定义View 2、onMeasure() View...

  • android自定义View基础

    自定义View基础1.1 分类自定义View的实现方式有以下几种 类型 定义自定义组合控件 多个控件组合成为一个...

  • Android中的自定义控件

    Android中的自定义控件大致可以分成三类:自定义组合控件、继承原生控件的自定义控件、继承View自己实现绘制的...

  • 自定义View时,使用id值的正确姿势

    假设: 存在继承自View的自定义控件CView; 存在继承自ViewGroup的自定义控件CViewGroup;...

网友评论

      本文标题:自定义View - 评分点星 控件

      本文链接:https://www.haomeiwen.com/subject/ldirrctx.html