Snackbar代咸、CardView、FloatingActionButton成黄、SwitchCompat使用介紹

Android5.0也出來了老長一段時間了呐芥,5.0推出的MartailDesign系列確實相當高大上,顏色鮮艷像各種套殼的iphone c奋岁,老有設(shè)計范兒了思瘟。接下來,就學(xué)著寫它們的用法闻伶,并寫一些效果滨攻。

github代碼傳送門: https://github.com/18380438200/MDViews

先上效果圖:

preview.gif

Snackbar

在我生命很長的一段歲月里,我用提示都是Toast蓝翰,但是自從我看到微信用了這個滑溜溜地提示框后光绕,我依然拋棄Toast了,因為普通toast太不明顯畜份。Snackbar看似簡單诞帐,用法多姿多彩。
一般用法:

Snackbar.make(rootView,"彈出提示", Toast.LENGTH_SHORT).show();

第一參數(shù)需要傳父容器爆雹,比如在activity中可以這樣獲取rootview:

rootView = getLayoutInflater().inflate(R.layout.activity_main,null);
setContentView(rootView);

setAction()帶點擊事件

snackbar.setAction("右邊文字", new View.OnClickListener() {
@Override
public void onClick(View v) {
           Toast.makeText(MainActivity.this,"點擊snackbar",Toast.LENGTH_SHORT).show();
           }
}).setCallback(new Snackbar.Callback()).show();

沒有個性啊停蕉,怎么辦愕鼓,為了跟我app應(yīng)景,我就要改背景和文字顏色慧起,那也行菇晃。

/**
     * @hide
     *
     * Note: this class is here to provide backwards-compatible way for apps written before
     * the existence of the base {@link BaseTransientBottomBar} class.
     */
    @RestrictTo(LIBRARY_GROUP)
    public static final class SnackbarLayout extends BaseTransientBottomBar.SnackbarBaseLayout {
        public SnackbarLayout(Context context) {
            super(context);
        }

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

        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
            // Work around our backwards-compatible refactoring of Snackbar and inner content
            // being inflated against snackbar's parent (instead of against the snackbar itself).
            // Every child that is width=MATCH_PARENT is remeasured again and given the full width
            // minus the paddings.
            int childCount = getChildCount();
            int availableWidth = getMeasuredWidth() - getPaddingLeft() - getPaddingRight();
            for (int i = 0; i < childCount; i++) {
                View child = getChildAt(i);
                if (child.getLayoutParams().width == ViewGroup.LayoutParams.MATCH_PARENT) {
                    child.measure(MeasureSpec.makeMeasureSpec(availableWidth, MeasureSpec.EXACTLY),
                            MeasureSpec.makeMeasureSpec(child.getMeasuredHeight(),
                                    MeasureSpec.EXACTLY));
                }
            }
        }
    }

SnackBar有內(nèi)部類,找到布局文件

<merge xmlns:android="http://schemas.android.com/apk/res/android">
<TextView
        android:id="@+id/snackbar_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:paddingTop="14dp"
        android:paddingBottom="14dp"
        android:paddingLeft="12dp"
        android:paddingRight="12dp"
        android:textAppearance="@style/TextAppearance.Design.Snackbar.Message"
        android:maxLines="2"
        android:layout_gravity="center_vertical|left|start"
        android:ellipsize="end"
        android:textAlignment="viewStart"/>

<Button
        android:id="@+id/snackbar_action"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="0dp"
        android:layout_marginStart="0dp"
        android:layout_gravity="center_vertical|right|end"
        android:paddingTop="14dp"
        android:paddingBottom="14dp"
        android:paddingLeft="12dp"
        android:paddingRight="12dp"
        android:visibility="gone"
        android:textColor="?attr/colorAccent"
        style="?attr/borderlessButtonStyle"/>
</merge>

所以可以通過得到子控件操縱蚓挤。

                Snackbar snackbar = Snackbar.make(rootView,"彈出提示", Toast.LENGTH_SHORT);

                View snackView = snackbar.getView();
                if(snackView != null){
                    snackView.setBackgroundResource(R.color.colorAccent);
                    ((TextView)snackView.findViewById(R.id.snackbar_text)).setTextColor(Color.WHITE);
                }
                snackbar.setAction("右邊文字", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(MainActivity.this,"點擊snackbar",Toast.LENGTH_SHORT).show();
                    }
                }).show();

CardView

帶圓角和陰影的卡片(而且拿得起磺送,放得下)
它繼承自FrameLayout,所以不便于布局屈尼,我們使用時常常嵌套一層Relativelayout册着。普通的圓角可用shape來實現(xiàn),但是想要更好體驗效果脾歧,還是得cardview來實現(xiàn)甲捏,誰的項目里沒有用到幾處cardview呢?

整體用法:
<android.support.v7.widget.CardView
android:id="@+id/card_view"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
android:stateListAnimator="@animator/cardview_touchraise"
android:foreground="?android:attr/selectableItemBackground"
card_view:cardBackgroundColor="@android:color/white"
card_view:cardCornerRadius="8dp"
card_view:cardElevation="4dp"/>

它的常用屬性如下:

1.cardBackgroundColor 背景色

2.cardCornerRadius 圓角半徑

3.cardElevation 陰影寬度
有可能我們只需要圓角不需要陰影鞭执,cardElevation=0就可以去掉陰影司顿。

4.lift-on-touch 觸摸抬起效果
給人的感覺是真的把卡片拿起來了有沒有?

