Android RatingBar结合属性动画,快速实现 QQ群男女比例分布图效

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 ProjectLicensed 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 atUnless required by applicable law or agreed to in writing, softwaredistributed 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 andlimitations under the License.–>===>

所以这里把想要的背景修改下

====>

这里修改了 id=@后面的”+”,并且把背景图片替换了。

属性动画的实现/** * Created by moon.zhong on 2015/3/7. */{/*** 假设总人数为417,男性为360** @param ratingBar* @param percentTxt* @param numTxt*/(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>() {@Overridepublic 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() {(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

{private RatingBar mRatingBar[] = new RatingBar[2];private TextView mPercentTxt[] = new TextView[2];private TextView mNumTxt[] = new TextView[2];(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群男女比例分布图效

相关文章:

你感兴趣的文章:

标签云: