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

【问题标题】：Aligning linear layouts inside linear layout like whatsapp change profile picture在线性布局内对齐线性布局，如whatsapp更改个人资料图片
【发布时间】：2019-08-28 06:58:06
【问题描述】：

我正在尝试设计底部模式表，当用户单击以添加/更新像 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>

下面是我接触过的设计

预期的设计是 -：与 Whatsapp 相同，在 ANDROID 中从屏幕底部更改个人资料图片对话框。

【问题讨论】：

展示你已经取得的成就和你想要达到的目标
使用约束布局更好地布置小部件
@ShivamOberoi - 请检查我修改后的问题。
@LakhwinderSingh - 我们不能用 Linearlayout 来做吗？我只是想知道。我知道我们可以使用约束布局来获得更好的 UI。但是这个屏幕只显示在对话框（BottomSheet）中
是的，我们也可以使用线性布局来做到这一点，但是如果我们有更好的解决方案，为什么这很重要，你怎么看？

标签： android android-layout android-linearlayout android-xml

【解决方案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>

【讨论】：

酷，感谢您对约束布局的回答。我现在正在使用它。谢谢
请排除那种情况下的答案

【解决方案2】：

您好，对于您的这个设计问题，您可以使用底部工作表。

什么是底页？

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

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

特别感谢 Ravi Tamada 先生提供了关于底页的精彩教程

Android Working with Bottom Sheet

【讨论】：

感谢分享链接。甚至我在我以前使用过的 Bottomsheet 上查看了他的博客。但他垂直设计了模态表。我需要水平的。
无论如何-我正在使用@Lakhwinder Singh 回答使用约束布局，因为我没有时间。谢谢。