Android Material Design(5) CoordinatorLayout,AppBarLayout,Toolbar,CollapsingToolbarLayout的使用

今天來弄一下AppBarLayout嵌套CollapsingToolbarLayout

效果圖如下:

效果很贊.給人眼前一亮的感覺

項目依賴:

 compile 'com.android.support:appcompat-v7:23.2.0'
    compile 'com.android.support:support-v4:23.2.0'
    compile 'com.android.support:design:23.2.0'
    compile 'com.android.support:recyclerview-v7:23.2.0'
    compile 'com.android.support:palette-v7:23.2.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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="#ff6600"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/detail_img"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@drawable/image09"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay" />

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

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

    </android.support.v7.widget.RecyclerView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:src="@mipmap/ic_launcher"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end" />

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

Activity:

package com.example.imgod.md_3;

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.design.widget.CoordinatorLayout;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.content.ContextCompat;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.graphics.Palette;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.view.View;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private CollapsingToolbarLayout collapsingToolbar;
    private Toolbar toolbar;
    private RecyclerView rv_main;
    private FloatingActionButton fab;
    private List<String> titles;

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

    private void initView() {
        collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsingToolbar);
        rv_main = (RecyclerView) findViewById(R.id.rv_main);
        rv_main.setLayoutManager(new LinearLayoutManager(this));

        titles = new ArrayList<>();
        MyAdapter adapter = new MyAdapter(this, titles);
        rv_main.setAdapter(adapter);
        for (int i = 0; i < 40; i++) {
            titles.add("Tab1\t" + i);
        }
        adapter.notifyDataSetChanged();

        toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.setTitle("ToolBar Hello");
        setSupportActionBar(toolbar);

        fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Snackbar.make(rv_main, "Hello SnackBar", Snackbar.LENGTH_SHORT).show();
            }
        });

        //選色板,從給出的bitmap和默認顏色值中選出最適合的顏色滿足ActionBar被收折後,背景顏色能保持和Banner大圖的色調一致,而Title文字的顏色保證和Banner大圖的色調形成強對比.
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.image09);
        Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
            @Override
            public void onGenerated(final Palette palette) {
                int defaultColor = ContextCompat.getColor(MainActivity.this, R.color.colorPrimaryDark);
                int defaultTitleColor = ContextCompat.getColor(MainActivity.this, R.color.dark_transparent);
                int bgColor = palette.getDarkVibrantColor(defaultColor);
                int titleColor = palette.getLightVibrantColor(defaultTitleColor);
                collapsingToolbar.setContentScrimColor(bgColor);
                collapsingToolbar.setCollapsedTitleTextColor(titleColor);
                collapsingToolbar.setExpandedTitleColor(titleColor);
            }
        });

    }
}

這種效果在詳情頁面用的較多，展示個性化內容，圖像有強烈的吸引力。這個效果重點使用了CollapsingToolbarLayout 。
CollapsingToolbarLayout可實現Toolbar的摺疊效果。CollapsingToolbarLayout的子視圖類似與LinearLayout垂直方向排放。

CollapsingToolbarLayout 提供以下屬性和方法是用：
1. Collapsing title：ToolBar的標題，當CollapsingToolbarLayout全屏沒有摺疊時，title顯示的是大字體，在摺疊的過程中，title不斷變小到一定大小的效果。你可以調用setTitle(CharSequence)方法設置title。
2. Content scrim：ToolBar被摺疊到頂部固定時候的背景，你可以調用setContentScrim(Drawable)方法改變背景或者在屬性中使用 app:contentScrim=”?attr/colorPrimary”來改變背景。
3. Status bar scrim：狀態欄的背景，調用方法setStatusBarScrim(Drawable)。還沒研究明白，不過這個只能在Android5.0以上系統有效果。
4. Parallax scrolling children：CollapsingToolbarLayout滑動時，子視圖的視覺差，可以通過屬性app:layout_collapseParallaxMultiplier=”0.6”改變。值de的範圍[0.0,1.0]，值越大視察越大。
5. CollapseMode ：子視圖的摺疊模式，在子視圖設置，有兩種“pin”：固定模式，在摺疊的時候最後固定在頂端；“parallax”：視差模式，在摺疊的時候會有個視差摺疊的效果。我們可以在佈局中使用屬性app:layout_collapseMode=”parallax”來改變。

CoordinatorLayout 還提供了一個 layout_anchor 的屬性，連同 layout_anchorGravity 一起，可以用來放置與其他視圖關聯在一起的懸浮視圖（如 FloatingActionButton）。本例中使用FloatingActionButton。

通過下面的參數設置了FloatingActionButton的位置，兩個屬性共同作用使得FAB 浮動按鈕也能摺疊消失，展現。

<code class="language-xml hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">app:layout_anchor="@id/appbar"
app:layout_anchorGravity="bottom|right|end"</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>

使用CollapsingToolbarLayout實現摺疊效果，需要注意3點
1. AppBarLayout的高度固定
2. CollapsingToolbarLayout的子視圖設置layout_collapseMode屬性
3. 關聯懸浮視圖設置app:layout_anchor，app:layout_anchorGravity屬性

項目地址:https://github.com/imgod1/Md_4

Android Material Design(5) CoordinatorLayout,AppBarLayout,Toolbar,CollapsingToolbarLayout的使用

Android Material Design(3) CardView的使用

android webview無法加載網址

Android Studio Error:Could not read entry ':app:packageDebug' from cache taskArtifacts.bin

Android Material Design(1) RecyclerView 的使用

Android Material Design(4) CoordinatorLayout,AppBarLayout,Toolbar以及TabLayout的使用

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結