Android LinearLayout 非对称居中

Question

在下面的布局中，如何确保 blue_view 在屏幕上水平居中（即它的左边缘和右边缘与 red_view 完全对齐）？

我知道 ConstraintLayout 和 RelativeLayout 有一些方法可以做到这一点。我很好奇是否有办法用 LinearLayout.

来完成这个

<?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:orientation="vertical">

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

        <View
            android:id="@+id/blue_view"
            android:layout_width="200dp"
            android:layout_height="50dp"
            android:background="@color/blue"
            android:layout_marginEnd="20dp"/>

        <View
            android:id="@+id/green_view"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="@color/green"/>

    </LinearLayout>

    <View
        android:id="@+id/red_view"
        android:layout_width="200dp"
        android:layout_height="50dp"
        android:background="@color/red"
        android:layout_marginTop="20dp"
        android:layout_gravity="center_horizontal"/>

</LinearLayout>

当前布局图像:

所需布局:

Answer 1

看看这个

<?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:orientation="vertical">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginLeft="35dp"
        android:orientation="horizontal">

        <View
            android:id="@+id/blue_view"
            android:layout_width="200dp"
            android:layout_height="50dp"
            android:layout_gravity="center_horizontal"
            android:background="@color/blue"
            android:layout_marginRight="20dp"/>

        <View
            android:id="@+id/green_view"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="@color/green"/>

    </LinearLayout>

    <View
        android:id="@+id/red_view"
        android:layout_width="200dp"
        android:layout_height="50dp"
        android:background="@color/red"
        android:layout_marginTop="20dp"
        android:layout_gravity="center_horizontal"/>

</LinearLayout>

输出：-

也许能解决您的问题....

这一切都是关于添加 android:layout_marginLeft="35dp" 因为你已经给它一个 childView marginRight="20dp" 而另一个 childView 正在使用 50dp 的中心大小。

Answer 2

这是另一种处理填充的方法

<?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:background="#fff"
android:orientation="vertical">


<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    android:paddingLeft="70dp">

    <View
        android:id="@+id/blue_view"
        android:layout_width="200dp"
        android:layout_height="50dp"
        android:layout_gravity="center_horizontal"
        android:background="@color/colorBlack" />

    <View
        android:id="@+id/green_view"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginLeft="20dp"
        android:background="@color/colorRed" />
    </LinearLayout>

  <View
    android:id="@+id/red_view"
    android:layout_width="200dp"
    android:layout_height="50dp"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="20dp"
    android:background="@color/colorGreen" />


 </LinearLayout>

添加尽可能多的填充额外 space 它正在接管底部视图，在这种情况下 20 个边距和 50 个第二个视图所以总共 70

输出：

此外，我认为没有硬编码

就可以使用 LinearLayout 来做到这一点

Android LinearLayout 非对称居中

Android LinearLayout Asymmetric Centering

android

android-linearlayout