高級UI-符合MD的常用控件

在Google提供的控件中，在support-design及v4，v7包中，存在着很多符合MD標準的控件，這裏羅列出一些常用的控件

TextInputLayout

這個控件在作爲輸入框的時候是極其方便及好用的，結合EditText使用

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:counterEnabled="true"
        app:counterMaxLength="10">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="請輸入用戶名" />
    </android.support.design.widget.TextInputLayout>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="請輸入密碼" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="登錄" />

</LinearLayout>

效果

SearchView

搜索功能，位於ActionBar的位置
首先需要編寫menu佈局

<?xml version="1.0" encoding="utf-8"?>
<menu 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"
    tools:context=".MainActivity">

    <item android:id="@+id/menu_search"
        android:orderInCategory="100"
        app:showAsAction="always"
        app:actionViewClass="android.support.v7.widget.SearchView"
        android:title="search"/>
    <item android:id="@+id/menu_share"
        android:orderInCategory="100"
        app:showAsAction="ifRoom"
        android:icon="@android:drawable/ic_menu_share"
        android:title="share" />
</menu>

然後複寫onCreateOptionsMenu()方法

public class MainActivity extends AppCompatActivity {

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

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main, menu);
        MenuItem menuItem = menu.findItem(R.id.menu_search);
        final SearchView searchView = (SearchView) MenuItemCompat.getActionView(menuItem);
        //顯示搜索框
        //searchView.setIconified(false);
        //顯示搜索框，且其不能被隱藏
        searchView.setIconifiedByDefault(false);
        //顯示提交按鈕，這裏可以獲取到id，設置自定義圖片
        ImageView icon = (ImageView) searchView.findViewById(R.id.search_go_btn);
        icon.setImageResource(R.mipmap.ic_launcher);
        icon.setVisibility(View.VISIBLE);
        //設置監聽
        icon.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, searchView.getQuery(), Toast.LENGTH_SHORT).show();
            }
        });
        //獲取id，從而設置提示
        EditText edit = (EditText) searchView.findViewById(R.id.search_src_text);
        edit.setHint("請輸入搜索的內容");
        
        searchView.setSubmitButtonEnabled(true);
        //SearchView還有很多設置監聽選項，例如提交監聽，文本監聽

        return true;
    }
}

效果如下：

Toolbar

頂部導航欄。用於顯示標題，返回，菜單等，最開始是使用的ActionBar
由於ActionBar的種種使用不便，再加上拓展性差，google後來推出了Toolbar，爲了增強其功能，現在還有APPbar可供使用
首先還是要把主題設置爲NoActionBar

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

然後使用Toolbar佈局，由於ToolBar繼承自ViewGroup，所以其是一個容器

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        app:logo="@mipmap/ic_launcher"
        app:navigationIcon="@drawable/abc_ic_ab_back_material"
        app:subtitle="子標題"
        app:subtitleTextColor="@android:color/white"
        app:title="主標題"
        app:titleTextColor="@color/colorAccent">
        <!--<TextView-->
        <!--android:layout_width="wrap_content"-->
        <!--android:layout_height="wrap_content"-->
        <!--android:layout_gravity="center"-->
        <!--android:text="這裏是標題"/>-->
    </android.support.v7.widget.Toolbar>

</LinearLayout>

最後設置Toolbar到活動，並設置監聽

public class MainActivity extends AppCompatActivity {

    private Toolbar toolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });
    }
}

測試效果如下

接下來實現Toolbar的隱藏效果
這樣的效果實現思路就是Toolbar在上層，後面的佈局在下層，後面的佈局設置padding，然後再滑動過程中監聽滑動距離，設置Toolbar的透明度

interface TranslucentListener {
    //透明度的回調監聽 alpha:0~1
    void onTranlucent(float alpha);
}

自定義ScrollView，在onScrollChanged()中監聽

public class MyScrollView extends ScrollView {
    private TranslucentListener translucentListener;

    public void setTranslucentListener(TranslucentListener translucentListener) {
        this.translucentListener = translucentListener;
    }

    public MyScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        if (translucentListener != null) {
            Log.d("cj5785", "onScrollChanged");
            int scrollY = getScrollY();
            int screen_height = getContext().getResources().getDisplayMetrics().heightPixels;
            //滑出1/3時候完全透明
            if (scrollY <= screen_height / 3f) {
                translucentListener.onTranlucent(1 - scrollY / (screen_height / 3f));
            }
        }
    }
}

最後在活動中回調

public class MainActivity extends AppCompatActivity implements TranslucentListener{

    private Toolbar toolbar;
    private MyScrollView scrollView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });
        scrollView = findViewById(R.id.scroll_view);
        scrollView.setTranslucentListener(this);
    }

    @Override
    public void onTranlucent(float alpha) {
        toolbar.setAlpha(alpha);
    }
}

