关闭

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

标签: android悬浮置顶material滑动
6526人阅读 评论(13) 收藏 举报
分类:

如图效果
最近项目要实现如图的效果,就是滑动的时候课程介绍那一栏到顶悬浮,而里面的可滑动控件继续滑动, 百度了好多,网上都是利用重写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下载

10
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:13604次
    • 积分:247
    • 等级:
    • 排名:千里之外
    • 原创:9篇
    • 转载:0篇
    • 译文:0篇
    • 评论:16条
    文章分类
    最新评论