Material Design Library 使用匯總

我的CSDN博客同步發(fā)布：Material Design Library 使用匯總

轉(zhuǎn)載請注明出處：【huachao1001的簡書：http://www.reibang.com/users/0a7e42698e4b/latest_articles】

本文對Material Design Library里面的庫類的使用做一個簡單的匯總，方便以后能快速查詢惯裕、快速上手使用寄症。本文包括以下內(nèi)容：

Color Palette

Toolbar

AppBarLayout

CollapsingToolbarLayout

CoordinatorLayout

DrawerLayout、NavigationView

Floating Action Button (FAB)

Snackbar

TabLayout

TextInputLayout

如有遺漏憔披，歡迎大家留言告知等限。我會持續(xù)補充，謝謝~活逆。

要使用Material Design Library 精刷，首先得將依賴庫加入到項目中，在app的build.gradle中（dependencies{ }）蔗候，添加如下：

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

1 Color Palette

我們可以定義狀態(tài)欄怒允、ActionBar（或ToolBar）、導(dǎo)航欄等等顏色锈遥∪沂拢可以通過如下方式：

修改res/values/styles.xml文件如下：

<resources>

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

</resources>

當(dāng)然了勘畔，可自定義的不僅僅就上面示例中的3個，你還可以自定義如下圖所示的區(qū)域的顏色：

Color Palette

例如丽惶，你可以修改窗口背景色：

 <item name="android:windowBackground">@color/colorAccent</item>

2 Toolbar炫七、AppBarLayout、CollapsingToolbarLayout

參考我的另一篇文章【玩轉(zhuǎn)AppBarLayout钾唬，更酷炫的頂部欄】

3 CoordinatorLayout

參考我的另一篇文章【CoordinatorLayout的使用如此簡單】

4 DrawerLayout万哪、NavigationView

在很多應(yīng)用中都使用到了Drawer導(dǎo)航，在Design Support Library中抡秆，提供了DrawerLayout，看看如何使用的吧儒士！

首先的止，需要將android.support.v4.widget.DrawerLayout作為布局的根標(biāo)簽，然后android.support.design.widget.NavigationView作為其中的子標(biāo)簽着撩。如下所示：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="hello world!" />

    </RelativeLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/drawer_header"
        app:menu="@menu/drawer" />
</android.support.v4.widget.DrawerLayout>

NavigationView包含兩個引用诅福，一個是導(dǎo)航里面的頭部，另一個是菜單項拖叙，res/layout/drawer_header如下：

<?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="150dp"
    android:background="?attr/colorPrimaryDark"
    android:gravity="bottom"
    android:orientation="vertical"
    android:padding="16dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="頭部"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

</LinearLayout>

res/menu/drawer.xml如下：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/home"
            android:checked="true"
            android:icon="@drawable/home"
            android:title="主頁" />
        <item
            android:id="@+id/theme"
            android:icon="@drawable/theme"
            android:title="主題" />
        <item
            android:id="@+id/settings"
            android:icon="@drawable/setting"
            android:title="設(shè)置" />
    </group>

    <item android:title="二級菜單">
        <menu>
            <item
                android:icon="@drawable/favorite"
                android:title="收藏" />
            <item
                android:icon="@drawable/ablum"
                android:title="相冊" />
            <item
                android:icon="@drawable/friends"
                android:title="好友" />
        </menu>
    </item>

</menu>

然后氓润，可以在我們的Activity里面響應(yīng)菜單點擊：


public class MainActivity extends Activity 
               implements NavigationView.OnNavigationItemSelectedListener {

    private DrawerLayout mDrawerLayout;
    private NavigationView mNavigationView;

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

        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mNavigationView = (NavigationView) findViewById(R.id.navigation_view);

        mNavigationView.setNavigationItemSelectedListener(this);


    }

    @Override
    public boolean onNavigationItemSelected(MenuItem menuItem) {


        // int id = menuItem.getItemId();
        String title = (String) menuItem.getTitle();
        Toast.makeText(this, "您點擊了 " + title, Toast.LENGTH_SHORT).show();

        return super.onContextItemSelected(menuItem);

    }


}

