居中对齐到最长TextView的左对齐TextView在带有包装内容的LinearLayout中不起作用

时间:2020-06-23 15:05:18

标签: android android-layout textview android-linearlayout android-constraintlayout

我想创建一个布局,其中有多行不同长度的文本。所有文本都居中。居中最长文字的起点将作为基础。然后,其他较短的文本将不再居中,而是向左对齐,直到最长的文本的起始点。

要在ConstraintLayout中实现此目的,我创建了一个居中且宽度为wrap_content的LinearLayout。然后,在LinearLayout中,我有多个TextView,它们的宽度也为wrap_content。我希望LinearLayout自身(在宽度上)扩展到ConstraintLayout的宽度(具有设备的宽度),以确保其子TextView不会包装除非文本比屏幕宽度长(在我的特定情况下,这是不可能的)。 Android Studio编辑器的预览显示这是我期望的。但是,在我的设备上运行并在Android Studio上使用Tools > Layout Inspector时,LinearLayout不会自动扩展其宽度,即使剩余空间很大。

这是我的布局XML代码。

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <data>
        <variable
            name="user"
            type="com.mobile.githubuser.model.GithubUser" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <com.google.android.material.appbar.MaterialToolbar
            android:id="@+id/act_details_toolbar"
            android:layout_width="match_parent"
            android:layout_height="@dimen/toolbar_height"
            android:background="?attr/colorPrimary"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:title="@string/act_user_details_toolbar_title"
            app:titleTextAppearance="@style/TextAppearance.Toolbar" />

        <com.google.android.material.imageview.ShapeableImageView
            android:id="@+id/shapeableImageView"
            style="@style/Widget.GithubUser.ShapeableImageView.Circular"
            android:layout_width="@dimen/user_details_avatar_size"
            android:layout_height="@dimen/user_details_avatar_size"
            android:layout_marginTop="@dimen/keyline_5"
            android:src="@{user.avatar}"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/act_details_toolbar" />

        <com.google.android.material.textview.MaterialTextView
            android:id="@+id/materialTextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/keyline_4"
            android:layout_marginTop="@dimen/keyline_4"
            android:layout_marginEnd="@dimen/keyline_4"
            android:text="@{user.name}"
            android:textAlignment="center"
            android:textAppearance="?attr/textAppearanceHeadline2"
            android:textColor="?attr/colorOnBackground"
            app:layout_constraintTop_toBottomOf="@+id/shapeableImageView"
            tools:layout_editor_absoluteX="16dp"
            tools:text="April Ludgate" />

        <com.google.android.material.textview.MaterialTextView
            android:id="@+id/materialTextView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/keyline_4"
            android:layout_marginTop="@dimen/keyline_2"
            android:layout_marginEnd="@dimen/keyline_4"
            android:text="@{`@` + user.username}"
            android:textAlignment="center"
            android:textAppearance="?attr/textAppearanceSubtitle2"
            android:textColor="?attr/colorOnBackground"
            android:textSize="16sp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/materialTextView"
            tools:text="\@april_ludgate" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/keyline_4"
            android:layout_marginTop="@dimen/keyline_5"
            android:layout_marginEnd="@dimen/keyline_4"
            android:orientation="vertical"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/materialTextView2">

            <com.google.android.material.textview.MaterialTextView
                android:id="@+id/materialTextView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:drawableStart="@drawable/drawable_company"
                android:drawablePadding="@dimen/keyline_2"
                android:text="@{`Company\t\t: ` + user.company}"
                android:textAlignment="center"
                android:textAppearance="?attr/textAppearanceBody1"
                android:textColor="?attr/colorOnBackground"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/materialTextView2"
                tools:text="\Company\t\t: Google, Inc." />

            <com.google.android.material.textview.MaterialTextView
                android:id="@+id/materialTextView4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/keyline_0"
                android:drawableStart="@drawable/drawable_location"
                android:drawablePadding="@dimen/keyline_2"
                android:text="@{`Location\t\t\t: ` + user.location}"
                android:textAlignment="center"
                android:textAppearance="?attr/textAppearanceBody1"
                android:textColor="?attr/colorOnBackground"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/materialTextView3"
                tools:text="Location\t\t\t: Pittsburgh, PA, USA" />

            <com.google.android.material.textview.MaterialTextView
                android:id="@+id/materialTextView5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/keyline_0"
                android:drawableStart="@drawable/drawable_repository"
                android:drawablePadding="@dimen/keyline_2"
                android:text="@{`Repository\t: ` + user.repository}"
                android:textAlignment="center"
                android:textAppearance="?attr/textAppearanceBody1"
                android:textColor="?attr/colorOnBackground"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/materialTextView4"
                tools:text="Repository\t: 2" />

            <com.google.android.material.textview.MaterialTextView
                android:id="@+id/materialTextView6"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/keyline_0"
                android:drawableStart="@drawable/drawable_follower"
                android:drawablePadding="@dimen/keyline_2"
                android:text="@{`Followers\t\t: `}"
                android:textAlignment="center"
                android:textAppearance="?attr/textAppearanceBody1"
                android:textColor="?attr/colorOnBackground"
                addNumberToText="@{user.followers}"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/materialTextView5"
                tools:text="Followers\t\t: 1029" />

            <com.google.android.material.textview.MaterialTextView
                android:id="@+id/materialTextView7"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/keyline_0"
                android:drawableStart="@drawable/drawable_following"
                android:drawablePadding="@dimen/keyline_2"
                android:text="@{`Following\t\t: `}"
                android:textAlignment="center"
                android:textAppearance="?attr/textAppearanceBody1"
                android:textColor="?attr/colorOnBackground"
                addNumberToText="@{user.following}"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/materialTextView6"
                tools:text="Following\t\t: 101" />
        </LinearLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

这是我的编辑器预览显示的内容(我想要的)。

What I want

这是显示问题的工具检查器。

Problem

在第二张图像上可以看到,TextView的空间(左右两边)LinearLayout会换成两行。我希望LinearLayout会占用尽可能多的空间,但要使每行TextView仍能显示所有android:maxLines=1的空间最少。使用android:singleLine=trueTextView会导致文本被截断并被省略。我不想这样。是什么导致此问题?如果无法以这种方式实现我想要的功能,我该如何实现我所描述的功能(不使用固定值,例如,使MaterialTextView对齐的边距和准则)?

与问题无关:为什么我的pipelines: branches: Server: - step: name: Test script: - pytest --ignore . 无法在Android Studio的eidtor预览中正确显示?

1 个答案:

答案 0 :(得分:0)

@Pawel Laskowski's comment中所述,由制表符(\t)引起布局问题。只需擦除制表符并将其替换为几个空格即可。但是,由于我使用的字体不是等宽的,因此冒号部分无法完全对齐。

另一种解决方案是将每行一个TextView分成两个TextView。这也对我有利,因为现在,我可以提供多种语言的字符串文字(例如CompanyLocation等),并添加动态生成的内容(从数据绑定{{1 }})转换为整体显示的文字。然后,在所有分离之后,将TextViews放在ConstraintLayout内,替换原始的LinearLayout。现在,我们的结构如下(有问题的部分)。

user

然后,创建一个障碍物,其方向为ConstraintLayout |__ TextView (first part for row 1) |__ TextView (second part for row 1) |__ ... |__ TextView (first part for row n) |__ TextView (second part for row n) ,该障碍物引用了每一行的所有第一部分。将每一行的所有第二部分都相对于障碍放置,并添加一些end以在第一部分和第二部分之间创建空间。第二部分包含冒号和动态生成的内容。

这是最终的XML。

marginStart