android-constraintlayout - 在 Constraintlayout 中水平对齐两个 TextView

Question

你好！

我目前正在学习 os JAVA 的基础知识，但我不太清楚……我想做的事情：水平对齐 CardView 中的两个 TextView，同时保持它们相互约束

我试过的：

• 分别约束它们，这会在我不想要的这两个 TextView 之间创建空间。
• 我也玩过Chains，但不能让它工作（可能做错了）。
• 最后我尝试搜索这个论坛，但只能找到我不适合的非常大的问题（相对布局和其他）

Android 编辑器的图片：https ://imgur.com/ICLPv8v 粉色圆圈是我遇到问题的地方（中间空间太大）

这是到目前为止我想出的代码:-)

仅供参考：我正在关注 Android 基础：用户界面，这很有趣，这对他们来说似乎有点太高级了，但我很想学习！

<androidx.constraintlayout.widget.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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

  <androidx.cardview.widget.CardView
      android:id="@+id/materialcard"
      android:layout_width="200dp"
      android:layout_height="200dp"
      android:backgroundTint="@color/Gray200"
      app:cardCornerRadius="8dp"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent" />

  <TextView
      android:id="@+id/Hi"
      style="@style/Headline1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:elevation="2dp"
      android:text="Hi"
      android:textColor="@color/Gray900"
      android:textStyle="bold"
      app:layout_constraintHorizontal_chainStyle="packed"
      app:layout_constraintStart_toStartOf="@+id/materialcard"
      app:layout_constraintTop_toTopOf="@+id/materialcard" />

  <TextView
      android:id="@+id/ExclamationMark"
      style="@style/Headline_bold"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:elevation="2dp"
      android:text="!"
      android:textAlignment="center"
      android:textColor="@color/colorAccent"
      android:textStyle="bold"
      app:layout_constraintEnd_toEndOf="@+id/materialcard"
      app:layout_constraintLeft_toLeftOf="@+id/materialcard"
      app:layout_constraintStart_toEndOf="@+id/Hi"
      app:layout_constraintTop_toTopOf="@+id/materialcard" />
  
</androidx.constraintlayout.widget.ConstraintLayout>```


  [1]: https://i.stack.imgur.com/Fd8Jf.png

标签： android-constraintlayout

Answer 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:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="@color/cardview_dark_background">

<androidx.cardview.widget.CardView
    android:id="@+id/materialcard"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintWidth_percent="0.7"
    app:layout_constraintHeight_percent="0.4"
    app:cardCornerRadius="8dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/Hi"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@color/colorPrimary"
    app:layout_constraintWidth_percent="0.34"
    app:layout_constraintHeight_percent="0.4"
    android:elevation="2dp"
    android:text="Hi"
    android:textStyle="bold"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintStart_toStartOf="@+id/materialcard"
    app:layout_constraintTop_toTopOf="@+id/materialcard" />

<TextView
    android:id="@+id/ExclamationMark"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@color/colorAccent"
    app:layout_constraintWidth_percent="0.34"
    app:layout_constraintHeight_percent="0.4"
    android:elevation="2dp"
    android:text="!"
    android:textAlignment="center"
    android:textColor="@color/colorAccent"
    android:textStyle="bold"
    app:layout_constraintEnd_toEndOf="@+id/materialcard"
    app:layout_constraintLeft_toLeftOf="@+id/materialcard"
    app:layout_constraintStart_toEndOf="@+id/Hi"
    app:layout_constraintTop_toTopOf="@+id/materialcard" />

</androidx.constraintlayout.widget.ConstraintLayout>

重要的是这些属性：

    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintWidth_percent="0.7"
    app:layout_constraintHeight_percent="0.4"

通过这样做，现在您的 cardView 将恰好是屏幕的 70% 和屏幕高度的 40%。

现在，如果您查看布局，我已经为其他视图完成了该操作，从而允许自己控制 cardView 内的空间。