Android 滑动悬浮置顶效果的新实现

2016年08月30日 17:04:10

如图效果
最近项目要实现如图的效果,就是滑动的时候课程介绍那一栏到顶悬浮,而里面的可滑动控件继续滑动, 百度了好多,网上都是利用重写scrollview滑动的监听,来隐藏和显示某一个控件来实现的,通过这个方法实现的滑动不是很流畅,于是我决定用最新的material design来实现这个效果。废话不多说,直接上代码:

<?xml version="1.0" encoding="utf-8"?><!--android:background="#ffffff"-->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/cotainer"
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:fitsSystemWindows="true"
    android:orientation="vertical">
    <!-- 第一部分:CoordinatorLayout -->
    <android.support.design.widget.CoordinatorLayout


        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/scrollview"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:background="#ffffff"

        >

        <!-- 第二部分:缩放控件-->
        <android.support.design.widget.AppBarLayout
            android:id="@+id/id_appbarlayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsing_tool_bar_test_ctl"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                app:contentScrim="?attr/colorPrimary"
                app:expandedTitleMarginEnd="64dp"
                app:expandedTitleMarginStart="48dp"
                app:layout_scrollFlags="scroll">
                <RelativeLayout
                    android:id="@+id/userScroreRe"
                    android:layout_width="match_parent"
                    android:layout_height="240dp"
                    android:background="#f00"
                    app:layout_scrollFlags="enterAlwaysCollapsed">



                </RelativeLayout>
            </android.support.design.widget.CollapsingToolbarLayout>



                <LinearLayout
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">

                    <RadioGroup
                        android:id="@+id/radioGroup"
                        android:layout_width="fill_parent"
                        android:layout_height="50dip"
                        android:gravity="center"
                        android:orientation="horizontal" />
                </LinearLayout>
        </android.support.design.widget.AppBarLayout>


        <!-- 第三部分:Your Scroll View-->
        <android.support.v4.widget.NestedScrollView
            android:id="@+id/myMainScrollView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:overScrollMode="always"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
            <!--- app:layout_behavior="@string/appbar_scrolling_view_behavior"-->


            <LinearLayout
                android:id="@+id/mainLinearLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"

                android:orientation="vertical">

                <TextView
                    android:layout_width="50dp"
                    android:layout_height="match_parent"
                    android:layout_gravity="center"
                    android:text="测试gem测试测试测试测试测试测试测试测试测试测测试测试测试测试测试测试测试测试测试测测试测试测试测试测试测试测试测试测试测测试测试测试测试测试测试测试测试测试测测试测试测试测试测试测试测试测试测试测测试测试测试测试测试测试测试测试测试测测试测试测试测试测试测试测试测试测试测测试测试测试测试测试测试测试测试测试测试测试测试"
                     />

                <!--<FrameLayout-->
                <!--android:id="@+id/myFrameContainer"-->
                <!--android:layout_width="match_parent"-->
                <!--android:layout_height="fill_parent"></FrameLayout>-->

            </LinearLayout>
        </android.support.v4.widget.NestedScrollView>
    </android.support.design.widget.CoordinatorLayout>
</LinearLayout>

这里是布局文件,最外层是CoordinatorLayout,然后滑动时候要隐藏的控件放CollapsingToolbarLayout里面,NestedScrollView里面放的是置顶后可滑动的控件,然后就可以实现效果了,就是这么简单。
需要注意的有几点:
1.CollapsingToolbarLayout必须设置app:layout_scrollFlags=”scroll”,他才可以滑动。
2.NestedScrollView必须设置app:layout_behavior这个属性,他们才会联动。
3.NestedScrollView里面如果嵌套listview等可滑动的布局时要重写listview的onmeasures方法(网上一大堆)。

demo下载

Android 简单实现ListView顶部悬浮效果

首先上效果图,实现如下效果: 起初在网上搜了下实现这样的效果,美团网,大众点评的“购买框”悬浮效果也是这样的,不过作者实现比较麻烦,自己想了想就根据ListView提供的一些特性进行了简单实现。 ...
  • ljfbest
  • ljfbest
  • 2014年08月23日 00:00
  • 36851

几种实现ListView顶部悬浮效果

顶部悬浮,这个是老生常谈的控件,一搜索网上大篇幅的介绍,有几种实现方式: 1.简单的实现ListView顶部悬浮http://blog.csdn.net/ljfbest/article/detail...
  • tsdfk1455
  • tsdfk1455
  • 2017年01月08日 22:16
  • 2297

Android 沉浸式状态栏及悬浮效果

转载请注明出处 http://blog.csdn.net/xiaoyuan511 Android沉浸式状态栏及悬浮效果
  • u011310942
  • u011310942
  • 2016年11月15日 10:23
  • 5039

Android ScrollView向上滑动控件顶部悬浮效果实现

本文参考了:《上滑停靠顶端的悬浮框》的代码,在此表示感谢。【上滑停靠顶端的悬浮框】里的实现方法是使用两个控件,滑动时,监听ScrollView的滚动Y值,从而通过对两个控件的显示隐藏来实现控件的顶部悬...
  • u012242853
  • u012242853
  • 2016年03月16日 14:29
  • 913

Android ScrollView向上滑动控件顶部悬浮效果实现

  • 2014年09月29日 15:08
  • 654KB
  • 下载

Android桌面悬浮窗效果实现,仿360手机卫士悬浮窗效果

大家好,今天给大家带来一个仿360手机卫士悬浮窗效果的教程,在开始之前请允许我说几句不相干的废话。 不知不觉我发现自己接触Android已有近三个年头了,期间各种的成长少不了各位高手的帮助,总是有很多...
  • sinyu890807
  • sinyu890807
  • 2013年03月19日 17:21
  • 116826

Android悬浮窗使用小结

Android的窗口体系中,WindowManager占有非常重要的地位,它封装了添加、移除、更新窗口的方法,它是Activity、View的更加底层的管理类,使用WindowManager的其中一个...
  • u011913612
  • u011913612
  • 2016年08月24日 09:26
  • 6181

Android UI开发第十四篇——可以移动的悬浮框

工作中遇到一些项目需要把窗体显示在最上层,像来电弹窗显示电话号码等信息或拦截短信信息显示给用户,我们想这些数据放在最上层,activity就满足不了我们的需求了,有些开发者使用了循环显示Toast的方...
  • xyz_lmn
  • xyz_lmn
  • 2011年10月26日 13:30
  • 33297

两个Layout一个属性快速实现Android滑动顶部悬停

大家先来看一下这个效果吧,在项目中应用的场景还是蛮多的。之前在网上看到有许多实现这个效果的做法,但是基本上是在滑动视图内改动,比如获取滑动的Y值来确定悬停View的位置。在design包问世之前这种做...
  • yun1185448859
  • yun1185448859
  • 2016年12月22日 13:31
  • 1514

【Android自定义控件】布局悬停在顶部

语言表达局限,我们先来看下效果: 好了,如果你明白了我说的效果,那就继续往下看吧! 思路是这样的: 首先,我们要自定义一个HoverScrollView,继承ScrollView,通过接口把onS...
  • JingleYe
  • JingleYe
  • 2015年12月15日 17:55
  • 3260
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android 滑动悬浮置顶效果的新实现
举报原因:
原因补充:

(最多只允许输入30个字)