Android自定义星星可滑动评分控件
时间:2021-01-06 11:21:33|栏目:Android代码|点击: 次
本文实例为大家分享了Android自定义星星可滑动评分控件的具体方法,供大家参考,具体内容如下
此控件通过线性布局结合ImageView来实现。
具有展示分数,滑动评分功能,可设置0-10分,自行设置星星图片,是否可点击与滑动,星星间距。
效果如下:
需准备好下面三张图片
先看自定义属性:
<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="StarRatingView"> <!--星星点亮--> <attr name="stat_on" format="reference"></attr> <!--星星关闭--> <attr name="stat_off" format="reference"></attr> <!--半颗星星--> <attr name="stat_half" format="reference"></attr> <!--是否可以点击滑动评分--> <attr name="ratable" format="boolean"></attr> <!--星星之间间距--> <attr name="star_padding" format="dimension"></attr> </declare-styleable> </resources>
布局文件
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:star="http://schemas.android.com/apk/res/com.le.star" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center_horizontal"> <com.le.star.StarRatingView android:id="@+id/srv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="20dp" star:stat_on="@drawable/frodo_rate_star_small_on_holo_light" star:stat_off="@drawable/frodo_rate_star_small_off_holo_light" star:stat_half="@drawable/frodo_rate_star_small_half_holo_light" star:star_padding="10dp" star:ratable="false" > </com.le.star.StarRatingView> <Button android:id="@+id/btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:layout_below="@id/srv" android:text="click" /> <TextView android:id="@+id/tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="50dp" android:layout_below="@id/btn" android:textSize="20sp" /> <com.le.star.StarRatingView android:id="@+id/srv_ratable" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/tv" android:layout_marginTop="20dp" star:stat_on="@drawable/frodo_rate_star_big_on_holo_light" star:stat_off="@drawable/frodo_rate_star_big_off_holo_light" star:stat_half="@drawable/frodo_rate_star_big_half_holo_light" star:star_padding="10dp" star:ratable="true" > </com.le.star.StarRatingView> </RelativeLayout>
第一个控件star:ratable设置为false,只具备展示功能。第二个为true,可进行滑动评分并把分数显示到TextView上。
下面是控件代码
public class StarRatingView extends LinearLayout{ private Drawable on,off,half; //星星三种图片 private boolean ratable; //是否点击滑动 private float padding; //星星之间间距 private List<ImageView> list; //存放五颗星星 private float points[] = new float[11]; //0-10分点的x坐标,index为分数,值为此分数为坐标 private float starWidth; //设置的星星图片宽度 private float halfStarWidth; //半个星星宽度 private int paddingLeft; //控件左padding private OnRateChangeListener onRateChangeListener; public StarRatingView(Context context) { super(context); } public StarRatingView(Context context, AttributeSet attrs) { super(context, attrs); TypedArray array = context.obtainStyledAttributes(attrs,R.styleable.StarRatingView); on = array.getDrawable(R.styleable.StarRatingView_stat_on); off = array.getDrawable(R.styleable.StarRatingView_stat_off); half = array.getDrawable(R.styleable.StarRatingView_stat_half); ratable = array.getBoolean(R.styleable.StarRatingView_ratable, false); halfStarWidth = on.getIntrinsicWidth() / 2; starWidth = on.getIntrinsicWidth(); padding = array.getDimension(R.styleable.StarRatingView_star_padding, starWidth / 3); paddingLeft = getPaddingLeft(); list = new ArrayList<>(); ImageView imageView; //初始化五个星星,并通过points数组把分数与坐标对应起来 for(int i=0;i<5;i++){ imageView = new ImageView(context); LinearLayout.LayoutParams layoutParams = new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT); if(i!=0&&i!=4) { //设置间距 layoutParams.setMargins((int) padding / 2, 0, (int) padding / 2, 0); //分数点所在的x坐标 points[i*2] = i*starWidth+i*padding; points[i*2+1] = points[i*2]+halfStarWidth/2; } //第一个左边和最后一个右边不设置间距 if(i==0){ layoutParams.setMargins(0, 0, (int) padding / 2, 0); points[0] = 0; points[1] = halfStarWidth; } if(i==4){ layoutParams.setMargins((int) padding / 2, 0, 0, 0); points[i*2] = i*starWidth+i*padding; points[i*2+1] = points[i*2]+halfStarWidth/2; points[10] = points[9]+halfStarWidth/2; } imageView.setLayoutParams(layoutParams); imageView.setImageDrawable(off); list.add(imageView); addView(list.get(i)); } setOrientation(LinearLayout.HORIZONTAL); array.recycle(); } /** *根据分数显示星星 * @param rate */ public void setRate(int rate){ removeAllViews(); int count = rate/2; boolean isOdd; if(rate%2==0){ isOdd = false; }else{ isOdd = true; } for(int i=0;i<list.size();i++){ if(i<count){ list.get(i).setImageDrawable(on); }else{ list.get(i).setImageDrawable(off); } if(isOdd&&i==count){ list.get(i).setImageDrawable(half); } addView(list.get(i)); } if(ratable&&onRateChangeListener!=null){ onRateChangeListener.onRateChange(rate); } } public void setOnRateChangeListener(OnRateChangeListener l){ onRateChangeListener = l; } @Override public boolean onTouchEvent(MotionEvent event) { //设置不可以滑动则不处理事件 if(!ratable){ return super.onTouchEvent(event); } setRate(calculateStar(event.getX())); return true; } /** * 根据坐标计算分数 * @param x * @return */ private int calculateStar(float x) { //减去控件左padding float realPosition = x-paddingLeft; for(int i = 0;i<points.length;i++){ if(points[i]>realPosition){ return i; } } //如果循环结束即为右滑超出最大值,返回10分 return 10; } /** * 评分改变的回调 */ public interface OnRateChangeListener{ void onRateChange(int rate); } }
基本实现原理是通过坐标计算分数,然后根据分数设置每个ImageView显示不同三张星星图片,根据ratable变量判断是否处理触摸事件,通过触摸位置在坐标数组point[]的位置,确定index,即为分数。并通过OnRateChangeListener通知分数的改变。
最后为Activity代码
public class MainActivity extends AppCompatActivity { private int count; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); final StarRatingView srv = (StarRatingView) findViewById(R.id.srv); findViewById(R.id.btn).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { count++; srv.setRate(count); } }); final TextView tv = (TextView) findViewById(R.id.tv); StarRatingView srv_ratable = (StarRatingView) findViewById(R.id.srv_ratable); srv_ratable.setOnRateChangeListener(new StarRatingView.OnRateChangeListener() { @Override public void onRateChange(int rate) { tv.setText(rate+"分"); } }); } }
GitHub地址StarRatingView
上一篇:android AlertDialog多种使用方法详解
栏 目:Android代码
本文标题:Android自定义星星可滑动评分控件
本文地址:http://www.codeinn.net/misctech/41193.html