如何像zomato android app一样开发像评级栏一样的盒子?

时间:2017-10-17 06:48:12

标签: android android-layout ratingbar

我想像zomato android应用程序一样开发评级栏。其中评级栏框根据选择改变其颜色。如果只选择了一个方框,那么它的颜色就是Read,逐渐我们选择更多的方框变成绿色。

这里我附上了zomato android app的屏幕部分,它显示了我想要开发此类评级和评论系统的评分。

enter image description here

2 个答案:

答案 0 :(得分:2)

这是一个带有9个TextView的简单水平LinearLayout,每个TextView都有灰色作为默认颜色。您可以创建一个字符串数组,每个字符串都是一个颜色代码。这是快速而肮脏的解决方案。

单击TextView时,您可以在LinearLayout中找到它的位置,并使用数组中相应的颜色代码和所选视图为其前面的每个视图着色,其他视图保持灰色。

我有一个类似的问题,一个进度条由10个部分组成,而不是寻找一个库,我做了一些快速的东西,它工作得很好。

答案 1 :(得分:2)

我找到了解决方案,我们需要制作自定义评级栏这里下面的代码显示自定义等级评级栏。完全填写问题中提到的所有要求。

public class MyCustomRatingBar extends android.support.v7.widget.AppCompatRatingBar {

private int[] iconArrayActive =  {
        R.drawable.ic_square_sel_1,
        R.drawable.ic_square_sel_2,
        R.drawable.ic_square_sel_3,
        R.drawable.ic_square_sel_4,
        R.drawable.ic_square_sel_5,
        R.drawable.ic_square_sel_6,
        R.drawable.ic_square_sel_7,
        R.drawable.ic_square_sel_8,
        R.drawable.ic_square_sel_9
};

private int[] iconArrayInactive =  {
        R.drawable.ic_square_unsel,
        R.drawable.ic_square_unsel,
        R.drawable.ic_square_unsel,
        R.drawable.ic_square_unsel,
        R.drawable.ic_square_unsel,
        R.drawable.ic_square_unsel,
        R.drawable.ic_square_unsel,
        R.drawable.ic_square_unsel,
        R.drawable.ic_square_unsel
};

public MyCustomRatingBar (Context context) {
    super(context);
    init();
}

public MyCustomRatingBar (Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}

public MyCustomRatingBar (Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
}

private void init() {
    this.setMax(9);
    this.setNumStars(9);
    this.setStepSize(1.0f);
    this.setRating(1.0f);
}

private Bitmap getBitmapFromVectorDrawable(Context context, int drawableId) {
    Drawable drawable = ContextCompat.getDrawable(context, drawableId);
    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
        drawable = (DrawableCompat.wrap(drawable)).mutate();
    }

    Bitmap bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(),
            drawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);
    drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
    drawable.draw(canvas);

    return bitmap;
}

@Override
protected synchronized void onDraw(Canvas canvas) {

    int stars = getNumStars();
    float rating = getRating();
    float x = 0;

    Bitmap bitmap;
    Paint paint = new Paint();
    int W = getWidth();
    int H = getHeight();
    int icon_size = (W/stars)-0;

    int y_pos = (H/2)-icon_size/2;

    int delta = ((H > W)?(H):(W))/(stars);
    int offset = (W-(icon_size+(stars-1)*delta))/2;

    for(int i = 0; i < stars; i++) {
        if ((int) rating-1 >= i) {
            bitmap = getBitmapFromVectorDrawable(getContext(), iconArrayActive[i]);
        } else {
            bitmap = getBitmapFromVectorDrawable(getContext(), iconArrayInactive[i]);
        }
        x = offset+(i*delta);
        Bitmap scaled = Bitmap.createScaledBitmap(bitmap, icon_size, icon_size, true);
        canvas.drawBitmap(scaled, x, y_pos, paint);
        canvas.save();
    }
}

}