CollapsingToolbar scrollflags в действие !!!

Android Design - лента с инструменти за сгъване: ScrollFlags Illustrated

В този раздел ще разгледаме CollapsingToolbar scrollflags, комбинирайки scrollflags и някои съображения при прилагането им.

1. ScrollFlags

Предлагат се 5 scrollflags, това са
 превъртане, разгъванеВинаги, разширяванеAlwaysCollapsed, щракване, изходUntilCollapsed.

За да използвате scrollflags във вашия CollapsingToolbar, добавете следното свойство към CollapsingToolbar.

ап: layout_scrollFlags = "<изберете флаг-тук>"

Сега нека да настроим контрола без флагове, за да видим как се държи CollapsingToolbar.

Фигура 1: Контролирайте поведението на превъртане без символи за превъртане.

Както можете да видите, от Фигура 1 не се случва нищо особено, NestedScrollView се превърта свободно под CollapsingToolbar, тъй като лентата CollapsingTool остава в разширено състояние. Това е идеално, ако имате изглед в своята CollapsingToolbar, който винаги трябва да остане разширен и видим.

1.1 превъртане

приложение: layout_scrollFlags = "превъртане"
Флагът за превъртане позволява на NestedScrollView (т.е. основният изглед, обхващащ цялото съдържание, напр. Текстови абзаци и изображение), да сигнализира на лентата CollapsingTool, че е в състояние на превъртане.

Фигура 2: приложение: layout_scrollFlags = “превъртане”
  • Ако NestedScrollView се превърта нагоре, той от своя страна ще избута нагоре и ще срине CollapsingToolbar до върха, позволявайки му да изчезне, което позволява на NestedScrollView да се разшири напълно.
  • Ако NestedScrollView се превърта надолу, той ще започне да разширява лентата CollapsingTool.

1.2 enterAlways, enterAlwaysCollapsed, snap & exitUntilCollapsed.

ап: layout_scrollFlags = "enterAlways"
приложение: layout_scrollFlags = "enterAlwaysCollapsed"
ап: layout_scrollFlags = "щракнат"
ап: layout_scrollFlags = "exitUntilCollapsed"
ап: layout_scrollFlags = "exitUntilCollapsed"

Фигура 3: enterAlways, enterAlwaysCollapsed, snap, exitUntilCollapsed - всички се държат еднакво, когато се използват самостоятелно.

Сами по себе си всеки от четирите знамена по-горе се държи подобно на нашия контрол. В този момент вероятно се чудите защо не са различни? За да видим разликите им, трябва да ги комбинираме със знамето за превъртане, споменато в раздел 1.1 по-горе.

2. Комбиниране на ScrollFlags

ScrollFlags могат да се комбинират, за да се възползва от уникалното движение от множество поведения. За да комбинираме scrollflags, ние просто ги включваме разделени от символа на вертикалната лента | например За да комбинираме атрибута scroll и enterAlways, бихме направили нещо подобно. приложение: layout_scrollFlags = "превъртане | enterAlways"

Нека разгледаме някои примери. В раздел 1 видяхме, че знамето на превъртането е единственото, което направи нещо значимо. Нека го комбинираме с другите флагове и да видим дали ще получим нещо различно.

2.1 превъртане | enterAlways vs scroll | enterAlwaysCollapsed

Разликите между двете са фини, обърнете внимание на това, което се случва при превъртане надолу.

Фигура 4: превъртане | enterAlways (отляво) срещу scroll | enterAlwaysCollapsed (вдясно)

Превъртане по номинална стойност | enterAlways & scroll | enterAlwaysCollapsed изглежда идентично по функция. Разликата възниква, когато CollapsingToolbar реши да се разшири при надолуNestedScrollView превъртане.

превъртане | enterAlways: има нетърпелив подход към това колко бързо се разширява лентата CollapsingToolbar по време на превъртане надолу. Значение щом има превъртане надолу, този флаг ще започне да разширява лентата CollapsingTool независимо от това докъде се е превъртал NestedScrollView.

