ConstraintLayout против раскладки координатора?

Что реализовать: ConstraintLayout или CoordinatorLayout для правильного дизайна материала в Android?

Ответы

Ответ 1

КоординаторLayout должен быть макетом верхнего уровня для активности для управления Behaviors, например. взаимодействия и анимации.

ConstraintLayout Основная цель - обеспечить удобный способ создания плоского макета с несколькими дочерними элементами (гораздо более мощный RelativeLayout).

Таким образом, CoordinatorLayout предназначен для управления сложным поведением (особенно анимацией) ваших компонентов активности и ConstraintLayout для правильного размещения компонентов (особенно элементов списка).

Ответ 2

CoordinatorLayout

CoordinatorLayout - это сверхмощный FrameLayout.

CoordinatorLayout предназначен для двух основных случаев использования:

  • В качестве декора приложения верхнего уровня или хромированного макета
  • В качестве контейнера для конкретного взаимодействия с одним или несколькими дочерними представлениями

По умолчанию, если вы добавите несколько детей в FrameLayout, они будут перекрывать друг друга. FrameLayout следует использовать чаще всего для удержания одного дочернего вида. Основная привлекательность CoordinatorLayout заключается в его способности координировать анимацию и переходы видов внутри него. Указав Поведения для дочерних представлений CoordinatorLayout, вы можете обеспечить множество различных взаимодействий в пределах одного родителя, и эти представления также могут взаимодействовать друг с другом. Классы представлений могут указывать поведение по умолчанию при использовании в качестве дочернего элемента для CoordinatorLayout с использованием аннотации CoordinatorLayout.DefaultBehavior.

Поведения могут использоваться для реализации различных взаимодействий и дополнительных модификаций макета, начиная от выдвижных ящиков и панелей и заканчивая отклоняемыми элементами и кнопками, которые прилипают к другим элементам по мере их перемещения и анимации.

ConstraintLayout

ConstraintLayout - это мощная ViewGroup, похожая на RelativeLayout, но более гибкая, чем RelativeLayout.

ConstraintLayout позволяет создавать большие и сложные макеты с плоской иерархией видов (без вложенных групп видов). Он похож на RelativeLayout в том, что все представления расположены в соответствии с отношениями между родственными представлениями и родительским макетом, но он более гибкий, чем RelativeLayout, и его проще использовать с редактором макетов Android Studio.

  • ConstraintLayout может использоваться где угодно, вам не нужна никакая другая группа ViewGroup, например RelativeLayout, LinearLayout или FrameLayout, как только вы начнете использовать ConstraintLayout.

В настоящее время вы можете использовать различные типы ограничений:

  • Относительное позиционирование
  • Поля
  • Центрирование позиционирования
  • Круговое позиционирование
  • Поведение видимости
  • Размерные ограничения
  • Цепи
  • Объекты виртуальных помощников
  • Оптимизатор

Что реализовать ConstraintLayout или CoordinatorLayout для правильного дизайна материала в Android?

Вам может понадобиться использовать ConstraintLayout и CoordinatorLayout для создания эффективного пользовательского интерфейса и анимации материала.

Ниже приведен общий пример, в котором используются CoordinatorLayout и ConstraintLayout.

  • Используйте Coordinatorlayout в качестве декора приложения верхнего уровня. Обычно он используется для разметки AppBarLayout, FloatingActionButton и основной части экрана, например, NestedScrollView. Внутри NestedScrollView используйте ConstraintLayout, чтобы описать остальную часть макета в виде плоской иерархии.

    <androidx.coordinatorlayout.widget.CoordinatorLayout
 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">

      <androidx.core.widget.NestedScrollView
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         app:layout_behavior="@string/appbar_scrolling_view_behavior">

          <!-- Your scrolling content -->
          <androidx.constraintlayout.widget.ConstraintLayout
              ...>

              <!-- body of constraint layout -->

              <Button android:id="@+id/button" ...
              app:layout_constraintLeft_toLeftOf="parent"
              app:layout_constraintRight_toRightOf="parent/>


          </androidx.constraintlayout.widget.ConstraintLayout>
     </androidx.core.widget.NestedScrollView>

     <com.google.android.material.appbar.AppBarLayout
         android:layout_height="wrap_content"
         android:layout_width="match_parent">
      <androidx.appcompat.widget.Toolbar
             ...
             app:layout_scrollFlags="scroll|enterAlways"/>
      <com.google.android.material.tabs.TabLayout
             ...
             app:layout_scrollFlags="scroll|enterAlways"/>
      </com.google.android.material.appbar.AppBarLayout>
 </androidx.coordinatorlayout.widget.CoordinatorLayout>

Бонусный балл

Вы можете использовать мощный MotionLayout, который является подклассом ConstraintLayout для создания анимации. Вы можете проверить это для подробного примера для пользовательской анимации, используя MotionLayout.

Ответ 3

Кажется, что вы (почти) всегда используете CoordinatorLayout, а иногда используете ConstraintLayout внутри. Смотрите следующие ресурсы

  • Кодовая метка по адресу https://codelabs.developers.google.com/codelabs/material-design-style/index.html#3 использует только CoordinatorLayout

  • Пример приложения android-sunflower ("иллюстрирующий лучшие практики разработки под Android") не использует ни один из них для действия верхнего уровня, но использует оба в своем fragment_plant_detail.xml ConstraintLayout причем ConstraintLayout находится внутри CoordinatorLayout:

    <layout ...>
<data .../>
<android.support.design.widget.CoordinatorLayout ...>
    <android.support.design.widget.AppBarLayout ...>
        <android.support.design.widget.CollapsingToolbarLayout ...>
            <ImageView... />
            <android.support.v7.widget.Toolbar... />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.widget.NestedScrollView ...>
        <android.support.constraint.ConstraintLayout ...>
            <TextView.../>
            <TextView... />
        </android.support.constraint.ConstraintLayout>
    </android.support.v4.widget.NestedScrollView>
    <android.support.design.widget.FloatingActionButton ... />
</android.support.design.widget.CoordinatorLayout>
</layout>