第一關于FloatActionButton(FAB)

參考文章:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0718/3197.html

第一點: 什麼是 FAB

FAB是在2015年的google的開發者大會上提出的;浮動在ui控件之上;具有特殊的手勢行為.

自己封裝的starActivity

public void enterClass( Class<?> activity){
    intent.setClass(mContext,activity);
    startActivity(intent);
}

我們首先是都 FloatActionBUtton的源碼中看看:

@CoordinatorLayout.DefaultBehavior(FloatingActionButton.Behavior.class)
public class FloatingActionButton extends VisibilityAwareImageButton {

private static final String LOG_TAG = "FloatingActionButton";

/**
 * Callback to be invoked when the visibility of a FloatingActionButton changes.
 */
public abstract static class OnVisibilityChangedListener {
    /**
     * Called when a FloatingActionButton has been
     * {@link #show(OnVisibilityChangedListener) shown}.
     *
     * @param fab the FloatingActionButton that was shown.
     */
    public void onShown(FloatingActionButton fab) {}

    /**
     * Called when a FloatingActionButton has been
     * {@link #hide(OnVisibilityChangedListener) hidden}.
     *
     * @param fab the FloatingActionButton that was hidden.
     */
    public void onHidden(FloatingActionButton fab) {}
}
//  其他的的有關的源碼
}

//上面可以看出有關的FAB的顯示和隐藏,我們先寫一個demo出來

自己簡單的布局:

` <android.support.design.widget.FloatingActionButton
        android:layout_margin="16dp"
        android:src="@mipmap/ic_launcher"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"/>`

注意點就是: src屬性是設定懸浮按鈕的展示的一個圖檔,設定的 android:lauyout_gravity=”bottom|end”屬性設設定的方向是在底部,如果系統的語言是從左往右的,end表示的就是在右邊,如果系統的語言是從右往左的話,end表示的就是左邊. 可以設定陰影的高度:

app:elevation=”8dp”

第二個控件 coordinatorLayout

注意:滑動控件指的是：RecyclerView/NestedScrollView/ViewPager，意味着ListView、ScrollView不行。

可以看做是一個加強版的FrameLayout; 特點就是: CoordinatorLayout可以監聽其所有的子控件的各種事件,然後自動幫助我們做出作為合理的響應

<android.support.design.widget.CoordinatorLayout

    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.Toolbar
        android:id="@+id/mian_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary"
        >
    </android.support.v7.widget.Toolbar>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_layout"
        android:layout_margin="16dp"
        app:elevation="8dp"
        android:src="@mipmap/ic_launcher"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"/>
</android.support.design.widget.CoordinatorLayout>

這個布局中我們出現snackbar會自動上移fab按鈕,不知于讓snackbar進行遮擋.

FAB代碼:

public class FABActivity extends AppCompatActivity{

private Toolbar mian_toolbar;

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

}

private void showSnackbar() {
    Snackbar.make(mian_toolbar,"snackbar的展示",Snackbar.LENGTH_INDEFINITE).setAction("點擊", new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Toast.makeText(FABActivity.this,"展示的toast",Toast.LENGTH_SHORT).show();
        }
    }).show();
}

private void initView() {

    mian_toolbar = (Toolbar) findViewById(R.id.mian_toolbar);
    mian_toolbar.setTitle("fab");
    mian_toolbar.setNavigationIcon(R.mipmap.ic_launcher);


    FloatingActionButton fab_layout = (FloatingActionButton) findViewById(R.id.fab_layout);
        // 隐藏
    //fab_layout.hide();
    fab_layout.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            showSnackbar();
        }
    });

}
}

關鍵說說snackbar.make(參數一,參數二,參數三).setAction().show();

參數一:參數一傳入的是一個view;隻要是目前頁面的布局的view都可以;Snackbar會自己查找最外層的布局;

我們就已經知道了：Snackbar在選擇錨點的時候，如果遇到了CoordinatorLayout，那麼就會預設選擇它作為最合适的父容器。

我們設定的第一個參數是fab的view,他是CoordinatorLayout的子控件,可以監聽到FAB的事件,snackbar是基于第一個參數觸發的,也就是可以監聽到FAB的事件.

第三個控件 CareView

首先是依賴:

compile ‘com.android.support:cardview-v7:25.3.1’

使用的時候我們可以看看源碼:

public class CardView extends FrameLayout {

private static final int[] COLOR_BACKGROUND_ATTR = {android.R.attr.colorBackground};
private static final CardViewImpl IMPL;

static {
    if (Build.VERSION.SDK_INT >= 21) {
        IMPL = new CardViewApi21();
    } else if (Build.VERSION.SDK_INT >= 17) {
        IMPL = new CardViewJellybeanMr1();
    } else {
        IMPL = new CardViewGingerbread();
    }
    IMPL.initStatic();
}
//其他代碼
}

我們可以看到 CareView(卡片布局)實際也是一個FrameLayout隻是額外的提供了圓角和陰影.

<android.support.v7.widget.CardView
    android:id="@+id/careview"
    android:background="@color/colorAccent"
    app:cardCornerRadius="4dp"
    android:elevation="4dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        >
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher"/>
        <TextView
            android:gravity="center_horizontal"
            android:text="圖片的名稱"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    </LinearLayout>

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

AppBarLayout

首先是源碼:

public class AppBarLayout extends LinearLayout {

static final int PENDING_ACTION_NONE = 0x0;
static final int PENDING_ACTION_EXPANDED = 0x1;
static final int PENDING_ACTION_COLLAPSED = 0x2;
static final int PENDING_ACTION_ANIMATE_ENABLED = 0x4;
static final int PENDING_ACTION_FORCE = 0x8;

//其他代碼

}

