Android Ratingbar combined with attribute animation to quickly achieve the effect of QQ group distribution map for men and women

Ratingbar Introduction

Ratingbar as a scoring component, it is very convenient to achieve the scoring function, and the combination of gesture touch events; The essence of Ratingbar is ProgressBar, to see his inheritance.

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

Friends who have used Ratingbar know that Ratingbar has such a property

android:isIndicator="true"

This attribute means: The Ratingbar as an indicator, that is, can not be touched to change the progress of Ratingbar, and today to achieve the function is to Ratingbar as an indicator, to achieve the QQ group, male and female ratio distribution animation effect, first to see the original effect, QQ above the effect is actually with H5 page realization.

And the effect we achieve

Use of Ratingbar

The use of Ratingbar, the main master of its properties, the following to see what these attributes mean,

Android:progressdrawable

Ratingbar the icon displayed, if you do not write this property, the default is the system's own

Android:isindicator

Ratingbar is an indicator (user cannot make changes)

Android:numstars

The number of stars displayed must be an integer value, like "100".

Android:rating

The default rating must be a floating-point type, like "1.2".

Android:stepsize

The step size of the rating must be a floating-point type, like "1.2".

In addition to the first android:progressdrawable, others are well understood and implemented, but android:progressdrawable we can refer to the implementation of the system to implement the way to achieve
How to implement the system below

<?xml version= "1.0" encoding= "Utf-8"?><!--Copyright (C) The Android Open Source Project Licensed under the Apache License, Version 2.0 (the "Li     Cense ");     You are not a use of this file except in compliance with the License. Obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 unless required by Applica BLE law or agreed-in-writing, software distributed under the License is distributed on a "as is" BASIS, Withou     T 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:d rawable/rate_star_big_half" />    <item android:id="@+android:id/progress" android:drawable= "@android:d rawable/rate_star_big_on" /></layer-list>

So here's the background you want to change.

<?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>

This modifies the "+" behind [email protected] and replaces the background image.

Implementation of Property animation

/** * Created by Moon.zhong on 2015/3/7. * * Public  class animutils {    /** * Assuming the total number is 417, men are the same * * @param ratingbar * @param percenttxt * @param  Numtxt * /     Public Static void Progressanim(FinalRatingbar ratingbar[],FinalTextView percenttxt[],FinalTextView numtxt[]) {Valueanimator Valueanimator =NewValueanimator ();//Set change range of valueValueanimator.setobjectvalues (NewPointF (0,0),NewPointF ( the, $));//Set Change status, linear changeValueanimator.setinterpolator (NewLinearinterpolator ());//Set estimator that needs to be implemented according to requirementsValueanimator.setevaluator (NewTypeevaluator<pointf> () {@Override             PublicPointFEvaluate(floatFraction, PointF startvalue, PointF endvalue) {floatx = (startvalue.x + fraction * (endvalue.x-startvalue.x));floaty = (startvalue.x + fraction * (endvalue.y-startvalue.y));return NewPointF (x, y); }        });//Listening value changes to set the valueValueanimator.addupdatelistener (NewValueanimator.animatorupdatelistener () {@Override             Public void onanimationupdate(Valueanimator animation) {PointF value = (PointF) animation.getanimatedvalue ();floatPercentx = (value.x * -F/417f);floatPercenty = (VALUE.Y * -F/417f); ratingbar[0].setprogress ((int) (percentx+. 5)); percenttxt[0].settext ((int) (percentx+. 5) +"%"); numtxt[0].settext (String.Format ("Male%s person", (int) (value.x)); ratingbar[1].setprogress ((int) (percenty+. 5)); percenttxt[1].settext ((int) (percenty+. 5) +"%"); numtxt[1].settext (String.Format ("Female%s person", (int) (VALUE.Y));        }        }); Valueanimator.setduration ( -);    Valueanimator.start (); }}

This is accomplished using valueanimator because the valueanimator is able to listen for value change values.

Mainactivity.java

 Public  class mainactivity extends actionbaractivity {    PrivateRatingbar mratingbar[] =Newratingbar[2];PrivateTextView mpercenttxt[] =Newtextview[2];PrivateTextView mnumtxt[] =Newtextview[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);/ * Start animation * /Animutils.progressanim (Mratingbar, Mpercenttxt, mnumtxt); }}

Click to download Demo

Android Ratingbar combined with attribute animation to quickly achieve the effect of QQ group distribution map for men and women