1. 程式人生 > >Android 自定義評價Dialog(RatingBar的使用和EditText的剩餘字數顯示)

Android 自定義評價Dialog(RatingBar的使用和EditText的剩餘字數顯示)

先看一下效果圖


主要介紹一下 五角星評分控制元件(RatingBar) 和 EditText下方剩餘字數的顯示

RatingBar的使用

<RatingBar
            android:id="@+id/ratingbar"
            style="@style/MyRatingBar"                //自定義屬性  下文有詳細解釋
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="15dp"
            android:isIndicator="false"                     //false 則可以通過觸控式螢幕幕 改變RatingBar的進度  true則不可點選


            android:numStars="5"//總共有多少個★
            android:rating="0"//預設顯示幾個
            android:stepSize="0.5">//以幾個星星 為一個單位 可設定小數

</RatingBar>

在styles.xml 下設定一下RatingBar 是屬性

    <style name="MyRatingBar" parent="@android:style/Widget.RatingBar">

//自定義 drawable  主要設定選中和未選中顯示的小星星的顏色
        <item name="android:progressDrawable">@drawable/myratingbar</item>  

//設定星星的大小
        <item name="android:minHeight">20dip</item>
        <item name="android:maxHeight">20dip</item>
        <item name="android:isIndicator">true</item>
    </style>

自定義的drawable

<?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/star0"/>

//未選中時的星星
<item
android:id="@+android:id/secondaryProgress"
android:drawable="@drawable/star0">
</item>

//選擇時的⭐
<item
android:id="@+android:id/progress"
android:drawable="@drawable/star_full"/>
</layer-list>

根據選中星星的個數  動態改變後面 Textview的評價

        rBar.setOnRatingBarChangeListener(new RatingBar.OnRatingBarChangeListener() {
            @Override
            public void onRatingChanged(RatingBar ratingBar, float v, boolean b) {
                if(rBar.getRating() <= 1){
                    tv_title.setText("很差");
                }else if(rBar.getRating() <= 2){
                    tv_title.setText("差");
                }else if(rBar.getRating() <= 3){
                    tv_title.setText("一般");
                }else if(rBar.getRating() <= 4){
                    tv_title.setText("好");
                }else if(rBar.getRating() <= 5){
                    tv_title.setText("很好");
                }
            }
        });

EditText部分

簡單的一個佈局

    <RelativeLayout
        android:id="@+id/rl_evaluation"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="3dp"
        android:background="@drawable/bg_evaluation_edittext"  //外面的矩形框
        android:orientation="vertical">
        <EditText
            android:id="@+id/et_evaluation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="20dp"
            android:background="@null"
            android:hint="填寫評價"
            android:maxLength="100"    //預設最多100個字元
            android:padding="5dp"
            android:text=""
            android:textSize="16sp" />
        <TextView
            android:id="@+id/tv_num"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="5dp"
            android:layout_marginRight="5dp"
            android:text="剩餘字數:100" 
            android:textColor="@color/gray"
            android:textSize="13sp" />
    </RelativeLayout>

對EditText進行監聽 

int maxNum = 100;

et_evaluation.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {

            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {

            }

            @Override
            public void afterTextChanged(Editable s) {
                int num = maxNum - s.length();
                if(num>=0){
                    tv_num.setText("剩餘字數:"+ (num));
                }else {
                    tv_num.setText("剩餘字數:"+ 0);
                }

            }
        });

簡單介紹一下 dialog

final AlertDialog dialog = new AlertDialog.Builder(this).create();
        dialog.show();

        dialog.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE | WindowManager.LayoutParams.FLAG_ALT_FOCUSABLE_IM);

//為了彈出軟鍵盤
        dialog.getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_VISIBLE);
        Window win = dialog.getWindow();
        win.setContentView(R.layout.dialog_evaluation);

       定義dialog上的幾個控制元件

對小星星  EditText 取消 和 確定按鈕設定監聽