2017-05-16 69 views
-1

buttons to be arranged in center of the layout我有一個屏幕上的四個按鈕,我想在屏幕中央排列,九個按鈕在下一個屏幕中應該排列在屏幕中央等等在..我使用線性佈局,但IAM沒有得到所需的佈局。 下面是我的XML ..排列布局中的按鈕

<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:paddingBottom="@dimen/activity_vertical_margin" 
android:paddingLeft="@dimen/activity_horizontal_margin" 
android:paddingRight="@dimen/activity_horizontal_margin" 
android:paddingTop="@dimen/activity_vertical_margin" 
tools:context="com.example.go123.MainActivity" > 

<TextView 
    android:id="@+id/textView1" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="@string/hello_world" /> 
<LinearLayout 
android:layout_width="fill_parent" 
android:layout_height="wrap_content" 
android:layout_gravity="center" 
android:paddingStart="10dip" 
android:paddingEnd="10dip" 
android:paddingLeft="10dip" 
android:paddingRight="10dip"> 

    <Button 
     android:id="@+id/button0" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center_horizontal" 
     android:text="Go 1,2,3.." /> 

<Button 
    android:id="@+id/button1" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_gravity="center_horizontal" 
    android:text="Go 1,2,3.." /> 

     <Button 
    android:id="@+id/button2" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_below="@+id/button0" 
    android:text="Go 1,2,3.." /> 

<Button 
    android:id="@+id/button3" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_below="@+id/button1" 
    android:text="Go 1,2,3.." /> 

我也試圖使用Android Flexbox的佈局,但沒有成功..

我得到的是這樣的形象.. Only three buttons shown!

+1

你需要垂直放置按鈕嗎? – jagapathi

+1

添加您正在查找的結果的快照。紙上簡單的草圖會很好。 – Ritesh

+0

@Ritesh添加了期望的結果的snopshot .. – amit

回答

1

屏合一:

使用RelativeLayout爲根佈局,並添加子縱LinearLayout並通過使用屬性android:layout_centerInParent="true"使其對齊center

2.再加兩個橫向LinearLayout以上內部LinearLayout

Button's水平LinearLayout's內。

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <LinearLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_centerInParent="true" 
     android:orientation="vertical"> 

     <!-- ROW 1 --> 
     <LinearLayout 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:orientation="horizontal"> 

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

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

     </LinearLayout> 

     <!-- ROW 2 --> 
     <LinearLayout 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:orientation="horizontal"> 

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

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

     </LinearLayout> 
    </LinearLayout> 
</RelativeLayout> 

OUTPUT:

enter image description here

SCREEN_TWO:

使用RelativeLayout爲根佈局,並添加子縱LinearLayout並使其center通過使用屬性對齊android:layout_centerInParent="true"

2.再加上三個水平線LinearLayout以上內部LinearLayout

3.Button's水平內LinearLayout's

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <LinearLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_centerInParent="true" 
     android:orientation="vertical"> 

     <!-- ROW 1 --> 
     <LinearLayout 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:orientation="horizontal"> 

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

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

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

     </LinearLayout> 

     <!-- ROW 2 --> 
     <LinearLayout 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:orientation="horizontal"> 

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

      <Button 
       android:id="@+id/button5" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:text="Button 5"/> 

      <Button 
       android:id="@+id/button6" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:text="Button 6"/> 

     </LinearLayout> 

     <!-- ROW 3 --> 
     <LinearLayout 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:orientation="horizontal"> 

      <Button 
       android:id="@+id/button7" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:text="Button 7"/> 

      <Button 
       android:id="@+id/button8" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:text="Button 8"/> 

      <Button 
       android:id="@+id/button9" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:text="Button 9"/> 

     </LinearLayout> 
    </LinearLayout> 
</RelativeLayout> 

OUTPUT:

enter image description here

僅供參考,你可以改變Button高度按您的需求。

1

對於屏幕1的設計使用這個

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:id="@+id/activity_home" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:paddingBottom="@dimen/activity_vertical_margin" 
    android:paddingLeft="@dimen/activity_horizontal_margin" 
    android:paddingRight="@dimen/activity_horizontal_margin" 
    android:paddingTop="@dimen/activity_vertical_margin" 
    tools:context="in.ap.rythunestam.HomeActivity"> 

    <TableLayout 
     android:layout_width="match_parent" 
     android:layout_centerInParent="true" 
     android:layout_height="wrap_content"> 
     <TableRow 
      android:layout_width="0dp" 
      android:layout_height="wrap_content"> 
      <RelativeLayout 
       android:layout_height="wrap_content" 
       android:layout_weight="1" 
       android:layout_width="wrap_content"> 
      <Button 
       android:layout_width="wrap_content" 
       android:layout_centerHorizontal="true" 
       android:text="button 1" 
       android:layout_height="wrap_content" /> 
      </RelativeLayout> 
      <RelativeLayout 
       android:layout_height="wrap_content" 
       android:layout_weight="1" 
       android:layout_width="wrap_content"> 
       <Button 
        android:layout_width="wrap_content" 
        android:layout_centerHorizontal="true" 
        android:text="button 2" 
        android:layout_height="wrap_content" /> 
      </RelativeLayout> 
     </TableRow> 
     <TableRow> 
      <RelativeLayout 
       android:layout_height="wrap_content" 
       android:layout_weight="1" 
       android:layout_width="wrap_content"> 
       <Button 
        android:layout_width="wrap_content" 
        android:text="button 3" 
        android:layout_centerHorizontal="true" 
        android:layout_height="wrap_content" /> 
      </RelativeLayout> 
      <RelativeLayout 
       android:layout_height="wrap_content" 
       android:layout_weight="1" 
       android:layout_width="wrap_content"> 
       <Button 
        android:layout_width="wrap_content" 
        android:layout_centerHorizontal="true" 
        android:text="button 4" 
        android:layout_height="wrap_content" /> 
      </RelativeLayout> 
     </TableRow> 
    </TableLayout> 

</RelativeLayout> 

輸出enter image description here

對於屏幕修改相同的代碼爲9個按鍵希望幫助