如何在ConstraintLayout中垂直或水平放置视图？

Question

这里是3次的Constraintlayout：

<?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" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <ImageView 
     android:id="@+id/iv_profile_image" 
     android:layout_width="100dp" 
     android:layout_height="100dp" 
     app:layout_constraintBottom_toTopOf="@+id/tv_name" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toTopOf="parent"/> 

    <TextView 
     android:id="@+id/tv_name" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="" 
     app:layout_constraintBottom_toBottomOf="parent" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toTopOf="@+id/iv_profile_image" /> 

    <TextView 
     android:id="@+id/tv_headline" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="" 
     app:layout_constraintBottom_toBottomOf="parent" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toTopOf="@+id/tv_name" /> 

</android.support.constraint.ConstraintLayout> 

结果：

正如你可以看到，在每个视图之间有很大的差距。我如何消除这些空白，并让它们居中在屏幕上。我可以使用RelativeLayout或LinearLayout轻松实现这一点，但是我怎样才能在这个ConstraintLayout中做到这一点？ ConstraintLayout是否被认为是RelativeLayout的替代品？

Answer 1

当一个视图有两个相反的约束时，ConstraintLayout将视图中心在这些约束之间。这是你的布局中发生的事情。

如果您希望视图在屏幕中央堆叠一个视图，则一种方法是使用packed chain。

下面是使用垂直包装链布局：

这里是XML。注意视图是如何垂直约束的。

<android.support.constraint.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"> 

    <ImageView 
     android:id="@+id/iv_profile_image" 
     android:layout_width="100dp" 
     android:layout_height="100dp" 
     android:src="@mipmap/ic_launcher" 
     app:layout_constraintBottom_toTopOf="@+id/tv_name" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toTopOf="parent" 
     app:layout_constraintVertical_chainStyle="packed" /> 

    <TextView 
     android:id="@+id/tv_name" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="tv_name" 
     app:layout_constraintBottom_toTopOf="@+id/tv_headline" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toBottomOf="@+id/iv_profile_image" /> 

    <TextView 
     android:id="@+id/tv_headline" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="tv_headline" 
     app:layout_constraintBottom_toBottomOf="parent" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toBottomOf="@+id/tv_name" /> 

</android.support.constraint.ConstraintLayout> 

Answer 2

据说ConstraintLayouts提供比平常的RelativeLayouts更平坦的视图层次和更好的性能。

我看到一些可能导致奇怪行为的事情。例如，在这样的观点：

<TextView 
    android:id="@+id/tv_name" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="" 
    app:layout_constraintBottom_toBottomOf="parent" 
    app:layout_constraintLeft_toLeftOf="parent" 
    app:layout_constraintRight_toRightOf="parent" 
    app:layout_constraintTop_toTopOf="@+id/iv_profile_image" /> 

你说，这个观点的顶部应与@ + ID/iv_profile_image视图顶部对齐。你确定你不是说这个视图的顶部应该与@ + id/iv_profile_image-view的底部一致吗？等其他视图...

Answer 3

试试这个它有助于您

• 我们，VE所用的所有四个constraints像left,right,top and bottom
• 可以实现这样也
• 我don'nt认为你总是喜欢Drag and Drop你可以跟程序一起去也

---

<?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" 
android:layout_width="match_parent" 
android:layout_height="match_parent"> 

<ImageView 
    android:id="@+id/iv_profile_image" 
    android:layout_width="100dp" 
    android:layout_height="100dp" 
    app:layout_constraintBottom_toTopOf="@+id/tv_name" 
    app:layout_constraintLeft_toLeftOf="parent" 
    app:layout_constraintRight_toRightOf="parent" 
    app:layout_constraintTop_toTopOf="parent"/> 

<TextView 
    android:id="@+id/tv_name" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="" 
    app:layout_constraintTop_toBottomOf="@+id/iv_profile_image" 
    app:layout_constraintLeft_toLeftOf="parent" 
    app:layout_constraintRight_toRightOf="parent" 
    app:layout_constraintBottom_toTopOf="@+id/tv_headline" /> 

<TextView 
    android:id="@+id/tv_headline" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="" 
    app:layout_constraintBottom_toBottomOf="parent" 
    app:layout_constraintLeft_toLeftOf="parent" 
    app:layout_constraintRight_toRightOf="parent" 
    app:layout_constraintTop_toBottomOf="@+id/tv_name" /> 

    </android.support.constraint.ConstraintLayout> 

---

竭诚为您服务