如何将ImageButton放在相对布局中的居中ImageButton上方

时间:2015-08-14 08:04:59

标签: android android-relativelayout

我有一个RelativeLayout居中,我有ImageButton居中。我希望另一个在第一个的右侧,但它看起来在屏幕的左侧,虽然与顶部对齐。

我使用了相对布局,因为我希望按钮相对于彼此。 (这是错的?)

我总共有四个按钮。

#1 centered.
#2 to the right of #1
#3 above #2
#4 to the left of #3

喜欢这样

.................
.               .
.       43      .
.       12      .
.               .
.................

#1位于中间位置。目前它看起来像这样:

.................
.               .
.43             .
. 2     1       .
.               .
.................
  • 我做错了什么?

这是布局文件:

<RelativeLayout
android:id="@+id/board_id"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/bg480x800"
android:orientation="vertical"
android:padding="0dp" >

<Button
    android:id="@+id/game_choice_6"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_below="@+id/game_choice_4" />

<Button
    android:id="@+id/game_choice_3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_below="@+id/game_choice_1" />

<Button
    android:id="@+id/game_choice_4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_below="@+id/game_choice_2" />

<Button
    android:id="@+id/game_choice_5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_below="@+id/game_choice_3" />

<Button
    android:id="@+id/game_choice_1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_below="@id/square_layout_id"
    android:layout_centerVertical="true" />

<Button
    android:id="@+id/game_choice_2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_below="@id/square_layout_id" />

<com.brdgms.android.SquareLayout
    android:id="@+id/square_layout_id"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:background="#00000000" >

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent" >

        <ImageView
            android:id="@+id/game_board"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:contentDescription="game Board"
            android:src="@drawable/game_board" />

        <com.brdgms.android.games.game.GameBoardView
            android:id="@+id/game_canvas"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

        <ImageButton
            android:id="@+id/button_game_player_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:src="@drawable/game_player_1_button" />

        <ImageButton
            android:id="@+id/button_game_player_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/button_game_player_1"
            android:layout_toRightOf="@+id/button_game_player_1"
            android:layout_toEndOf="@+id/button_game_player_1"
            android:src="@drawable/game_player_2_button" />

        <ImageButton
            android:id="@+id/button_game_player_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@+id/button_game_player_2"
            android:layout_alignLeft="@+id/button_game_player_2"
            android:src="@drawable/game_player_3_button" />

        <ImageButton
            android:id="@+id/button_game_player_4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/button_game_player_3"
            android:layout_toLeftOf="@+id/button_game_player_3"
            android:src="@drawable/game_player_4_button" />

    </RelativeLayout>

</com.brdgms.android.SquareLayout>

</RelativeLayout>

4 个答案:

答案 0 :(得分:1)

为什么使用相对布局?改为使用线性布局。使它水平并设置&#34; android:gravity&#34;在线性布局到中心。

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

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/some_drawable"/>

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/some_drawable"/>

</LinearLayout>

答案 1 :(得分:1)

试试这个......

<RelativeLayout 
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent" >

    <ImageButton
     android:id="@+id/button_1"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_centerInParent="true"
     android:src="@drawable/image1" />          //--your image

    <ImageButton
     android:id="@+id/button_2"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_alignBottom="@+id/button_1"
     android:layout_toEndOf="@+id/button_1"
     android:layout_toRightOf="@+id/button_1"
     android:src="@drawable/image1" />         //--your image

    <ImageButton
     android:id="@+id/button_3"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_above="@+id/button_2"
     android:layout_toEndOf="@+id/button_1"
     android:layout_toRightOf="@+id/button_1"
     android:src="@drawable/image1" />         //--your image

    <ImageButton
     android:id="@+id/button_4"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_above="@+id/button_1"
     android:layout_alignBottom="@+id/button_3"
     android:layout_toLeftOf="@+id/button_3"
     android:layout_toStartOf="@+id/button_3"
     android:src="@drawable/image1" />        //--your image

</RelativeLayout>

...输出

enter image description here

答案 2 :(得分:1)

我通过更改

解决了问题
android:layout_width="wrap_content"

android:layout_width="match_parent"

在内部RelativeLayout。

这不是关于按钮,而是关于布局。 : - /

答案 3 :(得分:0)

布局xml代码:     

<ImageButton
    android:id="@+id/button_2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignTop="@+id/button_1"
    android:layout_toRightOf="@+id/button_1" />

<ImageButton
    android:id="@+id/button_3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignRight="@id/button_2"
    android:layout_above="@+id/button_2" />

<ImageButton
    android:id="@+id/button_4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@id/button_1"
    android:layout_alignLeft="@id/button_1"/>

这是预览:

preview