再正是顶部状态栏是沉浸的

前言
本文落成了多列表下banner可上海滑稽剧团,条目可吸顶的作用。

正文出自 “阿敏其人” 简书博客,转发或引用请注解出处。

迎接出席学习小组QQ群: 一93八65960

正文主要涉嫌android里面md设计的几个控件CoordinatorLayoutAppBarLayoutCollapsingToolbarLayoutTabLayout

版权归作者全体,如有转载,请注解小说出处:http://www.jianshu.com/u/d43d948bef39

正文借使是读者还没利用过adnroid support md的控件,先来看一下图片:

技术方案

图片 1海贼王演示.gif

场景:

  • 接纳自定义的Titlebar
  • 多tab多列表切换
  • 顶部有公用的view,须要在列表上海滑稽剧团时,顶部View要滑出显示器,tabs吸顶

咱俩看出,标题栏能够伸缩,而且顶部状态栏是沉浸的,颜色沉浸,图片沉浸。

选型:

  • 实际上项目之初,是从未有过分明必要顶部view是可上下跟随滑动的,所以初步开垦时放任自流的取舍了:TabLayout+Viewpager+fragment的方案。当中fragment的始末为列表,可上拉自动加载:RecyclerView达成。
    功用如下图:

    图片 2

    Banner展开状态

  • 后来出品确认时提议顶部的view要可上下跟随滑动,Tabs要吸顶。
    效果如下图:

    图片 3

    Banner收起,Tabs吸顶状态

第一反应是使用**CollapsingToolbarLayout**,但是因为app统一使用的自定义Titlebar,所以认为这个方案可能不合适,毕竟CollapsingToolbarLayout是要搭配AppBarLayout和Toolbar来使用的,目的是为了实现可伸缩的toolbar。
-   实践证明我还是浅薄的很,对知识的掌握还是不够
-   CollapsingToolbarLayout远比我想的要灵活,以后再也不要认为CollapsingToolbarLayout就是专用于实现伸缩性Toolbar了。

哦,那看看是怎么得以达成的啊。展开布局文件发今世码如下:

顶部view可滑动跟随的结尾方案:

CoordinatorLayout + AppBarLayout +
CollapsingToolbarLayout
,熟习的同桌能够窥见,我们那边是不带Toolbar玩了。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!--自定义title bar-->
    <include
        android:id="@+id/title_bar_view"
        layout="@layout/my_title_bar"/>

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:visibility="gone"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsing_toolbar"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:contentScrim="@android:color/transparent"
                app:expandedTitleMarginEnd="64dp"
                app:expandedTitleMarginStart="48dp"
                app:expandedTitleGravity="top"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                //顶部view
                <ImageView
                    android:scaleType="fitXY"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    app:layout_collapseMode="parallax"
                    app:layout_collapseParallaxMultiplier="0.7" />

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

        //正常视图
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            android:orientation="vertical">

            <android.support.design.widget.TabLayout
                    android:id="@+id/deals_header_tab"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    app:tabGravity="fill"
                    app:tabIndicatorColor="#ffcb05"
                    app:tabIndicatorHeight="2dp"
                    app:tabMode="scrollable"
                    app:tabSelectedTextColor="#ffcb05"
                    app:tabTextColor="#ffffff"/>

            <android.support.v4.view.ViewPager
                android:id="@+id/page"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#f5f4ef"/>

        </LinearLayout>
        //正在加载中视图
        <LinearLayout
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:orientation="vertical"
            android:visibility="gone">
        </LinearLayout>

        //断网时,重新加载视图
        <LinearLayout
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#f5f4ef"
            android:gravity="center"
            android:orientation="vertical"
            android:visibility="gone">
            ...
        </LinearLayout>
    </android.support.design.widget.CoordinatorLayout>
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout xmlns:andro xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="256dp" android:fitsSystemWindows="true" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.design.widget.CollapsingToolbarLayout android: 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|exitUntilCollapsed"> <ImageView android: android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" android:transitionName="transition_book_img" android:scaleType="centerCrop" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.7" /> <android.support.v7.widget.Toolbar android: android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_collapseMode="pin" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <android.support.design.widget.TabLayout android: android:layout_width="match_parent" android:layout_height="wrap_content" app:tabGravity="fill" app:tabMode="fixed" /> <android.support.v4.view.ViewPager android: android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout> </android.support.design.widget.CoordinatorLayout>

细节处理

  • 收缩的顶部view展现处理:供给整个滑动进度一向可知

<android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsing_toolbar"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:contentScrim="@android:color/transparent"
                app:expandedTitleMarginEnd="64dp"
                app:expandedTitleMarginStart="48dp"
                app:expandedTitleGravity="top"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

app:contentScrim=”@android:color/transparent”:view收缩到最终阶段,前景观呈现透明,这样就足以体现后边的图纸

  • fragment中展现空分界面和格外分界面时,也供给全数显示屏能够滑动

