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、将CollapsingToolbarLayoutapp:layout_scrollFlags设置为scroll

3、给滚动的NestedScroolView设置

app:layout_behavior="@String/appbar_scrolling_view_behavior"

就大功告成了(记得根布局要是CoordinatorLayout)

最终效果:

总结

以上就是关于Android滑动到顶部悬停效果的全部内容,大家都学会了吗?希望这篇文章对大家的学习或者工作带来一定的帮助,如果有疑问大家可以留言交流。

(0)

相关推荐

  • android scrollview 滑动到顶端或者指定位置的实现方法

    在Android开发中很多时候会遇到一屏显示不下所有内容的现象,那大家也知道这个时候肯定会想到用scrollview来进行滚屏显示. 这个时候由于某些需求,会要求在最开始显示scrollview的时候就定位到某一处,这篇就是来讲这个的哈- 首先,scrollView.scrollTo( x, y );这个方法是能对滚动条进行定位的,这个大家都知道. But,貌似很多时候这个方法的调用没有什么效果呀-- 上面所说的调用scrollTo方法看上去好像并没有起到对滚动条进行定位的效果,其实是因为我们是

  • Android GridView实现滚动到指定位置的方法

    当一个列表项目很多,并且每个项目可以进入到其它Activity或者Fragment时,保存之前列表的位置是一个比较不错的功能, 今天研究了一下怎么保存浏览位置,发现GridView和它的父类中有4个相关的方法: 复制代码 代码如下: public void smoothScrollToPosition (int position) 滚动到position指定的位置,api level 11之下可用 *当你滚动完后,返回列表,能正常滚动,但是你再次从列表的项目返回后,滚动失效,就是只能滚动一次,我

  • Android滑动组件悬浮固定在顶部效果

    要想实现的效果是如下: 场景:有些时候是内容中间的组件当滑动至顶部的时候固定显示在顶部. 实现的思路: 1.目标组件(button)有两套,放在顶部和内容中间: 2.当内容中间的组件滑动至顶部栏位置时控制显示/隐藏顶部和中间的组件(涉及到组件获取在屏幕的位置知识点): activity代码: public class MainActivity extends AppCompatActivity implements ObservableScrollView.ScrollViewListener

  • Android开发之ScrollView的滑动监听

    我们需要监听ScroView的滑动情况,比如滑动了多少距离,是否滑到布局的顶部或者底部.可惜的是SDK并没有相应的方法,不过倒是提供了一个 protected void onScrollChanged(int l, int t, int oldl, int oldt) 显然这个方法是不能被外界调用的,因此就需要把它暴露出去,解决方式就是写一个接口 /** * Created by 刘楠 on 2016/8/21 0021.17:24 */ public interface ScrollViewL

  • Android中使用ScrollView指定view的顶部悬停效果

    因项目中的需要实现ScrollView顶部的悬停,也不是太难便自己实现功能,话不多说,先上效果图 红色text一到顶上便会悬浮在上面,不会跟随scrollview的滑动而上滑. 原理: 原理其实很简单就是对view的gone和visible,写两个相同的要置顶的view,一个设置为gone,一个为visible,当可见的view超出屏幕范围的时候,将不可以的view设置为visible,不可见的view 与scrollview要同级,这样滑动的时候不会影响到view的位置. 直接上代码 <?xm

  • Android实现滑动到顶部悬停的效果

    先来看下要实现效果图: 查阅资料后,发现网上大部分都是用这种方法实现的: 多写一个和需要悬浮的部分一模一样的layout,先把浮动区域的可见性设置为gone.当浮动区域滑动到顶部的时候,就把浮动区域B的可见性设置为VISIBLE.这样看起来就像悬浮在顶部不动了. 这里介绍的是另外一种方式: 使用design包中的控件 <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.

  • Android模仿实现微博详情页滑动固定顶部栏的效果实例

    前言 最近项目中遇到一个需求,类似微博详情页的效果,通过查找相关的资料终于找了对应的解决方案,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 先来看下我们今天要实现的效果: 滑动固定顶部栏效果图 这段时间公司准备重构一个项目,刚好用到这个效果,我就顺带写了篇文章,关于这个效果网上可以找到一些相关资料的,昨晚看了一些,感觉都不是很好,有点模棱两可的样子,也没提到需要注意的一些关键点,这里来做下整理,由于涉及到公司的代码,这里我就写个简单的Demo来讲解. 简单Demo 传统套路:

  • Android RecycleView滑动停止后自动吸附效果的实现代码(滑动定位)

    最近有个需求 要求列表 滑动后第一条 需要和顶部对齐 上网找了找  发现 官方支持 Recycle + LinearSnapHelper 可以实现 但我实际操作加上后 发现会卡顿 滑动卡顿 没有以前那种流畅感了 想了想  算了 懒得看源码  还是自己写一个得了 效果图 : 代码如下 注释很清楚了 package com.example.testapp import androidx.appcompat.app.AppCompatActivity import android.os.Bundle

  • vue+jquery+lodash实现滑动时顶部悬浮固定效果

    本文实例为大家分享了vue实现滑动时顶部悬浮固定效果的具体代码,供大家参考,具体内容如下 这个效果是一个项目中抽出来的一个demo效果. 前期准备: 1. 引入jQ <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> 引入lodash.js npm install lodash -D fixTop.vue组件的 <template> <div class=

  • Android仿网易客户端顶部导航栏效果

    最近刚写了一个网易客户端首页导航条的动画效果,现在分享出来给大家学习学习.我说一下这个效果的核心原理.下面是效果图: 首先是布局,这个布局是我从网易客户端反编译后弄来的.大家看后应该明白,布局文件如下: <FrameLayout android:id="@id/column_navi" android:layout_width="fill_parent" android:layout_height="wrap_content" androi

  • Android仿今日头条顶部导航栏效果的实例代码

    随着时间的推移现在的软件要求显示的内容越来越多,所以要在小的屏幕上能够更好的显示更多的内容,首先我们会想到底部菜单栏,但是有时候像今日头条新闻客户端要显示的内容太多,而且又想在主界面全部显示出来,所以有加了顶部导航栏. 今日头条顶部导航栏区域的主要部分是一个导航菜单.导航菜单是一组标签的集合,在新闻客户端中,每个标签标示一个新闻类别,对应下面ViewPager控件的一个分页面.当用户在ViewPager区域滑动页面时,对应的导航菜单标签也会相应的被选中,选中的标签通过一个矩形红框高亮显示,红框背

  • Android利用滑动菜单框架实现滑动菜单效果

    之前我向大家介绍了史上最简单的滑动菜单的实现方式,相信大家都还记得.如果忘记了其中的实现原理或者还没看过的朋友,请先去看一遍之前的文章Android仿人人客户端滑动菜单的侧滑特效实现代码,史上最简单的侧滑实现 ,因为我们今天要实现的滑动菜单框架也是基于同样的原理的. 之前的文章中在最后也提到了,如果是你的应用程序中有很多个Activity都需要加入滑动菜单的功能,那么每个Activity都要写上百行的代码才能实现效果,再简单的滑动菜单实现方案也没用.因此我们今天要实现一个滑动菜单的框架,然后在任

  • Android滑动到顶部和底部时出现的阴影如何去掉

    android去掉滑动到顶部和底部的阴影 <ListView android:id="@+id/listView" android:layout_width="match_parent" android:layout_height="wrap_content" android:cacheColorHint="#00000000" android:divider="@color/line_color"

  • Android view滑动悬浮固定效果实现代码示例

    1.背景 在项目开发过程中,有时候会碰到这样的需求:在滑动的过程中,在某时要将子view固定在顶部(常见的是将界面中的tab在滑动到顶部的时候进行固定). 之前写过一篇滑动组件悬浮固定在顶部的文章,但感觉还是有些复杂,因此就有了这次的实现.效果图: 2.思路 (CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout)+TabLayout+ViewPager 3.代码实现 a.主布局代码 <?xml version="1.0"

  • Android编程滑动效果之倒影效果实现方法(附demo源码下载)

    本文实例讲述了Android编程滑动效果之倒影效果实现方法.分享给大家供大家参考,具体如下: 前面介绍了使用<Android编程实现3D滑动旋转效果的方法>,现在介绍图片倒影实现,先看效果图 这里主要通过自定义Gallery和ImageAdapter(继承自BaseAdapter)实现 1.倒影绘制 ImageAdapter继承自BaseAdapter,详细实现可见前面关于Android Gallery的用法.这里重点介绍倒影原理及实现 倒影原理: 倒影效果是主要由原图+间距+倒影三部分组成,

随机推荐