效果如下：

Drawer

5 Floating Action Button (FAB)

直接將android.support.design.widget.FloatingActionButton放入布局中即可，例如憋沿，要放到右下：

 <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginRight="@dimen/activity_horizontal_margin"
            android:layout_marginBottom="@dimen/activity_vertical_margin"
            android:src="@drawable/ic_done" />

如果需要監(jiān)聽點擊旺芽，直接通過setOnclickListener即可：

 fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this, "您點擊了FAB", Toast.LENGTH_SHORT).show();
            }
        });

FAB

6 Snackbar

一般情況下，如果你想給用戶一個簡短的響應(yīng)反饋辐啄，我們會選擇使用Toast采章，現(xiàn)在我們有了另一個選擇啦：Snackbar。

看看如何使用

public void onClick(View v) {

    View.OnClickListener onClickListener = new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Toast.makeText(MainActivity.this,
                    "您點擊了Snackbar中的確定", Toast.LENGTH_SHORT).show();
        }
    };

    Snackbar sb = Snackbar.make(v,
            "在這里是Snackbar顯示內(nèi)容",
            Snackbar.LENGTH_LONG);

    //添加點擊"按鈕"-->"確定"及其對應(yīng)的點擊事件
    sb.setAction("確定", onClickListener);
    //設(shè)置"確定"的顏色
    sb.setActionTextColor(Color.RED);

    //設(shè)置顯示消息的文字顏色
    View view = sb.getView();
    ((TextView) view.findViewById(R.id.snackbar_text)).setTextColor(Color.GREEN);

    //設(shè)置背景顏色
    view.setBackgroundColor(Color.GRAY);
    //設(shè)置透明度
    view.setAlpha(0.5f);

    //設(shè)置位置,Snackbar本質(zhì)是一個LinearLayout
    ViewGroup.LayoutParams lp = view.getLayoutParams();
    LinearLayout.LayoutParams llp = new LinearLayout.LayoutParams(lp.width, lp.height);
    llp.gravity = Gravity.TOP;

    view.setLayoutParams(llp);

    //顯示
    sb.show();

}

看看效果：

SnackBar

7 TabLayout

先看布局文件：

<?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"
    android:orientation="vertical"
    tools:context="com.hc.materialdesign.MainActivity">


    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark"
        app:tabGravity="center"
        app:tabMode="fixed" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

</LinearLayout>

注意到壶辜，TabLayout中有兩個陌生的屬性

app:tabMode：可以取如下兩個值悯舟，

fixed：表示Tab不能滾動

scrollable：表示Tab可以滾動，此時不管tabGravity取何值砸民，都是按照從左到右排過去抵怎，即相當(dāng)于app:tabGravity="left"(當(dāng)然了，實際中沒有l(wèi)eft這個值岭参，只是我們可以這么去理解)

app:tabGravity：可以取如下兩個值反惕，

fill：當(dāng)tabMode取fixed時（即tab不能滾動時），tab的所有子標(biāo)簽填充tab的寬度

center：當(dāng)tabMode去fixed時演侯，tab中所有子標(biāo)簽居中顯示姿染。

為了有更加直觀的理解，看幾張圖片：

當(dāng)app:tabMode="scrollable"：

scrollable

當(dāng)app:tabMode="fixed"且 app:tabGravity="center"：

center

當(dāng)app:tabMode=fixed且 app:tabGravity="fill"：

fill

