Plateforme

Android

 

Objectifs

L'objectif est ici de créer une jauge qui affiche un pourcentage et en même temps illustre cette valeur par un cercle de couleur.

Ce composant graphique sera utilisé directement dans le projet en cours. Ultérieurement, nous en ferons une bibliothèque.

 

Ce contrôle graphique ne sera pas paramétrable dans un premier temps.

 

Réalisation

 

Le code en Java est la suivant :

 

package android.ei6.biz.peers2.specials;

import android.content.Context;
import android.ei6.biz.peers2.R;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.support.v4.content.ContextCompat;
import android.util.AttributeSet;
import android.view.View;

/**
* Created by fabien on 28/06/17.
*/

public class GaugeView extends View {
private Paint mPaint;
private float mAngle ;
private float mWidth = 35f;
private float mValue ;
private RectF oval = new RectF();

public void setValue(float value) {
//if(value<0 || value > 100) throw new IllegalArgumentException("Les values acceptables sont entre 0 et 100 inclus");
mValue = value;
mAngle = (value * 360 )/100;
}

public GaugeView(Context cxt) {
super(cxt);
initialize();
}

public GaugeView (Context cxt, AttributeSet attrs) {
super(cxt, attrs);
initialize();
}

private void initialize() {
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(mWidth);
setValue(82);
}

@Override
protected void onDraw(Canvas canvas) {
float width = canvas.getWidth()-2*mWidth;
float height = canvas.getHeight()-2*mWidth;

float arcCenterX = width/2;
float arcCenterY = height/2;

oval.set(arcCenterX - width/2+mWidth, arcCenterY - height/2+mWidth, arcCenterX + width/2, arcCenterY + height/2);

int color= ContextCompat.getColor(getContext(),R.color.blue_aqua);

mPaint.setColor(color);
canvas.drawArc(oval,270f,mAngle,false,mPaint);
mPaint.setColor(Color.LTGRAY);
canvas.drawArc(oval,mAngle-90,360-mAngle,false,mPaint);

mPaint.setStyle(Paint.Style.FILL);
mPaint.setColor(ContextCompat.getColor(getContext(),R.color.black_light));
mPaint.setTextSize(50f);
mPaint.setTextAlign(Paint.Align.CENTER);
canvas.drawText(((int)mValue)+"%",arcCenterX+30,arcCenterY+30,mPaint);
}
}

Ce code définit un composant qui va être utilisé comme suit dans un layout :

<android.ei6.biz.peers2.specials.GaugeView
android:id="@+id/teaser_gauge_pourcent_invest"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginEnd="50dp"/>


Utilisation


Le contrôle graphique une fois en place, il suffit d'y accéder en Java pour modifier la valeur à afficher.

Un exemple de code :

//mettre à jour la jauge de pourcentage des investissements
GaugeView gv = (GaugeView) view.findViewById(R.id.teaser_gauge_pourcent_invest);
gv.setValue(perCent);