自定义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！