Android relativelayout 放在屏幕右侧 安卓coordinatorlayout

默默的对自己说声抱歉，现在才学习了这些知识，不知不觉写了挺多，同时我已经将此Demo代码已上传到了github（正好练习了一次github项目上传 > <）

在我的印象中CoordinatorLayout应该出现在Android5.0版本，同时关联的控件有AppBarLayout、CollapsingToolbarLayout、Toolbar等主要控件，主要实现了顶部状态栏的折叠效果，优化了用户体验

• 实现效果
• 前情提要
• 实现过程

• 效果一：主要使用的了ToolBar，使用的时候外部需要被AppBarLayout包裹
• 效果二：Image折叠效果
• 效果三：tab效果
• 效果四：快速实现项目需求，一步集成

• 问题解答

• 设置透明状态栏
• 隐藏Toolbar默认的返回键
• 取消Toolbar右侧的菜单键

实现效果

Effect4为2018.06月补入效果，可快速实现项目需求

Effect 一： toolbar

Effect 二:CollapsingToolbarLayout+ToolBar

Effect 三 :CollapsingToolbarLayout+ToolBar+TabLayout

Effect四：快速实现折叠效果，解决各种所欲问题（此为后期补入）

• 展示状态 1



• 展示状态 2（折叠中的效果优化，后续问题解决的第四条添加后既可实现~）

---

前情提要

每一个效果对应的Activity都是独立存在的，所以下面我会分批简单进行介绍

• 全局性 build

compile 'com.android.support:design:24.2.1'

• 全局性 提醒
  （最外层布局添加，作用于调用自定义属性，好比折叠的效果就是使用的app属性）

xmlns:app="http://schemas.android.com/apk/res-auto"

• 公用代码

AppBarStateChangeListener（可直接Copy）：

package com.yl.bar.barlayout.listener;

import android.support.design.widget.AppBarLayout;

/**
 * Created by YongLiu on 2017/7/31.
 */

public abstract class AppBarStateChangeListener implements AppBarLayout.OnOffsetChangedListener {
    public enum State {
        EXPANDED,
        COLLAPSED,
        IDLE
    }

    private State mCurrentState = State.IDLE;

    @Override
    public final void onOffsetChanged(AppBarLayout appBarLayout, int i) {
        if (i == 0) {
            if (mCurrentState != State.EXPANDED) {
                onStateChanged(appBarLayout, State.EXPANDED);
            }
            mCurrentState = State.EXPANDED;
        } else if (Math.abs(i) >= appBarLayout.getTotalScrollRange()) {
            if (mCurrentState != State.COLLAPSED) {
                onStateChanged(appBarLayout, State.COLLAPSED);
            }
            mCurrentState = State.COLLAPSED;
        } else {
            if (mCurrentState != State.IDLE) {
                onStateChanged(appBarLayout, State.IDLE);
            }
            mCurrentState = State.IDLE;
        }
    }

    public abstract void onStateChanged(AppBarLayout appBarLayout, State state);
}

StatusBarCompat 状态栏工具

package com.example.yongliu.toolbardemo;

import android.annotation.TargetApi;
import android.app.Activity;
import android.content.Context;
import android.graphics.Color;
import android.os.Build;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.view.WindowManager;

/**
 * author  yongliu
 * date  2018/5/29.
 * desc:
 */

public class StatusBarCompat {
    private static final int INVALID_VAL = -1;
    private static final int COLOR_DEFAULT = Color.parseColor("#20000000");

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public static void compat(Activity activity, int statusColor) {

        //当前手机版本为5.0及以上
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            if (statusColor != INVALID_VAL) {
                activity.getWindow().setStatusBarColor(statusColor);
            }
            return;
        }

        //当前手机版本为4.4
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT && Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
            int color = COLOR_DEFAULT;
            ViewGroup contentView = (ViewGroup) activity.findViewById(android.R.id.content);
            if (statusColor != INVALID_VAL) {
                color = statusColor;
            }
            View statusBarView = new View(activity);
            ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                    getStatusBarHeight(activity));
            statusBarView.setBackgroundColor(color);
            contentView.addView(statusBarView, lp);
        }

    }
//activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
    public static void compat(Activity activity) {
        compat(activity, INVALID_VAL);
    }


    public static int getStatusBarHeight(Context context) {
        int result = 0;
        int resourceId = context.getResources().getIdentifier("status_bar_height", "dimen", "android");
        if (resourceId > 0) {
            result = context.getResources().getDimensionPixelSize(resourceId);
        }
        return result;
    }

    public static void setWindowImmersiveState(Activity activity) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            Window window = activity.getWindow();
            window.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS, WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        }
        activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
    }
}