превъртане | enterAlwaysCollapsed: Има мързелив подход за това колко бързо се разширява лентата CollapsingToolbar по време на превъртане надолу. Значение в момента, в който има превъртане надолу, лентата CollapsingTool ще се разшири само след като NestedScrollView се превърти до върха на съдържанието си.

2.2 превъртане | enterAlways vs scroll | snap

Сега, когато знаем какво прави превъртането | enterAlways, нека го контрастираме, за да превърта | щракне.

Фигура 5: превъртане | enterAlways (отляво) срещу scroll | щракване (вдясно)

scroll | snap: Разликата тук е по-очевидна. щракане винаги ще се опитва и ще настрои лентата CollapsingTool в свито или разширено състояние, в зависимост от това къде CollapsingToolbar се срина или разшири. (Смятам, че е най-добре да оставим на илюстрацията, за да я дефинираме).

2.2 превъртане | enterAlways vs scroll | exitUntilCollapse

Фигура 6: превъртане | enterAlways (вляво) срещу scroll | изходUntilCollapsed (вдясно)

scroll | exitUntilCollapsed: Това е единственият скролфлаг, който ще гарантира, че лентата с инструменти остава в горната част и не изчезва при превъртане. Този флаг също се държи подобно на флага enterAlwaysCollapsed, тъй като разширява лентата CollapsingTool, само когато NestedScrollView се приближи до върха на съдържанието си.

3. Комбиниране на още повече флагове.

Играта с флагове е пристрастяващо, давайте възможност за комбиниране на повече от тях! Преди да гледате видеоклиповете, опитайте да познаете какво могат да направят флаговете, за да видите дали наистина разбирате нюансите между двете.

3.1 превъртане | щракване | изходUntilCollapsed

Фигура 7: превъртете | щракване | изходUntilCollapsed

Тази комбинация работи добре, тъй като позволява CollapsingToolBar да щракне в зависимост от интензитета на превъртане, но „пълно“ превъртане нагоре винаги завършва с лентата с инструменти, видима в горната част.

3.2 enterAlwaysCollapsed | snap

Без флаг за превъртане отново нищо не се случва с CollapsingToolbar, в резултат на това той остава в разширено състояние, въпреки усилията за превъртане.

3.3 превъртане | enterAlways | enterAlwaysCollapsed

Фигура 9: превъртете | enterAlways | enterAlwaysCollapsed

Като се имат предвид нашите описания на enterAlways & enterAlwaysCollapsed в раздел 2.1 по-горе, те се държат много различно. В резултат на това приложението става доста объркано как да се справите с превъртанията надолу. Бих препоръчал да не го използвате

4. ScrollFlags Наблюдения и съображения

  1. CollapsingToolbar scrollflags силно зависят от движението на превъртане на NestedScrollView или RecyclerView с някои прикачени ScrollingBehavior, за да можете да видите ефектите на scroll-flags (вижте статията на CoorinatorLayout Behaviors).
  2. Флагът за превъртане е ключов, за да може да активирате превъртането на CollapsingToolbar.
  3. Подреждането на знамена не оказва влияние. напр. превъртане | щракване и щракване | извършват същата функция.
  4. Бъдете внимателни при смесването на свитъците, които могат да противоречат по отношение на тяхната функция. Вижте раздел 3.3 за това как конфликтите enterAlways и enterAlwaysCollapsed, когато се въведе превъртане надолу за разширяване на лентата CollapsingToolbar.

заключение

ScrollFlags са от съществено значение, за да придадете на CollapsingToolbar някакъв персонализиран характер. Както видяхме, има няколко начина за комбиниране на знамена, за да се получат различни резултати, които могат да подобрят визуалното естетическо приложение на нашите приложения и по-добре да популяризират нашите бизнес правила. Също така видяхме някои знамена, когато комбинирани могат да се сблъскат и да дадат отрицателно преживяване на потребителите ви.

Бъдете креативни и изпробвайте различни комбинации от scrollflag за приложението си!

Благодаря отново за четенето!

Вижте и другата ми статия за поведенията на CoordinatorLayout, за да научите как да създадете своя собствена!