如何在Android中實現給定屏幕的布局？

Question

我嘗試了Framelayout ， LinearLayout和RelativeLayout的許多Framelayout ，但對如何在Android中實現以下屏幕布局Framelayout 。

因此，讓我們進入LinearLayout 。

[！[在此處輸入圖片描述] [1]] [1]

• 第一部分是TextView ，可以看到Manhattan, NY
• 第二部分是ImageView ，我們可以看到心和數量。
• 第三部分是不同的背景顏色，帶有兩個包含文本的個人資料圖片。
• 第四部分是帶有Drable行的簡單文本。
• 第五部分與第四部分非常相似
• 第六節是一個按鈕

我能夠使用LinearLayout和Bitmap添加心形圖像來獲得前兩個部分。

題

如何實現Third section ？ 我需要LinearLayout或FrameLayout嗎？

我得到的是第三部分是placeholder ，在其中我們設置了背景色並添加了兩個圖像。 對？

什么是實現整體布局的最佳選擇？

Answer 1

您需要最靈活的RelativeLayout-您只能使用它進行第3節並將其嵌套到LinearLayout或者只用一個RelativeLayout進行整個布局（盡管后一種選項對於按比例划分可用空間不是很好，輕松使用帶LinearLayout重的LinearLayout ）

Answer 2

只是為了補充Ivan的答案，對於Android XML，您必須執行與基於表的設計類似的操作。

您可以使用http://developer.android.com/guide/topics/ui/layout/relative.html作為對RelativeLayout和http://developer.android.com/guide/所允許執行的所有操作的參考topic / ui / layout / linear.html作為使用LinearLayout的參考。

但是一般

• 如果要使元素彼此垂直或水平放置，以使每個元素占用一定的空間，則可以使用LinearLayout。 下面的示例將創建一行水平的三個文本視圖，每個文本視圖占據屏幕的1/3。 請注意，您的權重不必完全等於1.0。

<LinearLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  >
  <TextView
    android:layout_width="0dp"
    android:layout_height="24sp"
    android:layout_weight="0.33"
    />
  <TextView
    android:layout_width="0dp"
    android:layout_height="24sp"
    android:layout_weight="0.33"
    />
  <TextView
    android:layout_width="0dp"
    android:layout_height="24sp"
    android:layout_weight="0.33"
    />
</LinearLayout>

• 如果您希望某個元素在另一個元素之上或與另一個元素相鄰，請使用RelativeLayout。 以下代碼將創建一個大的ImageButton，在圖像底部放置一個半透明的文本標簽，並在圖像下方放置一個標題

<RelativeLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  />
  <ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/example.png"
    android:id="@+id/exampleImage"
    />
  <TextView
    android:layout_width="wrap_content"
    android:layout_height="24sp"
    android:layout_alignLeft="@id/exampleImage"
    android:layout_alignRight="@id/exampleImage"
    android:layout_alignBottom="@id/exampleImage"
    android:background="#80808080"
    android:text="on image label"
    />
  <TextView
    android:layout_width="wrap_content"
    android:layout_height="24sp"
    android:layout_alignLeft="@id/exampleImage"
    android:layout_alignRight="@id/exampleImage"
    android:layout_below="@id/exampleImage"
    android:background="#FF808080"
    android:text="below image caption"
    />
</RelativeLayout>