ConstraintLayout具有可绘制图像和不同文本的textviews的高度和宽度

时间:2017-11-24 06:47:44

标签: android android-constraintlayout

我想将下面的LinearLayout父视图和子视图复制到ConstraintLayout

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.xyz.constraintlayout.MainActivity$PlaceholderFragment">

    <TextView
        android:id="@+id/section_label"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="@dimen/activity_vertical_margin"
        android:layout_marginEnd="@dimen/activity_horizontal_margin"
        android:layout_marginStart="@dimen/activity_horizontal_margin"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:gravity="center"
        android:text="Section Number" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/first_text"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:layout_margin="4dp"
            android:layout_weight="1"
            android:background="@drawable/border"
            android:drawablePadding="10dp"
            android:drawableTop="@drawable/ic_not_interested_black_48dp"
            android:fontFamily="sans-serif-smallcaps"
            android:gravity="center"
            android:padding="6dp"
            android:text="Book of first_text Language"
            android:textColor="@color/colorPrimaryDark"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/second_text"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:layout_margin="4dp"
            android:layout_weight="1"
            android:background="@drawable/border"
            android:drawablePadding="10dp"
            android:drawableTop="@drawable/ic_not_interested_black_48dp"
            android:fontFamily="sans-serif-smallcaps"
            android:gravity="center"
            android:padding="6dp"
            android:text="Book of second_text"
            android:textColor="@color/colorPrimaryDark"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/third_text"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:layout_margin="4dp"
            android:layout_weight="1"
            android:background="@drawable/border"
            android:drawablePadding="10dp"
            android:drawableTop="@drawable/ic_not_interested_black_48dp"
            android:fontFamily="sans-serif-smallcaps"
            android:gravity="center"
            android:padding="6dp"
            android:text="Book of third_text Topics and Miscellaneous"
            android:textColor="@color/colorPrimaryDark"
            android:textStyle="bold" />
    </LinearLayout>
</LinearLayout>

,输出为:

LinearLayout

我尝试使用扩展链复制到ConstraintLayout,如下所示

<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/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.sed.constraintlayout.MainActivity$PlaceholderFragment">

    <TextView
        android:id="@+id/section_label"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="@dimen/activity_vertical_margin"
        android:layout_marginEnd="@dimen/activity_horizontal_margin"
        android:layout_marginStart="@dimen/activity_horizontal_margin"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:gravity="center"
        android:text="Section Number"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="@+id/constraintLayout"
        tools:layout_constraintLeft_creator="1"
        tools:layout_constraintTop_creator="1" />

    <TextView
        android:id="@+id/first_text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="4dp"
        android:background="@drawable/border"
        android:drawablePadding="10dp"
        android:drawableTop="@drawable/ic_not_interested_black_48dp"
        android:fontFamily="sans-serif-smallcaps"
        android:gravity="center"
        android:padding="6dp"
        android:text="Book of first_text Language"
        android:textColor="@color/colorPrimaryDark"
        android:textStyle="bold"
        app:layout_constraintEnd_toStartOf="@+id/second_text"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/section_label" />

    <TextView
        android:id="@+id/second_text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="4dp"
        android:background="@drawable/border"
        android:drawablePadding="10dp"
        android:drawableTop="@drawable/ic_not_interested_black_48dp"
        android:fontFamily="sans-serif-smallcaps"
        android:gravity="center"
        android:padding="6dp"
        android:text="Book of second_text"
        android:textColor="@color/colorPrimaryDark"
        android:textStyle="bold"
        app:layout_constraintEnd_toStartOf="@+id/third_text"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@+id/first_text"
        app:layout_constraintTop_toBottomOf="@id/section_label" />

    <TextView
        android:id="@+id/third_text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="4dp"
        android:background="@drawable/border"
        android:drawablePadding="10dp"
        android:drawableTop="@drawable/ic_not_interested_black_48dp"
        android:fontFamily="sans-serif-smallcaps"
        android:gravity="center"
        android:padding="6dp"
        android:text="Book of third_text Topics and Miscellaneous"
        android:textColor="@color/colorPrimaryDark"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@+id/second_text"
        app:layout_constraintTop_toBottomOf="@id/section_label" />

</android.support.constraint.ConstraintLayout>

输出结果为:

ConstraintLayout

很明显,约束布局中视图的高度不均匀。 如何使它均匀? 谢谢你的帮助。

2 个答案:

答案 0 :(得分:2)

enter image description here&GT;试试这个:

    <?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/section_label"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Section Number"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/first_text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="4dp"
        android:background="@mipmap/ic_launcher"
        android:drawablePadding="10dp"
        android:drawableTop="20dp"
        android:fontFamily="sans-serif-smallcaps"
        android:gravity="center"
        android:padding="6dp"
        android:text="Book of first_text Language"
        android:textColor="@color/colorPrimaryDark"
        android:textStyle="bold"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/second_text"
        app:layout_constraintTop_toBottomOf="@id/section_label" />

    <TextView
        android:id="@+id/second_text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="4dp"
        android:layout_marginRight="4dp"
        android:background="@mipmap/ic_launcher"
        android:drawablePadding="10dp"
        android:drawableTop="20dp"
        android:fontFamily="sans-serif-smallcaps"
        android:gravity="center"
        android:padding="6dp"
        android:text="Book of second_text"
        android:textColor="@color/colorPrimaryDark"
        android:textStyle="bold"
        app:layout_constraintLeft_toRightOf="@+id/first_text"
        app:layout_constraintRight_toLeftOf="@id/third_text"
        app:layout_constraintTop_toTopOf="@id/first_text" />

    <TextView
        android:id="@+id/third_text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="4dp"
        android:layout_marginRight="4dp"
        android:background="@mipmap/ic_launcher"
        android:drawablePadding="10dp"
        android:drawableTop="20dp"
        android:fontFamily="sans-serif-smallcaps"
        android:gravity="center"
        android:padding="6dp"
        android:text="Book of third_text"
        android:textColor="@color/colorPrimaryDark"
        android:textStyle="bold"
        app:layout_constraintLeft_toRightOf="@id/second_text"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@id/second_text" />

</android.support.constraint.ConstraintLayout>

答案 1 :(得分:-1)

提示:

  • 您为三个layout_height提供的TextViewwrap_content

  • 如果你申请match_parent,那么你可以获得height,但这些是 三个TextView将占据整个空间。

  • 希望您知道TextView的高度将延伸取决于 其中的内容大小。

  • 您可以通过指定相同的硬核来实现您想要的设计 这三个120dp

  • 的高度值(如TextView

enter image description here