下載鏈接：自定義笑臉評分條

要求實現效果如圖：

試了在代碼里根據rating更換style，發現做不到，搜了半天我是不會。美團的評價有這個樣式，就反編譯了一下美團apk，沒看到具體的java文件，倒是看到了它的attrs.xml，原來他是自定義的，然后網上搜了搜還是沒找到自定義的符合要求的，不過可能是我的關鍵字不對，不太會搜索。所以打算自己試著自定義一個，正好一直沒自己玩過，學學高科技。

誤區：

剛開始自定義的時候看了一些書，這個時候就發現大佬們的優秀與親民了，特別喜歡他們開篇會說其實自定義一點兒都不難，搞得我很有信心繼續搞下去。真喜歡他們。高高興興繼續往下看。
明白了一些理論與很多定義，做的時候理所當然的就繼承RatingBar去做了，覺得就是在原有基礎上擴展寫內容嘛！后來遇到問題了，根據rating換背景倒是可以實現，可始終只有一個笑臉，不能出現五個，沒有頭緒了。努力了半天不會搞，最后想最笨大不了就自己造吧，畫個linearLayout包五個星星來唄。

最終實現：

1. 第一步當然是attrs.xml

<!--星級自定義屬性--><declare-styleable name="ThirdRatingBarView"><attr name="dividerWidth" format="dimension" />//間距<attr name="default_icon" format="reference" />//默認圖標<attr name="selection_icon_bad" format="reference" />//差評圖標<attr name="selection_icon_good" format="reference" />//好評圖標<attr name="selection_icon_half_bad" format="reference" />//半星差圖標<attr name="selection_icon_half_good" format="reference" />//半星好圖標<attr name="starImageSize" format="float" />//星星大小<attr name="starCount" format="integer" />//星星數量<attr name="rating" format="float" />//當前評級</declare-styleable>

2. xml引用

<com.yuanli.threeratingbar.widget.ThreeLevelRatingBarViewandroid:id="@+id/ratingTotal"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerVertical="true"android:layout_marginLeft="20dp"app:default_icon="@mipmap/evaluate_default_face"app:rating="1.36"android:layout_toRightOf="@+id/tv_1"app:selection_icon_bad="@drawable/rating_bar_bad_smile"app:selection_icon_good="@drawable/rating_bar"app:selection_icon_half_good="@mipmap/evaluate_yellow_half"app:selection_icon_half_bad="@mipmap/evaluate_bad_face_half"app:starCount="5"app:starImageSize="96"/>

3. 自定義的java文件

傻瓜式注釋都能看懂

