我需要從圖像創建佈局

我有下面的圖片，我想要創建它的佈局，我需要代替矩形放置EditText視圖。但我無法弄清楚哪個是我可以實現這種佈局的最佳方式，我應該製作背景線還是製作相對佈局並嘗試對齊？我需要從圖像創建佈局

所以如果有人有這種佈局的經驗，請告訴我該怎麼做。

在此先感謝。

enter image description here

2012-11-26 Elkfrawy

你的佈局看起來有點複雜，我推薦使用**相對佈局**，只是嘗試通過**所見即所得**界面獲得這個佈局，然後手動採用它到你真正想要的 –

這種佈局相對來說比較容易製作，所以在大量的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以及空格將無法很好地工作。

來源

2012-11-27 11:21:57 Luksprog

謝謝很多你的努力和你的偉大答案，我會努力。 – Elkfrawy

我已經實施了您的解決方案，經過一些調整後，它的工作方式很有希望。例如，我在包裝器佈局上使用了'layout_marginLeft'而不是'paddingLeft'，並將其內容居中。 – Elkfrawy

實際上，在eclipse中xml佈局的「圖形佈局」中只有一個問題，它給出了這個異常並顯示灰色區域： 'com.example.test.RelativeLayoutExtension.dispatchDraw（java.lang.NullPointerException）（RelativeLayoutExtension .java：42）' 它引用了這一行'final int leftFirst = mFirstLinear.getLeft（）;'這意味着'onFinishInflate（）'函數永遠不會調用或者'findViewById（R.id.et21wrapper）'返回null ！那麼是否有解決這個問題或什麼？再次感謝。 – Elkfrawy

看着這個形象，它看起來像你想了很多的EditText的中塞進一個單獨的屏幕。這是一個非常不尋常的佈局......除非你的應用程序有一個非常非常具體的用例，因爲在另一個佈局不允許的情況下，我建議你嘗試使用Android中更「標準」的佈局之一，因爲這很可能增強可用性。但是，如果你確定這真的是你需要的，那麼我會看看GridLayout，其中最右邊的組件是可擴展的，幷包含一個LinearLayout或類似的東西。

來源

2012-11-26 21:30:55

您可以使用標準佈局創建它。主佈局是一個FrameLayout。背景是具有一些線條（或形狀來顯示線條）的圖像。活動佈局是一個用於顯示所有矩形的RelativeLayout。

來源

2012-11-27 07:39:31

我需要從圖像創建佈局

回答

相關問題