CoordinatorLayout的简单应用

CoordinatorLayout，图片伸缩布局，比较流行的UI样式，已经集成在AS的想到当中。但是我们需要的是自己自由进行套用，所以不需要多余的代码来干扰我们的理解。我爸代码简化了一下，保留了最基本的应用元素。

思路，首先要有一个CoordinatorLayout的布局，这个需要添加design包，接着在里层套用一个AppBarLayout，再套一层CollapsingToolbarLayout，这是三层。

然后在CollapsingToolbarLayout这一层里面放入我们需要展示的头部图片和toolbar。这正是我们需要看到效果的地方。

底部一般放置可以进行滚动的视图，但是listview不行。一般我们如果需要放置列表，就使用RecyclerView,如果是作为其他总舵控件的容器，ScrollView可以，V4包提供了NestedScrollView。

看代码：

<?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:id="@+id/coor_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:fitsSystemWindows="true">
    <!--android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 能让标题变成白色-->
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <!--contentScrim:工具栏收缩之后的背景色，如果没有就是透明色，显示底部图片-->
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/colltoolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="#c908d37e"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/img_top"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@drawable/fengjing_1"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?actionBarSize"
                app:layout_collapseMode="pin" />
        </android.support.design.widget.CollapsingToolbarLayout>

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

    <!--<android.support.v4.widget.NestedScrollView-->
    <!--android:layout_width="match_parent"-->
    <!--android:layout_height="match_parent"-->
    <!--app:layout_behavior="@string/appbar_scrolling_view_behavior">-->
    <!--</android.support.v4.widget.NestedScrollView>-->

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

以上代码几乎是达到效果的最简代码，有比较重要的都有注释。

如果要看效果，就这个布局文件就够了。源代码是一句都可以不用写的。不过我们为了完整示范，还是把RecyclerView数据展示部分写出来。

public class MainActivity extends AppCompatActivity {
    private CollapsingToolbarLayout collBar;
    private Toolbar mToolBar;
    private RecyclerView mRecyclerView;
    private List<String> list = new ArrayList<>();
    private MyAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout_coor);
        initView();
    }

    private void initView() {
        mToolBar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(mToolBar);
        mToolBar.setNavigationIcon(R.mipmap.ic_launcher);

        collBar = (CollapsingToolbarLayout) findViewById(R.id.colltoolbar);
        collBar.setTitle("图片伸缩控件");
        getData();
        mRecyclerView = (RecyclerView) findViewById(R.id.rv_list);
        mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
        adapter = new MyAdapter(list);
        mRecyclerView.setAdapter(adapter);
    }

    private void getData() {
        for (int i = 0; i < 200; i++) {
            list.add("列表字符串" + i);
        }
    }

    class MyAdapter extends RecyclerView.Adapter<MyViewHolder> {
        List<String> dataList;

        public MyAdapter(List<String> dataList) {
            this.dataList = dataList;
        }

        @Override
        public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            View view = LayoutInflater.from(parent.getContext()).inflate(android.R.layout.simple_list_item_1, null);
            return new MyViewHolder(view);
        }

        @Override
        public void onBindViewHolder(MyViewHolder holder, int position) {
            holder.setItem(dataList.get(position));
            holder.refreshView();
        }

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

    class MyViewHolder extends RecyclerView.ViewHolder {
        TextView textView;
        String item;

        public MyViewHolder(View itemView) {
            super(itemView);
            textView = (TextView) itemView.findViewById(android.R.id.text1);
        }

        public void setItem(String item) {
            this.item = item;
        }

        public void refreshView() {
            textView.setText(item);
        }
    }
}

运行效果：