Comment dessiner l'image ci-dessous dans Android par programme?

Question

Je suis nouveau sur Android. Je trouve très difficile d'utiliser la toile. Comment dessiner l'image ci-dessous dans Android? Je veux aussi mettre l'alphabet sélectionné en surbrillance quand on le touche.

Answer 1

Ici, il est:

<FrameLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <FrameLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:layout_margin="64dp" 
     android:background="#000"> 
     <!-- Main area --> 
    </FrameLayout> 

    <LinearLayout 
     android:layout_width="wrap_content" 
     android:layout_height="64dp" 
     android:layout_gravity="center_horizontal" 
     android:orientation="horizontal"> 

     <View 
      android:id="@+id/a" 
      android:layout_width="64dp" 
      android:layout_height="64dp" 
      android:background="#f00"/> 

     <View 
      android:id="@+id/b" 
      android:layout_width="64dp" 
      android:layout_height="64dp" 
      android:background="#0f0"/> 

     <View 
      android:id="@+id/c" 
      android:layout_width="64dp" 
      android:layout_height="64dp" 
      android:background="#00f"/> 

    </LinearLayout> 

    <LinearLayout 
     android:layout_width="64dp" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center_vertical|right" 
     android:orientation="vertical"> 

     <View 
      android:id="@+id/d" 
      android:layout_width="64dp" 
      android:layout_height="64dp" 
      android:background="#ff0"/> 

     <View 
      android:id="@+id/e" 
      android:layout_width="64dp" 
      android:layout_height="64dp" 
      android:background="#0ff"/> 

     <View 
      android:id="@+id/f" 
      android:layout_width="64dp" 
      android:layout_height="64dp" 
      android:background="#f0f"/> 

    </LinearLayout> 

    <LinearLayout 
     android:layout_width="wrap_content" 
     android:layout_height="64dp" 
     android:layout_gravity="center_horizontal|bottom" 
     android:orientation="horizontal"> 

     <View 
      android:id="@+id/g" 
      android:layout_width="64dp" 
      android:layout_height="64dp" 
      android:background="#900"/> 

     <View 
      android:id="@+id/h" 
      android:layout_width="64dp" 
      android:layout_height="64dp" 
      android:background="#090"/> 

     <View 
      android:id="@+id/i" 
      android:layout_width="64dp" 
      android:layout_height="64dp" 
      android:background="#009"/> 

    </LinearLayout> 

    <LinearLayout 
     android:layout_width="64dp" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center_vertical" 
     android:orientation="vertical"> 

     <View 
      android:id="@+id/l" 
      android:layout_width="64dp" 
      android:layout_height="64dp" 
      android:background="#990"/> 

     <View 
      android:id="@+id/k" 
      android:layout_width="64dp" 
      android:layout_height="64dp" 
      android:background="#099"/> 

     <View 
      android:id="@+id/j" 
      android:layout_width="64dp" 
      android:layout_height="64dp" 
      android:background="#909"/> 

    </LinearLayout> 

</FrameLayout> 

ÉDITÉE

Vous pouvez également faire en une vue avec l'aide de la toile:

public class GameView extends View { 
    private final int[] colors = { 
      0xffff0000, 0xff00ff00, 0xff0000ff, 
      0xffffff00, 0xff00ffff, 0xffff00ff, 
      0xff990000, 0xff009900, 0xff000099, 
      0xff999900, 0xff009999, 0xff990099}; 

    private final Paint[] paints = new Paint[colors.length]; 
    private Paint mainAreaPaint = new Paint(); 

    private RectF mainAreaRect; 

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

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

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

    @TargetApi(Build.VERSION_CODES.LOLLIPOP) 
    public GameView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) { 
     super(context, attrs, defStyleAttr, defStyleRes); 
     init(); 
    } 

    @Override 
    protected void onDraw(Canvas canvas) { 
     super.onDraw(canvas); 
     float squareSize = Math.min(getWidth(), getHeight())/7; 

     //draw main area 
     canvas.drawRect(new RectF(squareSize, squareSize, 6 * squareSize, 6 * squareSize), mainAreaPaint); 

     //draw top squares 
     canvas.drawRect(new RectF(2 * squareSize, 0, 3 * squareSize, squareSize), paints[0]); 
     canvas.drawRect(new RectF(3 * squareSize, 0, 4 * squareSize, squareSize), paints[1]); 
     canvas.drawRect(new RectF(4 * squareSize, 0, 5 * squareSize, squareSize), paints[2]); 

     //draw right squares 
     canvas.drawRect(new RectF(6 * squareSize, 2 * squareSize, 7 * squareSize, 3 * squareSize), paints[3]); 
     canvas.drawRect(new RectF(6 * squareSize, 3 * squareSize, 7 * squareSize, 4 * squareSize), paints[4]); 
     canvas.drawRect(new RectF(6 * squareSize, 4 * squareSize, 7 * squareSize, 5 * squareSize), paints[5]); 

     //draw bottom squares 
     canvas.drawRect(new RectF(4 * squareSize, 6 * squareSize, 5 * squareSize, 7 * squareSize), paints[6]); 
     canvas.drawRect(new RectF(3 * squareSize, 6 * squareSize, 4 * squareSize, 7 * squareSize), paints[7]); 
     canvas.drawRect(new RectF(2 * squareSize, 6 * squareSize, 3 * squareSize, 7 * squareSize), paints[8]); 

     //draw left squares 
     canvas.drawRect(new RectF(0, 4 * squareSize, squareSize, 5 * squareSize), paints[9]); 
     canvas.drawRect(new RectF(0, 3 * squareSize, squareSize, 4 * squareSize), paints[10]); 
     canvas.drawRect(new RectF(0, 2 * squareSize, squareSize, 3 * squareSize), paints[11]); 
    } 

    private void init() { 
     for(int i = 0; i < colors.length; i++) { 
      paints[i] = initPaint(colors[i]); 
     } 

     mainAreaPaint = initPaint(0xff000000); 
    } 

    private Paint initPaint(int color) { 
     Paint paint = new Paint(); 
     paint.setAntiAlias(true); 
     paint.setColor(color); 
     paint.setStyle(Paint.Style.FILL); 
     return paint; 
    } 
} 

Désolé pour le mauvais code de performance. Bien sûr, vous devez placer toutes les initialisations de Rects dans la méthode onMeasure et gérer correctement les attributs xml de andoird comme minHeight et e.t.c. Aussi, c'est à vous d'écrire le bon positionnement de la vue intérieure peinte (au centre, dans le coin e.t.c), mais j'ai juste écrit un échantillon pour attraper le point principal. Voici capture d'écran, ce que nous avons à la fin: