自定義安卓五星評價設計-----ratingBar

1.可以尋找安卓底層實現ratingBar的代碼,然後做改動,實現自己想要的效果哦

自定義ratingBar
package com.example.ratingbar;

import android.widget.LinearLayout;
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 java.math.BigDecimal;
/**
 * Created by dylan on 2015/6/11.
 * 自定義打分控件RatingBar
 * 可以自定義星星大小和間距
 * Correction clickEvent from Xml
 */

public class RatingBar extends LinearLayout {
    private float starNum;

    public float getStarNum() {
        return starNum;
    }

    public void setStarNum(float starNum) {
        this.starNum = starNum;
    }

    /**
     * 是否可點擊
     */
    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;
    }

    public RatingBar(Context context) {
        super(context);
    }

    /**
     * 構造函數
     * 獲取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);
        }

        //setA(fint);
//設置沒有選中的星星
        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 version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:textSize="25dp"
        android:text="服務態度"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <RatingBar
            android:id="@+id/ratingBar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:gravity="center_vertical"
            android:numStars="5"
            android:rating="0" />

    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20dp"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:gravity="center"
            android:text="描述相符"/>

        <com.example.ratingbar.RatingBar
            android:id="@+id/ratingbar2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:starCount="5"
            app:starEmpty="@drawable/star_20x20_n"
            app:starFill="@drawable/star_20x20_hl"
            app:starHalf="@drawable/star_20x20_h"
            app:starImageSize="30dp"
            app:starPadding="10dp"
            app:starStep="0.0"
            android:layout_marginLeft="3dp"
            android:layout_centerHorizontal="true" />

        <TextView
            android:id="@+id/teview_evaluate"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:gravity="center"
            android:textColor="#F71515"
            android:textSize="19dp" />
    </LinearLayout>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:hint="寫滿10字爲寶貝拍買家秀,有機會被選爲優質評價被更多人看到"/>
</LinearLayout>
values中新建一個
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <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>
</resources>

然後主界面裏面寫處理過程,五星爲超級好評

ratingbar2.setOnRatingChangeListener(new com.example.ratingbar.RatingBar.OnRatingChangeListener() {
            @Override
            public void onRatingChange(float ratingCount) {
                switch ((int)ratingCount){
                    case 5:
                        teview_evaluate.setText("非常好");
                        break;
                    case 4:
                        teview_evaluate.setText("好");
                        break;
                    case 3:
                        teview_evaluate.setText("一般");
                        break;
                    case 2:
                        teview_evaluate.setText("差");
                        break;
                    case 1:
                    case 0:
                        teview_evaluate.setText("非常差");
                        break;
                        default:
                            break;
                }
                Log.d(String.valueOf(ratingCount) , "onRatingChange: ");
            }
        });
    }

效果如圖所示

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章