Android UI(RatingBar)详解

目录
    1.概述与应用场景
    2.常用的xml属性和方法
    3.简单实用
    4.自定义RatingBar
    
1.概述与应用场景
    RatingBar(评分条)他是progressbar和seekbar的扩展，用星型来表示评分等级，同时它有两种风格，一种可与用户交互，另一种
只是用于指示，不提供交互（后面会提及）。

2.常用的xml属性和方法
 2.1)常用xml属性

    android:isIndicator="false":设置是否为指示器，true表示不可与用户交互
    android:rating="":默认的评分数
    android:stepSize="":步长（点击一次增长的长度）
    android:numStars="":表示星星的数量，超出显示范围是他会以最大数量显示，然后把星星分成numStars/stepSize份
    style="?android:ratingBarStyleSmall|?android:ratingBarStyleIndicator|?android:ratingBarStyle"：风格

 2.2)常用方法

 
        //设置是否为指示器模式，及不可交互
        ratingBar1.setIsIndicator(false);
        //设置评分条的最大范围
        ratingBar1.setMax(20);
        //设置星星数量
        ratingBar1.setNumStars(10);
        //设置当前等级
        ratingBar1.setRating(1);
        //设置步长
        ratingBar1.setStepSize(1);
        //获取星星数量
        int num = ratingBar.getNumStars();
        //获取步长
        float step = ratingBar.getStepSize();
        //获取当前评分,与参数rating一致
        float currentRating = ratingBar.getRating();

        
3.简单实用
    3.1)布局文件

    
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.ratingbar.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="SimpleRatingBar:"
        android:id="@+id/SimpleRatingBar" />
    <RatingBar
        android:layout_marginTop="10dp"
        style="?android:ratingBarStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:isIndicator="false"
        android:rating="1.0"
        android:stepSize="1.0"
        android:numStars="5"
        android:id="@+id/ratingBar" />
    <TextView
        android:layout_marginTop="10dp"
        android:layout_below="@+id/ratingBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="SmallRatingBar:"
        android:id="@+id/SmallRatingBar" />
    <RatingBar
        android:layout_marginTop="10dp"
        android:layout_below="@+id/SmallRatingBar"
        style="?android:ratingBarStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/ratingBar1" />
    <TextView
        android:layout_marginTop="10dp"
        android:layout_below="@+id/ratingBar1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ratingBarStyleIndicator:"
        android:id="@+id/IndicatorRating" />
    <RatingBar
        android:layout_below="@+id/IndicatorRating"
        android:layout_marginTop="10dp"
        style="?android:ratingBarStyleIndicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:rating="1.0"
        android:numStars="5"
        android:id="@+id/ratingBar2" />
    <TextView
        android:layout_marginTop="10dp"
        android:layout_below="@+id/ratingBar2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:id="@+id/textView" />

</RelativeLayout>

   
    3.2)java类文件

package com.example.ratingbar;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.widget.RatingBar;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    private RatingBar ratingBar,ratingBar1;
    private TextView textView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //初始化控件
        ratingBar = (RatingBar) findViewById(R.id.ratingBar);
        ratingBar1 = (RatingBar) findViewById(R.id.ratingBar1);
        textView = (TextView) findViewById(R.id.textView);
        //ratingbar的常用方法
        //设置是否为指示器模式，及不可交互
        ratingBar1.setIsIndicator(false);
        //设置评分条的最大范围
        ratingBar1.setMax(20);
        //设置星星数量
        ratingBar1.setNumStars(10);
        //设置当前等级
        ratingBar1.setRating(1);
        //设置步长
        ratingBar1.setStepSize(1);
        //设置监听器
        ratingBar.setOnRatingBarChangeListener(new RatingBar.OnRatingBarChangeListener() {
            @Override
            public void onRatingChanged(RatingBar ratingBar, float rating, boolean fromUser) {
                //获取星星数量
                int num = ratingBar.getNumStars();
                //获取步长
                float step = ratingBar.getStepSize();
                //获取当前评分,与参数rating一致
               // float currentRating = ratingBar.getRating();
                Log.d("debug","num="+num+",step="+step+",rating="+rating);
                textView.setText(""+rating);
            }
        });
    }
}

 
    3.3)效果截图

4.自定义RatingBar
    4.1)导入两张分别为选择和未选中的图片rating.png rating_selected.png
    
    4.2)定义rating_layer.xml
   

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background"
    android:drawable="@drawable/rating" />
<item android:id="@android:id/secondaryProgress"
    android:drawable="@drawable/rating" />
<item android:id="@android:id/progress"
    android:drawable="@drawable/rating_selected" />
</layer-list>

   
    4.3)在styles.xml实现自定义的RatingBar style
 

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
    <!--
    注意：@android:style/Widget.Material.RatingBar必须minSdkVersion 21及以上
      才能用，目前由于需要向下兼容的问题也不太推荐使用，这里我们用@android:style/Widget.RatingBar
      或其他style
    -->
    <style name="MyRatingBarStyle" parent="@android:style/Widget.RatingBar">
        <item name="android:progressDrawable">@drawable/rating_layer</item>
        <item name="android:minHeight">48dp</item>
        <item name="android:maxHeight">48dp</item>
    </style>

</resources>

    
    4.4)主布局activity_second中应用style  

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.ratingbar.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="SimpleRatingBar:"
        android:id="@+id/SimpleRatingBar" />
    <RatingBar
        android:layout_marginTop="20dp"
        style="@style/MyRatingBarStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:isIndicator="false"
        android:rating="1.0"
        android:stepSize="1.0"
        android:numStars="6"
        android:id="@+id/ratingBar" />

</RelativeLayout>

  
    4.5)主Activity的java类SecondActivity.java
    

package com.example.ratingbar;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.widget.RatingBar;
import android.widget.TextView;
import android.widget.Toast;

public class SecondActivity extends AppCompatActivity {
    private RatingBar ratingBar,ratingBar1;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_second);
        //初始化控件
        ratingBar = (RatingBar) findViewById(R.id.ratingBar);

        //设置监听器
        ratingBar.setOnRatingBarChangeListener(new RatingBar.OnRatingBarChangeListener() {
            @Override
            public void onRatingChanged(RatingBar ratingBar, float rating, boolean fromUser) {
                Toast.makeText(SecondActivity.this,"点击了RatingBar",Toast.LENGTH_SHORT).show();
            }
        });
    }
}

    4.6)效果截图