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

Efeito de flutuação ao deslizar para o topo no Android

Vamos ver primeiro o efeito que queremos alcançar:

Após consultar as informações, descobri que a maioria dos métodos encontrados na internet são implementados dessa maneira:

Escreva um layout idêntico ao da parte que precisa flutuar, primeiro configure a visibilidade da área flutuante como gone. Quando a área flutuante deslizar para o topo, configure a visibilidade da área flutuante B como VISIBLE. Dessa forma, parece que está flutuando no topo sem se mover.

Aqui está outra maneira de fazer:

usando os componentes do pacote 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="área de 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="parte flutuante"/>
 </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>

Passos para implementação:

1、Coloque o layout que precisa flutuar fora do CollapsingToolbarLayout e dentro do AppBarLayout

2、Configure o app:layout_scrollFlags do CollapsingToolbarLayout para scroll

3、Configure o NestedScroolView rolando

      app:layout_behavior="@String/appbar_scrolling_view_behavior"

Foi um grande sucesso (lembrando que o layout raiz deve ser CoordinatorLayout)

Efeito final:

Resumo

Isso é tudo sobre o efeito de flutuação ao rolar para o topo do Android, aprenderam todos? Espero que este artigo ajude um pouco no seu aprendizado ou trabalho, se tiverem dúvidas, podem deixar comentários para trocar.

Você também pode gostar