好久没有写博客了,今天分享一个用CheckBox实现自定义的Ratingbar,最近在一个小项目中用到了评价的界面,是用星星评价滴,用了Android原生的Ratingbar,发现丑的一逼,而且自带的Ratingbar放进布局中很难调整,不是星星小了,就是大了,星星之内的边距也好难调整。
突然间想到之前看过一个titlebar的例子,瞬间有了灵感,何不自己写一个,又好看,又能满足自己的需求。这个例子的灵感来源于此篇博客Android自定义View之TitleBar,通用标题栏。谢谢这位兄台的博客哈,这里实现主要用了方法二的思路。
首先还是在说说思路吧。
步骤1:自定义个布局文件rating_bar.xml,创建在水平方向上的五个CheckBox,通过属性调整,将CheckBox设置成我们想要的效果。
步骤2:自定义一个RatingBar类继承LinearLayout,在构造函数中,初始化布局文件,同时设置Checkbox的一系列监听事件和逻辑处理。
步骤3: 将自定义RatingBar控件引入到主布局文件中即可,在activity中实现Ratingbar的数量回调接口获得评价的星级数。
话不多少了,让我们开始吧。
1.自定义布局文件ratingbar.xml,达到我们想要的效果。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<CheckBox
android:id="@+id/cb1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="15dp"
android:button="@null"
android:background="@drawable/ratingbar_pressed"
android:drawableRight="@drawable/ratingbar_selector" />
<CheckBox
android:id="@+id/cb2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="15dp"
android:button="@null"
android:background="@drawable/ratingbar_pressed"
android:drawableRight="@drawable/ratingbar_selector" />
<CheckBox
android:id="@+id/cb3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="15dp"
android:button="@null"
android:background="@drawable/ratingbar_pressed"
android:drawableRight="@drawable/ratingbar_selector" />
<CheckBox
android:id="@+id/cb4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="15dp"
android:button="@null"
android:background="@drawable/ratingbar_pressed"
android:drawableRight="@drawable/ratingbar_selector" />
<CheckBox
android:id="@+id/cb5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="15dp"
android:button="@null"
android:background="@drawable/ratingbar_pressed"
android:drawableRight="@drawable/ratingbar_selector" />
</LinearLayout>
此时的效果图:
2.CheckBox引用了两个drawable文件,实现选中、未选中的效果
和按下后和释放后的效果。
图片资源:
选中和未选中的效果ratingbar_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- checkbox被选中时候 -->
<item android:drawable="@drawable/star_select" android:state_checked="true"></item>
<!-- checkbox未被选中时候 -->
<item android:drawable="@drawable/star" android:state_checked="false"></item>
</selector>
按下后和释放后的效果ratingbar_pressed.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- checkbox按下时的背景色 -->
<item android:drawable="@color/ratingbar_pressed" android:state_pressed="true"></item>
<!-- checkbox未按下时的背景色 -->
<item android:drawable="@color/ratingbar_unpressed" android:state_pressed="false"></item>
</selector>
3.实现我们自己想要的效果后,接下来将此布局文件封装到自定义的一个RatingBar中。这里定义了一个RatingBar继承了LinearLayout,将定义的布局文件加到这个控件中,在此控件中,实现CheckBox的点击监听星星的变化,星星的变化规则是,具体可以看看这个setStarNum()方法。这个效果和微信中京东购物后的评价效果是一样滴。我这里主要用接口回调实现了获得星星的个数。关于这个自定控件,你自己可以扩展一下,比如:动态设置星星支持的数量,改变星星的图片颜色,调整边距之类滴。我这就抛砖引玉一下。如果你修改的更好,通知我一下,让我学习学习。
package org.lxqljc.view;
import org.lxqljc.customratingbar.R;
import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.CheckBox;
import android.widget.LinearLayout;
/**
*
* @author lxqljc
*
*/
public class MyRatingBar extends LinearLayout{
private CheckBox cb1;
private CheckBox cb2;
private CheckBox cb3;
private CheckBox cb4;
private CheckBox cb5;
private int starNum;
private View rootView;
public MyRatingBar(Context context) {
super(context);
init(context);
}
public MyRatingBar(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
public MyRatingBar(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(context);
}
/**
* 初始化布局
*/
private void init(Context context)
{
//加载自定义的checkbox布局
rootView = LayoutInflater.from(context).inflate(R.layout.ratingbar, this);
cb1 = (CheckBox)findViewById(R.id.cb1);
cb2 = (CheckBox)findViewById(R.id.cb2);
cb3 = (CheckBox)findViewById(R.id.cb3);
cb4 = (CheckBox)findViewById(R.id.cb4);
cb5 = (CheckBox)findViewById(R.id.cb5);
//给所有的按钮设置点击事件,记住是点击按钮哦,不是监听变化的按钮,监听变化那个之前试过,貌似区分不了checkbox的id
cb1.setOnClickListener(new MyOnClickListener());
cb2.setOnClickListener(new MyOnClickListener());
cb3.setOnClickListener(new MyOnClickListener());
cb4.setOnClickListener(new MyOnClickListener());
cb5.setOnClickListener(new MyOnClickListener());
//设置默认选择四星
setStarNum(4);
}
/**
* 按钮监听事件
*/
class MyOnClickListener implements OnClickListener
{
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.cb1:
//选择第一个星
setStarNum(1);
starNum = 1;
break;
case R.id.cb2:
//选择第两个星
setStarNum(2);
starNum = 2;
break;
case R.id.cb3:
//选择第三个星
setStarNum(3);
starNum = 3;
break;
case R.id.cb4:
//选择第四个星
setStarNum(4);
starNum = 4;
break;
case R.id.cb5:
//选择第五个星
setStarNum(5);
starNum = 5;
break;
default:
break;
}
//接口回调
onStarChecked.getStarNum(starNum,rootView);
}
}
/**
* 点击后设置星星数
*/
private void setStarNum(int num)
{
boolean b1 = false;
boolean b2 = false;
boolean b3 = false;
boolean b4 = false;
boolean b5 = false;
switch (num) {
case 1:
b1 = true;
break;
case 2:
b1 = true;
b2 = true;
break;
case 3:
b1 = true;
b2 = true;
b3 = true;
break;
case 4:
b1 = true;
b2 = true;
b3 = true;
b4 = true;
break;
case 5:
b1 = true;
b2 = true;
b3 = true;
b4 = true;
b5 = true;
break;
default:
break;
}
cb1.setChecked(b1);
cb2.setChecked(b2);
cb3.setChecked(b3);
cb4.setChecked(b4);
cb5.setChecked(b5);
}
private OnStarChecked onStarChecked;
/**
* @param 实现接口的对象监听
*/
public void setOnStarChecked(OnStarChecked onStarChecked)
{
this.onStarChecked = onStarChecked;
}
/**
* 获得星级数量接口回调
*/
public interface OnStarChecked
{
/**
*
* @param num 点击的星星数量
* @param v 点击星星的父控件
*/
void getStarNum(int num,View view);
}
}
4.定义好自己的RatingBar后,接下来时改使用的时候了。
新建一个MainActivity.java
package org.lxqljc.customratingbar;
import org.lxqljc.view.MyRatingBar;
import org.lxqljc.view.MyRatingBar.OnStarChecked;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.EditText;
public class MainActivity extends Activity implements OnStarChecked{
private EditText etEvaluate;
private MyRatingBar rb_speed;
private MyRatingBar rb_standard;
private MyRatingBar rb_attitude;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
etEvaluate = (EditText)findViewById(R.id.etEvaluate);
rb_speed = (MyRatingBar)findViewById(R.id.rb_speed);
rb_standard = (MyRatingBar)findViewById(R.id.rb_standard);
rb_attitude = (MyRatingBar)findViewById(R.id.rb_attitude);
rb_speed.setOnStarChecked(this);
rb_standard.setOnStarChecked(this);
rb_attitude.setOnStarChecked(this);
}
@Override
public void getStarNum(int num,View rootView) {
String tip = null;
switch (rootView.getId()) {
case R.id.rb_speed:
tip = "开通速度:";
break;
case R.id.rb_standard:
tip = "服务规范:";
break;
case R.id.rb_attitude:
tip = "服务态度:";
break;
default:
break;
}
etEvaluate.setText(tip+num+"星级");
}
}
5.加载主布局文件activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="30dp"
android:background="#008AD4"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingBottom="10dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="10dp" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:text="总体评价 "
android:textSize="16sp" />
<EditText
android:id="@+id/etEvaluate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@null"
android:lines="3" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#eeeeee" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingBottom="20dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="20dp" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:text="开通速度 "
android:textSize="16sp" />
<org.lxqljc.view.MyRatingBar
android:id="@+id/rb_speed"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#eeeeee" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingBottom="20dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="20dp" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:text="服务规范 "
android:textSize="16sp" />
<org.lxqljc.view.MyRatingBar
android:id="@+id/rb_standard"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#eeeeee" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingBottom="20dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="20dp" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:text="服务态度 "
android:textSize="16sp" />
<org.lxqljc.view.MyRatingBar
android:id="@+id/rb_attitude"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#eeeeee" />
</LinearLayout>
</LinearLayout>
大功告成。
能自己写出一个小玩意还是挺有成就感的一件事,之前一直想写博客,苦于自己编程基础太渣,加上语言组织能力有限,也不知道表达的请不清晰,如果代码中有什么不足的地方,请指导一下。我会再接再励滴。
分享下源码连接:
RatingBar 密码: r2is