Android Avancé Module I Graphisme dynamique 1 Michel Poriaux - HEPH Condorcet

Objectifs  Apprendre à créer et faire disparaître des vues par programmation  Apprendre à créer des éléments graphiques «personnalisés »  Apprendre à installer et utiliser une bibliothèque graphique externe Michel Poriaux - HEPH Condorcet 2

Programmation des éléments graphiques Démonstation Michel Poriaux - HEPH Condorcet 3

Programmation des éléments graphiques Création de l’interface de base Michel Poriaux - HEPH Condorcet 4

Programmation des éléments graphiques Programmation dynamique Michel Poriaux - HEPH Condorcet 5 public class MainActivity extends AppCompatActivity { private ViewGroup mainLayout; private TextView tv; private EditText nbenf; private boolean protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mainLayout = (ViewGroup)findViewById(R.id.idlinearv); tv = new TextView(this); tv.setText("nombre d'enfants : "); LinearLayout.LayoutParams param = new LinearLayout.LayoutParams( /*width*/ ViewGroup.LayoutParams.WRAP_CONTENT, /*height*/ ViewGroup.LayoutParams.WRAP_CONTENT, /*weight*/ 1 ); tv.setLayoutParams(param); nbenf=new EditText(this); nbenf.setInputType(InputType.TYPE_CLASS_NUMBER); nbenf.setHint("indiquez le nombre d'enfants"); nbenf.setLayoutParams(param); } public void clickRadio(View v){ if(v.getId()==R.id.idmarie) { if(!tvShown) { mainLayout.addView(tv, 2); mainLayout.addView(nbenf,3); tvShown = true; } } else { if(tvShown) { mainLayout.removeView(tv); mainLayout.removeView(nbenf); nbenf.setText(""); tvShown = false; } } } }

Création de vues personnalisées  Les widgets (zones de texte,boutons,etc…) héritent de la classe Vue.  La classe Vue comporte une méthode « ondraw » qui comporte les instructions à exécuter pour dessiner l’élément.  Pour créer ses propres vues, il suffit de redéfinir cette méhode.  Les instructions de cette méthode s’appuient sur deux éléments :  Le canvas qui correspond à la zone graphique supportant le dessin  Le paint qui représente le style(couleur, épaisseur de trait,…) à utiliser pour le dessin  Au point de vue organisation générale, les vues personnalisées obéissent aux mêmes paramètres de layout que les vues prédéfinies. Michel Poriaux - HEPH Condorcet 6

Création de vues personnalisées Démonstration Michel Poriaux - HEPH Condorcet 7

Création de vues personnalisées Interface de base Michel Poriaux - HEPH Condorcet 8