好了秒际，接下來看看Activity里面具體代碼：

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //初始化ViewPager及其適配器
        MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager());
        ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
        //將ViewPager與適配器關(guān)聯(lián)
        viewPager.setAdapter(adapter);
        //TabLayout
        TabLayout tabLayout = (TabLayout) findViewById(R.id.tablayout);

        //將ViewPager與TabLayout關(guān)聯(lián)
        tabLayout.setupWithViewPager(viewPager);

        //設(shè)置指示器的顏色
        tabLayout.setSelectedTabIndicatorColor(Color.GREEN);
    }

    static class MyPagerAdapter extends FragmentStatePagerAdapter {

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

        @Override
        public Fragment getItem(int position) {
            return MyFragment.newInstance(position);
        }

        @Override
        public int getCount() {
            return 3;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return "Tab " + position;
        }
    }
}

其中MyFragment很簡單悬赏，只是用于產(chǎn)生一個簡單的Fragment：

public class MyFragment extends Fragment {
    private static final String TAB_POSITION = "tab_position";

    public MyFragment() {

    }

    public static MyFragment newInstance(int tabPosition) {
        MyFragment fragment = new MyFragment();
        Bundle args = new Bundle();
        args.putInt(TAB_POSITION, tabPosition);
        fragment.setArguments(args);
        return fragment;
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        Bundle args = getArguments();
        int tabPosition = args.getInt(TAB_POSITION);
        TextView tv = new TextView(getActivity());
        tv.setGravity(Gravity.CENTER);
        tv.setText("Text in Tab #" + tabPosition);
        return tv;
    }
}

運行效果前面已經(jīng)貼出來了狡汉，這里就不再復(fù)制顯示了。

8 TextInputLayout

TextInputLayout主要是用在登錄注冊方面闽颇。

先看看效果：

Floating Labels for EditText

老規(guī)矩盾戴，從布局文件開始：

<?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"
    android:orientation="vertical"
    android:padding="@dimen/activity_vertical_margin"
    tools:context="com.hc.materialdesign.MainActivity">


    <android.support.design.widget.TextInputLayout
        android:id="@+id/userName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="用戶名"
            android:inputType="textEmailAddress"
   />

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

    <android.support.design.widget.TextInputLayout
        android:id="@+id/email"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="郵箱"
            android:inputType="textEmailAddress" />

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

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="login"
        android:text="注冊" />
</LinearLayout>

可以看到，其實就是將我們平時用的Edit控件放入到android.support.design.widget.TextInputLayout里面，并且里面只能放一個Edit，否則會報錯。這點讓我不太滿意，但是可是是在實現(xiàn)上放入多個Edit不太好控制吧卒茬。

再看MainActivity對輸入框數(shù)據(jù)的驗證：

public class MainActivity extends AppCompatActivity {
    TextInputLayout userNameWrapper;
    TextInputLayout emailWrapper;
    String emailFormate = "^(\\w)+(\\.\\w+)*@(\\w)+((\\.\\w+)+)$";

    private Pattern pattern = Pattern.compile(emailFormate);


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        userNameWrapper = (TextInputLayout) findViewById(R.id.userName);
        emailWrapper = (TextInputLayout) findViewById(R.id.email);


    }

    private boolean checkUserName() {
        String userName = userNameWrapper.getEditText().getText().toString();
        if (userName.trim().equals(""))
            return false;
        else
            return true;
    }

    private boolean checkEmail() {
        String email = emailWrapper.getEditText().getText().toString();
        Matcher matcher = pattern.matcher(email);
        return matcher.matches();
    }

    public void login(View v) {
        View view = getCurrentFocus();

        if (view != null) {
            ((InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE)).
                    hideSoftInputFromWindow(view.getWindowToken(), InputMethodManager.HIDE_NOT_ALWAYS);
        }
        if (!checkUserName()) {

            userNameWrapper.setError("用戶名不正確！");

        } else {
            userNameWrapper.setError("");
            if (!checkEmail()) {
                emailWrapper.setError("郵箱格式不正確躁绸！");

            } else {
                emailWrapper.setError("");
            }
        }


    }
}

如果數(shù)據(jù)是錯誤的吮铭，我們只需通過setError函數(shù)來顯示即可！

