이미지에서 레이아웃을 만들 필요가 있습니다.

Question

다음 그림이 있으며, 레이아웃을 만들고 싶습니다. 그리고 EditText보기를 넣기 위해 직사각형 대신에 필요합니다. 그러나 나는이 레이아웃을 얻을 수있는 가장 좋은 방법이 무엇인지 알 수 없다. 라인의 배경을 만들거나 상대적인 레이아웃을 만들고 정렬을 시도해야 하는가?

누군가 이러한 레이아웃에 대해 경험이있는 경우 어떻게해야하는지 알려주세요.

미리 감사드립니다. 당신이 하나의 화면에 글고 치기의 많은 벼락 공부하려고하는 것처럼

Answer 1

레이아웃이 상대적으로 간단하며 많은 수의 Android 기기에서 작동하도록하는 작업이 훨씬 더 많습니다. RelativeLayoutExtension이 같은 RelativeLayout 클래스를 확장하는 클래스가

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

: 예를 들어

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 2

해당 이미지를 보면, 그것은 보인다. 아주 특별한 레이아웃입니다 ... 애플리케이션에 다른 레이아웃이 허용되지 않는 매우 구체적인 케이스를 염두에 두지 않는 한, 안드로이드에서 "표준"레이아웃 중 하나를 사용하도록 권합니다. 유용성을 향상시킵니다.

그러나 실제로 필요한 것이 무엇인지 결정하면 GridLayout을 살펴 보겠습니다. GridLayout은 가장 오른쪽의 구성 요소를 확장 할 수 있으며 LinearLayout 또는 그와 비슷한 것을 포함합니다.

Answer 3

표준 레이아웃으로 만들 수 있습니다. 기본 레이아웃은 FrameLayout입니다. 배경은 일부 선 (또는 선을 표시 할 모양)이있는 이미지입니다. 활성 레이아웃은 모든 직사각형을 표시하는 RelativeLayout입니다.