Android5.0新特性实现菜单栏置顶

这里写图片描述

先看效果Ok
下面我们粘布局 然后一点一点来介绍

<?xml version="1.0" encoding="utf-8"?>
<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.android50.MainActivity">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

    <TextView
        android:background="@android:color/holo_orange_light"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:text="作者:"
        android:gravity="center|left"
        android:textSize="20sp"/>
</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="match_parent"
        android:layout_height="match_parent"></TextView>


</android.support.v4.widget.NestedScrollView>

</android.support.design.widget.CoordinatorLayout>

textview里的内容太长就省略了

大家可以看到我们整个代码全部是用布局来实现的 是不是 感觉代码萌萌哒呢 哈哈!!!

这些布局是在android5.0的时候出的,最值得高兴的是向下兼容的

第一 首先我们要引入

        compile 'com.android.support:design:25.1.0'

        这个包里也包括了RecyclerView

然后我们先来解释下toolbar这个控件

简单说 就是 actionBar的替代品 actionBar所拥有的特点 Toolbar全部拥有。

那为什么还要搞一个toolbar呢?

    答案就是为了实现我们这么炫的布局效果。可以和别的控件组合起来产生出行云流水般的效果 ^^

诗歌那栏就是我们的toolBar了

再看包着toolBar的AppBarLayout 这哥们又是用来干啥的呢?

它可以让你定制当某个可滚动View的滚动手势发生变化时,其内部的子View实现某种动作。

最重要的就是内部的子view 那么问题又来了实现哪种动作?又怎么实现呢?

我们先看怎么实现 然后再一个一个来讲都有哪些动作?

app:layout_scrollFlags="scroll|enterAlways"

实现在的方式就是这句代码了 ,这个属性是加在appbarLayout的子view里的这个属性的值 分为四种 每一种是一个特效

scroll :
这个属性值的意思就是我们的view可以跟着我们下面设置的
SrollView 一起滚动,就像把两个控件粘合在一起了

enterAlways :
app:layout_scrollFlags=”scroll|enterAlways”

这里写图片描述

exitUntilCollapsed:

app:layout_scrollFlags="scroll|enterAlwaysCollapsed"

 <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:minHeight="50dp"
        android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

大家可以看下上面的代码 高度150dp 最小高度50dp 往上滑动的时候先到最小高度然后再滚动

这里写图片描述
enterAlwaysCollapsed:

app:layout_scrollFlags="scroll|enerAlways|enterAlwaysCollapsed"

 <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:minHeight="50dp"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

这里写图片描述

是不是很清楚了呢 ?这个时候又有一个疑问了 那么我们的toolBar能不能换成布局呢 换成 Imageview TextView这样的布局呢 答案是肯定的

<android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="150dp"
            app:layout_scrollFlags="scroll|enterAlways"
            android:background="@mipmap/aaa"/>

    </android.support.design.widget.AppBarLayout>

这里写图片描述

添加布局的

 <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:orientation="vertical"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:minHeight="50dp">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="150dp"
                app:layout_scrollFlags="scroll|enterAlways"
                android:background="@mipmap/aaa"/>
            <android.support.design.widget.TabLayout
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:id="@+id/tl">

            </android.support.design.widget.TabLayout>
        </LinearLayout>

大家可以看到我利用exitUntilCollapsed的特点 设置了最小高度
而我的tablayout的高度正好是最小高度
是不是觉得具然还可以这么玩,没错就是这么cool
这里写图片描述

再次提出一个疑问
我们最上边的实现是里面嵌套了两个view实现的 , 那么他的孩子到底可以有几个还可以组成什么样的格式来玩?

其实这个我也试过几个子view都可以 但是必须是 最后一个子view的上边的view必须能scroll滚动才行 否则上边不能滚 最下边的可以滚动 也是没有什么效果的。具体的还要大家自己尝试


<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="match_parent"
            android:layout_height="match_parent"></TextView>
    </android.support.v4.widget.NestedScrollView>

还有一个这样的布局没有讲

这个NestedScrollView就是和我们上边的AppBarLayout一起实现连在一起滚动的,他滚动的最重要的一点就是这个属性

app:layout_behavior=”@string/appbar_scrolling_view_behavior”

固定写法就可以和上边联动了,当然behavior的强大不至于此 大家有兴趣的可以自己研究

**那么又会有同学再想 即然最关键的是属性能不能换成别的控件呢
答案是能 但是有局限性**

可以的有viewpager recylerView FrameLayout

具体的哪些可以用 我现在还在研究中 如果有哪位大神搞明白了也可以告诉我一下

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值