CoordinatorLayout 和 AppBarLayout 实现上滑隐藏 Toolbar,下滑显示 Toolbar

qwyan456 8年前
   <p>大家可能经常看到这种效果,当我们向上滑动的时候,标题栏会隐藏,当我们向下滑动的时候,标题栏会出现。下面就利用Android5.0的新特性来做出这种效果。</p>    <p>CoordinatorLayout、AppBarLayout、Toolbar、TabLayout</p>    <p><strong>布局文件</strong></p>    <p>activity_main.xml</p>    <pre>  <code class="language-java"><?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></code></pre>    <p>MainActivity. <a href="/misc/goto?guid=4959730847780971835" rel="nofollow,noindex">Java</a></p>    <pre>  <code class="language-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)              {                }          });      }  }</code></pre>    <p><strong>显示效果</strong></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/1710b1f395d3773eeb196fada2f52c99.gif"></p>    <h3> </h3>    <p> </p>    <p> </p>