美文网首页
RatingBar Android星星评分控件

RatingBar Android星星评分控件

作者: 哈喽樊樊 | 来源:发表于2017-07-28 15:44 被阅读0次

    简述:

    一个的自定义的Android评分控件(极简洁,易用)!
    可更改图标,大小,间距,可选半图模式,点击模式,拖动模式,另外有回调监听。

    实现:(直接ctrl +c,v)

    在project 的 build.gradle 下:(studio现在会默认实现)

    allprojects {
      repositories {
            jcenter()
        }
    }
    

    在module 的 build.gradle 下:

    compile 'com.xl.ratingbar:ratingbar:0.1.1'
    

    在activity_main XML中:

        <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/activity_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:gravity="center_horizontal"
        tools:context="com.xl.ratingbar.MainActivity">
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="80dp"
            android:textSize="15sp"
            android:textColor="#4D4D4D"
            android:text="@string/bar1_name"
            />
    
        <com.xl.ratingbar.MyRatingBar
            android:id="@+id/bar1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            app:clickable="true"
            app:starCount="5"
            app:starNum="1"
            app:halfstart="true"
            app:starEmpty="@mipmap/star_empty"
            app:starHalf="@mipmap/star_half"
            app:starFill="@mipmap/star_full"
            app:starImageHeight="30dp"
            app:starImageWidth="30dp"
            app:starImagePadding="15dp"
            >
    
        </com.xl.ratingbar.MyRatingBar>
    
        <TextView
            android:id="@+id/text1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:textSize="15sp"
            android:textColor="#4D4D4D"
            android:text="@string/score"
            />
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="30dp"
            android:textSize="15sp"
            android:textColor="#4D4D4D"
            android:text="@string/bar2_name"
            />
    
        <com.xl.ratingbar.MyRatingBar
            android:id="@+id/bar2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            app:touchable="true"
            app:clickable="false"
            app:starCount="5"
            app:starNum="2"
            app:halfstart="true"
            app:starEmpty="@mipmap/fat_star_empty"
            app:starHalf="@mipmap/fat_star_half"
            app:starFill="@mipmap/fat_star_full"
            app:starImageHeight="30dp"
            app:starImageWidth="30dp"
            app:starImagePadding="15dp"
            >
        </com.xl.ratingbar.MyRatingBar>
    
        <TextView
            android:id="@+id/text2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:textSize="15sp"
            android:textColor="#4D4D4D"
            android:text="@string/score"
            />
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="30dp"
            android:textSize="15sp"
            android:textColor="#4D4D4D"
            android:text="@string/bar3_name"
            />
    
        <com.xl.ratingbar.MyRatingBar
            android:id="@+id/bar3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            app:touchable="true"
            app:starCount="5"
            app:starNum="3"
            app:halfstart="false"
            app:starEmpty="@mipmap/amimia"
            app:starFill="@mipmap/smiling"
            app:starImageHeight="30dp"
            app:starImageWidth="30dp"
            app:starImagePadding="15dp"
            >
        </com.xl.ratingbar.MyRatingBar>
    
        <TextView
            android:id="@+id/text3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:textSize="15sp"
            android:textColor="#4D4D4D"
            android:text="@string/comment"
            />
    
    </LinearLayout>
    

    MainActivity :

    package com.xl.ratingbar;
    
    import android.graphics.drawable.Drawable;
    import android.support.v4.content.ContextCompat;
    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;
    import android.widget.TextView;
    
    public class MainActivity extends AppCompatActivity implements MyRatingBar.OnRatingChangeListener {
    
        private TextView text1;
        private TextView text2;
        private TextView text3;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            text1 = (TextView)findViewById(R.id.text1);
            text2 = (TextView)findViewById(R.id.text2);
            text3 = (TextView)findViewById(R.id.text3);
    
            MyRatingBar bar1 = (MyRatingBar)findViewById(R.id.bar1);
            MyRatingBar bar2 = (MyRatingBar)findViewById(R.id.bar2);
            MyRatingBar bar3 = (MyRatingBar)findViewById(R.id.bar3);
    
            bar1.setOnRatingChangeListener(this);
            bar2.setOnRatingChangeListener(this);
            bar3.setOnRatingChangeListener(this);
        }
    
        @Override
        public void onRatingChange(MyRatingBar bar, float RatingCount) {
            switch (bar.getId()) {
                case R.id.bar1:
                    text1.setText(getResources().getString(R.string.score).concat(String.valueOf(RatingCount)));
                    break;
                case R.id.bar2:
                    text2.setText(getResources().getString(R.string.score).concat(String.valueOf(RatingCount)));
                    break;
                case R.id.bar3:
                    changeByStar(bar,RatingCount,text3);
                    break;
            }
        }
    
        private void changeByStar(MyRatingBar bar,float star,TextView textView){
            Drawable amimia = ContextCompat.getDrawable(this, R.mipmap.amimia);
            Drawable crying = ContextCompat.getDrawable(this, R.mipmap.crying);
            Drawable smiling = ContextCompat.getDrawable(this, R.mipmap.smiling);
    
            if (star == 1.0f) {
                chage(bar, textView, amimia, crying, getResources().getString(R.string.Worst));
            }else if (star == 2.0f) {
                chage(bar, textView, amimia, crying, getResources().getString(R.string.Bad));
            }else if (star == 3.0f) {
                chage(bar, textView, amimia, smiling, getResources().getString(R.string.Good));
            }else if (star == 4.0f) {
                chage(bar, textView, amimia, smiling, getResources().getString(R.string.Better));
            }else if (star == 5.0f) {
                chage(bar, textView, amimia, smiling, getResources().getString(R.string.Best));
            }
        }
    
        private void chage(MyRatingBar bar, TextView textView, Drawable empty, Drawable full, String string) {
            textView.setText(string);
            bar.setStarEmptyDrawable(empty);
            bar.setStarFillDrawable(full);
        }
    }
    
    

    OK,看效果!(记得 github star一下呦。)

    初始化.jpg
    选择.jpg

    属性:

    image.png

    注意 :

    • touchable、clickable 同时为true 时 默认为拖动模式
    • starHalf 不是半个图,而是一半选择状态一般为选择状态,例:
    fat_star_half.jpg

    相关文章

      网友评论

          本文标题:RatingBar Android星星评分控件

          本文链接:https://www.haomeiwen.com/subject/uxjxlxtx.html