AppBarLayout我們看到源碼可以知道,繼承的是LinearLayout;

我們使用它事先的效果就是,recycle人view不會再遮擋toolbar,二是随着recyclerview的滑動,toolbar進行顯示或者隐藏.

我們在前面看過CoordinatorLayout源碼,實質就是一個進階的FrameLayout,我們在同時設定toolbar和recyclerview的話,後面設定的recycle人view或覆寫掉toolbar,不會顯示出來,既然是進階的FrameLayout,那麼會提供給我們解決的方法,就是這個控件(AppBarLayout);

做法就是,AppbarLayout要作為CoordinatorLayout的根布局,之後将要顯示的包裹在裡面,這裡面我們包裹Toolbar;并且在RecyclerView設定一個布局行為;( app:layout_behavior=”@string/appbar_scrolling_view_behavior”)注意命名空間是app的命名空間.

CoordinatorLayout會監聽子控件的事件,那當recyclerview進行滾動的時候,設定了布局行為,會将這個事件傳遞給AppBarLayout,appbarlayout接收到滾動事件之後需要的裡面包裹的布局做出反應,這就是今天我們要是實作的效果.

操作就是在包裹的布局設定( app:layout_scrollFlags=”scroll|enterAlways|snap|enterAlwaysCollapsed|exitUntilCollapsed”“)首先是Scroll是必須的,後面的是所有的參數;解釋:

scroll表示的就是toolbar随着recycle人view的向上滾動,toolbar會随着一起向上滾動并實作隐藏

enterAlways 表示的就是: RecyclerView向下滾動的時候,toolbar會随着向下滾動,并且顯示出來toolbar.

snap表示的就是: Toolbar還沒有完全隐藏好着顯示的時候,會根據目前滾動的距離,自動選擇隐藏還是顯示.

enterAlwaysCollapsed：當你的視圖設定了minHeight屬性的時候，那麼視圖隻能以最小高度進入，隻有當滾動視圖到達頂部時才擴大到完整高度。

exitUntilCollapsed：滾動退出螢幕，最後折疊在頂端。

ReyclerView的使用和進階使用—首頁的複雜頁面實作

可折疊式狀态欄的實作

可折疊式的實作需要使用到支援包中的 collapsingTollbarLayout這個布局,

這個布局特點是,不能夠獨立的存在,隻能發作為AppbarLayout的直接子布局來實作使用,而且AppbnarLayout必須是CoordinationLayout的子布局;

在上面的是實作中我們的 AppbarLayout的是對toolbar的封裝,處理了遮擋的問題;也實作了toolbar随着recyclerview的滑動進行顯示和隐藏(recyclerview設定 behaior,appbar設定 scroll_flag);

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
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.AppBarLayout
    android:id="@+id/canscale_appbar"
    android:layout_width="match_parent"
    android:layout_height="250dp">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/canscale_collaps_toolbar"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:contentScrim="@color/colorPrimary"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <ImageView
            app:layout_collapseMode="parallax"
            android:scaleType="centerCrop"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?actionBarSize"
            app:layout_collapseMode="pin"
            >



        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

說明的一些點:;;

1.app:contentScrim=”@color/colorPrimary”設定的是 CollapsingToolbar趨于折疊或者是折疊後的背景色,完全折疊之後呢其實就是一個toolbar

2.app:layout_collapseMode=”parallax” 表示的是目前控件在折疊的時候的樣式: pin表示你的就是在折疊的過程中保持在原位置不變;而parallax表示的就是在折疊的過程中差生一定的錯位偏移.

3.android:scaleType=”centerCrop” 這個指的就是圖檔的壓縮的模式;

之後的就是對主要頁面實作:我們在這裡使用NestedScrollView;

ScrollView和NestedScrollView隻能有一個子布局,我們直接使用一個線性布局作為子布局;

關于CoordinatorLayout和floatbutton和snackbar的詳解第一關于FloatActionButton(FAB)第二個控件 coordinatorLayout第三個控件 CareViewAppBarLayoutReyclerView的使用和進階使用—首頁的複雜頁面實作可折疊式狀态欄的實作

第一關于FloatActionButton(FAB)

第二個控件 coordinatorLayout

第三個控件 CareView

AppBarLayout

ReyclerView的使用和進階使用—首頁的複雜頁面實作

可折疊式狀态欄的實作

繼續閱讀

Android CoordinatorLayout + AppBarLayout+ToolBar(向上滾動隐藏指定的View)

解決AppBarLayout在華為手機6.0系統快速滑動時抖動問題前言:

使用CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout打造折疊狀态欄

玩轉AppBarLayout，更酷炫的頂部欄1 Toolbar2 AppBarLayout3 CollapsingToolbarLayout

Eclipse中Recyclerview跟Coordinatorlayout使用的系列問題

android.support.design.widget包下的CoordinatorLayout、AppBarLayout、TextInputLayout、FloatingActionButton、

自定義AppBarLayout，讓它Fling起來更流暢

AppbarLayout最詳細使用說明(實作折疊導航欄)

AppbarLayout中Toolbar包含了子view時設定标題顔色

如何動态控制AppBarLayout的title透明度

如何真實有效的用代碼滾動AppBarLayout

AppBarLayout與CoordinatorLayout實作toobar各種效果

Android解決CoordinatorLayout折疊布局RecyclerView最後一條資料顯示不全問題

《Android進階之光》Design Support Library常用控件（三）：AppBarLayout、CollapsingToolbarLayou

Android CoordinatorLayout AppBar 上邊緣陰影原因前言分析思路原因分析

Android Design庫的CoordinatorLayout 關于CoordinatorLayout與Behavior的一點分析一步一步深入了解CoordinatorLayout