• Github下载地址
• Github上传如何上传项目
• Demo下载地址

---

实现过程

可根据不同的诉求，看不同效果的实现方式 ~

效果一：主要使用的了ToolBar，使用的时候外部需要被AppBarLayout包裹

Xml 中：

<android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="#00000000"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.AppBarLayout>

同时代码中我们需要动态设置ToolBar属性：

toolBar.setTitle("初次使用，多多指教！");
 toolBar.setBackgroundColor(Color.parseColor("#21aae3"));

注意：最外层的布局可以使用LinearLayout也可以使用符合当前布局的CoordinatorLayout布局

ToolBarActivity

package com.yl.bar.barlayout.activity;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import com.yl.bar.barlayout.R;
import java.util.ArrayList;
import java.util.List;

public class ToolBarActivity extends AppCompatActivity {
    private List lists;
    private Toolbar toolBar;
    private RecyclerView mRv;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_toolbar);

        toolBar = (Toolbar) findViewById(R.id.toolbar);
        mRv = (RecyclerView) findViewById(R.id.recyclerView);

        initData();
    }

    private void initData() {
        lists = new ArrayList();
        for (int i = 0; i < 50; i++) {
            lists.add("Please go " + i);
        }

        toolBar.setTitle("初次使用，多多指教！");
        toolBar.setBackgroundColor(Color.parseColor("#21aae3"));
        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);
        mRv.setLayoutManager(linearLayoutManager);
        mRv.setAdapter(new LayoutAdapter());
    }

    class LayoutAdapter extends RecyclerView.Adapter<LayoutAdapter.myViewholder> {
        @Override
        public LayoutAdapter.myViewholder onCreateViewHolder(ViewGroup parent, int viewType) {
            myViewholder myViewholder = new myViewholder(LayoutInflater.from(ToolBarActivity.this).inflate(R.layout.item_layout, parent, false));
            return myViewholder;
        }

        @Override
        public void onBindViewHolder(LayoutAdapter.myViewholder holder, final int position) {
            holder.mItemData.setText(lists.get(position) + "");
        }

        @Override
        public int getItemCount() {
            return lists == null ? 0 : lists.size();
        }

        class myViewholder extends RecyclerView.ViewHolder {
            public TextView mItemData;
            public myViewholder(View itemView) {
                super(itemView);
                mItemData = (TextView) itemView.findViewById(R.id.;
            }
        }
    }
}

activity_toolbar

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

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="#00000000"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

效果二：Image折叠效果

TitleImageTextActivity

package com.yl.bar.barlayout.activity;

import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.AppBarLayout;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import android.widget.Toast;

import com.yl.bar.barlayout.R;
import com.yl.bar.barlayout.listener.AppBarStateChangeListener;

import java.util.ArrayList;
import java.util.List;

public class TitleImageTextActivity extends AppCompatActivity {
    private List lists;
    private Toolbar mToolBar;
    private CollapsingToolbarLayout mCollapsingToolBar;
    private AppBarLayout mAppBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_image_text);
        mCollapsingToolBar = (CollapsingToolbarLayout) findViewById(R.id.style3_collapsing_toolbar_layout);
        mToolBar = (Toolbar) findViewById(R.id.style3_toolbar);
        mAppBar = (AppBarLayout) findViewById(R.id.style3_appbar);

        setSupportActionBar(mToolBar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        //ToolBar的返回键
        mToolBar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                onBackPressed();
            }
        });

        //监听我们拖拽的情况
        mAppBar.addOnOffsetChangedListener(new AppBarStateChangeListener() {
            @Override
            public void onStateChanged(AppBarLayout appBarLayout, State state) {
                Log.d("STATE", state.name());
                if (state == State.EXPANDED) {
                    //展开状态
                    //展开的时候 - 字体颜色
                    mCollapsingToolBar.setExpandedTitleColor(Color.RED);
                    mCollapsingToolBar.setTitle("Baby,I love you !");
//                     如在展示的时候不想显示任何字体，设置为空格即可
//                    mCollapsingToolBar.setTitle(" ");
                } else if (state == State.COLLAPSED) {
                    //折叠状态
                    //收缩的时候 - 字体颜色
                    mCollapsingToolBar.setCollapsedTitleTextColor(Color.BLUE);
                    //收缩后的ToolBar背景色
                    mCollapsingToolBar.setContentScrimColor(Color.WHITE);
                    mCollapsingToolBar.setTitle("you can do everything !");
                } else {
                    //中间状态
                    mCollapsingToolBar.setTitle("change - ing !");
                }
            }
        });

 //        mCollapsingToolBar.setTitle("If you are happy .");
