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

   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使用详解: 打造折叠悬浮效果

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页