Android中自定义RatingBar，自定义星星间距，自定义样式，自定义显示效果

RatingBar是在等级，星级显示的时候，用的最多的，但是系统自带的效果，在星星间距大小上，以及将星星替换为其他造型上不能满足需求，所以需要自定义RatingBar；

自定义RatingBar非常简单：

一：简单的自定义（自定义样式）

1，确定展示出的选中和未选中两种状态的图片；

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
        <item android:id="@+android:id/background"
        android:drawable="@drawable/star2"></item>               
                <item android:id="@+android:id/secondaryProgress"
                android:drawable="@drawable/star2"></item>
                <item android:id="@+android:id/progress"
        android:drawable="@drawable/star1"></item>

</layer-list>

对于星星之间的间距，可以通过切图，切图的透明底图的大小来试下控制，星星的间距。

2，自定义样式

<style name="yogaCourseRatingBar" parent="@android:style/Widget.RatingBar">
        <item name="android:progressDrawable">@drawable/yota_ratingbar_progress_drawable</item>
        <item name="android:minHeight">13dp</item>
        <item name="android:maxHeight">13dp</item>
    </style>

3，使用

<RatingBar 
        android:id="@+id/ratingStart"
        android:layout_toRightOf="@id/difficultTV"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="0dp"
        android:layout_alignBottom="@id/difficultTV"
        android:numStars="5"
        android:stepSize="1"
        android:rating="2"
        android:isIndicator="true"
        android:layout_marginLeft="5dp"
        style="@style/yogaCourseRatingBar"/>

效果：

isIndicator属性表示，展出的星星可不可以点击，true表示不可以点击，只是展示星级，false表示可以手动触摸点击，给出评价的等级，
这个属性，api中给的解释是：

Whether this rating bar is an indicator (and non-changeable by 
 the user). [boolean]

很简单，就是修改了系统给出的几个属性，修改了显示的星星图片，修改了展示星星的高度，

默认情况下，星星底部有一段空白高度，因为系统给的minHeight和maxHeight是57，远远超出了星星图片的高度，星星展示的时候默认靠上展示了，所以底部就空出了空袭，但是通过margin和padding都无法修改这个空白区域。

系统默认的RatingBar样式：

<style name="Widget.RatingBar">
        <item name="indeterminateOnly">false</item>
        <item name="progressDrawable">@drawable/ratingbar_full</item>
        <item name="indeterminateDrawable">@drawable/ratingbar_full</item>
        <item name="minHeight">57dip</item>
        <item name="maxHeight">57dip</item>
        <item name="thumb">@null</item>
        <item name="mirrorForRtl">true</item>
    </style>

看看系统给出的三种style的效果：

<RatingBar 
            android:id="@+id/rat1"
            android:layout_below="@id/ratingStart"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:numStars="5"
            android:rating="3"
            style="@android:style/Widget.DeviceDefault.RatingBar.Small"/>

        <RatingBar 
            android:id="@+id/rat2"
            android:layout_below="@id/rat1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:numStars="5"
            android:rating="2"
            style="@android:style/Widget.DeviceDefault.RatingBar"/>
        <RatingBar 
            android:layout_below="@id/rat2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:numStars="5"
            android:rating="4"
            style="@android:style/Widget.DeviceDefault.RatingBar.Indicator"/>

效果：（发现选中后的颜色，似乎不好控制啊，需要通过primaryColor来控制，这是APP的主色调，耦合度这么高，不好呀）

二：继承一个View,自定义一个RatingBarView控件（较深程度的自定义–自定义控件）

实现也是很简单的：
通过这个自定义，完全可以控制心心的大小、形状、图案，间距，点击回调事件处理，都可以处理了。

因为他其实是通过在一个viewgroup中addimageview来实现的。

/**
 * 
 * TODO(自定义ratingbar)
 * @author yujie.zhang
 * 2017-4-10下午8:34:57
 */
public class RatingBarView extends LinearLayout {

    public interface OnRatingListener {
        void onRating(Object bindObject, int RatingScore);
    }

    private boolean mClickable = true;
    private OnRatingListener onRatingListener;
    private Object bindObject;
    private float starImageSize;
    private int starCount;
    private Drawable starEmptyDrawable;
    private Drawable starFillDrawable;
    private int mStarCount;

    public void setClickable(boolean clickable) {
        this.mClickable = clickable;
    }

