溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Android自定義星星可滑動評分控件

發(fā)布時間:2020-09-03 13:43:09 來源:腳本之家 閱讀:189 作者:LX_LE 欄目:移動開發(fā)

本文實例為大家分享了Android自定義星星可滑動評分控件的具體方法,供大家參考,具體內(nèi)容如下

此控件通過線性布局結(jié)合ImageView來實現(xiàn)。

具有展示分數(shù),滑動評分功能,可設(shè)置0-10分,自行設(shè)置星星圖片,是否可點擊與滑動,星星間距。

效果如下:

Android自定義星星可滑動評分控件

需準備好下面三張圖片

Android自定義星星可滑動評分控件

先看自定義屬性:

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <declare-styleable name="StarRatingView">
    <!--星星點亮-->
    <attr name="stat_on" format="reference"></attr>
    <!--星星關(guān)閉-->
    <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設(shè)置為false,只具備展示功能。第二個為true,可進行滑動評分并把分數(shù)顯示到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為分數(shù),值為此分數(shù)為坐標
  private float starWidth;  //設(shè)置的星星圖片寬度
  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數(shù)組把分數(shù)與坐標對應(yīng)起來
    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) {
        //設(shè)置間距
        layoutParams.setMargins((int) padding / 2, 0, (int) padding / 2, 0);
        //分數(shù)點所在的x坐標
        points[i*2] = i*starWidth+i*padding;
        points[i*2+1] = points[i*2]+halfStarWidth/2;
      }
      //第一個左邊和最后一個右邊不設(shè)置間距
      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();
  }

  /**
   *根據(jù)分數(shù)顯示星星
   * @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) {
    //設(shè)置不可以滑動則不處理事件
    if(!ratable){
      return super.onTouchEvent(event);
    }
    setRate(calculateStar(event.getX()));
    return true;
  }

  /**
   * 根據(jù)坐標計算分數(shù)
   * @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;
      }
    }
    //如果循環(huán)結(jié)束即為右滑超出最大值,返回10分
    return 10;
  }

  /**
   * 評分改變的回調(diào)
   */
  public interface OnRateChangeListener{
    void onRateChange(int rate);
  }
}

基本實現(xiàn)原理是通過坐標計算分數(shù),然后根據(jù)分數(shù)設(shè)置每個ImageView顯示不同三張星星圖片,根據(jù)ratable變量判斷是否處理觸摸事件,通過觸摸位置在坐標數(shù)組point[]的位置,確定index,即為分數(shù)。并通過OnRateChangeListener通知分數(shù)的改變。

最后為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

以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持億速云。

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI