2018-10-22 • 于 Read

使用CoordinatorLayout打造酷炫效果

#CoordinateLayout打造酷炫效果

一、CoordinatorLayout简介

CoordinatorLayout是Android5.0之后推出的一个功能,它与AppBarLayout结合可以打造非常酷炫的效果.一般将CoordinatorLayout布局分为两部分,上半部分是AppBarLayout包裹的内容,实现该布局上滑隐藏,下滑显示的效果;下半部分是可滑动的布局,一般设置为RecyclerView,ListView或者时ViewPager等。

二、结合ToolBar

效果图：

2.1 具体实现

布局文件代码：

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.sunny.myframedemo.toolbarscroll.ToolBarFragment">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/Base.ThemeOverlay.AppCompat.Dark.ActionBar">
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolBar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:popupTheme="@style/Base.ThemeOverlay.AppCompat.Light"
                app:layout_scrollFlags="scroll|enterAlways">
            </android.support.v7.widget.Toolbar>
    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/toolbar_recycleView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
    </android.support.v7.widget.RecyclerView>

    <android.support.design.widget.FloatingActionButton
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:src="@drawable/add_2"/>
</android.support.design.widget.CoordinatorLayout>

布局结构为：

最外层是CoordinatorLayout，AppBarLayout为它的子布局，使用AppBarLayout将ToolBar包裹，最关键的就是给ToolBar指定layout_scrollFlags属性。

2.2 几个重要的属性

2.2.1 Scroll

值设为scroll的View会跟随滚动事件一起发生移动。就是当指定的ScrollView发生滚动时，该View也跟随一起滚动，就好像这个View也是属于这个ScrollView一样。

2.2.2 enterAlways

值设为enterAlways的View,当任何时候ScrollView往下滚动时，该View会直接往下滚动。而不用考虑ScrollView是否在滚动到最顶部还是哪里。

2.2.3 exitUntilCollapsed

值设为exitUntilCollapsed的View，当这个View要往上逐渐“消逝”时，会一直往上滑动，直到剩下的的高度达到它的最小高度后，再响应ScrollView的内部滑动事件。

2.2.4 enterAlwaysCollapsed

是enterAlways的附加选项，一般跟enterAlways一起使用，它是指，View在往下“出现”的时候，首先是enterAlways效果，当View的高度达到最小高度时，View就暂时不去往下滚动，直到ScrollView滑动到顶部不再滑动时，View再继续往下滑动，直到滑到View的顶部结束。
剩下的就是给recyclerView填充数据了。

三、结合ViewPager

效果图：

3.1 具体实现

布局代码：

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.sunny.myframedemo.toolbarscroll.AppBarFragment">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/Base.ThemeOverlay.AppCompat.Dark.ActionBar">

        <ImageView
            android:id="@+id/imageview"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/beauty2"
            android:scaleType="fitXY"
            app:layout_scrollFlags="scroll|enterAlways" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="?attr/colorPrimary"
            app:tabIndicatorColor="@color/colorAccent"
            app:tabIndicatorHeight="4dp"
            app:tabSelectedTextColor="#000"
            app:tabTextColor="#fff"/>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/appbar_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.FloatingActionButton
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:src="@drawable/add_2" />

</android.support.design.widget.CoordinatorLayout>

布局结构：

布局结构与CoordinatorLayout结合ToolBar类似。这里只要讲解以下TabLayout与ViewPager绑定。

3.2 ViewPager与TabLayout绑定

3.2.1 布局

布局文件上述已经给出了，这里给出几个TabLayout的几个属性：
① app:tabIndicatorColor 表示下划线颜色
② app:tabIndicatorHeight 表示下方指示条的高度
③ app:tabSelectedTextColor 表示tab被选中后，文字的颜色
④ app:tabTextColor 表示tab中字体的颜色

3.2.2 初始化标题栏与fragment

① 标题栏初始化

private String[] mtitle = new String[]{
        "微博",
        "发现",
        "相册"
};

② fragment的创建

public class MyItemFragment extends Fragment {


    public static MyItemFragment newInstance(String title){
        MyItemFragment myItemFragment=new MyItemFragment();
        Bundle bundle = new Bundle();
        bundle.putString("Title", title);
        myItemFragment.setArguments(bundle);
        return myItemFragment;
    }