//        //展开的时候 - 字体颜色
//        mCollapsingToolBar.setExpandedTitleColor(Color.RED);
//        //收缩的时候 - 字体颜色
//        mCollapsingToolBar.setCollapsedTitleTextColor(Color.BLUE);
//        //收缩后的ToolBar背景色
//        mCollapsingToolBar.setContentScrimColor(Color.WHITE);

         initData();
    }

    private void initData() {
        lists = new ArrayList();
        for (int i = 0; i < 50; i++) {
            lists.add("Please go " + i + " !");
        }

        RecyclerView mRv = (RecyclerView) findViewById(R.id.style3_recyclerView);
        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);
        mRv.setLayoutManager(linearLayoutManager);
        mRv.setAdapter(new LayoutAdapter());
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_toolbar, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
            case R.id.menu_toolbar_edit:
                Toast.makeText(this,"已经触发编辑按钮",Toast.LENGTH_SHORT).show();
                break;
        }
        return super.onOptionsItemSelected(item);
    }

    class LayoutAdapter extends RecyclerView.Adapter<LayoutAdapter.myViewholder> {

        @Override
        public LayoutAdapter.myViewholder onCreateViewHolder(ViewGroup parent, int viewType) {

            myViewholder myViewholder = new myViewholder(LayoutInflater.from(TitleImageTextActivity.this).inflate(R.layout.item_layout, parent, false));
            return myViewholder;
        }

        @Override
        public void onBindViewHolder(LayoutAdapter.myViewholder holder, final int position) {
            holder.mItemData.setText(lists.get(position) + "");
        }

        @Override
        public int getItemCount() {
            return lists == null ? 0 : lists.size();
        }

        class myViewholder extends RecyclerView.ViewHolder {
            public TextView mItemData;

            public myViewholder(View itemView) {
                super(itemView);
                mItemData = (TextView) itemView.findViewById(R.id.tv_item);
            }
        }
    }
}

activity_image_text

<?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:fitsSystemWindows="true">

    <!--<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"-->
    <!--android:orientation="vertical">-->

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

        <android.support.design.widget.AppBarLayout
            android:id="@+id/style3_appbar"
            android:layout_width="match_parent"
            android:layout_height="256dp"
            android:fitsSystemWindows="true">

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/style3_collapsing_toolbar_layout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:contentScrim="#30469b"
                app:expandedTitleGravity="center"
                app:expandedTitleMarginStart="48dp"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop"
                    android:src="@drawable/background"
                    app:layout_collapseMode="parallax"
                    app:layout_collapseParallaxMultiplier="0.7" />

                <android.support.v7.widget.Toolbar
                    android:id="@+id/style3_toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:expandedTitleGravity="center"
                    app:layout_collapseMode="pin">

                    <!--<LinearLayout-->
                        <!--android:layout_width="wrap_content"-->
                        <!--android:layout_height="wrap_content"-->
                        <!--android:gravity="right"-->
                        <!--android:orientation="horizontal">-->

                        <!--<TextView-->
                            <!--android:layout_width="20dp"-->
                            <!--android:layout_height="20dp"-->
                            <!--android:layout_gravity="right"-->
                            <!--android:layout_marginRight="10dp"-->
                            <!--android:background="@drawable/editer"-->
                            <!--android:gravity="right" />-->
                    <!--</LinearLayout>-->

                </android.support.v7.widget.Toolbar>

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


            <android.support.v7.widget.RecyclerView
                android:id="@+id/style3_recyclerView"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_behavior="@string/appbar_scrolling_view_behavior" />

        </android.support.v4.widget.NestedScrollView>
    </android.support.design.widget.CoordinatorLayout>
</LinearLayout>

效果三：tab效果

Tab代码

TabToolBarActivity

package com.yl.bar.barlayout.activity;

import android.graphics.Color;
import android.support.design.widget.AppBarLayout;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.widget.ImageView;

import com.yl.bar.barlayout.R;
import com.yl.bar.barlayout.adapter.pagrFragmentAdapter;
import com.yl.bar.barlayout.listener.AppBarStateChangeListener;
import com.yl.bar.barlayout.view.FineFragment;
import com.yl.bar.barlayout.view.RainyFragment;
import com.yl.bar.barlayout.view.SnowyFragment;

import java.util.ArrayList;
import java.util.List;

public class TabToolBarActivity extends AppCompatActivity {

    private TabLayout mTab;
    private ViewPager mViewPager;
    private CollapsingToolbarLayout mCollapsingToolBar;
    private ImageView mBackImage;
    private AppBarLayout mAppBar;
    private Toolbar mToolBar;