貼出佈局
android:clipToPadding="false" 該控件的繪製範圍是否不在Padding裏面。false：繪製的時候範圍會考慮padding即會往裏面縮進
android:clipChildren="false" 子控件是否能不超出padding的區域（比如ScrollView上滑動的時候，child可以滑出該區域）

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.cj5785.toolbartest.MyScrollView
        android:id="@+id/scroll_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipChildren="false"
        android:clipToPadding="false"
        android:paddingTop="?attr/actionBarSize">

        <android.support.v7.widget.LinearLayoutCompat
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:background="@android:color/holo_orange_light" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:background="@android:color/holo_green_light" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:background="@android:color/holo_blue_light" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:background="@android:color/holo_red_light" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:background="@android:color/holo_purple" />


        </android.support.v7.widget.LinearLayoutCompat>
    </com.cj5785.toolbartest.MyScrollView>

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:logo="@mipmap/ic_launcher"
        app:navigationIcon="@drawable/abc_ic_ab_back_material"
        app:subtitle="子標題"
        app:subtitleTextColor="@android:color/white"
        app:title="主標題"
        app:titleTextColor="@color/colorAccent">
        <!--<TextView-->
        <!--android:layout_width="wrap_content"-->
        <!--android:layout_height="wrap_content"-->
        <!--android:layout_gravity="center"-->
        <!--android:text="這裏是標題"/>-->
    </android.support.v7.widget.Toolbar>

</RelativeLayout>

實現效果：

CoordinatorLayout

監聽滑動控件的滑動通過Behavior反饋到其他子控件並執行一些動畫
這裏的滑動控件指的是RecyclerView/NestedScrollView/ViewPager，意味着ListView、ScrollView不行
使用前需要添加support-design依賴

implementation 'com.android.support:design:25.4.0'

佈局

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

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

    <android.support.design.widget.FloatingActionButton
        app:layout_behavior=".FABBehavior"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp" />

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

適配器

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

    private List<String> list;

    class MyViewHolder extends RecyclerView.ViewHolder {
        private TextView textView;

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

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

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

    @Override
    public void onBindViewHolder(MyViewHolder holder, int position) {
        holder.textView.setText(list.get(position));
    }

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

Behavior

public class FABBehavior extends FloatingActionButton.Behavior {

    private boolean isShow;

    public FABBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    //依賴滑動開始回調
    @Override
    public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child, View directTargetChild, View target, int nestedScrollAxes) {
        //nestedScrollAxes 滑動的方向，這裏我們依賴recyclerview，只關心其是否垂直滑動
        return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL
                || super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes);
    }

    //依賴滑動過程回調
    @Override
    public void onNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child, View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
        super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed);
        //根據情況執行動畫
        if (dyConsumed > 0 && isShow) {
            isShow = false;
            onHide(child);
        } else if (dyConsumed < 0) {
            isShow = true;
            onShow(child);
        }
    }

    private void onShow(FloatingActionButton fab) {
        ViewCompat.animate(fab).scaleX(1f).scaleY(1f).start();
    }

    private void onHide(FloatingActionButton fab) {
        ViewCompat.animate(fab).scaleX(0f).scaleY(0f).start();
    }
}

調用

public class MainActivity extends AppCompatActivity {
    private List<String> list = new ArrayList<>();
    private RecyclerView recyclerView;
    private MyAdapter adapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        for (int i = 0; i < 100; i++) {
            list.add("item " + i);
        }
        adapter = new MyAdapter(list);
        recyclerView.setAdapter(adapter);
    }
}

效果如下，實現了FloatingActionButton上劃隱藏，下拉顯示

AppBarLayout

AppBarLayout繼承自LinearLayout，一般用於導航欄，其常見子控件爲Toolbar，但同時又不侷限於Toolbar，可以實現導航欄的多種綜合效果，其作爲容器，裏面可以增加布局，按照需要去實現各種效果
這裏做一個簡單的演示，導航欄通過recyclerview的滑動而顯隱的效果
首先依舊是要引入依賴

implementation 'com.android.support:design:25.4.0'

然後編寫佈局，其外層爲CoordinatorLayout，這裏使用了預設behavior：appbar_scrolling_view_behavior，在監聽的控件加上Flag設置，例如這裏的app:layout_scrollFlags="scroll|enterAlways""
其Flag參數包括
scroll:將此佈局和滾動時間關聯。這個標識要設置在其他標識之前，沒有這個標識則佈局不會滾動且其他標識設置無效
enterAlways:任何向下滾動操作都會使此佈局可見。這個標識通常被稱爲快速返回模式
enterAlwaysCollapsed：假設你定義了一個最小高度（minHeight）同時enterAlways也定義了，那麼view將在到達這個最小高度的時候開始顯示，並且從這個時候開始慢慢展開，當滾動到頂部的時候展開完
exitUntilCollapsed：當你定義了一個minHeight，此佈局將在滾動到達這個最小高度的時候摺疊
snap:當一個滾動事件結束，如果視圖是部分可見的，那麼它將被滾動到收縮或展開。例如，如果視圖只有底部25%顯示，它將摺疊。相反，如果它的底部75%可見，那麼它將完全展開
snap：

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

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

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

        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:layout_gravity="center"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:title="這是標題" />
    </android.support.design.widget.AppBarLayout>

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

