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>