    List<String> tabLists=new ArrayList<String>();
    List<Fragment> fragmentLists=new ArrayList<Fragment>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab_tool_bar);
        //视图查询
        initView();
        //ToolBar的操作
        init();
        //数据存入
        initData();
    }

    private void initData() {
        tabLists.add("雨天");
        tabLists.add("晴天");
        tabLists.add("雪天");
        RainyFragment rainyFragment = new RainyFragment();
        FineFragment fineFragment = new FineFragment();
        SnowyFragment snowyFragment = new SnowyFragment();
        fragmentLists.add(rainyFragment);
        fragmentLists.add(fineFragment);
        fragmentLists.add(snowyFragment);
        
        initFragPager();
    }

    private void initFragPager() {
        //Adapter简单非常封装一下，传入储存tab的list和储存fragment的list就好
        mViewPager.setAdapter(new pagrFragmentAdapter(getSupportFragmentManager(), tabLists, fragmentLists));
        //俩者的关联方法
        mTab.setupWithViewPager(mViewPager);

        //tablayout有俩者模式，但是我觉得大多数还是我们现在使用的这一种-相当于权重当前空间
        mTab.setTabMode(TabLayout.MODE_FIXED);
    }

    private void init() {
        setSupportActionBar(mToolBar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        mToolBar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                onBackPressed();
            }
        });

        //监听内部的CollapsingToolbarLayout
        mAppBar.addOnOffsetChangedListener(new AppBarStateChangeListener() {
            @Override
            public void onStateChanged(AppBarLayout appBarLayout, State state) {
                if (state == State.EXPANDED) {
                    //展开状态
                    mCollapsingToolBar.setTitle(" ");
                } else if (state == State.COLLAPSED) {
                    //折叠状态
                    //收缩的时候 - 字体颜色
                    mCollapsingToolBar.setCollapsedTitleTextColor(Color.BLUE);
                    //收缩后的ToolBar背景色
//                    mCollapsingToolBar.setContentScrimColor(Color.BLACK);
                    mCollapsingToolBar.setContentScrimResource(R.drawable.girl);
                    mCollapsingToolBar.setTitle("you need happy !");
                } else {
                    //中间状态
                    mCollapsingToolBar.setTitle(" ");
                }
            }
        });

    }

    private void initView() {
        //这里的资源查询均是按照Xml布局顺序进行查询，从第二层的AppBar
        mAppBar = (AppBarLayout) findViewById(R.id.tab_appbar);
        mToolBar = (Toolbar) findViewById(R.id.tab_toolbar);
        mBackImage = (ImageView) findViewById(R.id.tab_backdrop);
        mCollapsingToolBar = (CollapsingToolbarLayout) findViewById(R.id.tab_collapsing);
        mTab = (TabLayout) findViewById(R.id.tab_titles);
        mViewPager = (ViewPager) findViewById(R.id.tab_viewpager);
    }
}

pagrFragmentAdapter

package com.yl.bar.barlayout.adapter;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by YongLiu on 2017/8/1.
 */

public class pagrFragmentAdapter extends FragmentPagerAdapter {
    List<String> tabLists = new ArrayList<String>();
    List<Fragment> pageLists = new ArrayList<Fragment>();

    public pagrFragmentAdapter(FragmentManager fm, List tabLists, List pageLists) {
        super(fm);
        this.tabLists = tabLists;
        this.pageLists = pageLists;
    }

    @Override
    public Fragment getItem(int position) {
        return pageLists.get(position);
    }

    @Override
    public int getCount() {
        return pageLists.size();
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return tabLists.get(position % tabLists.size());
    }
}

activity_tab_tool_bar

<?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"
    android:background="@android:color/background_light"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/tab_appbar"
        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:id="@+id/tab_collapsing"
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/tab_backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@drawable/girl"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/tab_toolbar"
                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.TabLayout
            android:id="@+id/tab_titles"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="?attr/colorPrimary"
            app:tabIndicatorHeight="4dp"
            app:tabTextColor="#159"
            app:tabIndicatorColor="#147"
            app:tabSelectedTextColor="#111"
            />
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/tab_viewpager"
        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>

效果四：快速实现项目需求，一步集成

MainActivity

package com.example.yongliu.toolbardemo;

