您好,登錄后才能下訂單哦!
本文實例為大家分享了Android自定義星星可滑動評分控件的具體方法,供大家參考,具體內(nèi)容如下
此控件通過線性布局結(jié)合ImageView來實現(xiàn)。
具有展示分數(shù),滑動評分功能,可設(shè)置0-10分,自行設(shè)置星星圖片,是否可點擊與滑動,星星間距。
效果如下:
需準備好下面三張圖片
先看自定義屬性:
<?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)容,希望對大家的學習有所幫助,也希望大家多多支持億速云。
免責聲明:本站發(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)容。