【Android】CollapsingToolbarLayout 实践

一直都觉得新版本的华为应用市场的主页做的挺好看的，我这边就做个简版的效果。效果图如下：

向上滑动后：

这里面主要练习了一下CollapsingToolbarLayout 的用法。 开源库方面 轮播图 使用了现成的工具类： compile'com.recker.flybanner:flybanner:1.3'

布局部分：

<?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:id="@+id/cdl_content"    android:layout_width="match_parent"    android:layout_height="match_parent">    <android.support.design.widget.AppBarLayout        android:id="@+id/appbarlayout"        android:layout_width="match_parent"        android:layout_height="300dip"        android:fitsSystemWindows="true"        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">        <android.support.design.widget.CollapsingToolbarLayout            android:id="@+id/ctl_title"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:fitsSystemWindows="true"            app:contentScrim="@android:color/transparent"            app:titleEnabled="false"            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">            <!--<ImageView                android:layout_width="match_parent"                android:layout_height="300dip"                android:background="@drawable/service"                app:layout_collapseMode="parallax"                app:layout_collapseParallaxMultiplier="0.7" />-->            <android.support.v7.widget.Toolbar                android:id="@+id/tl_title"                android:layout_width="match_parent"                android:layout_height="?attr/actionBarSize"                android:background="@color/colorPrimary"                android:gravity="top"                app:layout_collapseMode="pin" />            <com.recker.flybanner.FlyBanner                android:id="@+id/banner_1"                android:layout_width="match_parent"                android:layout_height="300dip"                app:layout_collapseMode="parallax"                app:layout_collapseParallaxMultiplier="0.7"/>            <LinearLayout                android:id="@+id/top_lay"                android:layout_width="match_parent"                android:layout_height="?attr/actionBarSize"                android:orientation="horizontal"                android:layout_gravity="top"                app:layout_collapseMode="pin">                <TextView                    android:layout_width="wrap_content"                    android:layout_height="match_parent"                    android:layout_weight="1"                    android:text="标题1"                    android:textSize="20sp"                    android:gravity="center"                    />                <TextView                    android:layout_width="wrap_content"                    android:layout_height="match_parent"                    android:layout_weight="1"                    android:text="标题2"                    android:textSize="20sp"                    android:gravity="center"                    />                <TextView                    android:layout_width="wrap_content"                    android:layout_height="match_parent"                    android:layout_weight="1"                    android:text="标题3"                    android:textSize="20sp"                    android:gravity="center"                    />                <TextView                    android:layout_width="wrap_content"                    android:layout_height="match_parent"                    android:layout_weight="1"                    android:text="标题4"                    android:textSize="20sp"                    android:gravity="center"                    />            </LinearLayout>            <com.naton.materialdemo.component.searchview.SearchBarView                android:id="@+id/searchbarview"                android:layout_width="match_parent"                android:layout_height="40dp"                android:layout_alignParentBottom="true"                android:layout_centerHorizontal="true"                android:layout_marginTop="200dp"                app:layout_collapseMode="pin"                android:visibility="gone"                app:search_bar_hint_text="@string/string_search_text"/>        </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="wrap_content"            android:layout_height="match_parent"            android:orientation="vertical">            <TextView                android:layout_width="match_parent"                android:layout_height="100dp"                android:text="1000" />            <TextView                android:layout_width="match_parent"                android:layout_height="100dp"                android:text="1000" />            <TextView                android:layout_width="match_parent"                android:layout_height="100dp"                android:text="1000" />            <TextView                android:layout_width="match_parent"                android:layout_height="100dp"                android:text="1000" />            <TextView                android:layout_width="match_parent"                android:layout_height="100dp"                android:text="1000" />            <TextView                android:layout_width="match_parent"                android:layout_height="100dp"                android:text="1000" />            <TextView                android:layout_width="match_parent"                android:layout_height="100dp"                android:text="1000" />            <TextView                android:layout_width="match_parent"                android:layout_height="100dp"                android:text="1000" />            <TextView                android:layout_width="match_parent"                android:layout_height="100dp"                android:text="1000" />            <TextView                android:layout_width="match_parent"                android:layout_height="100dp"                android:text="1000" />            <TextView                android:layout_width="match_parent"                android:layout_height="100dp"                android:text="1000" />            <TextView                android:layout_width="match_parent"                android:layout_height="100dp"                android:text="1000" />            <TextView                android:layout_width="match_parent"                android:layout_height="100dp"                android:text="1000" />            <TextView                android:layout_width="match_parent"                android:layout_height="100dp"                android:text="1000" />        </LinearLayout>    </android.support.v4.widget.NestedScrollView></android.support.design.widget.CoordinatorLayout>