package com.yuanli.threeratingbar.widget;import android.content.Context; import android.content.res.TypedArray; import android.graphics.drawable.Drawable; import android.util.AttributeSet; import android.view.ViewGroup; import android.widget.ImageView; import android.widget.LinearLayout;import com.yuanli.threeratingbar.R;/*** 項目名稱：esparclientios* 創建人：李元利* 創建時間：2017/9/20 16:10* 描述：三級評價樣式*/public class ThreeLevelRatingBarView extends LinearLayout {private String TAG = "RatingBar";//點擊回調接口，監聽用戶設置的數量private OnRatingBarChangeListener onRatingBarChangeListener;public interface OnRatingBarChangeListener {void onRatingChanged(float RatingScore);}public void setOnRatingBarChangeListener(OnRatingBarChangeListener onRatingBarChangeListener) {this.onRatingBarChangeListener = onRatingBarChangeListener;}private boolean mClickable = true;//設置可否點擊public void setClickable(boolean clickable) {this.mClickable = clickable;}//默認間距、大小、數量private static final int DEFAULT_DIVIDER_WIDTH = 0;private static final int DEFAULT_STAR_SIZE = 50;private static final int DEFAULT_STAR_COUNT = 5;private int mDividerWidth = DEFAULT_DIVIDER_WIDTH;private float starImageSize = DEFAULT_STAR_SIZE;private int starCount = DEFAULT_STAR_COUNT;private float mStarCount;private float rating;private Drawable starDrawable;private Drawable starDrawablehalf;private Drawable selection_icon_bad;private Drawable selection_icon_good;private Drawable selection_icon_half_bad;private Drawable selection_icon_half_good;private Drawable default_icon;public ThreeLevelRatingBarView(Context context, AttributeSet attrs) {super(context, attrs);setOrientation(LinearLayout.HORIZONTAL);//獲取自定義屬性集TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ThirdRatingBarView);//從TypedArray取出對應的值來為要設置的屬性賦值default_icon = typedArray.getDrawable(R.styleable.ThirdRatingBarView_default_icon);selection_icon_bad = typedArray.getDrawable(R.styleable.ThirdRatingBarView_selection_icon_bad);selection_icon_good = typedArray.getDrawable(R.styleable.ThirdRatingBarView_selection_icon_good);selection_icon_half_bad = typedArray.getDrawable(R.styleable.ThirdRatingBarView_selection_icon_half_bad);selection_icon_half_good = typedArray.getDrawable(R.styleable.ThirdRatingBarView_selection_icon_half_good);mDividerWidth = typedArray.getDimensionPixelSize(R.styleable.ThirdRatingBarView_dividerWidth, DEFAULT_DIVIDER_WIDTH);starImageSize = typedArray.getFloat(R.styleable.ThirdRatingBarView_starImageSize, DEFAULT_STAR_SIZE);//星星大小starCount = typedArray.getInteger(R.styleable.ThirdRatingBarView_starCount, DEFAULT_STAR_COUNT);//星星總數rating = typedArray.getFloat(R.styleable.ThirdRatingBarView_rating, 0);typedArray.recycle();//畫幾個星星？for (int i = 0; i < starCount; ++i) {StarView imageView = getStarImageView(context,i);imageView.setOnStarViewChangeListener(new StarView.OnStarViewChangeListener() {@Overridepublic void onViewChanged(float RatingScore, int size) {if (mClickable) {//是否可點擊//獲取子view的位置mStarCount = size + RatingScore;//帶小數的ratingsetRating(mStarCount);if (onRatingBarChangeListener != null) {onRatingBarChangeListener.onRatingChanged(mStarCount);}}}});// imageView.setOnClickListener(new OnClickListener() { // @Override // public void onClick(View v) { // if (mClickable) {//是否可點擊 // //獲取子view的位置 // mStarCount = indexOfChild(v) + 1;//只能是整數rating // setRating(mStarCount); // // if (onRatingBarChangeListener != null) { // onRatingBarChangeListener.onRatingChanged(mStarCount); // } // } // } // });addView(imageView);}setRating(rating);}//畫一個星星private StarView getStarImageView(Context context,int i) {StarView imageView = new StarView(context,i);ViewGroup.LayoutParams para = new ViewGroup.LayoutParams(Math.round(starImageSize), Math.round(starImageSize));imageView.setLayoutParams(para);imageView.setPadding(0, 0, mDividerWidth, 0);imageView.setImageDrawable(default_icon);imageView.setMaxWidth(24);imageView.setMaxHeight(24);return imageView;}//設置星星數public void setRating(float starCount) {//大于總數用自己，小于0用0（寫完了發現網上有例子，優化下）starCount = starCount > this.starCount ? this.starCount : starCount;starCount = starCount < 0 ? 0 : starCount;rating = starCount;float decimals_count = starCount - (int) (starCount); //計算分數的小數部分int interger_count = (int) starCount; //計算分數的整數部分if (starCount <= 1) {starDrawable = selection_icon_bad;starDrawablehalf=selection_icon_half_bad;} else {starDrawable = selection_icon_good;starDrawablehalf=selection_icon_half_good;}//這里為了設置半星的圖而準備,現在沒有半星的圖片，先這樣，邏輯已有，到時候微調一下//先把整數外的其他行星設為空for (int i = this.starCount - 1; i >= interger_count; --i) {((ImageView) getChildAt(i)).setImageDrawable(default_icon);}if (decimals_count > 0) {//如果有小數//整數設為全圖for (int i = 0; i < interger_count; ++i) {((ImageView) getChildAt(i)).setImageDrawable(starDrawable);}//最后一個設為半星的(四舍五入)if (decimals_count < 0.5)((ImageView) getChildAt(interger_count)).setImageDrawable(starDrawablehalf);else((ImageView) getChildAt(interger_count)).setImageDrawable(starDrawable);} else {//如果是整數，直接上背景for (int i = 0; i < starCount; ++i) {((ImageView) getChildAt(i)).setImageDrawable(starDrawable);}}}//以下均可由代碼設置public float getStarCount() {return mStarCount;}public void setSelection_icon_bad(Drawable selection_icon_bad) {this.selection_icon_bad = selection_icon_bad;}public void setSelection_icon_good(Drawable selection_icon_good) {this.selection_icon_good = selection_icon_good;}public void setDefault_icon(Drawable default_icon) {this.default_icon = default_icon;}public void setStarCount(int startCount) {this.starCount = startCount;}public void setStarImageSize(float starImageSize) {this.starImageSize = starImageSize;}public float getRating() {return rating;} }

4. StarView

package com.yuanli.threeratingbar.widget;import android.annotation.SuppressLint; import android.content.Context; import android.util.Log; import android.view.GestureDetector; import android.view.MotionEvent; import android.view.View; import android.widget.ImageView;/*** 項目名稱：ThreeRatingBar* 創建人：李元利* 創建時間：2017/10/9 17:44* 描述：獲取點擊的比例*/@SuppressLint("AppCompatCustomView") public class StarView extends ImageView implements View.OnTouchListener {private String TAG = "RatingBar";private Context mContext;private GestureDetector mGestureDetector;private float rating;private int size;//點擊回調接口，監聽用戶設置的數量private StarView.OnStarViewChangeListener onStarViewChangeListener;public interface OnStarViewChangeListener {void onViewChanged(float RatingScore,int size);}public void setOnStarViewChangeListener(StarView.OnStarViewChangeListener onStarViewChangeListener) {this.onStarViewChangeListener = onStarViewChangeListener;}public StarView(Context context,int i) {super(context);this.size=i;initData(context);}private void initData(Context context) {this.mContext = context;super.setOnTouchListener(this);super.setClickable(true);super.setLongClickable(true);super.setFocusable(true);mGestureDetector = new GestureDetector(mContext, new MyGestureListener());mGestureDetector.setOnDoubleTapListener(new MyGestureListener());}/** 當該view上的事件被分發到view上時觸發該方法的回調* 如果這個方法返回false時,該事件就會被傳遞給Activity中的onTouchEvent方法來處理* 如果該方法返回true時，表示該事件已經被onTouch函數處理玩，不會上傳到activity中處理* 該方法屬于View.OnTouchListening接口* */@Overridepublic boolean onTouch(View v, MotionEvent event) {return mGestureDetector.onTouchEvent(event);}/*** 手勢監聽類* */class MyGestureListener extends GestureDetector.SimpleOnGestureListener {public MyGestureListener() {super();}@Override/**每按一下屏幕立即觸發* */public boolean onDown(MotionEvent e) {Log.e(TAG, "onDown");return false;}@Override/**用戶按下屏幕并且沒有移動或松開。主要是提供給用戶一個可視化的反饋，告訴用戶他們的按下操作已經* 被捕捉到了。如果按下的速度很快只會調用onDown(),按下的速度稍慢一點會先調用onDown()再調用onShowPress().* */public void onShowPress(MotionEvent e) {Log.e(TAG, "onShowPress");}@Override/**一次單純的輕擊抬手動作時觸發* */public boolean onSingleTapUp(MotionEvent e) {Log.e(TAG, "onSingleTapUp");//點擊的位置比view的寬度來獲取ratingrating=e.getX()/getWidth();if(onStarViewChangeListener!=null){onStarViewChangeListener.onViewChanged(rating,size);}return false;}} }

5. Activity引用

@Bind(id.rate_communicate)ThreeLevelRatingBarView rateCommunicate;//禁止再點擊 rateCommunicate.setClickable(false); //獲取并設置rating CommunicationScore = rateCommunicate.getRating() + "";rateCommunicate.setRating(Float.parseFloat(CommunicationScore));//點擊監聽 rateCommunicate.setOnRatingBarChangeListener(new ThreeLevelRatingBarView.OnRatingBarChangeListener() {@Overridepublic void onRatingChanged(float RatingScore) {if (RatingScore > 2) {tvCommunicate.setText("好");} else if (RatingScore <= 1) {tvCommunicate.setText("差");} else {tvCommunicate.setText("一般");}}});

下載鏈接：自定義笑臉評分條

總結

以上是生活随笔為你收集整理的评价星星三级样式：好、一般、差的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。