如何将图像按钮对齐在另一个图像按钮下?

时间:2016-02-06 19:10:58

标签: android android-studio vertical-alignment screens

我在水平线性布局中有三个imageButton,我想在左上方的imageButton下面再添加一个imageButton(当左上方的imageButton开始并完成时,我希望下面的imageButton也是如此)。一切都在垂直线性布局中。我无法将向下的imageButton与向上对齐。我怎样才能做到这一点?有什么想法吗?

我的代码是:

android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginTop="20dp"
    android:gravity="center">

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageButton11"
        android:background="@drawable/image"
        android:layout_gravity="center"
        android:layout_marginRight="30dp"/>

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageButton12"
        android:background="@drawable/image"
        android:layout_gravity="center"
        android:layout_marginRight="30dp"/>

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageButton13"
        android:background="@drawable/image"
        android:layout_gravity="center"
        android:layout_marginRight="30dp"/>
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginTop="20dp"
    android:gravity="left">

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageButton14"
        android:background="@drawable/image"
        android:layout_marginRight="30dp"/>

</LinearLayout>

4 个答案:

答案 0 :(得分:1)

您可以尝试在想要在另一个下面的imageButton中使用RelativeLayout,并将其设置在您希望位于其上的图像按钮下方

android:layout_below="@+id/imagebutton1"

答案 1 :(得分:0)

xml中的chages尝试使用

<!doctype html>
<html ng-app="mylanguageap">
  <head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
  </head>
  <body>
  <div ng-controller="languages">
  Select your favorite language:
    <button ng-click="php()">PHP</button>   
    <button ng-click="java()">JAVA</button>     
    <button ng-click="cpp()">C++</button>   
    <button ng-click="javascript()">JAVA SCRIPT</button>    
    <p>You have selected: {{ myfavlanguage  }}</p>
  </div>

  <script>
    var application = angular.module('mylanguageapp',[]);
    application.controller('languages', function($scope){
    $scope.myfavlanguage = 'None';
    });
  </script>

</body>
</html>

screenshot of description

答案 2 :(得分:0)

  • 第一个LinearLayout(内部)标签的重力是“中心”,而第二个LinearLayout则是“左”。
  • 三个ImageButton标签,重力为“中心”,而最后一个,根本没有重力。

我认为这是你要找的那个。

   <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginTop="20dp">

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageButton11"
        android:layout_marginRight="30dp"/>

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageButton12"
        android:layout_marginRight="30dp"/>

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageButton13"
        android:layout_marginRight="30dp"/>
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginTop="20dp">

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageButton14"
        android:layout_marginRight="30dp"/>

</LinearLayout>

希望这有帮助!

编辑部分:

LinearLayout linearLayout = (LinearLayout)findViewById(R.id.id_layout);

    TableLayout tableLayout = new TableLayout(this);
    tableLayout.setStretchAllColumns(true);
    tableLayout.setGravity(Gravity.CENTER_HORIZONTAL);
    TableLayout.LayoutParams layoutParams = new TableLayout.LayoutParams(TableLayout.LayoutParams.WRAP_CONTENT,TableLayout.LayoutParams.WRAP_CONTENT);
    tableLayout.setVerticalScrollBarEnabled(true);
    tableLayout.setLayoutParams(layoutParams);

    TableRow tableRow = new TableRow(this);

    ImageButton imageButton = new ImageButton(this);
    ImageButton imageButton1 = new ImageButton(this);
    ImageButton imageButton2 = new ImageButton(this);

    tableRow.addView(imageButton);
    tableRow.addView(imageButton1);
    tableRow.addView(imageButton2);

    tableLayout.addView(tableRow);

    TableRow tableRow1 = new TableRow(this);
    tableRow1.setPadding(0, 0, 0, 40);
    TableRow.LayoutParams params = new TableRow.LayoutParams();
    params.span = 1;

    ImageButton imageButton3 = new ImageButton(this);

    tableRow1.addView(imageButton3);

    tableLayout.addView(tableRow1);

    linearLayout.addView(tableLayout);

希望这有帮助!

答案 3 :(得分:0)

使用 RelativeLayout 而不是通过TableLayout或LinearLayout,您可以更轻松地完成此操作。如果你愿意为你的imageButtons 使用固定宽度(这对于imageButtons来说应该不是什么问题),这里有一个布局可以解决你的问题。
(我在为简单起见,下面的布局,但它对imageButtons也一样。)

<?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"
    android:gravity="center_horizontal">
    <Button
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:id="@+id/btn1"
        android:text="Button1" />
    <Button
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:id="@+id/btn2"
        android:layout_toRightOf="@id/btn1"
        android:text="Button2" />
    <Button
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:id="@+id/btn3"
        android:layout_toRightOf="@id/btn2"
        android:text="Button3" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button4"
        android:id="@+id/btn4"
        android:layout_below="@id/btn1"
        android:layout_alignLeft="@id/btn1"
        android:layout_alignRight="@id/btn1"/>
</RelativeLayout>

以下是它的外观:
enter image description here