Activity部分：

package com.naton.materialdemo;import android.graphics.Color;import android.support.design.widget.AppBarLayout;import android.support.design.widget.CollapsingToolbarLayout;import android.support.v7.app.ActionBar;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.support.v7.widget.Toolbar;import android.view.Gravity;import android.view.View;import android.widget.LinearLayout;import android.widget.Toast;import com.naton.materialdemo.component.searchview.SearchBarView;import com.recker.flybanner.FlyBanner;import java.util.ArrayList;import java.util.List;public class CollapsingToolbarActivity extends AppCompatActivity {    private Toolbar mToolbar;    private FlyBanner mBannerLocal;    private LinearLayout top_lay;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_collapsing_toolbar);        ActionBar supportActionBar = getSupportActionBar();        if (supportActionBar != null) {            supportActionBar.hide();        }        top_lay = (LinearLayout) findViewById(R.id.top_lay);        mToolbar = (Toolbar) findViewById(R.id.tl_title);        setSupportActionBar(mToolbar);        getSupportActionBar().setDisplayHomeAsUpEnabled(true);        mToolbar.setNavigationOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                onBackPressed();            }        });        AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.appbarlayout);        appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {            @Override            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {                float alpha = Math.abs((float) verticalOffset / appBarLayout.getTotalScrollRange());                mToolbar.setAlpha(alpha);                if (alpha >= 1) {                    top_lay.setBackgroundColor(Color.GRAY);                } else {                    top_lay.setBackgroundColor(Color.TRANSPARENT);                }            }        });        //使用CollapsingToolbarLayout必须把title设置到CollapsingToolbarLayout上，设置到Toolbar上则不会显示        CollapsingToolbarLayout mCollapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.ctl_title);        mCollapsingToolbarLayout.setTitle("");        //通过CollapsingToolbarLayout修改字体颜色        //mCollapsingToolbarLayout.setExpandedTitleColor(Color.WHITE);//设置还没收缩时状态下字体颜色        //mCollapsingToolbarLayout.setCollapsedTitleTextColor(Color.GREEN);//设置收缩后Toolbar上字体的颜色        initLocalBanner();    }    /**     * 加载本地图片     */    private void initLocalBanner() {        mBannerLocal = (FlyBanner) findViewById(R.id.banner_1);        List<Integer> images = new ArrayList<>();        images.add(R.drawable.img_1);        images.add(R.drawable.img_2);        images.add(R.drawable.img_3);        images.add(R.drawable.img_4);        mBannerLocal.setImages(images);        mBannerLocal.setOnItemClickListener(new FlyBanner.OnItemClickListener() {            @Override            public void onItemClick(int position) {            }        });    }}

代码部分就这些 就可以实现上面图示的效果了。想要实现如下图的效果，只需要将

<LinearLayout                android:id="@+id/top_lay"                android:layout_width="match_parent"                android:layout_height="?attr/actionBarSize"                android:orientation="horizontal"                android:layout_gravity="bottom"  top 改成 bottom 就可以了                app:layout_collapseMode="pin">

CollapsingToolbarLayout 分析：通过源码发现CollapsingToolbarLayout是基于 FrameLayout扩展的。app:layout_collapseMode="pin" 可以实现当轮播布局在收缩后，android:id="@+id/top_lay"这个布局覆盖到轮播布局上面。

知行办公，专业移动办公平台 https://zx.naton.cn/

原创团队

【总监】十二春秋之，[e-mail]；

【Master】zelo，[e-mail]；【运营】运维艄公，[e-mail]；

【产品设计】流浪猫，[e-mail]；【体验设计】兜兜，[e-mail]；

【iOS】淘码小工，[e-mail]；iMcG33K，[e-mail]；

【Android】人猿居士，[e-mail]；思路的顿悟，[e-mail]；

【java】首席工程师MR_W，[e-mail]；【测试】土镜问道，[e-mail]；

【数据】fox009521，[e-mail]；【安全】保密，你懂的。