Création de vues personnalisées Code Michel Poriaux - HEPH Condorcet 9 public class MainActivity extends Activity public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ViewGroup main= (ViewGroup)findViewById(R.id.idmain); View myView = new MyView(this); LinearLayout.LayoutParams param = new LinearLayout.LayoutParams( /*width*/ ViewGroup.LayoutParams.MATCH_PARENT, /*height*/ ViewGroup.LayoutParams.MATCH_PARENT, /*weight*/ 1 ); myView.setLayoutParams(param); main.addView(myView,1); } public class MyView extends View { Paint paint = null; public MyView(Context context) { super(context); paint = new Paint(); protected void onDraw(Canvas canvas) { super.onDraw(canvas); int x = getWidth(); int y = getHeight(); int size= 100; paint.setStyle(Paint.Style.FILL); paint.setColor(Color.WHITE); canvas.drawPaint(paint); // Use Color.parseColor to define HTML colors paint.setColor(Color.parseColor("#CD5C5C")); canvas.drawCircle(x / 2, y / 2, size, paint); paint.setColor(Color.BLUE); canvas.drawLine(0,0,x-1,y-1,paint); paint.setStyle(Paint.Style.STROKE); paint.setStrokeWidth(5); canvas.drawRect(new Rect(10,10,x-10,y-10),paint); } } } x Y (0,0) width-1 height-1

Création de vues personnalisées Quelque méthodes de Canvas Voir : Michel Poriaux - HEPH Condorcet 10 drawArcdrawArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean useCenter,Paint paint)Paint Draw the specified arc, which will be scaled to fit inside the specified oval. drawCircledrawCircle(float cx, float cy, float radius, Paint paint)Paint Draw the specified circle using the specified paint. drawLinedrawLine(float startX, float startY, float stopX, float stopY, Paint paint)Paint Draw a line segment with the specified start and stop x,y coordinates, using the specified paint. drawOvaldrawOval(float left, float top, float right, float bottom, Paint paint)Paint Draw the specified oval using the specified paint. drawPointdrawPoint(float x, float y, Paint paint)Paint Helper for drawPoints() for drawing a single point. drawRectdrawRect(float left, float top, float right, float bottom, Paint paint)Paint Draw the specified Rect using the specified paint. drawTextdrawText(String text, float x, float y, Paint paint)StringPaint Draw the text, with origin at (x,y), using the specified paint.

Utilisation d’une bibliothèque graphique  Pour simplifier la programmation de certaines applications graphiques, des développeurs mettent à disposition des programmeurs des bibliothèques graphiques.  Ces bibliothèques sont disponibles sur des sites de téléchargement tels que github.  Pour les incorporer dans une application, il faut paramétrer les fichiers de build gradle.  L’une de ces bibliothèque est « android plot ».  Elle est orientée vers la conception de graphiques. Michel Poriaux - HEPH Condorcet 11

Utilisation d’une bibliothèque graphique Démonstration Michel Poriaux - HEPH Condorcet 12

Utilisation d’une bibliothèque graphique Code de gradle Michel Poriaux - HEPH Condorcet 13 dependencies { implementation fileTree(dir: 'libs', include: ['*.jar']) implementation 'com.android.support:appcompat-v7:26.1.0' implementation 'com.android.support.constraint:constraint-layout:1.0.2' testImplementation 'junit:junit:4.12' androidTestImplementation 'com.android.support.test:runner:1.0.1' androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1' compile "com.androidplot:androidplot-core:1.5.4" }

Utilisation d’une bibliothèque graphique Création du layout Michel Poriaux - HEPH Condorcet 14

Utilisation d’une bibliothèque graphique Code de l’application 1/2 Michel Poriaux - HEPH Condorcet 15 public class MainActivity extends AppCompatActivity { private XYPlot public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // initialize our XYPlot reference: plot = (XYPlot) findViewById(R.id.plot); // create a couple arrays of y-values to plot: final Number[] domainLabels = {1, 2, 3, 6, 7, 8, 9, 10, 13, 14}; Number[] series1Numbers = {1, 4, 2, 8, 4, 16, 8, 32, 16, 64}; Number[] series2Numbers = {5, 2, 10, 5, 20, 10, 40, 20, 80, 40}; // turn the above arrays into XYSeries': // (Y_VALS_ONLY means use the element index as the x value) XYSeries series1 = new SimpleXYSeries( Arrays.asList(series1Numbers), SimpleXYSeries.ArrayFormat.Y_VALS_ONLY, "Series1"); XYSeries series2 = new SimpleXYSeries( Arrays.asList(series2Numbers), SimpleXYSeries.ArrayFormat.Y_VALS_ONLY, "Series2"); // create formatters to use for drawing a series using LineAndPointRenderer // and configure them from xml: LineAndPointFormatter series1Format = new LineAndPointFormatter(Color.RED, Color.GREEN, Color.BLUE, null); LineAndPointFormatter series2Format = new LineAndPointFormatter(Color.YELLOW, Color.GRAY, Color.WHITE, null);

Utilisation d’une bibliothèque graphique Code de l’application 2/2 Michel Poriaux - HEPH Condorcet 16 // add a dash effect to the series2 lines series2Format.getLinePaint().setPathEffect(new DashPathEffect(new float[] { // always use DP when specifying pixel sizes, to keep things consistent across devices: PixelUtils.dpToPix(20), PixelUtils.dpToPix(15)}, 0)); // just for fun, add some smoothing to the lines: // see: series1Format.setInterpolationParams( new CatmullRomInterpolator.Params(10, CatmullRomInterpolator.Type.Centripetal)); series2Format.setInterpolationParams( new CatmullRomInterpolator.Params(10, CatmullRomInterpolator.Type.Centripetal)); // add a new series' to the xyplot: plot.addSeries(series1, series1Format); plot.addSeries(series2, series2Format); plot.getGraph().getLineLabelStyle(XYGraphWidget.Edge.BOTTOM).setFormat(new Format() public StringBuffer format(Object obj, StringBuffer toAppendTo, FieldPosition pos) { int i = Math.round(((Number) obj).floatValue()); return toAppendTo.append(domainLabels[i]); public Object parseObject(String source, ParsePosition pos) { return null; } }); } }

Conclusions  Le fichier de layout détermine des vues statiques  Pour dynamiser les vues, il faut créer les composants dans le cadre du code JAVA de la classe Activity.  Pour placer les vues, il faut obtenir un accès au layout général, en conséquence, il faut lui conférer un identifiant.  Pour créer ses propres vues, il faut créer une classe qui hérite de la classe Vue et en redéfinir la méthode onDraw.  Les supports du dessin sont les classes Canvas pour les figures à dessiner et Paint pour le style à appliquer à la figure.  Pour réaliser des dessins élaboré, il peut être plus simple de faire appel à des bibliothèques externes créées par des développeurs « externes ».  L’une de ces bibliothèque est « androidplot » qui permet de réaliser des graphes avec axe des abscisses et ordonnées. Michel Poriaux - HEPH Condorcet 17

FIN de ce Module Michel Poriaux - HEPH Condorcet 18