Android 中CollapsingToolbarLayout和Toolbar实现炫酷效果

来源：互联网发布：淘宝手机卖场编辑：程序博客网时间：2024/06/05 05:03

CollapsingToolbarLayout和Toolbar结合使用实现如下效果图
这里写图片描述
需求：当上划时AppBarLayout下面的内容隐藏，顶部对的toolbar进行从一个布局改变显示另一个布局，实现炫酷的效果

转载注明出处：http://blog.csdn.net/MySuperGirl/article/details/73132012

有关CoordinatorLayout 和 CollapsingToolbarLayout的一些常用属性可以去查相关api，这里直接就是上用法了，也方便以后的再次使用
不多说直接上代码：
1. 首先是布局文件
思路：1. 在布局中，如上面的效果图中顶部内容在代码中是用的两个textview进行展示的（这里的textview可以根据自己的需求进行更换布局），为了达到想要的效果需要将其中一个textview设置android:visibility=”gone”属性进行隐藏。
2. 对AppBarLayout进行AppBarLayout.addOnOffsetChangedListener监听，当关闭时就让其中一个布局显示，另外一个布局隐藏；当打开时的操作原理类似。

activity_scrolling.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"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:fitsSystemWindows="true"    tools:context="com.eq.coordinatorlayout.ScrollingActivity">    <android.support.design.widget.AppBarLayout        android:id="@+id/app_bar"        android:layout_width="match_parent"        android:layout_height="@dimen/app_bar_height"        android:fitsSystemWindows="true"        android:theme="@style/AppTheme.AppBarOverlay">        <android.support.design.widget.CollapsingToolbarLayout            android:id="@+id/toolbar_layout"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:fitsSystemWindows="true"            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"            app:title=" ">            <LinearLayout                android:id="@+id/toolbar_layout_open"                android:layout_width="match_parent"                android:layout_height="60dp"                android:layout_gravity="bottom"                android:background="#f99"                app:layout_collapseMode="parallax"                app:layout_collapseParallaxMultiplier="0.8">                <TextView                    android:layout_width="match_parent"                    android:layout_height="match_parent"                    android:gravity="center"                    android:text="展开的底部内容显示"                    android:textColor="#000"                    android:textSize="20sp" />            </LinearLayout>            <android.support.v7.widget.Toolbar                android:id="@+id/toolbar"                android:layout_width="match_parent"                android:layout_height="?attr/actionBarSize"                app:layout_collapseMode="pin">                <TextView                    android:id="@+id/toolbar_open"                    android:layout_width="match_parent"                    android:layout_height="40dp"                    android:layout_marginRight="15dp"                    android:background="#0f0"                    android:gravity="center"                    android:text="展开的顶部内容显示"                    android:textColor="#000"                    android:textSize="20sp" />                <TextView                    android:id="@+id/toolbar_close"                    android:layout_width="match_parent"                    android:layout_height="40dp"                    android:layout_marginRight="15dp"                    android:background="#0ff"                    android:gravity="center"                    android:text="关闭时顶部内容显示"                    android:textColor="#000"                    android:textSize="20sp"                    android:visibility="gone" />            </android.support.v7.widget.Toolbar>        </android.support.design.widget.CollapsingToolbarLayout>    </android.support.design.widget.AppBarLayout>    <include layout="@layout/content_scrolling" />    <android.support.design.widget.FloatingActionButton        android:id="@+id/fab"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_margin="15dp"        android:src="@android:drawable/ic_dialog_email"        app:layout_anchor="@id/app_bar"        app:layout_anchorGravity="bottom|end" /></android.support.design.widget.CoordinatorLayout>

在代码中

<LinearLayout                android:id="@+id/toolbar_layout_open"                android:layout_width="match_parent"                android:layout_height="60dp"                android:layout_gravity="bottom"                android:background="#f99"                app:layout_collapseMode="parallax"                app:layout_collapseParallaxMultiplier="0.8">                <TextView                    android:layout_width="match_parent"                    android:layout_height="match_parent"                    android:gravity="center"                    android:text="展开的底部内容显示"                    android:textColor="#000"                    android:textSize="20sp" />            </LinearLayout>

还有textview的代码

          <TextView                    android:id="@+id/toolbar_open"                    android:layout_width="match_parent"                    android:layout_height="40dp"                    android:layout_marginRight="15dp"                    android:background="#0f0"                    android:gravity="center"                    android:text="展开的顶部内容显示"                    android:textColor="#000"                    android:textSize="20sp" />           <TextView                    android:id="@+id/toolbar_close"                    android:layout_width="match_parent"                    android:layout_height="40dp"                    android:layout_marginRight="15dp"                    android:background="#0ff"                    android:gravity="center"                    android:text="关闭时顶部内容显示"                    android:textColor="#000"                    android:textSize="20sp"                    android:visibility="gone" />

这三个都可以使用自定义的布局，可以根据自己的需求进行书写布局进行修改，其中牵扯的属性在这就不多说了。

2. java代码实现
ScrollingActivity.java

package com.eq.coordinatorlayout;import android.os.Bundle;import android.support.design.widget.AppBarLayout;import android.support.design.widget.FloatingActionButton;import android.support.design.widget.Snackbar;import android.support.v7.app.AppCompatActivity;import android.support.v7.widget.Toolbar;import android.view.View;import android.widget.LinearLayout;import android.widget.TextView;public class ScrollingActivity extends AppCompatActivity {    private LinearLayout toolbar_layout_open;    private TextView toolbar_open, toolbar_close;    private AppBarLayout mAppBarLayout;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_scrolling);        final Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);        setSupportActionBar(toolbar);        //初始化控件        mAppBarLayout = (AppBarLayout) findViewById(R.id.app_bar);        toolbar_layout_open = (LinearLayout) findViewById(R.id.toolbar_layout_open);        toolbar_open = (TextView) findViewById(R.id.toolbar_open);        toolbar_close = (TextView) findViewById(R.id.toolbar_close);        //对appbarlayout进行展开和关闭进行监听        mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {            @Override            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {                if (verticalOffset == 0) {  //展开toolbarLayout 让其中一个textview隐藏                    toolbar_open.setVisibility(View.VISIBLE);                    toolbar_close.setVisibility(View.GONE);                } else if (Math.abs(verticalOffset) >= appBarLayout.getTotalScrollRange()) {  //处于收缩状态下                    toolbar_open.setVisibility(View.GONE);                    toolbar_close.setVisibility(View.VISIBLE);                } else { //在展开和收缩过程中                    toolbar_open.setVisibility(View.VISIBLE);                    toolbar_close.setVisibility(View.GONE);                }            }        });        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);        fab.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View view) {                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)                        .setAction("Action", null).show();            }        });    }}

只是为了能达到效果所以代码写的比较简单，也存在不足，希望对朋友们能有所帮助，路过的朋友顶一下，谢谢了。

阅读全文

1 0