CoordinatorLayout的简单应用

来源：互联网发布：linux mint fcitx 编辑：程序博客网时间：2024/05/22 12:51

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);        }    }}

运行效果：

0 0