次の図があり、そのようなレイアウトを作成したいのですが、長方形の代わりに EditText ビューを配置する必要があります。しかし、このレイアウトを実現するための最良の方法はどれかわかりません。線の背景を作成するか、相対的なレイアウトを作成して整列させる必要がありますか?
誰かがそのようなレイアウトの経験がある場合は、どうすればこれを行うことができるか教えてください.
前もって感謝します。
質問する
134 次
3 に答える
2
その画像を見ると、多くの EditText を 1 つの画面に詰め込もうとしているように見えます。これは非常に珍しいレイアウトです...別のレイアウトが許容されない非常に具体的なユースケースをアプリケーションが念頭に置いている場合を除き、Android でより「標準的な」レイアウトのいずれかを使用することをお勧めします。ユーザビリティを向上させます。
ただし、それが本当に必要であると判断した場合は、右端のコンポーネントが展開可能であり、LinearLayout などを含む GridLayout を調べます。
于 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 に答える