Design之CoordinatorLayout+TabLayout+RecyclerView&CollapsingToolbarLayout

最新推荐文章于 2022-12-21 21:52:39 发布

fcp12138

最新推荐文章于 2022-12-21 21:52:39 发布

阅读量3.1k

点赞数

分类专栏： Android 文章标签： Design

本文链接：https://blog.csdn.net/fcp12138/article/details/51492787

版权

Android 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

图为使用CoordinatorLayout与TabLayout的效果。
1、CoordinatorLayout
CoordinatorLayout is a super-powered FrameLayout。这个layout的作用是搜索其子控件中注解为CoordinatorLayout.Behavior的控件，使他们之间可以互相影响。例如AppBarLayout的注解@CoordinatorLayout.DefaultBehavior(AppBarLayout.Behavior.class)。

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    android:id="@+id/coordinatorLayout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            app:layout_scrollFlags="scroll|enterAlways"
            android:id="@+id/activity_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"/>

        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

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

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

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

2、AppBarLayout
这是一个垂直的LinearLayout，官方给出的样例如下。其包含的子控件通过layout_scrollFlags来设置是否响应变化。app:layout_scrollFlags属性里面必须至少启用scroll这个flag，这样这个view才会滚动出屏幕，否则它将一直固定在顶部。可以使用的其他flag有：

enterAlways: 一旦向上滚动这个view就可见。

enterAlwaysCollapsed: 顾名思义，这个flag定义的是何时进入（已经消失之后何时再次显示）。假设你定义了一个最小高度（minHeight）同时enterAlways也定义了，那么view将在到达这个最小高度的时候开始显示，并且从这个时候开始慢慢展开，当滚动到顶部的时候展开完。

exitUntilCollapsed: 同样顾名思义，这个flag时定义何时退出，当你定义了一个minHeight，这个view将在滚动到达这个最小高度的时候消失。

与其相关的控件必须有设置app:layout_behavior=”@string/appbar_scrolling_view_behavior”

   <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.support.v4.widget.NestedScrollView
               android:layout_width="match_parent"
               android:layout_height="match_parent"
               app:layout_behavior="@string/appbar_scrolling_view_behavior">

           <!-- Your scrolling content -->

       </android.support.v4.widget.NestedScrollView>

       <android.support.design.widget.AppBarLayout
               android:layout_height="wrap_content"
               android:layout_width="match_parent">

           <android.support.v7.widget.Toolbar
                   ...
                   app:layout_scrollFlags="scroll|enterAlways"/>

           <android.support.design.widget.TabLayout
                   ...
                   app:layout_scrollFlags="scroll|enterAlways"/>

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

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

3、TabLayout
其继承自HorizontalScrollView，一般用来配合ViewPager的使用。在配合Viewpager使用时，需mTabLayout.setupWithViewPager(mViewpager);此时，内部已经调用了

private void populateFromPagerAdapter() {
        removeAllTabs();

        if (mPagerAdapter != null) {
            final int adapterCount = mPagerAdapter.getCount();
            for (int i = 0; i < adapterCount; i++) {
                addTab(newTab().setText(mPagerAdapter.getPageTitle(i)), false);
            }

            // Make sure we reflect the currently set ViewPager item
            if (mViewPager != null && adapterCount > 0) {
                final int curItem = mViewPager.getCurrentItem();
                if (curItem != getSelectedTabPosition() && curItem < getTabCount()) {
                    selectTab(getTabAt(curItem));
                }
            }
        } else {
            removeAllTabs();
        }
    }

他会调用适配器mPagerAdapter.getPageTitle(i)，再此之前会removeAllTabs();所以在写Viewpager的适配器时，要重写getPageTitle的方法。网上有很多
* TabLayout tabLayout = ...; * tabLayout.addTab(tabLayout.newTab().setText("Tab 1")); * tabLayout.addTab(tabLayout.newTab().setText("Tab 2")); * tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));
多是无用的代码。
4、RecyclerView
一般而言，我理解为是比listview更强大的控件复用布局。Viewholder在内部已经自带写好。通过setLayoutManager可以实现多种布局。
LinearLayoutManager 实现Listview；
GridLayoutManager 实现 GridView；
StaggeredGridLayoutManager实现瀑布流；
自带多种动画效果，功能十分强大！

就瀑布流实现写个简单的适配器：

public class SimpleAdapter extends RecyclerView.Adapter<SimpleAdapter.MyViewHolder> {


    private List<String> mDatas;

    public SimpleAdapter() {
        mDatas = new ArrayList<String>();
        for (int i = 'A'; i < 'z'; i++)
        {
            mDatas.add("" + (char) i);
        }
    }

    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return new MyViewHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.item_recycler_layout,parent,false));
    }

    @Override
    public void onBindViewHolder(MyViewHolder holder, int position) {
        holder.mTextView.setText(mDatas.get(position));
        holder.mTextView.setHeight((int) (200+200*Math.random()));//简单处理
    }

    @Override
    public int getItemCount() {
        return mDatas.size();
    }

    class MyViewHolder extends RecyclerView.ViewHolder{

        TextView mTextView;

        public MyViewHolder(View itemView) {
            super(itemView);
            mTextView = (TextView) itemView.findViewById(R.id.text);
        }
    }
}

5、CollapsingToolbarLayout
这里写图片描述
CollapsingToolbarLayout的功能就是对Toolbar进行一个包装。在之前的代码中，对toolbar进行一个额外的修改，配上一个Imageview

<?xml version="1.0" encoding="utf-8"?>
<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.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="256dp"
        android:fitsSystemWindows="true">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="#30469b"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@mipmap/bg"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7"  />
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <android.support.v7.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scrollbars="none" />
    </LinearLayout>
</android.support.design.widget.CoordinatorLayout>

在JAVA代码中进行一些简单设置

public class CollapsingActivity extends AppCompatActivity {

    @BindView(R.id.toolbar)
    Toolbar mToolbar;
    @BindView(R.id.collapsing_toolbar_layout)
    CollapsingToolbarLayout mCollapsingToolbarLayout;
    @BindView(R.id.recyclerView)
    RecyclerView mRecyclerView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_collapsing);
        ButterKnife.bind(this);
        //
        setSupportActionBar(mToolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                onBackPressed();
            }
        });
        //使用CollapsingToolbarLayout必须把title设置到CollapsingToolbarLayout上，设置到Toolbar上则不会显示
        mCollapsingToolbarLayout.setTitle("CollapsingToolbarLayout");
        //通过CollapsingToolbarLayout修改字体颜色
        mCollapsingToolbarLayout.setExpandedTitleColor(Color.WHITE);//设置还没收缩时状态下字体颜色
        mCollapsingToolbarLayout.setCollapsedTitleTextColor(Color.BLACK);//设置收缩后Toolbar上字体的颜色

        //
        mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL));
        mRecyclerView.setAdapter(new SimpleAdapter());
    }
}