Android RatingBar結合屬性動畫，快速實現 QQ群男女比例分布圖效果

標籤：ratingbar   屬性點動畫   

RatingBar介紹

RatingBar作為評分組件，它在實現打分功能的時候確實很方便，並結合了手勢觸摸事件；RatingBar 的實質是 ProgressBar ，可以看看他的繼承關係

    　java.lang.Object      　　　android.view.View               　android.widget.ProgressBar     　　              android.widget.AbsSeekBar                          　android.widget.RatingBar

使用過 RatingBar 的朋友都知道，RatingBar 有這樣一個屬性

android:isIndicator="true"

這個屬性的意思是：將 RatingBar 作為指標，也就是不能通過觸摸來改變 RatingBar 的進度，而今天要實現的功能就是將 RatingBar 作為指標，來實現 QQ群中，男女比例分布的動畫效果，先來看看原始效果，QQ上面的效果其實是用 H5頁面實現的。

而我們實現的效果

RatingBar 的使用

RatingBar 的用法，主要掌握其屬性的使用，下面來看看這些屬性分別代表什麼啥意思，

android:progressDrawable

RatingBar顯示的表徵圖，如果不寫這個屬性，則預設為系統內建的

android:isIndicator

RatingBar是否是一個指標（使用者無法變更）

android:numStars

顯示的星型數量，必須是一個整形值，像“100”。

android:rating

預設的評分，必須是浮點類型，像“1.2”。

android:stepSize

評分的步長，必須是浮點類型，像“1.2”。

除了第一個android:progressDrawable，其他都好理解和實現，不過android:progressDrawable我們可以參照系統內建的實現方式來實現
系統下面的實現方式

<?xml version="1.0" encoding="utf-8"?><!-- Copyright (C) 2008 The Android Open Source Project     Licensed under the Apache License, Version 2.0 (the "License");     you may not use this file except in compliance with the License.     You may obtain a copy of the License at          http://www.apache.org/licenses/LICENSE-2.0     Unless required by applicable law or agreed to in writing, software     distributed under the License is distributed on an "AS IS" BASIS,     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     See the License for the specific language governing permissions and     limitations under the License.--><layer-list xmlns:android="http://schemas.android.com/apk/res/android">    <item android:id="@+android:id/background" android:drawable="@android:drawable/rate_star_big_off" />    <item android:id="@+android:id/secondaryProgress" android:drawable="@android:drawable/rate_star_big_half" />    <item android:id="@+android:id/progress" android:drawable="@android:drawable/rate_star_big_on" /></layer-list>

所以這裡把想要的背景修改下

<?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="@mipmap/fhj" />        <item android:id="@android:id/secondaryProgress" android:drawable="@mipmap/fhj" />        <item android:id="@android:id/progress" android:drawable="@mipmap/fhi" /></layer-list>

這裡修改了 [email protected]後面的”+”，並且把背景圖片替換了。

屬性動畫的實現

/** * Created by moon.zhong on 2015/3/7. */public class AnimUtils {    /**     * 假設總人數為417，男性為360     *     * @param ratingBar     * @param percentTxt     * @param numTxt     */    public static void progressAnim(final RatingBar ratingBar[], final TextView percentTxt[], final TextView numTxt[]) {        ValueAnimator valueAnimator = new ValueAnimator();        //設定 value 的變化範圍        valueAnimator.setObjectValues(new PointF(0,0), new PointF(360, 57));        //設定變化狀態，線性變化        valueAnimator.setInterpolator(new LinearInterpolator());        //設定估值器，需要根據需求來實現        valueAnimator.setEvaluator(new TypeEvaluator<PointF>() {            @Override            public PointF evaluate(float fraction, PointF startValue, PointF endValue) {                float x =  (startValue.x + fraction * (endValue.x - startValue.x));                float y =  (startValue.x + fraction * (endValue.y - startValue.y));                return new PointF(x, y);            }        });//        監聽值的變化，從而設定值        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator animation) {                PointF value = (PointF) animation.getAnimatedValue();                float percentX = (value.x * 100f / 417f);                float percentY = (value.y * 100f / 417f);                ratingBar[0].setProgress((int) (percentX+.5));                percentTxt[0].setText((int) (percentX+.5) + "%");                numTxt[0].setText(String.format("男%s人", (int)value.x));                ratingBar[1].setProgress((int) (percentY+.5));                percentTxt[1].setText((int) (percentY+.5) + "%");                numTxt[1].setText(String.format("女%s人", (int)value.y));            }        });        valueAnimator.setDuration(2000);        valueAnimator.start();    }}

使用ValueAnimator來實現，因為ValueAnimator能夠監聽 Value 的變化值。

MainActivity.java

public class MainActivity extends ActionBarActivity {    private RatingBar mRatingBar[] = new RatingBar[2];    private TextView mPercentTxt[] = new TextView[2];    private TextView mNumTxt[] = new TextView[2];    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        mRatingBar[0] = (RatingBar) findViewById(R.id.id_rating);        mPercentTxt[0] = (TextView) findViewById(R.id.id_text_percent);        mNumTxt[0] = (TextView) findViewById(R.id.id_text_num);        mRatingBar[1] = (RatingBar) findViewById(R.id.id_rating_nv);        mPercentTxt[1] = (TextView) findViewById(R.id.id_text_percent_nv);        mNumTxt[1] = (TextView) findViewById(R.id.id_text_num_nv);        /*開始執行動畫*/        AnimUtils.progressAnim(mRatingBar, mPercentTxt, mNumTxt);    }}

點擊下載demo

Android RatingBar結合屬性動畫，快速實現 QQ群男女比例分布圖效果