动用ScrollView只怕NestedScrollview包裹fragment的空界面和相当分界面,那样就足以触发系统的滑行机制,将滑动事件交给外层的CollapsingToolbarLayout来一起滑动。

后记
壹经原本就允许行使系统的toolbar,选型上不会经历重重的融合,不过幸而依旧品尝并成功了。通过这一次的品尝,也是对CollapsingToolbarLayout有了翻新的认识,举一反三,做吸顶类的类型大家是还是不是调整了尤其便捷的得以落成?

1看,瓦擦,繁多没见过

CoordinatorLayout AppBarLayoutCollapsingToolbarLayoutTabLayoutandroid:fitsSystemWindows="true"android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"app:contentScrim="?attr/colorPrimary"app:layout_scrollFlags="scroll|exitUntilCollapsed"android:transitionName="transition_book_img"app:layout_collapseParallaxMultiplier="0.7" app:layout_collapseMode="pin"app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:tabGravity="fill" app:tabMode="fixed"

重重东西,都以怎样鬼。不过幸亏,抛去属性,控件不认得的也就伍个。他们的包罗关系差不多如下:

图片 4Paste_Image.png

嗯,那就先看看那多少个控件吧,熟练一下。

Android dev CoordinatorLayout官方网址学习质地

人家Google这么说

CoordinatorLayout is a super-powered FrameLayout.CoordinatorLayout is intended for two primary use cases:As a top-level application decor or chrome layoutAs a container for a specific interaction with one or more child viewsBy specifying Behaviors for child views of a CoordinatorLayout you can provide many different interactions within a single parent and those views can also interact with one another. View classes can specify a default behavior when used as a child of a CoordinatorLayout using the DefaultBehavior annotation.Behaviors may be used to implement a variety of interactions and additional layout modifications ranging from sliding drawers and panels to swipe-dismissable elements and buttons that stick to other elements as they move and animate.Children of a CoordinatorLayout may have an anchor. This view id must correspond to an arbitrary descendant of the CoordinatorLayout, but it may not be the anchored child itself or a descendant of the anchored child. This can be used to place floating views relative to other arbitrary content panes.

粗粗约等于这般说:

CoordinatorLayout 是1个加强版的FrameLayout。(承袭自ViewGroup)

重点有七个用途:一、作为顶层应用的装裱照旧chrome布局二、作为一个器皿来协调三个或两个子views

CoordinatorLayout,Coordinator有协调的意趣。它是三个足以团体众多子view之间互相协作的一个ViewGroup

CoordinatorLayout
有一个Behavior,那么些目的能够说让子view直接知道了彼此的存在,通过不相同的状态监听垄断(monopoly)别的子View的移动还是隐藏与显示等。

一、使用在此以前引进

compile 'com.android.support:appcompat-v7:23.4.0'compile 'com.android.support:design:23.4.0'

贰、布局文件

<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout xmlns:andro xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.FloatingActionButton android: android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="end|bottom" android:layout_margin="16dp" android:src="@mipmap/ic_launcher" /></android.support.design.widget.CoordinatorLayout>

3、Activity

