如何在LinearLayout或其他布局中水平对齐3个视图

时间:2018-12-17 12:36:59

标签: android android-layout

我想在CheckBoxEditTextImageButton的单行中水平对齐3个视图。我尽力而为,但是能够正确实现我已经在下面粘贴了XML代码,请提供一些建议或示例代码,请帮助我。

enter image description here

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

    <LinearLayout
        android:id="@+id/parentLinear"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:id="@+id/linear"
            android:padding="5"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <CheckBox
                android:id="@+id/checkBox"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:layout_marginBottom="8dp" />

            <EditText
                android:id="@+id/editText"
                android:layout_width="match_parent"
                android:layout_height="43dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"
                android:layout_marginEnd="8dp"
                android:layout_marginBottom="8dp"
                android:ems="10"
                android:inputType="textPersonName"
                android:text="Name" />
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/child"
        android:layout_alignRight="@id/parentLinear">
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <ImageButton
            android:id="@+id/imageButton2"
            android:layout_width="37dp"
            android:layout_height="40dp"
            android:layout_marginTop="5dp"
            android:layout_marginRight="5dp"
            android:background="?attr/selectableItemBackgroundBorderless"
            android:scaleType="centerInside"
            app:srcCompat="@drawable/add_blue" />
    </LinearLayout>
    </LinearLayout>
</RelativeLayout>

6 个答案:

答案 0 :(得分:1)

如果您使用RELATIVE LAYOUT或Constraint Layout(更好),则最好不要使用线性布局。制作起来会更容易,并且效果会更好。 要么 使用单个线性布局来对齐视图,并且使用的线性布局过多,这将是非常昂贵的操作。

答案 1 :(得分:1)

检查以下内容

 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="horizontal"
    android:layout_marginTop="16dp"
    android:layout_marginEnd="16dp"
    android:layout_marginStart="16dp"
    android:layout_height="wrap_content">

<CheckBox
        android:id="@+id/checkBox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
/>

<EditText
        android:contentDescription="@null"
        android:id="@+id/editText"
        android:layout_width="0dp"
        android:layout_height="43dp"
        android:layout_weight="1"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:ems="10"
        android:inputType="textPersonName"
        android:text="Name"/>

<ImageButton
        android:contentDescription="@null"
        android:src="@drawable/ic_launcher_round"
        android:id="@+id/imageButton2"
        android:layout_width="37dp"
        android:layout_height="40dp"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:scaleType="centerInside"
/>

enter image description here

答案 2 :(得分:0)

无需为此使用嵌套布局

您可以仅使用一个LinearLayout

您可以在android:drawableEnd="@drawable/ic_fav"中设置EditText来替换图像按钮

示例代码

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

    <CheckBox
        android:id="@+id/checkBox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp" />

    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="43dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:drawableEnd="@drawable/ic_fav"
        android:ems="10"
        android:inputType="textPersonName"
        android:text="Name" />

</LinearLayout>

输出

enter image description here

  

另一种方式

如果您不想使用android:drawableEnd而不是第二种解决方案

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/coordinatorlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <CheckBox
        android:id="@+id/checkBox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:background="@drawable/test"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/editText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginBottom="8dp"
            android:ems="10"
            android:background="@android:color/transparent"
            android:inputType="textPersonName"
            android:text="Name" />

        <ImageButton
            android:id="@+id/imageButton2"
            android:layout_width="37dp"
            android:layout_alignParentEnd="true"
            android:layout_height="40dp"
            android:layout_marginTop="5dp"
            android:layout_marginRight="5dp"
            android:background="?attr/selectableItemBackgroundBorderless"
            android:scaleType="centerInside"
            app:srcCompat="@drawable/ic_fav" />

    </RelativeLayout>

</LinearLayout>
  

可绘制/测试

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="-10dp"
        android:left="-10dp"
        android:right="-10dp">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent"/>

            <stroke android:width="2dp"
                android:color="#3498db"/>
        </shape>
    </item>
</layer-list>

输出

enter image description here

答案 3 :(得分:0)

<?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:id="@+id/parentLinear"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <CheckBox
        android:id="@+id/checkBox"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="8dp"
        android:layout_weight="0.1" />

    <EditText
        android:id="@+id/editText"
        android:layout_width="0dp"
        android:layout_weight="0.8"
        android:layout_height="43dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:ems="10"
        android:inputType="textPersonName"
        android:text="Name" />

    <ImageButton
        android:id="@+id/imageButton2"
        android:layout_width="0dp"
        android:layout_weight="0.1"
        android:layout_height="40dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="5dp"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:scaleType="centerInside"
        android:src="@drawable/add_blue" />
</LinearLayout>
</RelativeLayout>

答案 4 :(得分:0)

对于LinearLayout,您必须使用android:orientation="horizontal"。对于ConstraintLayout,您必须使用app:layout_constraintHorizontal_weight="value like 1, 2",为此,您必须为两个视图都设置RightToLeftOfLegtToRightOf。对于RelativeLayout,您必须在子视图中设置alignSTartToEndOf

答案 5 :(得分:0)

实际上,您不需要嵌套的LinearLayout。一个LinearLayout足以满足您的要求。尝试执行以下代码...

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:id="@+id/parentLinear"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto">


  <CheckBox
      android:id="@+id/checkBox"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginTop="8dp"
      android:layout_marginBottom="8dp" />

  <EditText
      android:id="@+id/editText"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:layout_marginStart="8dp"
      android:layout_marginTop="8dp"
      android:layout_marginEnd="8dp"
      android:layout_marginBottom="8dp"
      android:ems="10"
      android:inputType="textPersonName"
      android:text="Name"
      android:layout_weight="1"/>

  <ImageButton
      android:id="@+id/imageButton2"
      android:layout_width="37dp"
      android:layout_height="40dp"
      android:layout_marginTop="5dp"
      android:layout_marginRight="5dp"
      android:background="?attr/selectableItemBackgroundBorderless"
      android:scaleType="centerInside"
      app:srcCompat="@drawable/add_blue" />
</LinearLayout>

尝试使用尽可能少的布局。