android评分组件大小,Android 自定义五星评分控件

先看效果图:

录屏.gif

android 现在已经自带RateingBar,当然原生会更好些，这里算是抛砖引玉吧。希望对学习自定义控件的小伙伴有点帮助。

一 自定义属性

这里需要三个属性

...

...

默认星星图片和选中后的星星图片以及星星数量

二 新建RatingBar类

1,get 属性

...

TypedArray typedValue=context.obtainStyledAttributes(attrs, R.styleable.RatingBar);

//首先拿到图片属性的resourceId

int iconSelectId= typedValue.getResourceId(R.styleable.RatingBar_iconSelect,0);

if(iconSelectId==0) throw new RuntimeException("属性设置=0");//如果没有设置图片抛出一个运行时异常

int iconNormalid=typedValue.getResourceId(R.styleable.RatingBar_iconNormal,0);

if(iconNormalid==0)throw new RuntimeException("属性设置=0");

//通过resource 解析达到图片的bitmap

bitmapSelect=BitmapFactory.decodeResource(context.getResources(),iconSelectId);

bitmapNormal=BitmapFactory.decodeResource(getResources(),iconNormalid);

//得到星星数量属性

starNumber=typedValue.getInteger(R.styleable.RatingBar_iconNumber,starNumber);

typedValue.recycle();

...

上面有个问题困扰我，一直没搞懂，如果有了解的可以指点下。问题如下：

我先是把两个星星图片放到了mipmap里面，然后通过上面的代码拿到bitmap，但是这时的bitmap.getWidth()返回值是0，这样就没法画出星星。我尝试了好多方法，最后还是把两个图片放到drawable文件夹下才可以。why?

2.onMeasure

...

int widthSize=bitmapSelect.getWidth()starNumber+getPaddingRight()(starNumber-1);

int heightSize=bitmapSelect.getHeight();

setMeasuredDimension(widthSize,heightSize);

...

如果不加padding，星星就会连到一起，所以加上paddingRight，高度就是bitmap图片的高度。

3.onDraw

...

for (int i = 0; i

//坐标x=图片的宽度+paddingRight，有几个图片就乘上几

float x=bitmapNormal.getWidth() * i+getPaddingRight()*i;

if(mCurrentX>i)//mCurrent 代表当前黄色星星在哪个位置上

canvas.drawBitmap(bitmapSelect, x, 0, null);

else

canvas.drawBitmap(bitmapNormal, x, 0, null);

}

..

4 onTouch

...

case DOWN

case MOVE

float x=getx()/(bitmap.width()+getPaddingRight());//finger down 在第几个星星的x位置

if(x==mCurrentx)return true;

mCurrentx=x;

invalidate();

三 使用

...

android:id="@+id/ratingBar"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:paddingRight="15dp"

app:iconNormal="@drawable/starnormal"

app:iconNumber="5"

app:iconSelect="@drawable/starselected" />

...

...

四 源码

...

public class RatingBar extends View {

final String TAG="RatingBarTAG";

/**

* 需要解析的图片

*/

private Bitmap bitmapNormal,bitmapSelect;

/**

* star 数量

*/

private int starNumber=5;

/**

* 当前手指所在的位置是第几个星星的位置

*/

private float mCurrentX=0f;

public RatingBar(Context context) {

this(context,null);

}

public RatingBar(Context context, @Nullable AttributeSet attrs) {

this(context, attrs,0);

}

public RatingBar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

TypedArray typedValue=context.obtainStyledAttributes(attrs, R.styleable.RatingBar);

int iconSelectId= typedValue.getResourceId(R.styleable.RatingBar_iconSelect,0);

if(iconSelectId==0) throw new RuntimeException("属性设置=0");

int iconNormalid=typedValue.getResourceId(R.styleable.RatingBar_iconNormal,0);

if(iconNormalid==0)throw new RuntimeException("属性设置=0");

bitmapSelect=BitmapFactory.decodeResource(context.getResources(),iconSelectId);

bitmapNormal=BitmapFactory.decodeResource(getResources(),iconNormalid);

starNumber=typedValue.getInteger(R.styleable.RatingBar_iconNumber,starNumber);

typedValue.recycle();

}

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

int widthSize=bitmapSelect.getWidth()*starNumber+getPaddingRight()*(starNumber-1);

int heightSize=bitmapSelect.getHeight();

setMeasuredDimension(widthSize,heightSize);

}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

for (int i = 0; i

//坐标x=图片的宽度+paddingRight，有几个图片就乘上几

float x=bitmapNormal.getWidth() * i+getPaddingRight()*i;

if(mCurrentX>i)

canvas.drawBitmap(bitmapSelect, x, 0, null);

else

canvas.drawBitmap(bitmapNormal, x, 0, null);

}

}

@Override

public boolean onTouchEvent(MotionEvent event) {

switch (event.getAction()) {

case MotionEvent.ACTION_DOWN:

case MotionEvent.ACTION_MOVE:

float x= event.getX()/(bitmapSelect.getWidth()+getPaddingRight());

if(x==mCurrentX){

return true;

}

mCurrentX=x;

invalidate();

break;

}

return true;

}

}

...