由於使用的是RecyclerView，故還需要適配器

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> {
    private List<String> list;

    class MyViewHolder extends RecyclerView.ViewHolder {
        private TextView textView;

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

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

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

    @Override
    public void onBindViewHolder(MyViewHolder holder, int position) {
        holder.textView.setText(list.get(position));
    }

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

設置RecyclerView數據

public class MainActivity extends AppCompatActivity {
    private List<String> list = new ArrayList<>();
    private MyAdapter adapter;
    private RecyclerView recyclerView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        for (int i = 0; i < 30; i++) {
            list.add("item " + i);
        }
        adapter = new MyAdapter(list);
        recyclerView.setAdapter(adapter);
    }
}

查看效果如下

ViewPager + TabLayout + Fragment + AppBarLayout

AppBarLayout同時還可以使用其他可滑動控件，例如NestedScrollView，其常用組合爲：ViewPager + TabLayout + Fragment + AppBarLayout
由於這套組合的體驗效果不錯，這裏展現一下這個樣式的demo
首先依舊是引入依賴

因爲使用了Toolbar，所以這裏使用NoActionBar的主題

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

編寫ViewPager的Fragment佈局，這裏簡單顯示text，記得這裏應該是一個滑動控件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical">

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

        <TextView
            android:id="@+id/text_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:textColor="@android:color/black"
            android:textSize="24sp" />
    </android.support.v4.widget.NestedScrollView>
</LinearLayout>

然後是自定義的fragment

public class DefaultFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_layout,container,false);
        TextView textView = (TextView) view.findViewById(R.id.text_view);
        Bundle bundle = getArguments();
        String title = bundle.getString("title");
        textView.setText(title+"\n\n");
        for (int i = 0; i < 10; i++) {
            textView.append("這是一個ViewPager + TabLayout + Fragment + AppBarLayout測試用例\n\n");
        }
        return view;
    }
}

接下來是主佈局

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

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

        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:title="標題" />

        <android.support.design.widget.TabLayout
            android:id="@+id/table_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_orange_light"
            app:tabGravity="fill"
            app:tabMode="scrollable" />
    </android.support.design.widget.AppBarLayout>

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

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

最後關聯TableLayout和ViewPager

public class MainActivity extends AppCompatActivity {

    private TabLayout tabLayout;
    private ViewPager viewPager;
    private String[] title = {
            "新聞", "體育", "汽車", "科技", "手機", "數碼", "讀書", "藝術"
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tabLayout = (TabLayout) findViewById(R.id.table_layout);
        viewPager = (ViewPager) findViewById(R.id.view_pager);
        MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager());
        viewPager.setAdapter(adapter);
        tabLayout.setupWithViewPager(viewPager);
    }

    class MyPagerAdapter extends FragmentPagerAdapter {

        public MyPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return title[position];
        }

        @Override
        public Fragment getItem(int position) {
            Fragment fragment = new DefaultFragment();
            Bundle bundle = new Bundle();
            bundle.putString("title", title[position]);
            fragment.setArguments(bundle);
            return fragment;
        }

        @Override
        public int getCount() {
            return title.length;
        }
    }
}

這樣就完成了顯示功能

CollapsingToolbarLayout

這個控件可以實現Toolbar的摺疊效果
先看下其常用參數
expandedTitleMargin：展開後的邊距
statusBarScrim：狀態欄顏色
contentScrim：內容顏色
app:layout_collapseMode：設置摺疊模式，分爲視差模式(parallax:在摺疊的時候會有摺疊視差效果，一般搭配layout_collapseParallaxMultiplier，視差的明顯程度)，固定模式(pin：在摺疊的時候最後固定在頂端，再和toolbar一起推出)，無模式(none：摺疊時toolbar直接推出)
expandedTitleGravity：展開的位置
collapsedTitleGravity：摺疊的位置
使用時依然需要導入依賴

implementation 'com.android.support:design:25.4.0'

然後使用NoActionBar主題
使用時的佈局示例

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

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

        <TextView
            android:id="@+id/text_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="@string/test_text"
            android:textColor="@android:color/black"
            android:textSize="24sp" />
    </android.support.v4.widget.NestedScrollView>

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

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:expandedTitleMargin="8dp"
            app:statusBarScrim="?attr/colorPrimary"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleGravity="center"
            app:collapsedTitleGravity="center"
            app:title="現代詩歌欣賞">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/tdj"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.5"/>

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

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

設置Toolbar

public class MainActivity extends AppCompatActivity {
    private Toolbar toolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar = (Toolbar) findViewById(R.id.tool_bar);
        toolbar.setNavigationIcon(R.mipmap.ic_launcher);
        setSupportActionBar(toolbar);
    }
}

實現的效果如下圖