时间戳

首页 > 解决方案 > ConstraintLayout：如何将两个 TextView 垂直居中对齐

android - ConstraintLayout：如何将两个 TextView 垂直居中对齐

问题描述

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>

设计视图：

图片已添加

标签： androidkotlin

解决方案

tv_player_name从上到下约束，从下到下iv_logo_home_team约束，设置垂直链样式为。还要垂直约束和（创建一个链）。换句话说：tv_player_roleiv_logo_home_teampackedtv_player_nametv_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" />

推荐阅读