CoordinatorLayout 之 AppBarLayout

来源：互联网发布：linux 删除文件第一行编辑：程序博客网时间：2024/06/17 17:33

实现效果：

随着屏幕的滚动，Toolbar收缩

需要的库：

compile 'com.android.support:design:23.1.1'

需要使用的组件：

android.support.design.widget.CoordinatorLayout
android.support.design.widget.AppBarLayout
android.support.design.widget.CollapsingToolbarLayout
android.support.v7.widget.Toolbar
android.support.v4.widget.NestedScrollView

实现代码：

xml部分：

<?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"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/layout"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="software.monster.myapplication.MainActivity">    <android.support.design.widget.AppBarLayout        android:layout_width="match_parent"        android:layout_height="200dp">        <android.support.design.widget.CollapsingToolbarLayout            android:id="@+id/toolbarlayout"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:background="@color/colorAccent"            app:layout_scrollFlags="scroll|exitUntilCollapsed">            <android.support.v7.widget.Toolbar                android:id="@+id/toolbar"                android:layout_width="match_parent"                android:layout_height="?attr/actionBarSize"                android:background="#77db93"                android:minHeight="20dp"                android:popupTheme="@style/ThemeOverlay.AppCompat.Light"                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"                app:logo="@mipmap/ic_launcher"                app:title="Hello zzp!" />        </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">        <LinearLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_alignParentEnd="true"            android:layout_below="@+id/toolbar"            android:orientation="vertical">            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="Hello World!\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123" />            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="Hello World!\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123" />            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="Hello World!\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123" />            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="Hello World!\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123" />            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="Hello World!\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123" />        </LinearLayout>    </android.support.v4.widget.NestedScrollView></android.support.design.widget.CoordinatorLayout>

java部分：

使用setSupprotActionBar()将原本的ActionBar替换掉。

public class MainActivity extends AppCompatActivity {    private FloatingActionButton btn;    private Toolbar toolbar;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        initViews();        init();    }    private void initViews() {        toolbar  = (Toolbar) findViewById(R.id.toolbar);    }    private void init(){        setSupportActionBar(toolbar);    }}

补充：

若需要添加背景图片，只需将ImageView放到内CollapsingToolbarLayout即可，

注意要放到Toolbar之上，否则会挡住Toolbar。若要Toolbar位置的也像是ImageView

则仅需将Toolbar的background属性删除掉即可。

0 0