使用方法:
android:stateListAnimator="@animator/cardview_touchraise"
cardview_touchraise如下:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="true" android:state_pressed="true">
        <objectAnimator
            android:duration="400"
            android:propertyName="translationZ"
            android:valueTo="4dp"/>
    </item>
    <item>
        <objectAnimator
            android:duration="400"
            android:propertyName="translationZ"
            android:valueTo="0dp" />
    </item>
</selector>

使用的是objectAnimator屬性動畫兄纺,陰影沿著Z軸從0漸變?yōu)?dp大溜。
5.foreground 波紋效果
這里顏色選用系統(tǒng)自帶的selectableItemBackground顏色。
自定義波紋顏色:
android:foreground="@drawable/ripple"
ripple.xml資源文件:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="@color/colorAccent"
    android:drawable="@drawable/foreground"
    tools:ignore="NewApi" />

foreground.xml資源文件:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="#2feaea"/>
        </shape>
    </item>
    <item android:state_focused="true"
        android:state_enabled="true">
        <shape android:shape="rectangle">
            <solid android:color="#0f000000"/>
        </shape>
    </item>
</selector>

FloatingActionButton

懸浮按鈕估脆,通常見于向上回頂按鈕钦奋。
用法:

<android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:borderWidth="6dp"
        android:backgroundTint="@color/colorPrimary"
        app:rippleColor="@color/colorPrimary"
        app:pressedTranslationZ="@dimen/cardview_default_elevation"
        android:background="@mipmap/display_love_pressed"/>

borderWidth 邊框?qū)挾?br> backgroundTint 背景色
rippleColor 按下波紋顏色
pressedTranslationZ 外環(huán)陰影

如果想給它加上按下變換圖片,background就設(shè)置selector

SwitchCompat
Android里面要用到開關(guān)按鈕疙赠,通常要自定義控件SwithButton之類的付材,但是MD包下已經(jīng)有自帶控件SwitchCompat,用法如下

    <android.support.v7.widget.SwitchCompat
        android:layout_width="wrap_content"
        android:layout_height="20dp"
        android:checked="true"
        android:textOn="開"
        android:textOff="關(guān)"
        app:showText="true"/>

showText屬性設(shè)置是否顯示文字圃阳,textOn厌衔,textOff分別設(shè)置開關(guān)的文字,setOnCheckedChangeListener設(shè)置切換監(jiān)聽捍岳。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末富寿,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子锣夹,更是在濱河造成了極大的恐慌页徐,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,294評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件银萍,死亡現(xiàn)場離奇詭異泞坦,居然都是意外死亡,警方通過查閱死者的電腦和手機砖顷,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,493評論 3 385
  • 文/潘曉璐 我一進店門贰锁,熙熙樓的掌柜王于貴愁眉苦臉地迎上來赃梧,“玉大人,你說我怎么就攤上這事豌熄∈卩郑” “怎么了?”我有些...
    開封第一講書人閱讀 157,790評論 0 348
  • 文/不壞的土叔 我叫張陵锣险,是天一觀的道長蹄皱。 經(jīng)常有香客問我,道長芯肤,這世上最難降的妖魔是什么巷折? 我笑而不...
    開封第一講書人閱讀 56,595評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮崖咨,結(jié)果婚禮上锻拘,老公的妹妹穿的比我還像新娘。我一直安慰自己击蹲,他們只是感情好署拟,可當我...
    茶點故事閱讀 65,718評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著歌豺,像睡著了一般推穷。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上类咧,一...
    開封第一講書人閱讀 49,906評論 1 290
  • 那天馒铃,我揣著相機與錄音,去河邊找鬼痕惋。 笑死骗露,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的血巍。 我是一名探鬼主播,決...
    沈念sama閱讀 39,053評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼珊随,長吁一口氣:“原來是場噩夢啊……” “哼述寡!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起叶洞,我...
    開封第一講書人閱讀 37,797評論 0 268
  • 序言:老撾萬榮一對情侶失蹤鲫凶,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后衩辟,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體螟炫,經(jīng)...
    沈念sama閱讀 44,250評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,570評論 2 327
  • 正文 我和宋清朗相戀三年艺晴,在試婚紗的時候發(fā)現(xiàn)自己被綠了昼钻。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片掸屡。...
    茶點故事閱讀 38,711評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖然评,靈堂內(nèi)的尸體忽然破棺而出仅财,到底是詐尸還是另有隱情,我是刑警寧澤碗淌,帶...
    沈念sama閱讀 34,388評論 4 332
  • 正文 年R本政府宣布盏求,位于F島的核電站,受9級特大地震影響亿眠,放射性物質(zhì)發(fā)生泄漏碎罚。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 40,018評論 3 316
  • 文/蒙蒙 一纳像、第九天 我趴在偏房一處隱蔽的房頂上張望荆烈。 院中可真熱鬧,春花似錦爹耗、人聲如沸耙考。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,796評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽倦始。三九已至,卻和暖如春山卦,著一層夾襖步出監(jiān)牢的瞬間鞋邑,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,023評論 1 266
  • 我被黑心中介騙來泰國打工账蓉, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留枚碗,地道東北人。 一個月前我還...
    沈念sama閱讀 46,461評論 2 360
  • 正文 我出身青樓铸本,卻偏偏與公主長得像肮雨,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子箱玷,可洞房花燭夜當晚...
    茶點故事閱讀 43,595評論 2 350

推薦閱讀更多精彩內(nèi)容