Comment développer la boîte comme Barre de notation comme application Android Zomato?

Question

Je veux développer Barre de notation comme application Android Zomato. Dans lequel la case de la barre d'évaluation change sa couleur en fonction de la sélection. Si une seule case est sélectionnée alors sa couleur est Lire et peu à peu nous sélectionnons plus de case elle devient Vert.

Ici, j'ai joint snap de la partie de l'écran de l'application zomato android qui montre exactement combien je voudrais développer ce type de système de notation et d'examen.

Answer 1

C'est une LinearLayout horizontale simple avec 9 TextViews, chacun d'eux ayant gris comme la couleur par défaut. De plus, vous pouvez créer un tableau de chaînes, chaque chaîne étant un code de couleur. C'est la solution rapide et sale. Lorsque vous cliquez sur un TextView, vous pouvez trouver sa position dans LinearLayout et colorer chaque vue avant avec le code de couleur correspondant dans le tableau, avec la vue sélectionnée, et les autres restent grises.

J'ai eu un problème similaire une fois avec une barre de progression composée de 10 sections, et au lieu de chercher une bibliothèque j'ai fait quelque chose de rapide comme ça et ça a très bien fonctionné.

Answer 2

J'ai trouvé une solution pour ce que nous devons faire Barre d'évaluation personnalisée Ici le code ci-dessous montre la classe personnalisée de la barre d'évaluation. qui remplissent toutes les exigences qui mentionnent dans Question.

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(); 
    } 
} 

}