11

添付の画像と同じように図を描きたいのですが、右側に赤い縦の長方形を描き、他のオブジェクトを上に置くのに苦労しています。最大の懸念は、Android デバイスのさまざまな画面サイズに対応することです。私は、プロセス中に達成しようとしていることを完全に理解しています。これには、以下の目的が含まれます。すべての助けをいただければ幸いです。

  • 画面の両側に 1 つの赤い長方形 (右側、そこに描画する方法がわかりません)
  • 赤い垂直の長方形の間にある 7 つの灰色のボックスは、幅が同じである必要があります。
  • 上の画像のように、黒い縦線を長方形の間に入れる必要があります
  • 数字を示すテキスト ボックスは、灰色の各長方形と小さな赤い長方形の中央に配置する必要があります。
  • また、将来は図を再利用できるようにして、いつでも小さなボックスを赤または黒で塗りつぶせるようにしたいと考えています

ここに画像の説明を入力

レイアウト

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <my.package.name.ComplexDiagram
            android:layout_width="match_parent"
            android:layout_height="65dp"
            android:layout_centerVertical="true"
            />
    </RelativeLayout>

ジャワ

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

public class ComplexDiagram extends View {


    private int measuredWidth, measuredHeight;
    private Paint mGreyRectPaint, mBlackLinePaint, mRedRectPaint;
    private RectF mGreyRect, mBlackLineF, mRedRectF;


    public ComplexDiagram(Context context) {
        super(context);
        init(context, null, 0);
    }

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

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

    private void init(Context context, AttributeSet attributeSet, int defStyle) {

        mGreyRectPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mGreyRectPaint.setColor(0xFF3C3C3C);
        mGreyRectPaint.setStyle(Paint.Style.FILL);

        mBlackLinePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mBlackLinePaint.setColor(0xFF000000);
        mBlackLinePaint.setStyle(Paint.Style.FILL);

        mRedRectPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mRedRectPaint.setColor(0xFFCC3333);
        mRedRectPaint.setStyle(Paint.Style.FILL);
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        measuredHeight = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
        measuredWidth = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);

        setMeasuredDimension(measuredWidth, measuredHeight);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        if (measuredHeight == 0 || measuredWidth == 0)
            return;

        canvas.drawRect(mGreyRect, mGreyRectPaint);
        canvas.drawRect(mBlackLineF, mBlackLinePaint);
        canvas.drawRect(mRedRectF, mRedRectPaint);
    }
}
4

1 に答える 1

5

こうやって

