�ݺ�ߣ

Разбираемся с
CoordinatorLayout
Солодовников Сергей
Rambler&Co

План доклада
2
1. Material Design и CoordinatorLayout
2. Знакомство с Behavior
3. Устройство CoordinatorLayout

Принципы
Material Design
3
● Тактильные поверхности
В Material Design интерфейс складывается из так
называемой «цифровой бумаги». Эти слои
расположены на разной высоте и отбрасывают тени
друг на друга.

Принципы
Material Design
4
● Полиграфический дизайн Основополагающие элементы - сетка, пространство,
масштаб, цвет и тд.

Принципы
Material Design
5
● Осмысленная анимация Анимация используется для того, чтобы дать
пользователю подсказки о работе интерфейса

Подключаем CoordinatorLayout к
проекту
6
● compile 'com.android.support:design:24.2.1'
Подключить CoordinatorLayout к проекту просто. Достаточно прописать новую зависимость в build.gradle
разрабатываемого проекта:

Использование атрибута “layout_anchor”
7
<android.support.design.widget.CoordinatorLayout>
<TextView
android:id="@+id/second"
android:layout_gravity="bottom"
android:text="World!"
app:layout_anchorGravity="bottom"
app:layout_anchor="@+id/first"/>
<FrameLayout>
<TextView
android:id="@+id/first"
android:text="Hello!" />
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>

8
<android.support.design.widget.CoordinatorLayout>
<TextView
android:id="@+id/second"
android:layout_gravity="bottom"
android:text="World!"
app:layout_anchorGravity="bottom"
app:layout_anchor="@+id/first"/>
<FrameLayout>
<TextView
android:id="@+id/first"
android:text="Hello!" />
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>

9
ViewCompat.animate(OUR_FRAME_LAYOUT)
.translationX(500)
.setDuration(2000L);

10

Использование атрибута
“layout_anchor”
11

Создание Behavior
13
public class FancyBehavior<V extends View> extends CoordinatorLayout.Behavior<V> {
}
/**
* Конструктор для создания экземпляра FancyBehavior через код.
*/
public FancyBehavior() {
}
/**
* Конструктор для создания экземпляра FancyBehavior через разметку.
*/
public FancyBehavior(Context context, AttributeSet attrs) {
super(context, attrs);
// Извлекаем любые пользовательские атрибуты
// в идеале с префиксом behavior_, чтобы обозначить принадлежность атрибута к Behavior
}

Подключение Behavior через xml
14
<TextView
xmlns:app="http://schemas.android.com/apk/res-auto"
app:layout_behavior="ru.rambler.coordinatorlayoutsample.FancyBehavior"
app:behavior_cookies="true"
app:behavior_cookies_size="100dp"/>
● Behavior будет создан с помощью конструктора, который принимает
Context и AttributeSet.
● Behavior может извлечь параметры behavior_cookies и
behavior_coolies_size из AttributeSet

Подключение Behavior через xml
15
app:layout_behavior="@string/appbar_scrolling_view_behavior"
● Содержит в себе путь к ScrollingViewBehavior

Подключение Behavior через код
16
FancyBehavior fancyBehavior = new FancyBehavior();
CoordinatorLayout.LayoutParams params = getView().getLayoutParams();
params.setBehavior(fancyBehavior);
● Можем инициализировать с помощью любого доступного конструктора.

Автоматическое подключение Behavior
17
@CoordinatorLayout.DefaultBehavior(AppBarLayout.Behavior.class)
public class AppBarLayout extends LinearLayout
● Behavior будет создан с помощью пустого конструктора.
● Если в разметке указать другой Behavior, то он переопределит
DefaultBehavior.

Возможности Behavior
18
● Перехват касаний;
○ onInterceptTouchEvent() и onTouchEvent()
● Перехват Window Insets;
○ onApplyWindowInsets()
● Перехват Measure и Layout;
○ onMeasureChild() и onLayoutChild()
● Перехват NestedScroll;
● Построение зависимостей между View;
● Сохранение состояния Behavior;

Перехват касаний
19
<CoordinatorLayout>
<TextView
android:layout_marginTop="200dp"
android:text="TextView2" />
<TextView
android:text="TextView3"/>
<TextView
android:text="TextView1"
app:layout_behavior="Behavior" />
</CoordinatorLayout>

