Android CoordinatorLayout+viewpager+Fragment+RecyclerView高仿知乎和简书 头部滑动收缩
CoordinatorLayout继承viewgourp作为最上层的View作为一个 容器与一个或者多个子View进行交互原理:刚刚我们在RecyclerView设置的app:layout_behavior其实就监听了他的滑动,这时候我们就缺Toolbar的协调,就相当于观察者与被观察者,我们这个时候有了被观察者,观察者还没设置,那么我们就需要在Toolbar中设置a...
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"
<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:background="@color/color_f5f5f5">
<android.support.design.widget.AppBarLayout
android:id="@+id/home_task_barlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/transparent"
android:fitsSystemWindows="true"
android:orientation="vertical"
app:elevation="0dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/user_info_header_collapsing"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/transparent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:statusBarScrim="@color/transparent"
app:titleEnabled="false">
<include layout="@layout/layout_task_head"></include>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
完整的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<Fragment> 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
<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:fitsSystemWindows="true"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<include
layout="@layout/header"
app:layout_scrollFlags="scroll|snap|enterAlways"
></include>
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimaryDark">
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
</android.support.v4.view.ViewPager>
</android.support.design.widget.CoordinatorLayout>
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
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.RecyclerView
android:id="@+id/recycle_list"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
注意事项
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使用详解: 打造折叠悬浮效果
更多推荐
所有评论(0)