Question

我有以下图片，我想创建类似的布局，我需要代替矩形来放置EditText视图。但我无法弄清楚哪种方法可以实现这种布局，我应该制作线条背景还是制作相对布局并尝试对齐？

因此，如果有人有这种布局的经验，请告诉我该怎么做。

提前致谢。

enter image description here

Answer 1

看着那张图片，看起来你正试图把很多EditText塞进一个屏幕。这是一个非常不寻常的布局......除非你的应用程序有一个非常非常具体的用例，其中另一个布局是不可接受的，我建议你尝试在Android中使用一个更“标准”的布局，因为这很可能增强可用性。

但是，如果您确定这正是您所需要的，那么我将看一下GridLayout，其中最右侧的组件是可扩展的，并包含LinearLayout或类似的东西。

Answer 2

这种布局相对简单，要让它在大量Android设备上运行将会有很多工作要做。例如：

<?xml version="1.0" encoding="utf-8"?>
<com.luksprog.ds.views.RelativeLayoutExtension xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >  

    <EditText
        android:id="@+id/et10"
        android:layout_width="30dp"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:text="X" />

    <EditText
        android:id="@+id/et9"
        android:layout_width="30dp"
        android:layout_height="wrap_content"
        android:layout_above="@id/et10"
        android:layout_marginBottom="25dp"
        android:layout_toLeftOf="@id/et10"
        android:text="9" />

    <EditText
        android:id="@+id/et8"
        android:layout_width="30dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/et10"
        android:layout_marginTop="25dp"
        android:layout_toLeftOf="@id/et10"
        android:text="8" />

    <EditText
        android:id="@+id/et7"
        android:layout_width="30dp"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="40dp"
        android:layout_toLeftOf="@id/et9"
        android:text="7" />

    <LinearLayout
        android:id="@+id/et65wrapper"
        android:layout_width="40dp"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toLeftOf="@id/et7"
        android:orientation="vertical"
        android:paddingLeft="10dp" >

        <EditText
            android:id="@+id/et6"
            android:layout_width="30dp"
            android:layout_height="wrap_content"
            android:layout_marginBottom="5dp"
            android:text="6" />

        <EditText
            android:id="@+id/et5"
            android:layout_width="30dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:text="5" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/et43wrapper"
        android:layout_width="40dp"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toLeftOf="@id/et65wrapper"
        android:orientation="vertical"
        android:paddingLeft="10dp" >

        <EditText
            android:id="@+id/et4"
            android:layout_width="30dp"
            android:layout_height="wrap_content"

            android:layout_marginBottom="5dp"
            android:text="4" />

        <EditText
            android:id="@+id/et3"
            android:layout_width="30dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:text="3" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/et21wrapper"
        android:layout_width="40dp"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toLeftOf="@id/et43wrapper"
        android:orientation="vertical"
        android:paddingLeft="10dp" >

        <EditText
            android:id="@+id/et2"
            android:layout_width="30dp"
            android:layout_height="wrap_content"
            android:layout_marginBottom="5dp"
            android:text="2" />

        <EditText
            android:id="@+id/et1"
            android:layout_width="30dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:text="1" />
    </LinearLayout>

</com.luksprog.ds.views.RelativeLayoutExtension>

RelativeLayoutExtension是一个扩展RelativeLayout类的类，如下所示：

public class RelativeLayoutExtension extends RelativeLayout {

    private LinearLayout mFirstLinear;
    private LinearLayout mSecondLinear;
    private LinearLayout mLastLinear;

    private EditText mUpperEditText;
    private EditText mLowerEditText;
    private Paint mPaint;

    public RelativeLayoutExtension(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaint = new Paint();
        mPaint.setColor(Color.RED);
        mPaint.setStrokeWidth(2.0f);
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        mFirstLinear = (LinearLayout) findViewById(R.id.et21wrapper);
        mSecondLinear = (LinearLayout) findViewById(R.id.et43wrapper);
        mLastLinear = (LinearLayout) findViewById(R.id.et65wrapper);
        mUpperEditText = (EditText) findViewById(R.id.et9);
        mLowerEditText = (EditText) findViewById(R.id.et8);
    }

    @Override
    protected void dispatchDraw(Canvas canvas) {
        super.dispatchDraw(canvas);
        final int leftFirst = mFirstLinear.getLeft();
        final int topFirst = mFirstLinear.getTop();
        final int middleFirst = (mFirstLinear.getBottom() - mFirstLinear
                .getTop()) / 2;
        final int lastRight = mLastLinear.getRight();
        canvas.drawLine(leftFirst, topFirst + middleFirst, lastRight, topFirst
                + middleFirst, mPaint);

        final int rightFirst = mFirstLinear.getRight();
        final int bottomFirst = mFirstLinear.getBottom();
        canvas.drawLine(rightFirst, topFirst, rightFirst, bottomFirst, mPaint);

        final int rightSecond = mSecondLinear.getRight();
        canvas.drawLine(rightSecond, topFirst, rightSecond, bottomFirst, mPaint);

        final int leftUpperEdit = mUpperEditText.getLeft();
        final int topUpperEdit = mUpperEditText.getTop();
        final int middleUpperEdit = (mUpperEditText.getBottom() - mUpperEditText
                .getTop()) / 2;
        canvas.drawLine(lastRight, topFirst + middleFirst, leftUpperEdit,
                topUpperEdit + middleUpperEdit, mPaint);

        final int leftLowerEdit = mLowerEditText.getLeft();
        final int topLowerEdit = mLowerEditText.getTop();
        final int middleLowerEdit = (mLowerEditText.getBottom() - mLowerEditText
                .getTop()) / 2;
        canvas.drawLine(lastRight, topFirst + middleFirst, leftLowerEdit, topLowerEdit
                + middleLowerEdit, mPaint);
    }

}

线条不是很中心，这只是一个例子。如果您计划在您知道其尺寸的单个设备上使用此布局，则布局将起作用，因为您只需要在代码之外计算尺寸。如果你把它作为一般布局来计划，那么事情就会变得非常难看，因为你需要进行大量的计算才能正确定位视图并绘制线条，这样你就可以重新考虑你的方法了。另外，我希望您能在大屏幕设备上使用此布局，因为在纵向智能手机上填充六个EditTexts和空格将无法正常工作。

Answer 3

您可以使用标准布局创建它。主要布局是FrameLayout。背景是带有一些线条（或显示线条的形状）的图像。活动布局是RelativeLayout以显示所有矩形。

我需要从图像创建布局

3 个答案: