如何在Android中實現這種佈局？

如何使用RelativeLayout在Android中獲得此佈局？無論我嘗試什麼，前2個按鈕都不會按預期顯示。下面我提供了我想要的東西，我嘗試的東西以及我的嘗試輸出的截圖。請任何人都可以幫助我？謝謝。如何在Android中實現這種佈局？

enter image description here

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:ads="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:background="#f5f5f5" 
    tools:context=".MainActivity" > 

    <Button 
     android:id="@+id/button1" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentLeft="true" 
     android:layout_alignParentTop="true" 
     android:text="Button" /> 

    <Button 
     android:id="@+id/button2" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentRight="true" 
     android:layout_alignParentTop="true" 
     android:text="Button" /> 

    <Button 
     android:id="@+id/button3" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentBottom="true" 
     android:layout_alignParentLeft="true" 
     android:layout_alignParentRight="true" 
     android:text="Button" /> 

    <Button 
     android:id="@+id/button4" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_above="@+id/button3" 
     android:layout_alignParentLeft="true" 
     android:layout_alignParentRight="true" 
     android:layout_below="@+id/button1" 
     android:text="Button" /> 

</RelativeLayout>

更新時間：

任何幫助深表感謝。

來源

2015-02-24 Henry

爲什麼使用'RelativeLayout'？你可以很容易地用一個外部垂直'LinearLayout'來實現，這個'LinearLayout'包含一個用於按鈕1和2的水平'LinearLayout'，然後是按鈕3和按鈕4.只需將'layout_weight'設置爲水平LinearLayout的1/8/1;按鈕3/4分別。 – Squonk 2015-02-24 15:27:40

試試這個：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:ads="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:background="#000000" 
    tools:context=".MainActivity" > 

    <LinearLayout 
     android:id="@+id/topLayout" 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:weightSum="1" 
     android:orientation="horizontal" > 

     <Button 
      android:id="@+id/button1" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:layout_weight="0.5" 
      android:gravity="center" 
      android:textColor="#ffffff" 
      android:background="#ff6a2b" 
      android:text="Button 1" /> 

     <Button 
      android:id="@+id/button2" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:layout_weight="0.5" 
      android:layout_marginLeft="1dp" 
      android:gravity="center" 
      android:textColor="#ffffff" 
      android:background="#ff6a2b" 
      android:text="Button 2" /> 

    </LinearLayout> 

    <Button 
     android:id="@+id/button4" 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:layout_alignParentBottom="true" 
     android:gravity="center" 
     android:textColor="#ffffff" 
     android:background="#14b8ff" 
     android:text="Button 4" /> 

    <Button 
     android:id="@+id/button3" 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent" 
     android:layout_above="@+id/button4" 
     android:layout_below="@+id/topLayout" 
     android:gravity="center" 
     android:textColor="#ffffff" 
     android:background="#000000" 
     android:text="Button 3" /> 

</RelativeLayout>

好運。

來源

2015-02-24 15:25:54

嗨，謝謝它的作品，但按鈕之間有空格，我可以刪除它們嗎？ http://i.stack.imgur.com/Ls7RF.png謝謝。 – Henry 2015-02-24 15:38:57

這是因爲android自定義按鈕背景。定義你的按鈕可繪製或按鈕背景色後，你會看到它們消失了。 – 2015-02-24 15:40:55

@亨利看到我的編輯，我添加了背景顏色，他們走了。 – 2015-02-24 15:45:47

試試這個：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:background="#f5f5f5" 
tools:context=".MainActivity" > 

<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:orientation="horizontal" 
    android:weightSum="2" 
    android:id="@+id/topButtons"> 

<Button 
    android:id="@+id/button1" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="Button1" 
    android:layout_weight="1"/> 

<Button 
    android:id="@+id/button2" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="Button2" 
    android:layout_weight="1"/> 

</LinearLayout> 

<Button 
    android:id="@+id/button3" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_below="@+id/topButtons" 
    android:layout_above="@+id/button4" 
    android:text="Button3" /> 

<Button 
    android:id="@+id/button4" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:text="Button4" 
    android:layout_alignParentBottom="true"/>

來源

2015-02-24 15:24:07 Megaetron

嗨，感謝它的工作，但按鈕之間有空格，我可以刪除這些？ http://i.stack.imgur.com/Ls7RF.png謝謝。 – Henry 2015-02-24 15:39:13

你也可以使用一個無形的視圖來達到同樣的效果，而無需使用額外的佈局：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:ads="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:background="#f5f5f5" 
    tools:context=".MainActivity" > 

    <Button 
     android:id="@+id/button1" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentLeft="true" 
     android:layout_alignParentTop="true" 
     android:text="Button" 
     android:layout_toStartOf="@+id/alignment" /> 

    <View 
     android:id="@+id/alignment" 
     android:layout_width="0dp" 
     android:layout_height="match_parent" 
     android:layout_centerHorizontal="true" 
     android:visibility="invisible" /> 

    <Button 
     android:id="@+id/button2" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentRight="true" 
     android:layout_alignParentTop="true" 
     android:text="Button" 
     android:layout_toEndOf="@+id/alignment" /> 

    <Button 
     android:id="@+id/button3" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentBottom="true" 
     android:layout_alignParentLeft="true" 
     android:layout_alignParentRight="true" 
     android:text="Button" /> 

    <Button 
     android:id="@+id/button4" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_above="@+id/button3" 
     android:layout_alignParentLeft="true" 
     android:layout_alignParentRight="true" 
     android:layout_below="@+id/button1" 
     android:text="Button" /> 

</RelativeLayout>

來源

2015-02-24 15:34:43

嗨，感謝它的作品，但按鈕之間有空格，我可以刪除這些？ http://i.stack.imgur.com/Ls7RF.png謝謝。 – Henry 2015-02-24 15:40:35

調整button1的xml中使用'android：layout_marginRight =「 - 4dp」'（或其他負數）和button2的xml中'android：layout_marginLeft =「 - 4dp」'（或其他負數）之間的距離。 – 2015-02-24 16:25:06

我會建議使用線性佈局！因爲您似乎需要將按鈕1和2放在最上方，並將按鈕4放在最下方，並使按鈕3佔據所有剩餘的空白區域。爲此，請在下面使用layout_weight的：我沒有使用alignParent，layout_above或layout_below屬性了，因爲他們是無用的的LinearLayout

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:ads="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" 
    android:background="#f5f5f5" 
    tools:context=".MainActivity" > 

    <LinearLayout 
     android:id="@+id/header" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:orientation="horizontal" > 

     <Button 
      android:id="@+id/button1" 
      android:layout_width="0dp" 
      android:layout_weight="1" 
      android:layout_height="wrap_content" 
      android:text="Button" /> 

     <Button 
      android:id="@+id/button2" 
      android:layout_width="0dp" 
      android:layout_weight="1" 
      android:layout_height="wrap_content" 
      android:text="Button" /> 

    </LinearLayout> 

    <Button 
     android:id="@+id/button3" 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_weight="1" 
     android:text="Button" /> 

    <Button 
     android:id="@+id/button4" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content 
     android:text="Button" /> 

</LinearLayout>

通知。另請注意，我已經指定了幾個按鈕的寬度或高度爲0。在這個問題上，他們將根據屏幕上剩餘的空白空間進行計算。因此，無論運行應用程序的設備的屏幕尺寸如何，此佈局都將保持兼容！

來源

2015-02-24 15:40:29 Leeeeeeelo

這裏應該是解決方案：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:ads="http://schemas.android.com/apk/res-auto" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:background="#f5f5f5" 
android:orientation="vertical" 
tools:context=".MainActivity" > 

<RelativeLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_alignParentTop="true" 
    android:orientation="horizontal"> 


    <Button 
    android:id="@+id/button1" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_alignParentLeft="true" 
    android:text="Button1" /> 

    <Button 
    android:id="@+id/button2" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_alignParentRight="true" 
    android:layout_toRightOf="@+id/button1" 
    android:text="Button2" /> 
</RelativeLayout> 

    <Button 
    android:id="@+id/button3" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_alignParentCenter="true" 
    android:text="Button3" /> 

    <Button 
    android:id="@+id/button4" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_alignParentBottom="true" 
    android:text="Button4" /> 

</RelativeLayout>

，你也需要添加android:background=顏色爲每個按鈕。

來源

2015-02-24 15:47:18 Xcihnegn

如何在Android中實現這種佈局？

回答

相關問題