    private RecyclerView recyclerView;
    private String title;
    private List<String>  mList=new ArrayList<>();
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View view= inflater.inflate(R.layout.fragment_my_item, container, false);
        recyclerView=view.findViewById(R.id.item_recyclerView);

        Bundle bundle=getArguments();
        if (bundle !=null){
            title=bundle.getString("Title");
        }

        LinearLayoutManager layoutManager=new LinearLayoutManager(getActivity());
        layoutManager.setOrientation(LinearLayoutManager.VERTICAL);
        recyclerView.setLayoutManager(layoutManager);

        initData();

        ToolBarAdapter toolBarAdapter=new ToolBarAdapter(mList);
        recyclerView.setAdapter(toolBarAdapter);

        return view;
    }

    private void initData(){
        for (int i=0;i<20;i++){
            mList.add("我是第"+i+"个"+title);
        }
    }

给fragment的recyclerView中填充数据，然后显示。

3.2.3 为ViewPager创建适配器

public class MyPagerAdapter extends FragmentPagerAdapter {

    private List<Fragment> fragmentList;
    private String[] mTitle;

    public MyPagerAdapter(FragmentManager fm) {
        this(fm, null, null);
    }

    public MyPagerAdapter(FragmentManager fm, List<Fragment> fragmentList, String[] mTitle) {
        super(fm);
        if (fragmentList == null) {
            fragmentList = new ArrayList<>();
        }
        this.fragmentList = fragmentList;
        this.mTitle = mTitle;
    }

    @Override
    public Fragment getItem(int position) {
        return fragmentList.get(position);
    }

    @Override
    public int getCount() {
        return fragmentList.size();
    }

    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return mTitle[position];
    }
}

这里需要注意一点，必须重写getPageTitle方法要不然就标题就不会显示出来。

3.2.4 ViewPager与TableLayout绑定

1	tabLayout.setupWithViewPager(viewPager);

四、结合ViewPager+CollapsingToolbarLayout

效果图：

4.1 具体实现

界面布局代码：

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/background_light"
    android:fitsSystemWindows="true"
    tools:context="com.sunny.myframedemo.toolbarscroll.CollapsingFragment">


    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="350dp"
        android:fitsSystemWindows="true"
        android:theme="@style/Base.ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/beauty3"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/collap_toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/Base.ThemeOverlay.AppCompat.Light" />

        </android.support.design.widget.CollapsingToolbarLayout>

        <android.support.design.widget.TabLayout
            android:id="@+id/collap_tablayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="?attr/colorPrimary"
            app:tabIndicatorColor="@color/colorAccent"
            app:tabIndicatorHeight="4dp"
            app:tabSelectedTextColor="#000"
            app:tabTextColor="#fff" />

    </android.support.design.widget.AppBarLayout>

        <android.support.v4.view.ViewPager
            android:id="@+id/collap_viewPager"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
        </android.support.v4.view.ViewPager>

        <android.support.design.widget.FloatingActionButton
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="end|bottom"
            android:layout_margin="15dp"
            android:src="@drawable/add_2"/>
</android.support.design.widget.CoordinatorLayout>

布局结构如下：

AppBarLayout将CollapsingToolBarLayout和TabLayout包裹起来，而在CollapsingToolBarLayout里面包含ImageView和ToolBar

#####4.1.1 CollapsingToolBarLayout的3种折叠模式
① off：这个是默认属性，布局将正常显示，没有折叠的行为。
②pin：CollapsingToolbarLayout折叠后，此布局将固定在顶部。
③parallax：CollapsingToolbarLayout折叠时，此布局也会有视差折叠效果。
剩下的就是将ViewPager与TabLayout绑定了，这里就不赘述了。
最后附上源码：
https://github.com/sunnyslx/CoordinatorLayoutDemo.git

Sunny.SLX的个人博.

使用CoordinatorLayout打造酷炫效果

一、CoordinatorLayout简介

二、结合ToolBar

2.1 具体实现

2.2 几个重要的属性

2.2.1 Scroll

2.2.2 enterAlways

2.2.3 exitUntilCollapsed

2.2.4 enterAlwaysCollapsed

三、结合ViewPager

3.1 具体实现

3.2 ViewPager与TabLayout绑定

3.2.1 布局

3.2.2 初始化标题栏与fragment

3.2.3 为ViewPager创建适配器

3.2.4 ViewPager与TableLayout绑定

四、结合ViewPager+CollapsingToolbarLayout

4.1 具体实现

Android Handler消息处理机制

详解Android Activity生命周期