Как нарисовать изображение ниже в андроиде программно?

Question

Я новичок в android. Мне очень трудно использовать Canvas. Как нарисовать изображение внизу в андроиде? Я также хочу, чтобы выбранный алфавит был выделен, когда он коснулся.

Answer 1

Здесь:

<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> 

EDITED

Вы также можете сделать это в одном окне с помощью холста:

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

Прошу прощения за плохой код. Конечно, вам нужно поместить все инициализации Rects в метод onMeasure и правильно обработать атрибуты andoird xml, такие как minHeight и e.t.c. Также вам стоит написать правильное позиционирование рисованной картины внутри (в центре, в углу e.t.c), но я просто написал образец, чтобы поймать основную точку. Вот скриншот, что мы имеем в итоге: