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

发布了11 篇原创文章 · 获赞 24 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/feng40492459/article/details/72528807