将线性布局转换为约束布局会导致视图太左

Question

我有这个嵌套的线性布局

 <LinearLayout
      android:id="@+id/has_selected_account"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:layout_marginTop="@dimen/account_menu_header_signed_in_vertical_margin"
      android:layout_marginBottom="@dimen/account_menu_header_signed_in_vertical_margin"
      android:orientation="horizontal"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toStartOf="@+id/close_and_recents"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent">
    <com.myImage
        android:id="@+id/account_avatar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/account_menu_header_signed_in_avatar_margin_start"
        android:layout_marginEnd="@dimen/account_menu_header_signed_in_avatar_margin_end"
        android:layout_marginLeft="@dimen/account_menu_header_signed_in_avatar_margin_start"
        android:layout_marginRight="@dimen/account_menu_header_signed_in_avatar_margin_end"
        android:contentDescription="@null"
        app:imageViewSize="@dimen/account_menu_header_signed_in_disc_size"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingTop="@dimen/account_menu_name_and_display_vertical_padding"
        android:paddingBottom="@dimen/account_menu_name_and_display_vertical_padding"
        android:orientation="vertical">
      <TextView
          android:id="@+id/account_display_name"
          style="@style/AccountDataDisplayName"
          android:layout_width="wrap_content"
          android:layout_height="0dp"
          android:layout_weight="1"
          android:gravity="center_vertical"
          tools:text="DisplayNameIsLongSoItShouldBeTruncatedAtSomePoint"/>
      <TextView
          android:id="@+id/account_name"
          style="@style/AccountDataAccountName"
          android:layout_width="wrap_content"
          android:layout_height="0dp"
          android:layout_weight="1"
          android:gravity="center_vertical|start"
          android:includeFontPadding="false"
          tools:text="emailisverylongaswellwewantittogettruncated@gmail.longdomain.com"/>
    </LinearLayout>
  </LinearLayout>

我想将其转换为一种约束布局：

    <merge>
      <android.support.constraint.ConstraintLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      xmlns:tools="http://schemas.android.com/tools"
      android:id="@+id/has_selected_account"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:background="@color/google_blue100">
    <com.myView
        android:id="@+id/account_avatar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/account_menu_header_signed_in_avatar_margin_start"
        android:layout_marginEnd="@dimen/account_menu_header_signed_in_avatar_margin_end"
        android:layout_marginLeft="@dimen/account_menu_header_signed_in_avatar_margin_start"
        android:layout_marginRight="@dimen/account_menu_header_signed_in_avatar_margin_end"
        android:contentDescription="@null"
        app:imageViewSize="@dimen/account_menu_header_signed_in_disc_size"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>
    <View
        android:id="@+id/account_display_name_top_padding"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="@dimen/account_menu_name_and_display_vertical_padding"
        android:background="@color/google_red50"
        app:layout_constraintBottom_toTopOf="@id/account_display_name"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/account_avatar"
        app:layout_constraintTop_toTopOf="parent"/>
    <TextView
        android:id="@+id/account_display_name"
        style="@style/AccountDataDisplayName"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/google_red100"
        android:gravity="center_vertical"
        android:includeFontPadding="false"
        app:layout_constraintBottom_toTopOf="@+id/account_name"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintStart_toEndOf="@+id/account_avatar"
        app:layout_constraintTop_toTopOf="@+id/account_display_name_top_padding"
        app:layout_constraintVertical_chainStyle="packed"
        app:layout_constraintWidth_default="wrap"
        tools:text="DisplayNameIssLongSoItShouldBeTruncatedAtSomePoint"/>
    <TextView
        android:id="@+id/account_name"
        style="@style/AccountDataAccountName"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/google_green100"
        android:gravity="center_vertical"
        android:includeFontPadding="false"
        app:layout_constraintBottom_toBottomOf="@+id/account_name_bottom_padding"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintStart_toEndOf="@+id/account_avatar"
        app:layout_constraintTop_toBottomOf="@+id/account_display_name"
        app:layout_constraintWidth_default="wrap"
        tools:text="emailisverylongaswellwewantittogettruncated@gmail.longdomain.com"/>
    <View
        android:id="@+id/account_name_bottom_padding"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="@dimen/account_menu_name_and_display_vertical_padding"
        android:background="@color/google_red50"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/account_avatar"
        app:layout_constraintTop_toBottomOf="@id/account_name"/>
  </android.support.constraint.ConstraintLayout>
    </merge>

结果几乎可以，但是textViews太高了，离Image视图太近了。

这是与旧版ui重叠的新结果：

有人知道为什么吗？或如何解决这个问题？

我在imageView上增加了空白，但是似乎没有任何改变。

Answer 1

尝试在TextViews中的LinearLayout和ConstraintLayout中的结构之间建立更并行的结构，如下所示。在这里，我使用FrameLayout来更好地显示叠加层，并在尺寸上有所保留，但是这一概念适用于您的布局。正如您从图像中看到的，TextViews精确地排成一行，但最终TextViews的字符在两组<FrameLayout android:layout_width="match_parent" android:layout_height="100dp" android:orientation="horizontal"> <LinearLayout android:layout_width="250dp" android:layout_height="match_parent" android:orientation="vertical" android:paddingTop="16dp" android:paddingBottom="16dp"> <TextView android:id="@+id/account_display_name" android:layout_width="wrap_content" android:layout_height="0dp" android:layout_marginStart="16dp" android:layout_weight="1" android:gravity="center_vertical" android:text="DisplayName1" /> <TextView android:id="@+id/account_name" android:layout_width="wrap_content" android:layout_height="0dp" android:layout_marginStart="16dp" android:layout_weight="1" android:gravity="center_vertical|start" android:includeFontPadding="false" android:text="emailisvery1" /> </LinearLayout> <android.support.constraint.ConstraintLayout android:layout_width="500dp" android:layout_height="match_parent"> <TextView android:id="@+id/account_display_name2" android:layout_width="wrap_content" android:layout_height="0dp" android:layout_marginStart="16dp" android:gravity="center_vertical" android:paddingTop="16dp" android:text="DisplayName2" app:layout_constraintBottom_toTopOf="@id/account_name2" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_weight="1" /> <TextView android:id="@+id/account_name2" android:layout_width="wrap_content" android:layout_height="0dp" android:layout_marginStart="16dp" android:gravity="center_vertical|start" android:includeFontPadding="false" android:paddingBottom="16dp" android:text="emailisvery2" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@id/account_display_name2" app:layout_constraintVertical_weight="1" /> </android.support.constraint.ConstraintLayout> </FrameLayout>t> 之间是不同的，以使视觉效果清晰可见。

convert "(" -size 1000x1000 xc:transparent ")" "(" "img.jpg" -virtual-pixel white -rotate -10.75 ")" -geometry +136+148 -composite "overlay.png" -geometry +0+0 -composite out.png