自定義LinearLayout實現RatingBar效果，打造一個評分控件

本文出自阿鐘的博客，點擊可跳轉至原文章

最近惡補關於自定義這一塊的知識，以提高提高自己的能力，之前看到個評分控件，感覺挺簡單于是抽空實現了下並學習了下人家的實現方法，拖到至今纔來csdn記錄下，在這裏的話就偷個懶複製下阿鍾的博客當做記錄吧 !qaq

---

一：我們來看下實現的效果圖

二：總的來說這個自定義還是很簡單的，大致步驟如下：

定義一些佈局屬性

1. extends LinearLayout在設置Orientation爲HORIZONTAL並將Gravity設置爲CENTER

2. 代碼動態創建5個ImageView（當然這裏可以不止5個）並添加至LinearLayout中

3. 點擊事件的邏輯操作

4. 點擊之後評分的回調，便於通知服務器

5. 就這四步是不是so easy

三：在values文件夾中創建一個attrs文件用來定義一些佈局屬性

<declare-styleable name="a_zhon">
    <!--填充圖片-->
    <attr name="star_img" format="reference" />
    <!--默認圖片-->
    <attr name="unstar_img" format="reference" />
    <!--圖片寬度-->
    <attr name="image_width" format="dimension" />
    <!--圖片高度-->
    <attr name="image_height" format="dimension" />
    <!--圖片之間的間距-->
    <attr name="image_padding" format="dimension" />
    <!--圖片總數-->
    <attr name="star_count" format="integer" />
    <!--填充的圖片數量-->
    <attr name="star" format="integer" />
    <!--是否可以點擊-->
    <attr name="clickable" format="boolean" />
</declare-styleable>

四：既然我們自定義了一些佈局屬性，那在代碼中肯定是要用到的現在我們來讀取自定義屬性

TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.a_zhon);
Drawable starDrawable = array.getDrawable(R.styleable.a_zhon_star_img);
Drawable unStarDrawable = array.getDrawable(R.styleable.a_zhon_unstar_img);
float width = array.getDimension(R.styleable.a_zhon_image_width, dip2px(context, 36));
float height = array.getDimension(R.styleable.a_zhon_image_height, dip2px(context, 36));
float imagePadding = array.getDimension(R.styleable.a_zhon_image_padding, 5);
boolean clickable = array.getBoolean(R.styleable.a_zhon_clickable, true);
int starCount = array.getInt(R.styleable.a_zhon_star_count, 5);
int star = array.getInt(R.styleable.a_zhon_star, 0);
//TypedArray需要被回收釋放資源
array.recycle();

五：爲了代碼的高複用性，在這裏創建一個方法用來創建顯示的ImageView

 /**
     * 創建默認的ImageView
     *
     * @param context 上下文
     * @param width   寬度
     * @param height  高度
     * @return ImageView
     */
    private ImageView getImageView(Context context, float width, float height) {
        ImageView view = new ImageView(context);
        ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(Math.round(width), Math.round(height));
        view.setLayoutParams(params);
        view.setPadding(dip2px(context, imagePadding), 0, 0, 0);
        if (unStarDrawable == null) {
            throw new NullPointerException("請先設置默認的圖片資源!");
        } else {
            view.setImageDrawable(unStarDrawable);
        }
        return view;
    }

爲了適配廣大機型，這裏將dip轉爲手機對應的像素了

/**
 * 根據手機的分辨率從 dip 的單位 轉成爲 px(像素)
 */
private int dip2px(Context context, float dpValue) {
    final float scale = context.getResources().getDisplayMetrics().density;
    return (int) (dpValue * scale + 0.5f);
}

六：在寫一個改變ImageView背景圖片的方法，當用戶點擊可以改變當前星級。

/**
 * 填充圖片
 *
 * @param i 點擊的圖片下標
 */
private void fillingImage(int i) {
    //首先將所有的背景都設置爲默認背景圖片
    for (int j = 0; j < starCount; j++) {
        ImageView view = (ImageView) getChildAt(j);
        if (unStarDrawable == null) {
            throw new NullPointerException("請先設置默認的圖片資源!");
        } else {
            view.setImageDrawable(unStarDrawable);
        }
    }
    //填充選中的等級
    for (int j = 0; j <= i; j++) {
        ImageView view = (ImageView) getChildAt(j);
        if (starDrawable == null) {
            throw new NullPointerException("請先設置填充的圖片資源!");
        } else {
            view.setImageDrawable(starDrawable);
        }
    }
}

七：啥都寫好了接下來就so easy，只需要在初始化中調用這兩個函數即可

for (int i = 0; i < starCount; i++) {
    ImageView view = getImageView(context, width, height);
    //設置ImageView的下標
    view.setTag(i);
    addView(view);
    //可以點擊評分
    if (clickable)
        view.setOnClickListener(this);
}
if (star != 0) {
    if (star <= starCount) {
        //填充圖片
        fillingImage(star - 1);
    } else {
        throw new RuntimeException("star填充數量不能大於總數star_count!");
    }
}

八：用戶點擊調整評分數量

   /**
     * 圖片的點擊事件
     */
    @Override
    public void onClick(View v) {
        fillingImage((Integer) v.getTag());
    }

九：使用方法：

1. 在build.gradle中添加依賴

compile 'com.azhon:ratingbar:1.0.0'

2. 佈局使用

<com.azhong.rattingbar.RatingBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    a_zhon:clickable="true"
    a_zhon:image_height="36dp"
    a_zhon:image_padding="3dp"
    a_zhon:image_width="36dp"
    a_zhon:star="0"
    a_zhon:star_count="5"
    a_zhon:star_img="@mipmap/star"
    a_zhon:unstar_img="@mipmap/unstar" />

---

閱讀完整代碼可前往終點站查閱，到這裏車就開完了~~有什麼問題歡迎留言。源碼地址

另外想學習小夥伴可以加羣！大家一起討論哈哈！一起開車！羣號：188089649！