public class CoordinatorLayoutActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_coordinator); findViewById.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Snackbar.make(view,"FAB",Snackbar.LENGTH_LONG) .setAction("cancel", new View.OnClickListener() { @Override public void onClick { //这里的单击事件代表点击消除Action后的响应事件 } }) .show; }}

4、效果:

图片 5应用.gif

  • 亮点在哪儿?当大家按下Snackbar的时候弹出来提醒的时候,按键的会做三个发展的动画片,而我辈的代码却不须要做什么。

有关何以会这么动,那是因为FloatingActionButton暗许使用FloatingActionButton.Behavior。关于Behavior,后边在说。

  • 何以是Snackbar?一句话来讲能够这么说,在Md的世界里 Snackbar 是
    作为替代 Toast 而留存的好东西。

本来即便您不信这么些动画是因为CoordinatorLayout才产生的,那么好,我们把代码改一下:

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:andro xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.FloatingActionButton android: android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="end|bottom" android:layout_margin="16dp" android:src="@mipmap/ic_launcher" /></RelativeLayout>

效果就改为这样子了

图片 6按键无动画.gif

在内部CoordinatorLayout的世界里,Behavior私吞了叁个专程主要性的身价。然后在地点Snackbar的小示例里面,因为系统默许的涉嫌大家连Behavior的身材都来看。那么下边照旧来弄三个小demo,关于Behavior。

CoordinatorLayout里面包车型地铁直接子View壹般是:AppBarLayout+NestedScrollView。又涉嫌到了新东西,NestedScrollView辛亏,简单以为3个是md涉及个中的ScrollView。至于AppBarLayout,还可以够掰扯的,另起一些,开讲。

深深通晓Android开拓中的CoordinatorLayout Behavior

CoordinatorLayout里面包车型地铁直接子View壹般是:AppBarLayout+NestedScrollView。

Google NestedScrollView文档

NestedScrollView is just like ScrollView, but it supports acting as both a nested scrolling parent and child on both new and old versions of Android. Nested scrolling is enabled by default.

一齐来看望谷歌(Google)给我们的AppBarLayout 表明书吧:

AppBarLayout is a vertical LinearLayout which implements many of the features of material designs app bar concept, namely scrolling gestures.Children should provide their desired scrolling behavior through setScrollFlags and the associated layout xml attribute: app:layout_scrollFlags.This view depends heavily on being used as a direct child within a CoordinatorLayout. If you use AppBarLayout within a different ViewGroup, most of it's functionality will not work.AppBarLayout also requires a separate scrolling sibling in order to know when to scroll. The binding is done through the AppBarLayout.ScrollingViewBehavior behavior class, meaning that you should set your scrolling view's behavior to be an instance of AppBarLayout.ScrollingViewBehavior. A string resource containing the full class name is available.

谷歌大概便是说:

AppBarLayout是2个贯彻了广大material
designs特性的垂直的LinearLayout,它能响应滑动事件。

  • 1、AppBarLayout最好是CoordinatorLayout的直接子view

  • 2、AppBarLayout的子view:须求安装app:layout_scrollFlags
    ,可能是在代码中调用setScrollFlags()设置那本性格。

  • 3、AppBarLayout的兄弟节点(或兄弟节点的子view能够滚动):必要钦定behavior属性为AppBarLayout.ScrollingViewBehavior(能够应用二个停放的string表示这些私下认可的实例@string/appbar_scrolling_view_behavior.),才能发布它的最大的效用

瓦擦,看文字费力,那么看谷歌(Google)的示范伪代码吧,认为世界弹指间清爽众多

 <android.support.design.widget.CoordinatorLayout xmlns:andro xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- 3、指定behavior属性为AppBarLayout.ScrollingViewBehavior --> <android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <!-- Your scrolling content --> </android.support.v4.widget.NestedScrollView> <!--1、AppBarLayout最好是CoordinatorLayout的直接子view --> <android.support.design.widget.AppBarLayout android:layout_height="wrap_content" android:layout_width="match_parent"> <!--2 、AppBarLayout的子view:需要设置app:layout_scrollFlags--> <android.support.v7.widget.Toolbar ... app:layout_scrollFlags="scroll|enterAlways"/> <android.support.design.widget.TabLayout ... app:layout_scrollFlags="scroll|enterAlways"/> </android.support.design.widget.AppBarLayout> </android.support.design.widget.CoordinatorLayout> 

..

看似是那么回事了,来啊,

1、布局文件

<android.support.design.widget.CoordinatorLayout xmlns:andro xmlns:app="http://schemas.android.com/apk/res-auto" android: android:layout_width="match_parent" android:layout_height="match_parent"> <!--1、AppBarLayout最好是CoordinatorLayout的直接子view --> <android.support.design.widget.AppBarLayout android: android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <!--2 、AppBarLayout的子view:需要设置app:layout_scrollFlags--> <android.support.v7.widget.Toolbar android: android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" android:title="Title" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:layout_scrollFlags="scroll|enterAlways" /> <ImageView android: android:layout_width="match_parent" android:layout_height="100dp" android:scaleType="centerCrop" android:background="@mipmap/lf" /> </android.support.design.widget.AppBarLayout> <!-- 3、指定behavior属性为AppBarLayout.ScrollingViewBehavior --> <android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="180dp" android:layout_margin="10dp" android:background="#6660c6df" android:gravity="center" android:text="折" android:textSize="26dp" android:transitionName="zi" /> <TextView android:layout_width="match_parent" android:layout_height="180dp" android:layout_margin="10dp" android:background="#6660c6df" android:gravity="center" android:text="折叠" android:textSize="26dp" android:transitionName="zi" /> <TextView android:layout_width="match_parent" android:layout_height="180dp" android:layout_margin="10dp" android:background="#6660c6df" android:gravity="center" android:text="折叠示" android:textSize="26dp" android:transitionName="zi" /> <TextView android:layout_width="match_parent" android:layout_height="180dp" android:layout_margin="10dp" android:background="#6660c6df" android:gravity="center" android:text="折叠示例" android:textSize="26dp" android:transitionName="zi" /> </LinearLayout> </android.support.v4.widget.NestedScrollView></android.support.design.widget.CoordinatorLayout>

2、Activity

public class CoorSimpleActivity extends AppCompatActivity { private Toolbar toolbar; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_coor_simple); toolbar =  findViewById(R.id.toolbar); toolbar.setTitle; setSupportActionBar; }}

3、sytle

<resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> <item name="android:windowTranslucentStatus">true</item> <!--重要--> </style></resources>

4、效果图

图片 7TabLayout.gif

选择大家说的三点,大家在xml里面都做了。效果也落成了。

那么难题来了,ayout_scrollFlags这个值是个什么看头:

scroll:全部想滚动出显示屏的view都供给安装那个flag,
未有设置那些flag的view将被一定在荧屏顶部。

enterAlways:那几个flag让随便向下的轮转都会招致该view变为可知,启用急忙“重返格局”。

enterAlwaysCollapsed:当您的视图已经安装minHeight属性又采用此标识时,你的视图只可以已异常的小高度进入,唯有当滚动视图抵达顶部时才扩张到完全中度。

exitUntilCollapsed:滚动退出显示器,最后折叠在下面。

注意:scroll、enterAlways三种形式为主是亟需共同行使的enterAlways、enterAlwaysCollapsed二种格局基本只有在CollapsingToolbarLayout才有用也正是说,那几个flag的运用景况,基本已经固化了。

PS : 全部应用scroll flag的view都不能够不定义在平素不采纳scroll
flag的view的先头,那样技能确定保障全数的view从顶部退出,留下永远的成分。

在说CollapsingToolbarLayout以前,大家想壹想md对于Toolbar大家都经历了何等。一、你说ActionBar不佳,要换到Toolbar,好,作者换,从此作者有了标准的标题栏。二、你说选取CoordinatorLayout
能够协调子View,做隐藏可能展现,嗯好,小编把最外层换来CoordinatorLayout
。三、你说AppBarLayout是三个落到实处了多数material
designs性子的垂直的LinearLayout,它能响应滑动事件。好,汉子在Toolbar外面加壹层AppBarLayout4、将来,你说垂直的事物还不够自然,有一个android自个儿帮忙的称呼
CollapsingToolbarLayout
可折叠伸缩的Toolbar。好,汉子为了标题栏,为了md,再折腾。

吃完辣条,赶紧翻翻CollapsingToolbarLayout表明书

CollapsingToolbarLayout is a wrapper for Toolbar which implements a collapsing app bar. It is designed to be used as a direct child of a AppBarLayout. CollapsingToolbarLayout contains the following features:Collapsing titleA title which is larger when the layout is fully visible but collapses and becomes smaller as the layout is scrolled off screen. You can set the title to display via setTitle(CharSequence). The title appearance can be tweaked via the collapsedTextAppearance and expandedTextAppearance attributes.Content scrimA full-bleed scrim which is show or hidden when the scroll position has hit a certain threshold. You can change this via setContentScrim.Status bar scrimA scrim which is show or hidden behind the status bar when the scroll position has hit a certain threshold. You can change this via setStatusBarScrim. This only works on LOLLIPOP devices when we set to fit system windows.Parallax scrolling childrenChild views can opt to be scrolled within this layout in a parallax fashion. See COLLAPSE_MODE_PARALLAX and setParallaxMultiplier.Pinned position childrenChild views can opt to be pinned in space globally. This is useful when implementing a collapsing as it allows the Toolbar to be fixed in place even though this layout is moving. See COLLAPSE_MODE_PIN.Do not manually add views to the Toolbar at run time. We will add a 'dummy view' to the Toolbar which allows us to work out the available space for the title. This can interfere with any views which you add.

谷歌(Google)大约这么说:

CollapsingToolbarLayout成效是提供了3个方可折叠的Toolbar(CollapsingToolbarLayout是叁个得以达成了折叠工具栏效果Toolbar的包装器,它被规划为AppBarLayout的间接子View。)

  • 一、 折叠标题 Collapsing
    title当布局完全突显时,标题会变大;当布局滑出荧屏时,标题会变小。你可以通过setTitle()来安装标题,标题的外观能够经过collapsedTextAppearance()和expandedTextAppearance()方法来调动属性。

collapsingToolbarLayout.setTitle("蒙奇-D-路飞");collapsingToolbarLayout.setExpandedTitleColor(Color.YELLOW); // 标题展示时颜色collapsingToolbarLayout.setCollapsedTitleTextColor(Color.WHITE); // 标题收缩时的颜色
  • 二、沉浸式内容 Content
    scrimToolBar被折叠到顶部一定期候的背景,你能够调用setContentScrim方法退换背景只怕在性质中运用 app:contentScrim=”?attr/colorPrimary”来更改背景。

  • 三、沉浸式状态栏 Status bar
    scrim当滚动到一定值时显示只怕隐藏在状态栏前面包车型大巴沉浸式效果,能够因而setStatusBarScrim()方法来安装,仅在Android5.0而且安装了适应窗口(fitsSystemWindows=”true”)时有用。

  • 肆、视差滚动 Parallax scrolling
    children该布局中的子View能够选择视察滚动的方法来滚动,详见LayoutParams#COLLAPSE_MODE_PARALLAX和LayoutParams#setParallaxMultiplier()。CollapsingToolbarLayout滑动时,子视图的视觉差,能够经过属性app:layout_collapseParallaxMultiplier=”0.x”改动。设置视差的周详,介于0.0-1.0中间。

  • 5、 顶部悬浮 CollapseMode子视图的折叠情势,有三种 “pin” 和
    “parallax”.

    • “pin”:固定方式,在折叠的时候最终一定在下面;
    • “parallax”:视差格局,在折叠的时候会有个视差折叠的职能。大家能够在布局中央银行使属性app:layout_collapseMode=”parallax”来改变。

啊,大致就是这样,好像很陆的楷模,看代码吧。

一、布局文件

<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout xmlns:andro 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.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="300dp" android:fitsSystemWindows="true" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.design.widget.CollapsingToolbarLayout android: 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|exitUntilCollapsed"> <ImageView android: android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" android:transitionName="transition_book_img" android:scaleType="centerCrop" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.7" /> <android.support.v7.widget.Toolbar android: android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_collapseMode="pin" app:layout_scrollFlags="scroll|enterAlways" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> </android.support.design.widget.CollapsingToolbarLayout> </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"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="180dp" android:layout_margin="10dp" android:background="#6660c6df" android:gravity="center" android:text="折" android:textSize="26dp" android:transitionName="zi" /> <TextView android:layout_width="match_parent" android:layout_height="180dp" android:layout_margin="10dp" android:background="#6660c6df" android:gravity="center" android:text="折叠" android:textSize="26dp" android:transitionName="zi" /> <TextView android:layout_width="match_parent" android:layout_height="180dp" android:layout_margin="10dp" android:background="#6660c6df" android:gravity="center" android:text="折叠示" android:textSize="26dp" android:transitionName="zi" /> <TextView android:layout_width="match_parent" android:layout_height="180dp" android:layout_margin="10dp" android:background="#6660c6df" android:gravity="center" android:text="折叠示例" android:textSize="26dp" android:transitionName="zi" /> </LinearLayout> </android.support.v4.widget.NestedScrollView></android.support.design.widget.CoordinatorLayout>

2、Activity

public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ImageView imageView = (ImageView) findViewById(R.id.ivImage); imageView.setImageResource(R.mipmap.show_op); Toolbar toolbar=  findViewById(R.id.toolbar); setSupportActionBar; //设置工具栏标题 CollapsingToolbarLayout collapsingToolbarLayout= (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar); collapsingToolbarLayout.setTitle("蒙奇-D-路飞"); }}

3、效果图:

图片 8CollapsingToolbarLayout.gif

代码和图都看完了。

下边再折腾一下

所谓 沉浸式内容 Content scrim

//设置工具栏标题 CollapsingToolbarLayout collapsingToolbarLayout= (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar); collapsingToolbarLayout.setTitle("蒙奇-D-路飞"); collapsingToolbarLayout.setExpandedTitleColor(Color.YELLOW); collapsingToolbarLayout.setCollapsedTitleTextColor(Color.WHITE); collapsingToolbarLayout.setContentScrim(getDrawable(R.mipmap.lf)); // 沉浸内容

图片 9沐浴内容.gif

..所谓 沉浸状态栏 Status bar scrim

 //设置工具栏标题 CollapsingToolbarLayout collapsingToolbarLayout= (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar); collapsingToolbarLayout.setTitle("蒙奇-D-路飞"); collapsingToolbarLayout.setExpandedTitleColor(Color.YELLOW); collapsingToolbarLayout.setCollapsedTitleTextColor(Color.WHITE); collapsingToolbarLayout.setStatusBarScrim(getDrawable(R.mipmap.lf)); // 沉浸状态栏

图片 10沐浴状态栏.gif

..顶部悬浮 CollapseModepin和parallax看起来大约。。

反观初始,我们展现的是一冯骥贼王的 Tab
动态图,在md之前,大家常常能够行使3方开源的PagerSlidingTabStrip去贯彻,或然viewpagerindicator,以往我们能够动用Design
support library库的TabLayout去落到实处。

1律,大家先翻翻 google TabLayout司机手册

手册这么说

TabLayout provides a horizontal layout to display tabs.Population of the tabs to display is done through TabLayout.Tab instances. You create tabs via newTab(). From there you can change the tab's label or icon via setText and setIcon respectively. To display the tab, you need to add it to the layout via one of the addTab methods. 

TabLayout提供了一个水准的布局用来显示Tabs。TabLayout通过 newTab()
能够成立三个tab标签。能够透过setText()和setIcon分别设置文本和icon,最终经过addTab将newTab处的选项卡增加上去就能够。然而这么些是单一的选项卡使用
1般选用选项卡我们都以和viewpager相结合使用的。

google参考代码:

 TabLayout tabLayout = ...; tabLayout.addTab(tabLayout.newTab().setText; tabLayout.addTab(tabLayout.newTab().setText; tabLayout.addTab(tabLayout.newTab().setText;

除此之外代码增添tabs,也足以布局增多tabs

 <android.support.design.widget.TabLayout android:layout_height="wrap_content" android:layout_width="match_parent"> <android.support.design.widget.TabItem android:text="@string/tab_text"/> <android.support.design.widget.TabItem android:icon="@drawable/ic_android"/> </android.support.design.widget.TabLayout>

可以透过 setOnTabSelectedListener(OnTabSelectedListener)
设置tab状态的改观

若是您打算将TabLayout和ViewPager一同使用,那么能够透过setupWithViewPager(ViewPager)方法将双方绑定在一块儿。那种布局将从Pager艾达pter自动填充标题。

 <android.support.v4.view.ViewPager android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.TabLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="top" /> </android.support.v4.view.ViewPager>

一、布局文件tablayout

<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout xmlns:andro xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="256dp" android:fitsSystemWindows="true" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.design.widget.CollapsingToolbarLayout android: 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|exitUntilCollapsed"> <ImageView android: android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" android:scaleType="centerCrop" android:transitionName="transition_book_img" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.7" /> <android.support.v7.widget.Toolbar android: android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_collapseMode="pin" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <android.support.v4.view.ViewPager android: android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.TabLayout android: android:layout_width="match_parent" android:layout_height="wrap_content" app:tabGravity="fill" app:tabMode="fixed"> </android.support.design.widget.TabLayout> </android.support.v4.view.ViewPager> </LinearLayout></android.support.design.widget.CoordinatorLayout>

fragment 布局

<?xml version="1.0" encoding="utf-8"?><android.support.v4.widget.NestedScrollView xmlns:andro android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android: android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="10dp" android:textColor="#212121" android:textSize="16sp" /> </LinearLayout></android.support.v4.widget.NestedScrollView>

2、Activity和FragmentActivity

public class TabLayoutActivity extends AppCompatActivity { private ViewPager mViewPager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.tablayout); Toolbar toolbar =  findViewById(R.id.toolbar); setSupportActionBar; getSupportActionBar().setDisplayHomeAsUpEnabled; toolbar.setNavigationOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { onBackPressed; CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar); collapsingToolbar.setTitle; collapsingToolbar.setExpandedTitleColor(Color.YELLOW); collapsingToolbar.setCollapsedTitleTextColor(Color.WHITE); ImageView ivImage = (ImageView)findViewById(R.id.ivImage); ivImage.setImageResource(R.mipmap.show_op); mViewPager = (ViewPager) findViewById(R.id.viewpager); setupViewPager(mViewPager); TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs); tabLayout.addTab(tabLayout.newTab().setText; tabLayout.addTab(tabLayout.newTab().setText; tabLayout.addTab(tabLayout.newTab().setText; tabLayout.addTab(tabLayout.newTab().setText; tabLayout.addTab(tabLayout.newTab().setText; tabLayout.setupWithViewPager(mViewPager); } private void setupViewPager(ViewPager mViewPager) { MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager; adapter.addFragment(DetailFragment.newInstance(getAsset("book_content.txt")), "基本资料"); adapter.addFragment(DetailFragment.newInstance(getAsset("book_author.txt")), "身世"); adapter.addFragment(DetailFragment.newInstance(getAsset("book_menu.txt")), "性格"); adapter.addFragment(DetailFragment.newInstance(getAsset("lufei_home.txt")), "家谱"); adapter.addFragment(DetailFragment.newInstance(getAsset("lufei_friend.txt")), "海贼团"); mViewPager.setAdapter; } private String getAsset(String fileName) { AssetManager am = getResources().getAssets(); InputStream is = null; try { is = am.open(fileName, AssetManager.ACCESS_BUFFER); } catch (IOException e) { e.printStackTrace(); } return new Scanner.useDelimiter.next(); } static class MyPagerAdapter extends FragmentPagerAdapter { private final List<Fragment> mFragments = new ArrayList<>(); private final List<String> mFragmentTitles = new ArrayList<>(); public MyPagerAdapter(FragmentManager fm) { super; } public void addFragment(Fragment fragment, String title) { mFragments.add; mFragmentTitles.add; } @Override public Fragment getItem(int position) { return mFragments.get; } @Override public int getCount() { return mFragments.size(); } @Override public CharSequence getPageTitle(int position) { return mFragmentTitles.get; } }}

Fragment

public class DetailFragment extends Fragment { public static DetailFragment newInstance(String info) { Bundle args = new Bundle(); DetailFragment fragment = new DetailFragment(); args.putString("info", info); fragment.setArguments; return fragment; } @Nullable @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_detail, null); TextView tvInfo =  view.findViewById(R.id.tvInfo); tvInfo.setText(getArguments().getString; return view; }}

3、assets文件

图片 11Paste_Image.png

4、效果

图片 12海贼王演示.gif

布局:1、主布局

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:andro xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.AppBarLayout android: android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.v7.widget.Toolbar android: android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:layout_collapseMode="pin" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> </android.support.design.widget.AppBarLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@+id/appbar" android:orientation="vertical"> <android.support.v4.view.ViewPager android: android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1.0" android:scrollbars="none" /> <android.support.design.widget.TabLayout android: app:tabIndicatorColor="?attr/colorAccent" app:tabIndicatorHeight="0dp" app:tabPaddingStart="12dp" app:tabPaddingEnd="12dp" app:tabBackground="@color/cardview_light_background" android:layout_width="match_parent" android:layout_height="wrap_content" /> </LinearLayout></RelativeLayout>

2、tab 按钮 布局

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:andro android:orientation="vertical" android:layout_width="match_parent" android:gravity="center" android:layout_height="match_parent"> <ImageView android:layout_marginTop="2dp" android: android:src="@mipmap/ic_launcher" android:layout_width="25dp" android:layout_height="25dp" /> <TextView android: android:layout_marginTop="2dp" android:textSize="14sp" android:textColor="@drawable/selector_text_color" android:layout_width="wrap_content" android:layout_height="wrap_content" /></LinearLayout>

3、fragment_page

<?xml version="1.0" encoding="utf-8"?><TextView xmlns:andro android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" />

2、Activity和其他

Activity

public class BottomTabActivity extends AppCompatActivity { private ViewPager viewPager; private TabLayout tabLayout; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_bottom_tab); Toolbar toolbar =  findViewById(R.id.toolbar); toolbar.setTitle; setSupportActionBar; getSupportActionBar().setHomeButtonEnabled; getSupportActionBar().setDisplayHomeAsUpEnabled; toolbar.setNavigationOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { onBackPressed; viewPager = (ViewPager) findViewById(R.id.viewPager); tabLayout = (TabLayout) findViewById(R.id.tabLayout); SampleFragmentPagerAdapter pagerAdapter = new SampleFragmentPagerAdapter(getSupportFragmentManager; viewPager.setAdapter(pagerAdapter); tabLayout.setupWithViewPager(viewPager); for (int i = 0; i < tabLayout.getTabCount { TabLayout.Tab tab = tabLayout.getTabAt; if (tab != null) { tab.setCustomView(pagerAdapter.getTabView; } }// viewPager.setCurrentItem; tabLayout.getTabAt.getCustomView().setSelected; } public class SampleFragmentPagerAdapter extends FragmentPagerAdapter { final int PAGE_COUNT = 3; private String tabTitles[] = new String[]{"TAB1", "TAB2", "TAB3"}; private Context context; public View getTabView(int position) { View v = LayoutInflater.from.inflate(R.layout.custom_tab, null); TextView tv =  v.findViewById(R.id.news_title); tv.setText(tabTitles[position]); ImageView img = (ImageView) v.findViewById(R.id.imageView); //img.setImageResource(imageResId[position]); return v; } public SampleFragmentPagerAdapter(FragmentManager fm, Context context) { super; this.context = context; } @Override public int getCount() { return PAGE_COUNT; } @Override public Fragment getItem(int position) { return PageFragment.newInstance(position + 1); } @Override public CharSequence getPageTitle(int position) { return tabTitles[position]; } } public static class PageFragment extends Fragment { public static final String ARG_PAGE = "ARG_PAGE"; private int mPage; public static PageFragment newInstance { Bundle args = new Bundle(); args.putInt(ARG_PAGE, page); PageFragment fragment = new PageFragment(); fragment.setArguments; return fragment; } @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); mPage = getArguments().getInt; } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_page, container, false); TextView textView =  view; textView.setText("Fragment " + mPage); return view; } }}

selector

<?xml version="1.0" encoding="utf-8"?><selector xmlns:andro> <item android:color="@color/colorAccent" android:state_pressed="true" /> <!-- pressed --> <item android:color="@color/colorAccent" android:state_selected="true" /> <!-- focused --> <item android:color="@color/cardview_dark_background" /> <!-- default --></selector>

图片 13底部Tab.gif

到现在,把控件的事物说完了,不过还有属性的主题素材啊。

demo

品质的好说,上边附上1个比较完整的md控件属性参考

android:fitsSystemWindows="true"是三个boolean值的内部属性,让view能够依照系统窗口(如status
bar)来调动协调的布局,要是值为true,就会调节view的paingding属性来给system
windows留出空间…用于落到实处状态栏,即 沉浸式状态栏!

Toolbar

  • android:theme=”@style/ThemeOverlay.AppCompat.Dark.ActionBar”
  • app:popupTheme=”@style/ThemeOverlay.AppCompat.Light”
  • app:layout_scrollFlags=”scroll|enterAlways”
    (CoordinatorLayout属性,子布局通过安装该属性显著是或不是可滑动)

表明:app:popupTheme,那特性子就是用来自定义大家弹出的美食做法的样式,在之前的Actionbar的溢出美食指南,大家是无法自定义他的体裁的,只好依照你的theme来摘取黑白三种,不能够团结定义,未来大家得以定义弹出美食做法的体制。

CoordinatorLayout

  • app:layout_scrollFlags (子布局设置是还是不是可滑动)
  • android:layout_gravity 属性调整组件在布局中的地方
  • app:layout_behavior=”@string/appbar_scrolling_view_behavior”
    文告布局中隐含滑动组件!

子布局通过app:layout_scrollFlags明确是还是不是可滑动.给急需滑动的组件设置
app:layout_scrollFlags=”scroll|enterAlways”
属性。设置的layout_scrollFlags有如下两种选取:scroll:
全体想滚动出显示屏的view都急需安装那几个flag-
未有安装那个flag的view将被定位在显示屏顶部。enterAlways:
那几个flag让随便向下的滚动都会导致该view变为可知,启用急迅“再次来到方式”。enterAlwaysCollapsed:
当你的视图已经安装minHeight属性又利用此标记时,你的视图只可以已十分的小高度进入,唯有当滚动视图达到顶部时才扩大到完全中度。exitUntilCollapsed:
滚动退出显示器,最终折叠在上边。

CollapsingToolbarLayout

  • app:collapsedTitleGravity
    内定折叠状态的标题怎样放置,可选值:top、bottom等
  • app:collapsedTitleTextAppearance=”@style/TextAppearance.CollapsedTitle”钦点折叠状态题目文字的样貌
  • app:expandedTitleTextAppearance=”@style/TextAppearance.ExpandedTitle”钦定张开状态标题文字的样貌
  • app:contentScrim=”?attr/colorPrimaryDark”钦赐CollapsingToolbarLayout完全被滚出到荧屏外时的ColorDrawableapp:expandedTitleGravity
    张开状态的标题如何放置
  • app:titleEnabled钦点是还是不是出示标题文本
  • app:toolbarId内定与之提到的ToolBar,借使未钦命则暗中同意使用第三个被察觉的ToolBar子View
  • app:expandedTitleMarginStart=”10dp”
  • app:expandedTitleMargin
  • app:expandedTitleMarginBottom
  • app:expandedTitleMarginEnd
    张开状态更动题目文字的职位,通过margin设置
  • app:layout_collapseParallaxMultiplier=”0.7″
    设置视差的周到,介于0.0-一.0时期。
  • app:layout_collapseMode=”pin”(子布局设置折叠格局)有三种“pin”:固定方式,在折叠的时候最终稳固在上面;“parallax”:视差情势,在折叠的时候会有个视差折叠的机能。

CollapsingToolbarLayout重假诺提供二个可折叠的Toolbar容器,对容器中的区别View设置layout_collapseMode折叠情势,来完成分化的折叠作用。

Floating Action Button

  • app:fabSize=”normal” 是用来定义 FAB 的深浅的,normal
    的意思是在大部景观下正规尺寸为 56dp
    的开关,不过一旦你想利用比较小的3个, mini
    是另三个取舍,它的大小将形成 40dp。
  • app:elevation 为空闲状态下的黑影深度,
  • app:pressedTranslationZ 为按下情状的。
  • app:backgroundTint 是点名暗中认可的背景颜色
  • app:rippleColor 是钦定点击时的背景颜色
  • app:border Width border的宽度
  • app:fabSize 是指FloatingActionButton的大小,可选normal|mini
  • app:pressedTranslationZ 按下来时的z轴的方便

TabLayout

  • app:tabIndicatorColor tab的提醒符颜色
  • app:tabSelectedTextColor 选拔tab的公文颜色
  • app:tabTextColor 普通tab字体颜色
  • app:tabMode 方式,可选fixed和scrollable
    fixed是指固定个数,scrollable是可以横行滚动
  • app:tabGravity 对齐情势,可选fill和center

MD类别1、RecyclerView杰出参考MD种类二、ToolBar+DrawerLayout +
NavigationView

参照:ANDROIID-MJuheNews体系之二 ·
ToolBar+AppBarLayout+CoordinatorLayout+CollapsingToolbarLayoutandroid
CoordinatorLayout使用[Android Material Design
控件常用的质量]md控件属性参考使用TabLayout完成后面部分Tab布局

相关文章