Android CoordinatorLayout+viewpager+Fragment+RecyclerView高仿知乎和简书头部滑动收缩

2023-03-24 21:59| 来源: 网络整理| 查看: 265

CoordinatorLayout继承viewgourp

作为最上层的View 作为一个容器与一个或者多个子View进行交互

原理：

刚刚我们在RecyclerView设置的app:layout_behavior其实就监听了他的滑动，这时候我们就缺Toolbar的协调，

就相当于观察者与被观察者，我们这个时候有了被观察者，观察者还没设置，那么我们就需要在Toolbar中设置app:layout_scrollFlags="scroll"，

相当于告诉系统，我要监听滑动，谁的滑动？谁设置了app:layout_behavior="@string/appbar_scrolling_view_behavior"我监听谁

。至于layout_scrollFlags还有其他选项我们要使用多个就用"|"分开就行。他的参数详解如下

应用：

1.结合ToolBar

2.结合ViewPager+fragment

结合ViewPager的视觉特差

CollapsingToolbarLayout里面包含ImageView 和ToolBar，ImageView的app:layout_collapseMode="parallax"，表示视差效果，

ToolBar的 app:layout_collapseMode="pin"，当这个TooBar到达 CollapsingToolbarLayout的底部的时候，会代替整个CollapsingToolbarLayout显示

app:layout_scrollFlags="scroll|exitUntilCollapsed"

完整的demo CoordinatorLayout+viewpager+Fragment+RecyclerView

1.Activity

public class MainActivity extends AppCompatActivity { private TabLayout mTabLayout; private ViewPager mViewPager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main_header); mTabLayout = (TabLayout)findViewById(R.id.tablayout); mViewPager = (ViewPager)findViewById(R.id.viewpager); } @Override protected void onStart() { super.onStart(); } @Override protected void onResume() { super.onResume(); initViewPager(); } // 创建一个集合,装填Fragment ArrayList fragments = new ArrayList(); private void initViewPager() { // 装填 fragments.add(new TabFragment()); fragments.add(new TabFragment()); fragments.add(new TabFragment()); // 创建ViewPager适配器 MyViewPagerAdapter myPagerAdapter = new MyViewPagerAdapter(getSupportFragmentManager()); // 给ViewPager设置适配器 mViewPager.setAdapter(myPagerAdapter); // TabLayout 指示器 (记得自己手动创建4个Fragment,注意是 app包下的Fragment 还是 V4包下的 Fragment) mTabLayout.addTab(mTabLayout.newTab()); mTabLayout.addTab(mTabLayout.newTab()); mTabLayout.addTab(mTabLayout.newTab()); // 使用 TabLayout 和 ViewPager 相关联 mTabLayout.setupWithViewPager(mViewPager); // TabLayout指示器添加文本 mTabLayout.getTabAt(0).setText("头条"); mTabLayout.getTabAt(1).setText("热点"); mTabLayout.getTabAt(2).setText("娱乐"); } final class MyViewPagerAdapter extends FragmentPagerAdapter { public MyViewPagerAdapter(FragmentManager fm) { super(fm); } @Override public int getCount() { return fragments.size(); } @Override public Fragment getItem(int position) { return fragments.get(position); } } } 2.xml

3.fragment

public class TabFragment extends Fragment { public static Fragment newInstance() { TabFragment fragment = new TabFragment(); return fragment; } @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_tab, container, false); RecyclerView recyclerView = (RecyclerView) view.findViewById(R.id.recycle_list); LinearLayoutManager linearLayoutManager = new LinearLayoutManager(getActivity()); linearLayoutManager.setOrientation(LinearLayoutManager.VERTICAL); recyclerView.setLayoutManager(linearLayoutManager); recyclerView.setAdapter(new RecyclerAdapter()); return view; } }

4.reclclerview

注意事项

AppBarLayout必须作为CoordinatorLayout的直接子View，否则它的大部分功能将不会生效，如layout_scrollFlags等。

fragment中要使用NestedScrollView或recyclerview，不能使用ListView与ScrollView。

结论

1.CoordinatorLayout可以不用加toolbar

2.CoordinatorLayout单独添加图片没有问题，添加布局有问题,要用2个CoordinatorLayout，

第二个不行和toolbar有问题，是和acitivity的主题NoActionBar有关，不然出现只能滑动第一个，第二个不行

3.CoordinatorLayout添加自定义布局要通过视觉差2个CoordinatorLayout（视觉差如果acitivity的主题必须NoActionBar,不然会挤压)

参考：

https://www.jianshu.com/p/f09723b7e887 使用CoordinatorLayout打造各种炫酷的效果 Android-协调人员CoordinatorLayout（一） CoordinatorLayout使用详解: 打造折叠悬浮效果

【本文地址】

公司简介

联系我们

Android CoordinatorLayout+viewpager+Fragment+RecyclerView高仿知乎和简书 头部滑动收缩

Android CoordinatorLayout+viewpager+Fragment+RecyclerView高仿知乎和简书头部滑动收缩