ConstraintLayout: Как выровнять два TextViews по центру

Question

XML-код:

<?xml version="1.0" encoding="utf-8"?>

<com.google.android.material.card.MaterialCardView
        android:id="@+id/card_view"
        style="@style/Widget.MaterialComponents.CardView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/mtrl_card_spacing"
        android:layout_marginTop="@dimen/mtrl_card_spacing"
        android:layout_marginRight="@dimen/mtrl_card_spacing"
        android:layout_marginBottom="@dimen/mtrl_card_spacing"
        app:cardCornerRadius="4dp"
        app:cardElevation="2dp">

    <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="84dp">

        <de.hdodenhof.circleimageview.CircleImageView
                android:id="@+id/iv_logo_home_team"
                android:layout_width="@dimen/match_item_team_logo"
                android:layout_height="@dimen/match_item_team_logo"
                android:layout_marginStart="@dimen/unit_dp_10"
                android:layout_marginLeft="@dimen/unit_dp_10"
                android:layout_marginEnd="@dimen/unit_dp_10"
                android:layout_marginRight="@dimen/unit_dp_10"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                tools:srcCompat="@drawable/ic_launcher_background" />


        <androidx.appcompat.widget.AppCompatTextView
                android:id="@+id/tv_player_name"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginLeft="@dimen/unit_sp_12"
                android:gravity="center"
                android:textAlignment="center"
                android:textSize="@dimen/unit_sp_10"
                app:fontFamily="@font/avenir_next_bold"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toRightOf="@+id/iv_logo_home_team"
                app:layout_constraintTop_toTopOf="parent"
                tools:text="@tools:sample/lorem" />

        <androidx.appcompat.widget.AppCompatTextView
                android:id="@+id/tv_player_role"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="@dimen/unit_sp_12"
                android:layout_marginLeft="@dimen/unit_sp_12"
                android:gravity="center"
                android:textAlignment="center"
                android:textSize="@dimen/unit_sp_10"
                app:fontFamily="@font/avenir_next_bold"
                app:layout_constraintLeft_toRightOf="@+id/iv_logo_home_team"
                app:layout_constraintTop_toBottomOf="@id/tv_player_name"
                tools:text="@tools:sample/lorem" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>

Вид конструкции:

Answer 1

Ограничить tv_player_name сверху до iv_logo_home_team сверху, ограничить tv_player_role снизу до iv_logo_home_team снизу, установить стиль вертикальной цепи на packed. Также ограничьте tv_player_name и tv_player_role друг к другу по вертикали (создайте цепочку). Другими словами:

<androidx.appcompat.widget.AppCompatTextView
  android:id="@+id/tv_player_name"
  ...
  app:layout_constraintVertical_chainStyle="packed"
  app:layout_constraintLeft_toRightOf="@+id/iv_logo_home_team"
  app:layout_constraintTop_toTopOf="@+id/iv_logo_home_team"
  app:layout_constraintBottom_toTopOf="@+id/tv_player_role" />

<androidx.appcompat.widget.AppCompatTextView
  android:id="@+id/tv_player_role"
  ...
  app:layout_constraintLeft_toRightOf="@+id/iv_logo_home_team"
  app:layout_constraintTop_toBottomOf="@id/tv_player_name"
  app:layout_constraintBottom_toBottomOf="@+id/iv_logo_home_team" />

Answer 2

Для вашего просмотра tv_player_name замените этот атрибут app:layout_constraintBottom_toBottomOf="parent" на app:layout_constraintBottom_toTopOf="@+id/tv_player_role", а для просмотра tv_player_role добавьте этот атрибут app:layout_constraintBottom_toBottomOf="parent".

Это будет выглядеть следующим образом.

Код

        <androidx.appcompat.widget.AppCompatTextView
            android:id="@+id/tv_player_name"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textAlignment="center"
            app:layout_constraintBottom_toTopOf="@+id/tv_player_role"
            app:layout_constraintLeft_toRightOf="@+id/iv_logo_home_team"
            app:layout_constraintTop_toTopOf="parent"
            tools:text="@tools:sample/lorem" />

        <androidx.appcompat.widget.AppCompatTextView
            android:id="@+id/tv_player_role"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textAlignment="center"
            app:layout_constraintLeft_toRightOf="@+id/iv_logo_home_team"
            app:layout_constraintTop_toBottomOf="@id/tv_player_name"
            app:layout_constraintBottom_toBottomOf="parent"
            tools:text="@tools:sample/lorem" />

Если вы хотите, чтобы это было по центру.

Затем добавьте этот атрибут app:layout_constraintVertical_chainStyle="packed" для обоих представлений.

Код

<androidx.appcompat.widget.AppCompatTextView
            android:id="@+id/tv_player_name"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            app:layout_constraintVertical_chainStyle="packed"
            android:textAlignment="center"
            app:layout_constraintBottom_toTopOf="@+id/tv_player_role"
            app:layout_constraintLeft_toRightOf="@+id/iv_logo_home_team"
            app:layout_constraintTop_toTopOf="parent"
            tools:text="@tools:sample/lorem" />

        <androidx.appcompat.widget.AppCompatTextView
            android:id="@+id/tv_player_role"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            app:layout_constraintVertical_chainStyle="packed"
            android:textAlignment="center"
            app:layout_constraintLeft_toRightOf="@+id/iv_logo_home_team"
            app:layout_constraintTop_toBottomOf="@id/tv_player_name"
            app:layout_constraintBottom_toBottomOf="parent"
            tools:text="@tools:sample/lorem" />