我有下面的图片，我想创建类似的布局，我需要代替矩形来放置 EditText 视图。但我不知道哪种方式是实现这种布局的最佳方式，我应该制作线条的背景还是制作相对布局并尝试对齐？
因此，如果有人对此类布局有经验，请告诉我该怎么做。
提前致谢。
问问题
134 次
3 回答
2
查看该图像，您似乎正试图将大量 EditText 塞进一个屏幕中。这是一个非常不寻常的布局......除非您的应用程序有一个非常非常具体的用例，其中另一个布局是不可接受的，我建议您尝试使用 Android 中更“标准”的布局之一，因为这很可能增强可用性。
但是，如果您认为这确实是您所需要的，那么我会看看 GridLayout，其中最右边的组件是可扩展的，并且包含一个 LinearLayout 或类似的东西。
于 2012-11-26T21:30:55.110 回答
1
这种布局制作起来相对简单，要让它在大量的 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在纵向智能手机上塞满 6 个空格并不能很好地工作。
于 2012-11-27T11:21:57.660 回答
0
您可以使用标准布局创建它。主要布局是 FrameLayout。背景是带有一些线条（或显示线条的形状）的图像。活动布局是一个显示所有矩形的 RelativeLayout。
于 2012-11-27T07:39:31.643 回答