本文出自阿钟的博客,点击可跳转至原文章
最近恶补关于自定义这一块的知识,以提高提高自己的能力,之前看到个评分控件,感觉挺简单于是抽空实现了下并学习了下人家的实现方法,拖到至今才来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!