在Android开发中,我们经常会用到对商家或者商品的评价,运用星星进行打分。然而在Android系统中自带的打分控件,RatingBar特别不好用,间距和大小无法改变。所以,我就自定义了一个特别好用的打分控件。在项目中可以直接使用,特别简单。下面直接上图:
效果图
实现原理
其实就是自定义View继承LinearLayout ,然后里面动态加了五个ImageView。
实现代码,有详细的注释
在attrs中声明的可以在xml中设置的变量
1234567891011121314151617181920212223 | <declare-styleable name= "RatingBar" > <!--尺寸值--> <attr name= "starImageSize" format= "dimension" /> <!--星星间距--> <attr name= "starPadding" format= "dimension" /> <!--星星总数--> <attr name= "starCount" format= "integer" /> <!--空白的星星资源文件值--> <attr name= "starEmpty" format= "reference" /> <!--满星资源文件值--> <attr name= "starFill" format= "reference" /> <!--半星资源文件值--> <attr name= "starHalf" format= "reference" /> <!--是否可点击 boolean 值--> <attr name= "clickable" format= "boolean" /> <!--当前进度 float 值--> <attr name= "starStep" format= "float" /> <!--每次进度方式的值,整星还是半星--> <attr name= "stepSize" > < enum name= "Half" value= "0" /> < enum name= "Full" value= "1" /> </attr> </declare-styleable> |
RatingBar源码
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261 | import android.content.Context; import android.content.res.TypedArray; import android.graphics.drawable.Drawable; import android.util.AttributeSet; import android.view.View; import android.widget.ImageView; import android.widget.LinearLayout; import com.kejiang.yuandl.R; import java.math.BigDecimal; /** * Created by dylan on 2015/6/11. * 自定义打分控件RatingBar * 可以自定义星星大小和间距 * Correction clickEvent from Xml */ public class RatingBar extends LinearLayout { /** * 是否可点击 */ private boolean mClickable; /** * 星星总数 */ private int starCount; /** * 星星的点击事件 */ private OnRatingChangeListener onRatingChangeListener; /** * 每个星星的大小 */ private float starImageSize; /** * 每个星星的间距 */ private float starPadding; /** * 星星的显示数量,支持小数点 */ private float starStep; /** * 空白的默认星星图片 */ private Drawable starEmptyDrawable; /** * 选中后的星星填充图片 */ private Drawable starFillDrawable; /** * 半颗星的图片 */ private Drawable starHalfDrawable; /** * 每次点击星星所增加的量是整个还是半个 */ private StepSize stepSize; /** * 设置半星的图片资源文件 * * @param starHalfDrawable */ public void setStarHalfDrawable(Drawable starHalfDrawable) { this .starHalfDrawable = starHalfDrawable; } /** * 设置满星的图片资源文件 * * @param starFillDrawable */ public void setStarFillDrawable(Drawable starFillDrawable) { this .starFillDrawable = starFillDrawable; } /** * 设置空白和默认的图片资源文件 * * @param starEmptyDrawable */ public void setStarEmptyDrawable(Drawable starEmptyDrawable) { this .starEmptyDrawable = starEmptyDrawable; } /** * 设置星星是否可以点击操作 * * @param clickable */ public void setClickable( boolean clickable) { this .mClickable = clickable; } /** * 设置星星点击事件 * * @param onRatingChangeListener */ public void setOnRatingChangeListener(OnRatingChangeListener onRatingChangeListener) { this .onRatingChangeListener = onRatingChangeListener; } /** * 设置星星的大小 * * @param starImageSize */ public void setStarImageSize( float starImageSize) { this .starImageSize = starImageSize; } public void setStepSize(StepSize stepSize) { this .stepSize = stepSize; } /** * 构造函数 * 获取xml中设置的资源文件 * * @param context * @param attrs */ public RatingBar(Context context, AttributeSet attrs) { super (context, attrs); setOrientation(LinearLayout.HORIZONTAL); TypedArray mTypedArray = context.obtainStyledAttributes(attrs, R.styleable.RatingBar); starImageSize = mTypedArray.getDimension(R.styleable.RatingBar_starImageSize, 20 ); starPadding = mTypedArray.getDimension(R.styleable.RatingBar_starPadding, 10 ); starStep = mTypedArray.getFloat(R.styleable.RatingBar_starStep, 1 .0f); stepSize = StepSize.fromStep(mTypedArray.getInt(R.styleable.RatingBar_stepSize, 1 )); starCount = mTypedArray.getInteger(R.styleable.RatingBar_starCount, 5 ); starEmptyDrawable = mTypedArray.getDrawable(R.styleable.RatingBar_starEmpty); starFillDrawable = mTypedArray.getDrawable(R.styleable.RatingBar_starFill); starHalfDrawable = mTypedArray.getDrawable(R.styleable.RatingBar_starHalf); mClickable = mTypedArray.getBoolean(R.styleable.RatingBar_clickable, true ); mTypedArray.recycle(); for ( int i = 0 ; i < starCount; ++i) { final ImageView imageView = getStarImageView(); imageView.setImageDrawable(starEmptyDrawable); imageView.setOnClickListener( new OnClickListener() { @Override public void onClick(View v) { if (mClickable) { //浮点数的整数部分 int fint = ( int ) starStep; BigDecimal b1 = new BigDecimal(Float.toString(starStep)); BigDecimal b2 = new BigDecimal(Integer.toString(fint)); //浮点数的小数部分 float fPoint = b1.subtract(b2).floatValue(); if (fPoint == 0 ) { fint -= 1 ; } if (indexOfChild(v) > fint) { setStar(indexOfChild(v) + 1 ); } else if (indexOfChild(v) == fint) { if (stepSize == StepSize.Full) { //如果是满星 就不考虑半颗星了 return ; } //点击之后默认每次先增加一颗星,再次点击变为半颗星 if (imageView.getDrawable().getCurrent().getConstantState().equals(starHalfDrawable.getConstantState())) { setStar(indexOfChild(v) + 1 ); } else { setStar(indexOfChild(v) + 0 .5f); } } else { setStar(indexOfChild(v) + 1f); } } } } ); addView(imageView); } setStar(starStep); } /** * 设置每颗星星的参数 * * @return */ private ImageView getStarImageView() { ImageView imageView = new ImageView(getContext()); LinearLayout.LayoutParams layout = new LinearLayout.LayoutParams( Math.round(starImageSize), Math.round(starImageSize)); //设置每颗星星在线性布局的大小 layout.setMargins( 0 , 0 , Math.round(starPadding), 0 ); //设置每颗星星在线性布局的间距 imageView.setLayoutParams(layout); imageView.setAdjustViewBounds( true ); imageView.setScaleType(ImageView.ScaleType.CENTER_CROP); imageView.setImageDrawable(starEmptyDrawable); imageView.setMinimumWidth( 10 ); imageView.setMaxHeight( 10 ); return imageView; } /** * 设置星星的个数 * * @param rating */ public void setStar( float rating) { if (onRatingChangeListener != null ) { onRatingChangeListener.onRatingChange(rating); } this .starStep = rating; //浮点数的整数部分 int fint = ( int ) rating; BigDecimal b1 = new BigDecimal(Float.toString(rating)); BigDecimal b2 = new BigDecimal(Integer.toString(fint)); //浮点数的小数部分 float fPoint = b1.subtract(b2).floatValue(); //设置选中的星星 for ( int i = 0 ; i < fint; ++i) { ((ImageView) getChildAt(i)).setImageDrawable(starFillDrawable); } //设置没有选中的星星 for ( int i = fint; i < starCount; i++) { ((ImageView) getChildAt(i)).setImageDrawable(starEmptyDrawable); } //小数点默认增加半颗星 if (fPoint > 0 ) { ((ImageView) getChildAt(fint)).setImageDrawable(starHalfDrawable); } } /** * 操作星星的点击事件 */ public interface OnRatingChangeListener { /** * 选中的星星的个数 * * @param RatingCount */ void onRatingChange( float ratingCount); } /** * 星星每次增加的方式整星还是半星,枚举类型 * 类似于View.GONE */ public enum StepSize { Half( 0 ), Full( 1 ); int step; StepSize( int step) { this .step = step; } public static StepSize fromStep( int step) { for (StepSize f : values()) { if (f.step == step) { return f; } } throw new IllegalArgumentException(); } } } 在xml中的用法 <com.kejiang.yuandl.view.RatingBar android:id= "@+id/rb" android:layout_width= "360dp" android:layout_height= "50dp" app:starCount= "5" app:starEmpty= "@mipmap/star_grey" app:starFill= "@mipmap/star_yellow" app:starHalf= "@mipmap/star_half_yellow" app:starImageSize= "40dp" app:starPadding= "20dp" app:starStep= "1.5" app:stepSize= "Half" ></com.kejiang.yuandl.view.RatingBar> |
在Activity中的设置
12345678910 | RatingBar ratingBar= (RatingBar) findViewById(R.id.rb); ratingBar.setClickable( true ); //设置可否点击 ratingBar.setStar( 2 .5f); //设置显示的星星个数 ratingBar.setStepSize(RatingBar.StepSize.Half); //设置每次点击增加一颗星还是半颗星 ratingBar.setOnRatingChangeListener( new RatingBar.OnRatingChangeListener() { @Override public void onRatingChange( float ratingCount) { //点击星星变化后选中的个数 Log.d( "RatingBar" , "RatingBar-Count=" +ratingCount); } }); |
原文链接:http://blog.csdn.net/linglongxin24/article/details/52918701