美文网首页
折叠式ToolBar,CoordinatorLayout简单使用

折叠式ToolBar,CoordinatorLayout简单使用

作者: and2long | 来源:发表于2017-06-18 19:02 被阅读0次

效果图

CoordinatorLayoutDemo.gif

xml文件

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!--底部栏根据顶部栏的Y轴偏移量来移动,这里设置统一高度50dp-->
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="50dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:orientation="horizontal"
            app:layout_scrollFlags="scroll|enterAlways">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_marginLeft="10dp"
                android:text="标题栏"
                android:textColor="#fff"
                android:textSize="20sp" />

        </LinearLayout>

    </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">

        <WebView
            android:id="@+id/webView"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </android.support.v4.widget.NestedScrollView>

    <!--底部操作栏-->
    <LinearLayout
        android:id="@+id/bottom_bar"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_gravity="bottom"
        android:background="@color/colorPrimary"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:padding="5dp"
        app:layout_behavior="com.and2long.demo.BottomBarBehavior">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:drawablePadding="5dp"
            android:text="底部栏"
            android:textColor="@android:color/white"
            android:textSize="20sp" />


    </LinearLayout>


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

只是简单地自定义了一个layout_behavior:

app:layout_behavior="com.and2long.demo.BottomBarBehavior"

自定义behavior代码如下:

package com.and2long.demo;

import android.content.Context;
import android.support.design.widget.AppBarLayout;
import android.support.design.widget.CoordinatorLayout;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by and2long on 2017/6/18.
 */

public class BottomBarBehavior extends CoordinatorLayout.Behavior<View> {


    public BottomBarBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
        //说明子控件依赖AppBarLayout
        return dependency instanceof AppBarLayout;
    }


    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
        child.setTranslationY(Math.abs(dependency.getTop()));
        return true;
    }
}

Activity中只是初始化了webview并加载了一个html文件,就不贴代码了。

完整代码已上传GitHub:CoordinatorLayoutWithCustomBehavior

相关文章

网友评论

      本文标题:折叠式ToolBar,CoordinatorLayout简单使用

      本文链接:https://www.haomeiwen.com/subject/ijcwqxtx.html