今天看啥
热点:

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我们可以参照系统自带的实现方式来实现
系统下面的实现方式





    
    
    

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



        
        
        

这里修改了 [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() {
            @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);

    }
}

 

www.bkjia.comtruehttp://www.bkjia.com/Androidjc/963666.htmlTechArticleAndroid RatingBar结合属性动画,快速实现 QQ群男女比例分布图效果 RatingBar介绍 RatingBar作为评分组件,它在实现打分功能的时候确实很方便,并...

相关文章

相关搜索: 分布图 属性 比例

帮客评论

视觉看点