先上图:
一开始让我自定义控件我是拒绝的,因为android很早以前就有一个控件ratingbar,但是设置样式的时候我发现把图片设置小一点就显示不全,一直找不到解办法!(可以设置系统的自带的小样式),反正就是无法任意的改变星星的大小!反正很坑啊。
下面来描述这个控件需要实现的功能:
1:水平放置,布局文件里面可以设置星星图标和背景星星,宽高,边距,星星数量,当前星级
2;实现点击效果
3:添加点击的监听器
下面实现第一步:
定义属性
<!--自定星级控件-->
<declare-styleable name="StarView">
<attr name="mImageWidth" format="dimension"/>
<attr name="mImageHeight" format="dimension" />
<attr name="mDefaultImageId" format="reference" />
<attr name="mClickImageId" format="reference" />
<attr name="mMargin" format="dimension" />
<attr name="mStarNum" format="integer" />
<attr name="mStarChoose" format="integer" />
</declare-styleable>

本控件继承线性布局的starbar,代码过于简单,直接贴出来

package cn.ihealthcom.ihealth.widget;

import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout; import cn.ihealthcom.ihealth.R; /**
* 简单实现星级评选控件:内部填充多个ImageView
* 继承LinearLayout 设置水平方向
* Created by qiuchunjia on 2016/4/12.
*/
public class StarView extends LinearLayout {
private int mImageWidth = ; //图片设置默认的宽度
private int mImageHeight = ; //图片设置默认的高度
private int mDefaultImageId = R.drawable.ic_launcher;
private int mClickImageId = R.drawable.ic_launcher;
private int mMargin = ; //图片之间默认的margin
private int mStarNum = ; //星星默认的个数
private int mStarChoose = ; //默认默认是三颗星
private boolean isClick = true; private OnStarItemClickListener mStarItemClickListener; public StarView(Context context, AttributeSet attrs) {
super(context, attrs);
initData(context, attrs);
} public StarView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initData(context, attrs);
} /**
* 初始化数据
*
* @param context
* @param attrs
*/
private void initData(Context context, AttributeSet attrs) {
this.setOrientation(HORIZONTAL); //设置水平
TypedArray a = context.getTheme().obtainStyledAttributes(attrs,
R.styleable.StarView, , );
int n = a.getIndexCount(); for (int i = ; i < n; i++) {
int attr = a.getIndex(i);
switch (attr) {
case R.styleable.StarView_mImageWidth:
mImageWidth = (int) a.getDimension(attr, mImageWidth);
break;
case R.styleable.StarView_mImageHeight:
mImageHeight = (int) a.getDimension(attr, mImageHeight);
break;
case R.styleable.StarView_mDefaultImageId:
mDefaultImageId = a.getResourceId(attr, mDefaultImageId);
break;
case R.styleable.StarView_mClickImageId:
mClickImageId = a.getResourceId(attr, mClickImageId);
break;
case R.styleable.StarView_mMargin:
mMargin = (int) a.getDimension(attr, mMargin);
break;
case R.styleable.StarView_mStarNum:
mStarNum = a.getInt(attr, mStarNum);
break;
case R.styleable.StarView_mStarChoose:
mStarChoose = a.getInt(attr, mStarChoose);
break;
}
}
a.recycle(); } @Override
protected void onFinishInflate() {
super.onFinishInflate();
setStarNum(mStarNum); //设置个数
} /**
* 设置星星数量
*
* @param number
*/
public void setStarNum(int number) {
if (number <= ) {
try {
throw new Exception("设置的数据不能小于等于零");
} catch (Exception e) {
e.printStackTrace();
}
}
this.removeAllViews(); //清空所有view
for (int i = ; i < number; i++) {
ImageView imageView = new ImageView(getContext());
final LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(mImageWidth, mImageHeight);
layoutParams.leftMargin = mMargin;
layoutParams.rightMargin = mMargin;
imageView.setLayoutParams(layoutParams);
this.addView(imageView);
imageView.setImageResource(mDefaultImageId);
setStarOnClick(imageView, i);
}
setCurrentChoose(mStarChoose); //设置当前选择
} /**
* 设置点击事件
*
* @param imageView
* @param i
*/
private void setStarOnClick(final ImageView imageView, final int i) {
if (imageView != null) {
imageView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
resetDefaultImage();
setCurrentChoose(i+);
if (mStarItemClickListener != null) {
mStarItemClickListener.onItemClick(imageView, i);
}
}
});
}
} /**
* 设置当前选择
*
* @param index
*/
private void setCurrentChoose(int index) {
if(isClick){
for (int i = ; i < index; i++) {
ImageView imageView = (ImageView) getChildAt(i);
imageView.setImageResource(mClickImageId);
}
}
} /**
* 重置默认为默认的图片
*/
private void resetDefaultImage() {
int cNum = getChildCount();
for (int i = ; i < cNum; i++) {
ImageView imageView = (ImageView) getChildAt(i);
imageView.setImageResource(mDefaultImageId);
}
} public int getImageWidth() {
return mImageWidth;
} public void setImageWidth(int mImageWidht) {
this.mImageWidth = mImageWidht;
} public int getImageHeight() {
return mImageHeight;
} public void setImageHeight(int mImageHeight) {
this.mImageHeight = mImageHeight;
} public int getDefaultImageId() {
return mDefaultImageId;
} public void setDefaultImageId(int resouceId) {
this.mDefaultImageId = mDefaultImageId;
} public int getClickImageId() {
return mClickImageId;
} public void setClickImageId(int mClickImageId) {
this.mClickImageId = mClickImageId;
} public OnStarItemClickListener getStarItemClickListener() {
return mStarItemClickListener;
} public void setmStarItemClickListener(OnStarItemClickListener mStarItemClickListener) {
this.mStarItemClickListener = mStarItemClickListener;
} /**
* 星星点击事件
*/
public interface OnStarItemClickListener {
public void onItemClick(View view, int pos);
} }