これをXMLに入れます

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:orientation="horizontal" >

    <View
        android:layout_width="5dp"
        android:layout_height="wrap_content"
        android:background="#CC3333" />

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#808080" >

        <View
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentLeft="true"
            android:layout_marginLeft="1dp"
            android:background="@drawable/red_background" />

        <View
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_centerHorizontal="true"
            android:background="@drawable/red_background" />

        <View
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentRight="true"
            android:background="@drawable/red_background" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:text="1"
            android:textColor="@android:color/black" />

        <View
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:layout_marginLeft="1dp"
            android:background="@drawable/red_background" />

        <View
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:background="@drawable/red_background" />

        <View
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:background="@drawable/red_background" />
    </RelativeLayout>

    <View
        android:layout_width="1dp"
        android:layout_height="wrap_content"
        android:background="#1D1D1D" />

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#808080" >

        <View
            android:id="@+id/box1"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentLeft="true"
            android:layout_marginLeft="1dp"
            android:background="@drawable/red_background" />

        <View
            android:id="@+id/box2"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_marginLeft="2dp"
            android:layout_toRightOf="@+id/box1"
            android:background="@drawable/red_background" />

        <View
            android:id="@+id/box3"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_marginRight="2dp"
            android:layout_toLeftOf="@+id/box4"
            android:background="@drawable/red_background" />

        <View
            android:id="@+id/box4"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentRight="true"
            android:background="#CC3333" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:text="2"
            android:textColor="@android:color/black" />

        <View
            android:id="@+id/box5"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:background="@drawable/red_background" />

        <View
            android:id="@+id/box6"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentBottom="true"
            android:layout_marginLeft="2dp"
            android:layout_toRightOf="@+id/box5"
            android:background="@drawable/red_background" />

        <View
            android:id="@+id/box7"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentBottom="true"
            android:layout_marginRight="2dp"
            android:layout_toLeftOf="@+id/box8"
            android:background="@drawable/red_background" />

        <View
            android:id="@+id/box8"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:background="@drawable/red_background" />
    </RelativeLayout>

    <View
        android:layout_width="1dp"
        android:layout_height="wrap_content"
        android:background="#1D1D1D" />

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#808080" >

        <View
            android:id="@+id/box1"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentLeft="true"
            android:layout_marginLeft="1dp"
            android:background="@drawable/red_background" />

        <View
            android:id="@+id/box2"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_marginLeft="2dp"
            android:layout_toRightOf="@+id/box1"
            android:background="@drawable/red_background" />

        <View
            android:id="@+id/box3"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_marginRight="2dp"
            android:layout_toLeftOf="@+id/box4"
            android:background="@drawable/red_background" />

        <View
            android:id="@+id/box4"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentRight="true"
            android:background="@drawable/red_background" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:text="3"
            android:textColor="@android:color/black" />

        <View
            android:id="@+id/box5"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:background="@drawable/red_background" />

        <View
            android:id="@+id/box6"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentBottom="true"
            android:layout_marginLeft="2dp"
            android:layout_toRightOf="@+id/box5"
            android:background="@drawable/red_background" />

        <View
            android:id="@+id/box7"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentBottom="true"
            android:layout_marginRight="2dp"
            android:layout_toLeftOf="@+id/box8"
            android:background="@drawable/red_background" />

        <View
            android:id="@+id/box8"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:background="@drawable/red_background" />
    </RelativeLayout>

    <View
        android:layout_width="1dp"
        android:layout_height="wrap_content"
        android:background="#1D1D1D" />

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#808080" >

        <View
            android:id="@+id/box1"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentLeft="true"
            android:layout_marginLeft="1dp"
            android:background="@drawable/red_background" />

        <View
            android:id="@+id/box2"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_marginLeft="2dp"
            android:layout_toRightOf="@+id/box1"
            android:background="@drawable/red_background" />

        <View
            android:id="@+id/box3"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_marginRight="2dp"
            android:layout_toLeftOf="@+id/box4"
            android:background="@drawable/red_background" />

        <View
            android:id="@+id/box4"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentRight="true"
            android:background="@drawable/red_background" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:text="4"
            android:textColor="@android:color/black" />

        <View
            android:id="@+id/box5"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:background="@drawable/red_background" />

        <View
            android:id="@+id/box6"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentBottom="true"
            android:layout_marginLeft="2dp"
            android:layout_toRightOf="@+id/box5"
            android:background="@drawable/red_background" />

        <View
            android:id="@+id/box7"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentBottom="true"
            android:layout_marginRight="2dp"
            android:layout_toLeftOf="@+id/box8"
            android:background="@drawable/red_background" />

        <View
            android:id="@+id/box8"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:background="@drawable/red_background" />
    </RelativeLayout>

    <View
        android:layout_width="1dp"
        android:layout_height="wrap_content"
        android:background="#1D1D1D" />

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#808080" >

        <View
            android:id="@+id/box1"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentLeft="true"
            android:layout_marginLeft="1dp"
            android:background="@drawable/red_background" />

        <View
            android:id="@+id/box2"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_marginLeft="2dp"
            android:layout_toRightOf="@+id/box1"
            android:background="@drawable/red_background" />

        <View
            android:id="@+id/box3"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_marginRight="2dp"
            android:layout_toLeftOf="@+id/box4"
            android:background="@drawable/red_background" />

        <View
            android:id="@+id/box4"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentRight="true"
            android:background="@drawable/red_background" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:text="5"
            android:textColor="@android:color/black" />

        <View
            android:id="@+id/box5"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:background="@drawable/red_background" />

        <View
            android:id="@+id/box6"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentBottom="true"
            android:layout_marginLeft="2dp"
            android:layout_toRightOf="@+id/box5"
            android:background="@drawable/red_background" />

        <View
            android:id="@+id/box7"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentBottom="true"
            android:layout_marginRight="2dp"
            android:layout_toLeftOf="@+id/box8"
            android:background="@drawable/red_background" />

        <View
            android:id="@+id/box8"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:background="@drawable/red_background" />
    </RelativeLayout>

    <View
        android:layout_width="1dp"
        android:layout_height="wrap_content"
        android:background="#1D1D1D" />

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#808080" >

        <View
            android:id="@+id/box1"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentLeft="true"
            android:layout_marginLeft="1dp"
            android:background="@drawable/red_background" />

        <View
            android:id="@+id/box2"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_marginLeft="2dp"
            android:layout_toRightOf="@+id/box1"
            android:background="@drawable/red_background" />

        <View
            android:id="@+id/box3"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_marginRight="2dp"
            android:layout_toLeftOf="@+id/box4"
            android:background="@drawable/red_background" />

        <View
            android:id="@+id/box4"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentRight="true"
            android:background="@drawable/red_background" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:text="6"
            android:textColor="@android:color/black" />

        <View
            android:id="@+id/box5"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:background="@drawable/red_background" />

        <View
            android:id="@+id/box6"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentBottom="true"
            android:layout_marginLeft="2dp"
            android:layout_toRightOf="@+id/box5"
            android:background="@drawable/red_background" />

        <View
            android:id="@+id/box7"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentBottom="true"
            android:layout_marginRight="2dp"
            android:layout_toLeftOf="@+id/box8"
            android:background="@drawable/red_background" />

        <View
            android:id="@+id/box8"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:background="@drawable/red_background" />
    </RelativeLayout>

    <View
        android:layout_width="1dp"
        android:layout_height="wrap_content"
        android:background="#1D1D1D" />

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#808080" >

        <View
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentLeft="true"
            android:background="@drawable/red_background" />

        <View
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_centerHorizontal="true"
            android:background="@drawable/red_background" />

        <View
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentRight="true"
            android:layout_marginRight="1dp"
            android:background="@drawable/red_background" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:text="7"
            android:textColor="@android:color/black" />

        <View
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:background="@drawable/red_background" />

        <View
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:background="@drawable/red_background" />

        <View
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginRight="1dp"
            android:background="@drawable/red_background" />
    </RelativeLayout>

    <View
        android:layout_width="5dp"
        android:layout_height="wrap_content"
        android:background="#CC3333" />

</LinearLayout>

赤のrectangle.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <solid android:color="@android:color/transparent" />

    <stroke
        android:width="1dip"
        android:color="#CC3333" />

</shape>
于 2015-05-14T04:33:19.287 に答える