import android.graphics.Color;
import android.os.Build;
import android.os.Bundle;
import android.support.design.widget.AppBarLayout;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.v4.content.ContextCompat;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.WindowManager;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    private Toolbar mToolBar;
    private CollapsingToolbarLayout mCollapsingToolBar;
    private AppBarLayout mAppBar;
    private TextView mTitle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mCollapsingToolBar = (CollapsingToolbarLayout) findViewById(R.id.style3_collapsing_toolbar_layout);
        mToolBar = (Toolbar) findViewById(R.id.style3_toolbar);
        mAppBar = (AppBarLayout) findViewById(R.id.style3_appbar);
        mTitle = findViewById(R.id.title);

        //设置透明状态栏
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
        }

        //监听我们拖拽的情况
        mAppBar.addOnOffsetChangedListener(new AppBarStateChangeListener() {
            @Override
            public void onStateChanged(AppBarLayout appBarLayout, State state) {
                //隐藏toolbar默认返回键
                setSupportActionBar(mToolBar);
                getSupportActionBar().setDisplayHomeAsUpEnabled(false);

                //以下为折叠的三种状态
                if (state == AppBarStateChangeListener.State.EXPANDED) {
                    mCollapsingToolBar.setTitle(" ");
                    mTitle.setVisibility(View.GONE);
                } else if (state == AppBarStateChangeListener.State.COLLAPSED) {
                    //收缩的时候 - 字体颜色
                    mCollapsingToolBar.setCollapsedTitleTextColor(Color.WHITE);
                    //收缩后的ToolBar背景色 #4081D6
                    mCollapsingToolBar.setContentScrimColor(ContextCompat.getColor(MainActivity.this, R.color.blue1));
                    mTitle.setVisibility(View.VISIBLE);
                    mTitle.setText("一朵花儿开");
                } else {
                    mTitle.setVisibility(View.GONE);
                    mCollapsingToolBar.setTitle(" ");
                    //问题解决第四条，解决折叠中效果不好的问题
                    //BitmapDrawable bitmapDrawable = new BitmapDrawable(String.valueOf(ContextCompat.getDrawable(MainActivity.this, R.mipmap.ic_launcher)));
                    //mCollapsingToolBar.setContentScrim(bitmapDrawable);
                }
            }
        });
    }
}

activity_main（布局还是稍微看一下，也可直接copy看效果）

<?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:background="#ff7"
android:orientation="vertical">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/style3_appbar"
        android:layout_width="match_parent"

        android:layout_height="250dp"

        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/style3_collapsing_toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@mipmap/text"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.3"
                />

            <android.support.v7.widget.Toolbar
                android:id="@+id/style3_toolbar"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_marginTop="20dp"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <TextView
                        android:id="@+id/title"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerInParent="true"
                        android:layout_gravity="center"
                        android:gravity="center"
                        android:text="@string/app_name"
                        android:textSize="16sp"/>

                    <ImageView
                        android:id="@+id/iv_icon_right"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentRight="true"
                        android:layout_gravity="end"
                        android:gravity="center_vertical"
                        android:src="@mipmap/ic_launcher_round"
                        android:visibility="visible"
                        tools:visibility="visible"/>
                </RelativeLayout>

            </android.support.v7.widget.Toolbar>

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

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

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/n_scroll_view"
        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="wrap_content"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="开"
                android:textColor="#0f0"
                android:textSize="200sp"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="心"
                android:textColor="#0f0"
                android:textSize="200sp"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="就"
                android:textColor="#0f0"
                android:textSize="200sp"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="好"
                android:textColor="#0f0"
                android:textSize="200sp"/>
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

---

问题解答

仅记录一些自己遇到的问题 ~

设置透明状态栏

//Copy在onCreate生命周期既可，设置透明状态栏
 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
    }

隐藏Toolbar默认的返回键

//传入toolbar同时设置为false
 setSupportActionBar(mToolBar);
 getSupportActionBar().setDisplayHomeAsUpEnabled(false);

取消Toolbar右侧的菜单键

通过Toolbar内嵌的布局实现，至少我是这样写的，相对自由，想怎么写怎么写~

• 解决折叠中背景沉陷某一颜色，不显示折叠的图片（视觉效果感官）

最初联想（下面这段代码是同事提供的，我是通过这个想到了下面‘正解’的实现，关于此处可以忽略！！！）

//通过Glide图片加载内的一个方法进行设置
 SimpleTarget<Drawable> collTtarget = new SimpleTarget<GlideD>() {
        @Override
       public void onResourceReady(Drawable resource, GlideAnimation<? super GlideDrawable> glideAnimation) {
                 mCollapsingToolBar.setContentScrim(resource);
             }
      };

正解：

//为CollapsingToolBar随意设置一个bigmap对象
 BitmapDrawable bitmapDrawable = new BitmapDrawable(String.valueOf(ContextCompat.getDrawable(getContext(), R.mipmap.ic_banner_bg)));
 mCollapsingToolBar.setContentScrim(bitmapDrawable);

---