    public RatingBarView(Context context, AttributeSet attrs) {
        super(context, attrs);
        setOrientation(LinearLayout.HORIZONTAL);
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.RatingBarView);
        starImageSize = ta.getDimension(R.styleable.RatingBarView_starImageSize, 20);
        starCount = ta.getInteger(R.styleable.RatingBarView_starCount, 5);
        starEmptyDrawable = ta.getDrawable(R.styleable.RatingBarView_starEmpty);
        starFillDrawable = ta.getDrawable(R.styleable.RatingBarView_starFill);
        ta.recycle();

        for (int i = 0; i < starCount; ++i) {
            ImageView imageView = getStarImageView(context, attrs);
            imageView.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (mClickable) {
                        mStarCount = indexOfChild(v) + 1;
                        setStar(mStarCount, true);
                        if (onRatingListener != null) {
                            onRatingListener.onRating(bindObject, mStarCount);
                        }
                    }
                }
            });
            addView(imageView);
        }
    }

    private ImageView getStarImageView(Context context, AttributeSet attrs) {
        ImageView imageView = new ImageView(context);
        ViewGroup.LayoutParams para = new ViewGroup.LayoutParams(Math.round(starImageSize), Math.round(starImageSize));
        imageView.setLayoutParams(para);
        // TODO:you can change gap between two stars use the padding
//        imageView.setPadding(0, 0, 40, 0);
        imageView.setPadding(0, 0, 0, 0);
        imageView.setImageDrawable(starEmptyDrawable);
        imageView.setMaxWidth(10);
        imageView.setMaxHeight(10);
        return imageView;
    }

    public void setStar(int starCount, boolean animation) {
        starCount = starCount > this.starCount ? this.starCount : starCount;
        starCount = starCount < 0 ? 0 : starCount;
        for (int i = 0; i < starCount; ++i) {
            ((ImageView) getChildAt(i)).setImageDrawable(starFillDrawable);
            if (animation) {
                ScaleAnimation sa = new ScaleAnimation(0, 0, 1, 1);
                getChildAt(i).startAnimation(sa);
            }
        }
        for (int i = this.starCount - 1; i >= starCount; --i) {
            ((ImageView) getChildAt(i)).setImageDrawable(starEmptyDrawable);
        }
    }

    public int getStarCount() {
        return mStarCount;
    }

    public void setStarFillDrawable(Drawable starFillDrawable) {
        this.starFillDrawable = starFillDrawable;
    }

    public void setStarEmptyDrawable(Drawable starEmptyDrawable) {
        this.starEmptyDrawable = starEmptyDrawable;
    }

    public void setStarCount(int startCount) {
        this.starCount = startCount;
    }

    public void setStarImageSize(float starImageSize) {
        this.starImageSize = starImageSize;
    }

    public void setBindObject(Object bindObject) {
        this.bindObject = bindObject;
    }

/**
*这个回调，可以获取到用户评价给出的星星等级
*/
    public void setOnRatingListener(OnRatingListener onRatingListener) {
        this.onRatingListener = onRatingListener;
    }
}

值得注意的是，需要在attr文件中自定义几个styleable属性样式：

<declare-styleable name="RatingBarView">

        <attr name="starImageSize" format="dimension"/>
        <attr name="starCount" format="integer"/>
        <attr name="starEmpty" format="reference"/>
        <attr name="starFill" format="reference"/>

    </declare-styleable>

剩下的几个styleable，是系统提供的，查找的时候，发现直接通过我们定义的这个styleable映射到了系统的styleable资源去了。

使用：
xml中：

<com.family.heyqun.moudle_home_page.tool.RatingBarView
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/custom_ratingbar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            app:starCount="5"

            app:starEmpty="@drawable/staroff"
            app:starFill="@drawable/staron"
            app:starImageSize="50dp" />

在MainActivity中：

int level=0;
RatingBarView custom_ratingbar=(RatingBarView)findViewById(R.id.ratingbar);

custom_ratingbar
                .setOnRatingListener(new RatingBarView.OnRatingListener() {
                    @Override
                    public void onRating(Object bindObject, int ratingScore) {
                        Toast.makeText(FeedBackEvaluateActivity.this,                               String.valueOf(ratingScore), Toast.LENGTH_SHORT)
                                .show();
                        level = ratingScore;
                    }
                });