最后椎扬，可能你以及注意到惫搏，界面中，用到了各種顏色蚕涤。也就是說筐赔，里面的顏色我們是可以定制的，在你的style文件里面添加部分item即可：

<resources>

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


        <!-- Label color in TRUE state and bar color FALSE and TRUE State -->
        <item name="colorAccent">#00ff00</item>
        <item name="colorControlNormal">#00ffff</item>
        <item name="colorControlActivated">#ff00ff</item>
        <item name="android:textColorHint">#00ffff</item>
        <item name="textColorError">#ff0000</item>
    </style>

</resources>

參考資料：https://www.sitepoint.com/material-design-android-design-support-library/

最后編輯于：2017.12.03 14:32:52

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末揖铜，一起剝皮案震驚了整個濱河市茴丰，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌天吓，老刑警劉巖贿肩，帶你破解...
沈念sama閱讀 211,290評論 6贊 491
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異龄寞，居然都是意外死亡汰规，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 90,107評論 2贊 385
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門物邑，熙熙樓的掌柜王于貴愁眉苦臉地迎上來溜哮，“玉大人，你說我怎么就攤上這事色解∶ぃ” “怎么了？”我有些...
開封第一講書人閱讀 156,872評論 0贊 347
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵科阎，是天一觀的道長述吸。經(jīng)常有香客問我，道長萧恕，這世上最難降的妖魔是什么刚梭？我笑而不...
開封第一講書人閱讀 56,415評論 1贊 283
?港島之戀（遺憾婚禮）
正文為了忘掉前任肠阱，我火速辦了婚禮，結(jié)果婚禮上朴读，老公的妹妹穿的比我還像新娘屹徘。我一直安慰自己，他們只是感情好衅金，可當(dāng)我...
茶點故事閱讀 65,453評論 6贊 385
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布噪伊。她就那樣靜靜地躺著，像睡著了一般氮唯。火紅的嫁衣襯著肌膚如雪鉴吹。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 49,784評論 1贊 290
城市分裂傳說
那天惩琉，我揣著相機與錄音豆励，去河邊找鬼。笑死瞒渠，一個胖子當(dāng)著我的面吹牛良蒸，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播伍玖，決...
沈念sama閱讀 38,927評論 3贊 406
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼嫩痰，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了窍箍？” 一聲冷哼從身側(cè)響起串纺，我...
開封第一講書人閱讀 37,691評論 0贊 266
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎椰棘，沒想到半個月后纺棺，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 44,137評論 1贊 303
?護(hù)林員之死
正文獨居荒郊野嶺守林人離奇死亡晰搀，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 36,472評論 2贊 326
?白月光啟示錄
正文我和宋清朗相戀三年五辽，在試婚紗的時候發(fā)現(xiàn)自己被綠了。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片外恕。...
茶點故事閱讀 38,622評論 1贊 340
活死人
序言：一個原本活蹦亂跳的男人離奇死亡杆逗，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出鳞疲，到底是詐尸還是另有隱情罪郊，我是刑警寧澤，帶...
沈念sama閱讀 34,289評論 4贊 329
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布尚洽，位于F島的核電站悔橄，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜癣疟，卻給世界環(huán)境...
茶點故事閱讀 39,887評論 3贊 312
男人毒藥：我在死后第九天來索命
文/蒙蒙一挣柬、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧睛挚，春花似錦邪蛔、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,741評論 0贊 21
一樁弒父案侧到，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至淤击，卻和暖如春匠抗，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背污抬。一陣腳步聲響...
開封第一講書人閱讀 31,977評論 1贊 265
情欲美人皮
我被黑心中介騙來泰國打工汞贸，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人壕吹。一個月前我還...
沈念sama閱讀 46,316評論 2贊 360
代替公主和親
正文我出身青樓著蛙，卻偏偏與公主長得像，于是被迫代替她去往敵國和親耳贬。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 43,490評論 2贊 348