S ActionBar

CoordinatorLayout

主要的两个用途

  • As a top-level application decor or chrome layout

  • As a container for a specific interaction with one or more child views

AppBarLayout

是一个垂直的LinearLayout,用来代替ActionBar,他的子View通过设置setScrollFlags(int) 来确定他们自己的滚动方式,但是这个属性的使用要让AppBarLayout 的上级视图为CoordinatorLayout ,如果上级视图为其他ViewGroup 那么AppBarLayout 的大部分属性将无效。

ScrollFlags in XML

  • scroll

    只有设置这个标志,这个视图才会滚动出屏幕隐藏起来,下面的属性才有意义

  • enterAlways

    在向下划动的时候不管这个视图有没有跟着滚动,这个视图都会执行向下滑动事件,被称为快速返回模式

  • enterAlwaysCollapsed

    和上面不同的是,只有下划到顶部的时候,这个视图才会显示出来

  • exitUntilCollapsed

    如果设置了minHeight 那这个视图在滚动到这个大小的高度的时候将会折叠起来

  • snap

    在滚动结束时,这个视图的可见部分的高度占原来的的25% 时将会自动折叠起来,相反,如果可见部分高度占原来高度的75% 时将会自动完全展开

CollapsingToolbarLayout

CollapsingToolbarLayout作用是提供了一个可以折叠的Toolbar,它继承自FrameLayout,给它设置layout_scrollFlags,它可以控制包含在CollapsingToolbarLayout中的控件(如:ImageView、Toolbar)在响应layout_behavior事件时作出相应的scrollFlags滚动事件(移除屏幕或固定在屏幕顶端)。CollapsingToolbarLayout可以通过app:contentScrim设置折叠时工具栏布局的颜色,通过app:statusBarScrim设置折叠时状态栏的颜色。默认contentScrim是colorPrimary的色值,statusBarScrim是colorPrimaryDark的色值。

XML layout_collapseMode 属性

  • off

    默认属性,视图将不会进行折叠行为

  • pin

    CollapsingToolbarLayout 折叠后,这个视图将会固定到顶部

  • parallax

    视图将会有折叠的动画效果。同时设置layout_collapseParallaxMultiplier 取值“0~1” 之间 数字越大需要折叠的部分越像是固定住的一样像是下面的部分是慢慢往上面盖住一样; 数字越小,就像是被折叠的部分和下面是连在一起的被推上去的一样

示例布局文件

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

        <android.support.design.widget.AppBarLayout
            android:id="@+id/abl_first"
            android:layout_width="match_parent"
            android:layout_height="400dp">


            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/ctl_first"
                android:layout_width="match_parent"
                android:layout_height="360dp"
                app:collapsedTitleTextAppearance="@style/TextAppearance.AppCompat.Title"//折叠后文字风格
                app:contentScrim="?attr/colorPrimary"   //折叠后显示的ToolBar 的颜色
                app:statusBarScrim="@color/red_call_hint"
                app:expandedTitleMarginEnd="10dp"  
                app:expandedTitleMarginStart="10dp"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <ImageView
                    android:id="@+id/iv_tb_loop"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="center"
                    android:src="@drawable/a1"
                    app:layout_collapseMode="parallax"
                    app:layout_collapseParallaxMultiplier="0.5" />

                <android.support.v7.widget.Toolbar
                    android:id="@+id/tb_first"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    android:background="@color/transparent"
                    app:layout_collapseMode="pin" />

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

            <android.support.design.widget.TabLayout
                android:id="@+id/tab_main"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@color/colorAccent"
                app:tabSelectedTextColor="@android:color/holo_red_light" />


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

        <android.support.v4.view.ViewPager
            android:id="@+id/vp_first"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">//设置这个不然就会被上面的折叠布局覆盖上一部分

        </android.support.v4.view.ViewPager>

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

通过AppBarLayout.OnOffsetChangedListener 来监听CollapsingToolbarLayout 的折叠状态

自定义OnOffsetChangedListener 接口

//AppBar 在垂直方向上发生偏移量改变时,会回调这个接口
public abstract class AppBarLayoutListener implements AppBarLayout.OnOffsetChangedListener {

    public enum State {
        /**
         * 完全展开的
         */
        EXPANDED,

        /**
         * 全部折叠起来的
         */
        COLLAPSED,

        /**
         * 可以看见部分的
         */
        IDLE
    }

    private State mCurrentState = State.IDLE;


    /**
     *
     * @param appBarLayout
     * @param verticalOffset 传回来的是相对于完全展开时Y轴的像素值 为负数 说人话就是上划了多少(-verticalOffset)像素
     */
    @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
        if (verticalOffset == 0) {
            if (mCurrentState != State.EXPANDED) {
                mCurrentState = State.EXPANDED;
                onStateChange(mCurrentState);
            }
            Log.e("yxs0412", "onOffsetChanged: " + verticalOffset + "--" + mCurrentState.name());

        } else if (Math.abs(verticalOffset) >= appBarLayout.getTotalScrollRange()) {
            if (mCurrentState != State.COLLAPSED) {
                mCurrentState = State.COLLAPSED;
                onStateChange(mCurrentState);
            }
            Log.e("yxs0412", "onOffsetChanged: " + verticalOffset + "--" + mCurrentState.name());
        } else {
            if (mCurrentState != State.IDLE) {
                mCurrentState = State.IDLE;
                onStateChange(mCurrentState);
            }
            Log.e("yxs0412", "onOffsetChanged: " + verticalOffset + "--" + mCurrentState.name());
        }
    }

    protected abstract void onStateChange(State mCurrentState);
}

使用的时候

AppBarLayout.addOnOffsetChangedListener(new AppBarLayoutListener() {
            @Override
            protected void onStateChange(State mCurrentState) {
                if (mCurrentState == State.EXPANDED) {
                    startPicChangeTimer();
                } else if (mCurrentState == State.COLLAPSED) {
                    cancelPicChangeTimer();
                } else if (mCurrentState == State.IDLE) {
                    startPicChangeTimer();
                }
            }
        });

PS

Toolbar设置标题文字

在代码中设置文字标题和图标

Toolbar.setTitle("First Page");

Toolbar.setNavigationIcon(R.drawable.logo);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容