AppBarLayout简介
AppBarLayout是Android5.0的Material Design的一个特色控件,从控件的名字可以知道其主要作用于App的bar。
AppBarLayout继承LinearLayout,布局方向默认是垂直布局,子控件在布局中通过设置app:layout_scrollFlags或者在java中setScrollFlags()方法设置它的滑动手势,但子控件的根布局必须是 CoordinatorLayout才能实现。
实现效果
刚开始的时候显示Toolbar和TableLayout,当我往上滑动的时候,整个页面一起往上滑动,TableLayout推到Toolbar位置的时候会悬停住,固定在此位置。当我往下滑动的时候,Toolbar会跟随手势显示出来,TableLayout滑回原来的位置。
此功能主要是通过AppBarLayout来实现,其子控件设置layout_scrollFlags属性即可。
实现
AppBarActivity
public class AppBarActivity extends AppCompatActivity { private TabLayout tabLayout; private String[] title = { "科技", "美女", "财经", "头条", "新闻", "娱乐", "体育", "头条" }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_app_bar); final ViewPager viewPager = (ViewPager) findViewById(R.id.vp); tabLayout = (TabLayout)findViewById(R.id.tablayout); MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager()); //1.TabLayout和Viewpager关联 tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { @Override public void onTabSelected(TabLayout.Tab tab) { viewPager.setCurrentItem(tab.getPosition(),true); } @Override public void onTabUnselected(TabLayout.Tab tab) { } @Override public void onTabReselected(TabLayout.Tab tab) { } }); //2.ViewPager滑动关联tabLayout viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout)); //设置tabLayout的标签来自于PagerAdapter tabLayout.setTabsFromPagerAdapter(adapter); viewPager.setAdapter(adapter); } class MyPagerAdapter extends FragmentPagerAdapter { public MyPagerAdapter(FragmentManager fm) { super(fm); // TODO Auto-generated constructor stub } @Override public CharSequence getPageTitle(int position) { // TODO Auto-generated method stub return title[position]; } @Override public Fragment getItem(int position) { Fragment f = new DetailFragment(); Bundle bundle = new Bundle(); bundle.putString("title", title[position]); f.setArguments(bundle); return f; } @Override public int getCount() { // TODO Auto-generated method stub return title.length; } }}复制代码
这里不需要过多的解释,主要是ViewPager 的设置。
DetailFragment
public class DetailFragment extends Fragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_layout, container, false); return view; }}复制代码
Fragment 的布局文件
复制代码
以上的代码都是比较简单的实现ViewPager的过程,接下来我们看下主要的布局文件。
复制代码
主布局文件的跟布局需要CoordinatorLayout才能实现AppBarLayout。AppBarLayout是继承LinearLayout,可以直接将Toolbar和TabLayout作为其子View即可。
这里最重要的一点就是给子View设置app:layout_scrollFlags,其设置的值:scroll、enterAlways、enterAlwaysCollapsed、exitUntilCollapsed和snap。
scroll:子控件跟随列表滑出屏幕;
enterAlways:('quick return' pattern)跟scroll一块使用时,向上滑动时ToolBar移出屏幕,我们向下滑动时Toolbar进入屏幕。
enterAlwaysCollapsed:视图设置了minHeight属性的时候,那么视图只能以最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度。
enterAlwaysCollapsed:滚动退出屏幕,最后折叠在顶端。
snap:与scroll一起使用时,我们只需要滑动一小段距离,AppBarLayout就会随着我们滑动的View向上滑出屏幕。
这样就可以做到上面效果图的页面效果了。