代码中只实现了ratingbar常用的功能,能满足项目的需求.xml使用

<cn.ihealthcom.ihealth.widget.StarView
android:layout_alignParentRight="true"
android:layout_marginLeft="5dp"
android:layout_marginRight="10dp"
android:id="@+id/start_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
fresco:mClickImageId="@mipmap/star_y"
fresco:mDefaultImageId="@mipmap/star_n"
fresco:mImageHeight="@dimen/margin_15dp"
fresco:mImageWidth="@dimen/margin_15dp"
fresco:mMargin="2dp"
fresco:mStarChoose=""
fresco:mStarNum="" />
下面来看看同一张切图的设置不同的宽高显示的效果
代码和功能都比较简单就不做过多的解释了

Android自定义控件简单实现ratingbar效果的更多相关文章

  1. Android自定义控件练手——波浪效果

    这一次要绘制出波浪效果,也是小白的我第一次还望轻喷.首先当然是展示效果图啦: 一.首先来说说实现思路. 想到波浪效果,当然我第一反应是用正余弦波来设计啦(也能通过贝塞尔曲线,这里我不提及这个方法但是在 ...

  2. android自定义控件(5)-实现ViewPager效果

    对于系统的ViewGroup我们已经是十分熟悉了,最常用的LinearLayout和RelativeLayout几乎是天天要打交道,下面我们就来看看,如何一步一步将其实现: 一.首先当然也是最通常的新 ...

  3. Android自定义控件实战——水流波动效果的实现WaveView

    转载请声明出处http://blog.csdn.net/zhongkejingwang/article/details/38556891 水流波动的波形都是三角波,曲线是正余弦曲线,但是Android ...

  4. Android:简单的弹幕效果达到

    首先,效果图.分类似至360检测到的骚扰电话页面: 布局非常easy,上面是一个RelativeLayout,以下一个Button. 功能: (1)弹幕生成后自己主动从右側往左側滚动(Translat ...

  5. android自定义控件(4)-自定义水波纹效果

    一.实现单击出现水波纹单圈效果: 照例来说,还是一个自定义控件,观察这个效果,发现应该需要重写onTouchEvent和onDraw方法,通过在onTouchEvent中获取触摸的坐标,然后以这个坐标 ...

  6. Android 自定义控件实现刮刮卡效果 真的就只是刮刮卡么

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40162163 , 本文出自:[张鸿洋的博客] 很久以前也过一个html5的刮刮卡 ...

  7. Android自定义控件之自定义ViewGroup实现标签云

    前言: 前面几篇讲了自定义控件绘制原理Android自定义控件之基本原理(一),自定义属性Android自定义控件之自定义属性(二),自定义组合控件Android自定义控件之自定义组合控件(三),常言 ...

  8. Android自定义控件之自定义组合控件

    前言: 前两篇介绍了自定义控件的基础原理Android自定义控件之基本原理(一).自定义属性Android自定义控件之自定义属性(二).今天重点介绍一下如何通过自定义组合控件来提高布局的复用,降低开发 ...

  9. android自定义控件实现TextView按下后字体颜色改变

    今天跟大家分享一下Android自定义控件入门,先介绍一个简单的效果TextView,按下改变字体颜色,后期慢慢扩展更强大的功能 直接看图片             第一张是按下后截的图,功能很简单, ...

随机推荐

  1. Eclipse配置class文件输出目录

    1, Eclipse选中项目名称,邮件选中“Build Path”,然后选择“Configure Build Path”--->选择“Source” Tab---->修改"Def ...

  2. WPF Toolkit AutoCompleteBox 实体类绑定 关键字自定义关联搜索匹配

    原文:WPF Toolkit AutoCompleteBox 实体类绑定 关键字自定义关联搜索匹配 WPF Toolkit AutoCompleteBox 实体类绑定 关键字自定义关联搜索匹配 网上的 ...

  3. cocos2dx2.0 与cocos2dx3.1 创建线程不同方式总结

    尽管内容是抄过来的.可是经过了我的验证.并且放在一起就清楚非常多了,cocos2dx版本号常常变化非常大.总会导致这样那样的问题. cocos2dx2.0 中 1. 头文件 #include < ...

  4. Linux之我最常用的20条命令

    Linux之我最常用的20条命令 玩过 Linux的人都会知道, Linux中的命令的确是非常多,但是玩过 Linux的人也从来不会因为 Linux的命令如此之多而烦恼,因为我们只需要掌握我们最常用的 ...

  5. light oj 1094 Farthest Nodes in a Tree(树的直径模板)

    1094 - Farthest Nodes in a Tree problem=1094" style="color:rgb(79,107,114)"> probl ...

  6. pyspark.mllib.feature module

    Feature Extraction Feature Extraction converts vague features in the raw data into concrete numbers ...

  7. Vue Syntax Highlight

    Vue Syntax Highlight https://github.com/vuejs/vue-syntax-highlight

  8. rest_framework 认证功能

    from django.views import View from rest_framework.views import APIView from rest_framework.authentic ...

  9. linux中的raid

    参考文档 http://www.cnblogs.com/ivictor/p/6099807.html 制作raid5 http://blog.51cto.com/11134648/2103384 RA ...

  10. [BZOJ3884] 上帝与集合的正确用法 (欧拉函数)

    题目链接:  https://www.lydsy.com/JudgeOnline/problem.php?id=3884 题目大意: 给出 M, 求 $2^{2^{2^{2^{...}}}}$ % M ...