CoordinatorLayout 和 AppBarLayout 實現上滑隱藏 Toolbar，下滑顯示 Toolbar

大家可能經常看到這種效果，當我們向上滑動的時候，標題欄會隱藏，當我們向下滑動的時候，標題欄會出現。下面就利用Android5.0的新特性來做出這種效果。

CoordinatorLayout、AppBarLayout、Toolbar、TabLayout

布局文件

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


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


        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:theme="@style/ToolbarTheme"
            app:title="發現"
            app:titleTextAppearance="@style/ToolbarTheme"
            app:titleTextColor="@color/white"/>


        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            app:layout_collapseMode="pin"
            app:tabGravity="fill"
            app:tabIndicatorColor="@color/white"
            app:tabIndicatorHeight="2dp"
            app:tabMode="fixed"
            app:tabSelectedTextColor="@color/white"
            app:tabTextAppearance="@style/TabLayoutTextStyle"
            app:tabTextColor="@color/unselect"/>

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


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:scrollbars="none"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <android.support.v4.view.ViewPager
            android:id="@+id/view_pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </LinearLayout>


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

MainActivity. Java

package com.zhoujian.mykeep.activity;

import android.os.Bundle;
import android.support.annotation.Nullable;
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.support.v7.widget.Toolbar;
import android.util.Log;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;
import com.zhoujian.mykeep.adapter.MyFragmentAdapter;
import com.zhoujian.mykeep.R;
import com.zhoujian.mykeep.fragment.SecondFragment;
import com.zhoujian.mykeep.fragment.ThirdFragment;
import com.zhoujian.mykeep.fragment.FirstFragment;
import com.zhoujian.mykeep.fragment.FourthFragment;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;


public class MainActivity extends AppCompatActivity
{

    public static final String TAG = "MainActivity";
    public static final String []sTitle = new String[]{"精選","訓練","飲食","商城"};
    private TabLayout mTabLayout;
    private ViewPager mViewPager;
    private Toolbar toolbar;

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

    private void initView()
    {
        mViewPager = (ViewPager) findViewById(R.id.view_pager);
        mTabLayout = (TabLayout) findViewById(R.id.tabLayout);
        mTabLayout.addTab(mTabLayout.newTab().setText(sTitle[0]));
        mTabLayout.addTab(mTabLayout.newTab().setText(sTitle[1]));
        mTabLayout.addTab(mTabLayout.newTab().setText(sTitle[2]));
        mTabLayout.addTab(mTabLayout.newTab().setText(sTitle[3]));

        toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "發現按鈕被點擊了", Toast.LENGTH_SHORT).show();
            }
        });

        //設置 Toolbar menu
        toolbar.inflateMenu(R.menu.menu_search);

        // 設置menu item 點擊事件
        toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener()
        {
            @Override
            public boolean onMenuItemClick(MenuItem item)
            {
                switch (item.getItemId())
                {
                    case R.id.item_search:
                        Toast.makeText(MainActivity.this, "搜索按鈕被點擊了", Toast.LENGTH_SHORT).show();
                        break;
                }
                return false;
            }
        });


        mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                Log.i(TAG,"onTabSelected:"+tab.getText());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                Log.i(TAG,"onTabUnselected:"+tab.getText());
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab)
            {

            }
        });

        mTabLayout.setupWithViewPager(mViewPager);
        List<Fragment> fragments = new ArrayList<>();
        fragments.add(FirstFragment.newInstance());
        fragments.add(SecondFragment.newInstance());
        fragments.add(ThirdFragment.newInstance());
        fragments.add(FourthFragment.newInstance());

        MyFragmentAdapter adapter = new MyFragmentAdapter(getSupportFragmentManager(),fragments, Arrays.asList(sTitle));
        mViewPager.setAdapter(adapter);
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener()
        {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels)
            {

            }
            @Override
            public void onPageSelected(int position)
            {
                Log.i(TAG,"select page:"+position);
            }
            @Override
            public void onPageScrollStateChanged(int state)
            {

            }
        });
    }
}

顯示效果