在线性布局内对齐线性布局，如 whatsapp 更改个人资料图片

Question

我正在尝试设计底部模态 sheet，当用户单击以添加/更新个人资料图片（如 WhatsApp）时，它将显示给用户。为此 - 我在 xml 文件中编码如下。

但是 - 我无法将第二个子 LinearLayout (Gallery) 居中对齐，最后一个 LinearLayout (Remove) 居右对齐。

我使用了重力和 layout_gravtiy = "center" / "center_horizontal"。但是——结果却不如预期。

最好的方法是什么？

注意：子线性布局的宽度和高度应为 wrap_content。

提前致谢。

下面是我的 xml 文件。

  <?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="horizontal"
  android:paddingBottom="10dp"
  android:paddingTop="10dp"
  android:paddingLeft="10dp"
  android:paddingRight="10dp">

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

    <de.hdodenhof.circleimageview.CircleImageView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@drawable/camera"
        android:layout_gravity="center_horizontal"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Camera"
        android:textColor="#000"
        android:textSize="10sp"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="3dp"
        android:textStyle="normal" />
</LinearLayout>

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

    <de.hdodenhof.circleimageview.CircleImageView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@drawable/gallery"
        android:layout_gravity="center_horizontal"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="3dp"
        android:text="Gallery"
        android:textColor="#000"
        android:textSize="10sp"
        android:textStyle="normal" />
</LinearLayout>

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:clickable="true"
    android:gravity="right"
    android:orientation="vertical">

    <de.hdodenhof.circleimageview.CircleImageView
        android:layout_width="55dp"
        android:layout_height="50dp"
        android:src="@drawable/image_delete" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="3dp"
        android:text="Remove"
        android:textColor="#000"
        android:textSize="10sp"
        android:textStyle="normal" />
</LinearLayout>

下面是我接近的设计

预期设计为 -：与 ANDROID.

屏幕底部的 Whatsapp 更改个人资料图片对话框相同

Answer 1

如果你可以使用约束布局那么你的布局可能是这样的

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/linearLayout45"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


<com.silverskysoft.skysalon.customViews.CircleImageView
    android:id="@+id/circleImageView"
    android:layout_width="52dp"
    android:layout_height="50dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:src="@drawable/ic_back"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:text="Camera"
    android:textColor="#ffffff"
    android:textSize="10sp"
    android:textStyle="normal"
    app:layout_constraintEnd_toEndOf="@+id/circleImageView"
    app:layout_constraintStart_toStartOf="@+id/circleImageView"
    app:layout_constraintTop_toBottomOf="@+id/circleImageView" />


<com.silverskysoft.skysalon.customViews.CircleImageView
    android:id="@+id/circleImageView2"
    android:layout_width="51dp"
    android:layout_height="50dp"
    android:layout_marginStart="8dp"
    android:src="@drawable/ic_packages"
    app:layout_constraintStart_toEndOf="@+id/circleImageView"
    app:layout_constraintTop_toTopOf="@+id/circleImageView" />

<TextView
    android:id="@+id/textView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:text="Gallery"
    android:textColor="#ffffff"
    android:textSize="10sp"
    android:textStyle="normal"
    app:layout_constraintEnd_toEndOf="@+id/circleImageView2"
    app:layout_constraintStart_toStartOf="@+id/circleImageView2"
    app:layout_constraintTop_toBottomOf="@+id/circleImageView2" />


<com.silverskysoft.skysalon.customViews.CircleImageView
    android:id="@+id/circleImageView3"
    android:layout_width="52dp"
    android:layout_height="50dp"
    android:layout_marginStart="8dp"
    android:src="@drawable/ic_signout"
    app:layout_constraintStart_toEndOf="@+id/circleImageView2"
    app:layout_constraintTop_toTopOf="@+id/circleImageView2" />

<TextView
    android:id="@+id/textView4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:text="Remove"
    android:textColor="#ffffff"
    android:textSize="10sp"
    android:textStyle="normal"
    app:layout_constraintEnd_toEndOf="@+id/circleImageView3"
    app:layout_constraintStart_toStartOf="@+id/circleImageView3"
    app:layout_constraintTop_toBottomOf="@+id/circleImageView3" />
</androidx.constraintlayout.widget.ConstraintLayout>

线性布局

<?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/linearLayout45"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">


    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:padding="16dp"
        android:drawableTop="@drawable/camera"
        android:drawablePadding="8dp"
        android:text="Camera"
        android:textColor="#ffffff"
        android:textSize="10sp"
        android:textStyle="normal" />


    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:padding="16dp"
        android:text="Gallery"
        android:drawableTop="@drawable/gallery"
        android:drawablePadding="8dp"
        android:textColor="#ffffff"
        android:textSize="10sp"
        android:textStyle="normal" />


    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:drawableTop="@drawable/image_delete"
        android:drawablePadding="8dp"
        android:padding="16dp"
        android:text="Remove"
        android:textColor="#ffffff"
        android:textSize="10sp"
        android:textStyle="normal" />
</LinearLayout>

Answer 2

你好，你这个设计问题可以用bottom Sheet.

什么是底部Sheet?

回答。 Android 底部 Sheet 组件从底部向上滑动，显示更多相关内容。您可以在地图应用程序（底部 sheet 显示位置、方向信息）、音乐播放器（播放栏固定在底部并在向上滑动时打开）等应用程序中注意到底部 sheets。底部 sheet 是 android 设计支持库的组件。

请参考此 link 以获得您的解决方案。

特别感谢 Ravi Tamada 先生关于底部的精彩教程 sheet

Android Working with Bottom Sheet

在线性布局内对齐线性布局，如 whatsapp 更改个人资料图片

Aligning linear layouts inside linear layout like whatsapp change profile picture

android

android-layout

android-linearlayout

android-xml