Как разместить виды по вертикали или горизонтали в ConstraintLayout?

Вот Constraintlayout с 3 видами:

<?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?


android android-layout android-constraintlayout
person s-hunter    schedule 30.09.2017    source источник

Ответы (3)


arrow_upward
4
arrow_downward

Когда представление имеет два противоположных ограничения, ConstraintLayout будет центрировать представление между этими ограничениями. Это то, что происходит в вашем макете.

Если вы хотите, чтобы представления располагались друг над другом в центре экрана, один из способов сделать это - использовать упакованная цепочка.

Вот ваш макет с использованием вертикальной упакованной цепочки:

введите описание изображения здесь

Вот 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>
person Cheticamp    schedule 30.09.2017

arrow_upward
0
arrow_downward

Считается, что 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? И так далее для других представлений ...

person Dambakk    schedule 30.09.2017

arrow_upward
0
arrow_downward

Попробуй, это было полезно для тебя

  • мы использовали все четыре constraints как left,right,top and bottom
  • вы также можете реализовать это
  • Я не думаю, что вы всегда предпочитаете 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>

Рада помочь тебе

person Vishal Yadav    schedule 30.09.2017