English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Реализация эффекта прижатия к верху в Android с помощью скольжения

Сначала давайте посмотрим на效果图, которое нужно реализовать:

После изучения материалов, я обнаружил, что в Интернете большинство используют этот метод для его реализации:

Добавьте еще один layout, идентичный所需要的悬浮部分, сначала установите видимость浮动ной области на gone. Когда浮动ная область скользит к верху, установите видимость浮动ной области B на VISIBLE. Таким образом, она будет казаться висящей不动 на вершине.

Вот другой способ:

Использование контроллеров из пакета design

<android.support.design.widget.CoordinatorLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:fitsSystemWindows="true"
 tools:context="com.peipei.app.MainActivity">
 <android.support.design.widget.AppBarLayout
 android:layout_width="match_parent"
 android:layout_height="250dp">
 <android.support.design.widget.CollapsingToolbarLayout
  app:layout_scrollFlags="scroll"
  app:contentScrim="#000000"
  android:layout_width="match_parent"
  android:layout_height="220dp">
  <TextView
  android:text="banner区域"
  android:gravity="center"
  android:textColor="#ffffff"
  android:background="#987545"
  android:layout_width="match_parent"
  android:layout_height="220dp"/>
 </android.support.design.widget.CollapsingToolbarLayout>
 <TextView
  android:gravity="center"
  android:layout_width="match_parent"
  android:layout_height="30dp"
  android:text="悬浮的部分"/>
 </android.support.design.widget.AppBarLayout>
 <android.support.v4.widget.NestedScrollView>
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  app:layout_behavior="@string/appbar_scrolling_view_behavior">
  <TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_margin="@dimen/text_margin"
  android:text="@string/large_text"/>
 </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

Шаги реализации:

1. Поместите layout, который нужно悬浮ить, вне CollapsingToolbarLayout, но внутри AppBarLayout

2. Установите app:layout_scrollFlags для CollapsingToolbarLayout в scroll

3. Установите для скроллинга NestedScroolView

      app:layout_behavior="@String/appbar_scrolling_view_behavior"

Теперь все готово (не забудьте, что корневой макет должен быть CoordinatorLayout)

最终效果:

Резюме

Вот и все, что касается эффекта��юации на вершине для Android, вы все освоили? Надеюсь, эта статья принесет вам определенную пользу в изучении или работе, если у вас есть вопросы, вы можете оставить комментарий для обсуждения.

Вам может понравиться