public class Behavior extends CoordinatorLayout.Behavior {
@Override
public float getScrimOpacity(CoordinatorLayout parent, View child) {
return 0.4f;
}
@Override
public boolean onInterceptTouchEvent(CoordinatorLayout parent, View child,
MotionEvent ev) {
return true;
}
}
Перехват касаний
20

Зависимости между View
21
@Override
public boolean layoutDependsOn(CoordinatorLayout parent, V child, View dependency) {
return dependency instanceof Snackbar.SnackbarLayout;
}
@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, V child, View
dependency) {
if (dependency instanceof Snackbar.SnackbarLayout) {
updateFabTranslationForSnackbar(parent, child);
}
return false;
}

Зависимости между View
22
<FloatingActionButton
app:layout_dodgeInsetEdges="bottom"/>
<SnackbarLayout
app:layout_insetEdge="bottom"/>

Перехват nested scroll
23
1. Каждая View внутри CoordinatorLayout может получить Nested scroll
события.
1. Behavior может перехватывать Nested scroll события от любых View,
как бы глубоко в иерархии они не находилась.
1. Помимо простого Nested Scroll мы можем перехватывать Nested
Fling.

24
<CoordinatorLayout>
<CoordinatorLayout>
<NestedScrollView />
Nested Scroll события будут перехвачены
только одним CoordinatorLayout
<CoordinatorLayout>
<CoordinatorLayout>
<ScrollView />
Никакое событие прокрутки перехвачено не
будет

25
1. onStartNestedScroll() - начало прокрутки. Должны вернуть true, чтобы
получить дальнейшие события.
2. onNestedPreScroll() - вызывается перед тем как прокручиваемая View
получила событие прокрутки.
3. onNestedScroll() - вызывается как только прокручиваемая View была
прокручена.
4. onStopNestedScroll() - вызывается в самом конце, что означает конец
текущей прокрутки.

26
1. onStartNestedScroll() - начало прокрутки. Должны вернуть true, чтобы
получить дальнейшие события.
2. onNestedPreFling() - вызывается перед тем как прокручиваемая View
получила событие fling прокрутки.
3. onNestedFling() - вызывается как только прокручиваемая View была
прокручена.
4. onStopNestedScroll() - вызывается в самом конце, что означает конец
текущей прокрутки.

27
@Override
public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, V child, View
directTargetChild, View target, int nestedScrollAxes) {
return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL;
}
@Override
public void onNestedScroll(CoordinatorLayout coordinatorLayout, V child, View target, int
dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
ViewCompat.animate(child)
.translationY(child.getHeight())
.setDuration(SCROLL_TIME)
.setInterpolator(interpolator);
}

Доступные Behavior
28
● ScrollingViewBehavior - добавляет offset, чтобы View поместилось под
AppBarLayout.
● SwipeDismissBehavior - добавляет жест “смахнуть”.
● BottomSheetBehavior - любая View приобретает поведение
BottomSheet.

Устройство CoordinatorLayout
29

30
Направленный ациклический граф
1. Итерируем по всем вложенным View,
выстраиваем зависимости между ними;
2. Получаем отсортированные View из графа;
3. Переворачиваем список;
4. PROFIT!

31
Поиск в глубину (DFS)
1. Итерируем по вершинам графа;
2. Если вершина уже была пройдена, то
игнорируем её;
3. Итерируем по всем вершинам, от которых
идёт путь к рассматриваемой вершине,
если они есть. Это те View, которые
зависят. Выполняем для них пункты 1-4;
4. Добавляем вершину в список

32
● Перестроение графа и сортировка View происходит после каждого
вызова метода onMeasure().
● При каждом вызове слушателя ViewTreeObserver.OnPreDrawListener
вызывается метод onChildViewsChanged(EVENT_PRE_DRAW).
● При каждом вызове метода onChildViewRemoved() слушателя
OnHierarchyChangeListener(), вызывается метод
onChildViewsChanged(EVENT_VIEW_REMOVED).
● Метод onChildViewsChanged() итерирует по всем View и вызывает
соответствующие методы у Behavior.

Выводы
33
● CoordinatorLayout с помощью Behavior позволяет изменять поведение
вложенных View без наследования от них а также строить
зависимости между View.
● Support library содержит набор готовых Behavior.
● Behavior у View можно менять “на лету” во время работы.
● CoordinatorLayout не замена FrameLayout.

Спасибо за внимание!
34

�ݺ�ߣ

Разбираемся с CoordinatorLayout

More Related Content

Разбираемся с CoordinatorLayout

Editor's Notes