天天看点

FrameLayout布局的增强版—CoordinatorLayout

1.介绍

CoordinatorLayout是用来组织它的子Views之间协作的一个父View。CoordinatorLayout默认情况下可理解成一个FrameLayout,它的布局方式默认是一层一层叠上去。

本文主要讲的是CoordinatorLayout+AppBarLayout的组合使用,绿色的部分代表导航栏。

效果图如下:

FrameLayout布局的增强版—CoordinatorLayout

2.使用方法

在build.gradle文件中加上这段代码:

compile 'com.android.support:design:22.2.0'
           
public class CoordinatorLayoutActivity extends ActionBarActivity {

    @Bind(R.id.recycler_view)
    RecyclerView recyclerView;

    private List<String> data;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_coordinator_layout);
        ButterKnife.bind(this);

        initData();
    }

    private void initData() {
        data = new ArrayList<>();
        for (int i = 'A'; i <= 'Z'; i++) {
            data.add("" + (char) i);
        }

        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        recyclerView.setAdapter(new ListAdapter());
        recyclerView.addItemDecoration(new DividerItemDecoration(this, DividerItemDecoration.VERTICAL_LIST));
    }

    class ListAdapter extends RecyclerView.Adapter<ListAdapter.ListViewHolder> {

        @Override
        public ListViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            ListViewHolder holder = new ListViewHolder(
                    LayoutInflater.from(CoordinatorLayoutActivity.this).inflate(R.layout.adapter_list, parent, false));
            return holder;
        }

        @Override
        public void onBindViewHolder(ListViewHolder holder, int position) {
            holder.tv_number.setText(data.get(position));
        }

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

        class ListViewHolder extends RecyclerView.ViewHolder {
            TextView tv_number;

            public ListViewHolder(View view) {
                super(view);
                tv_number = (TextView) view.findViewById(R.id.tv_number);
            }
        }
    }
}
           

布局文件

<?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.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:background="@color/color_D4F668"
            app:layout_scrollFlags="scroll|enterAlways" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:background="@color/color_2F9DD2" />

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

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

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

3.属性介绍

1>顶部标题栏中定义的app:layout_scrollFlags属性:     此属性里面必须至少启用scroll这个flag,这样这个View才会滚动出屏幕,否则它将一直固定在顶部。

  • scroll:所有想滚动出屏幕的view都需要设置这个flag,没有设置这个flag的View将会被固定在屏幕顶部。
  • enterAlways:当滑动组件向下滚动时,标题栏会直接往下滚动。
  • enterAlwaysCollapsed:当你的视图已经设置minHeight属性又使用此标志时,你的视图只能已最小高度进入,只有当滚动视图到达顶部时才扩                                         大到完整高度。
  • exitUntilCollapsed:当标题栏要往上逐渐“消逝”时,会一直往上滑动,直到剩下的的高度达到它的最小高度,再响应滑动组件的内部滑动事件。

2>滑动列表中定义的app:layout_behavior属性:     滑动的组件必须要设置此属性

GitHub地址:https://github.com/alidili/DesignSupportDemo