基于MaterialDesign設計風格的妹紙app的簡單實現(xiàn)

今天看了郭神的第二行代碼柬讨，深深的被MaterialDesign的設計風格所吸引馏谨，然后就照例做了一個小Demo故河，希望多多支持，圖片資源來源于網絡彭则。先附上我的源碼地址：https://github.com/xiaweizi/MaterialDesign

我的博客地址

照例鳍刷，一波動態(tài)圖來襲：

MaterialDesign風格.gif

效果還不錯吧，就是有點失真...其實在這之前Android的UI風格都不是很美觀俯抖，所谷歌的設計工程師們就開始研究出了一種新的設計語言---MaterialDesign输瓜。在2015年得谷歌大會上推出了DesignSupport庫，使得開發(fā)者在即使不了解MaterialDesign的情況下也能非常輕松地將自己得應用Material化芬萍。

接下來我會按照下面流程介紹如何實現(xiàn)這一效果

Toolbar
DrawerLayout
SnackBar
CardView
RecyclerView
SwipeRefreshLayout
AppBarLayout
CollapsingToolbarLayout
沉浸式狀態(tài)欄

首先添加依賴：

compile 'com.android.support:appcompat-v7:24.2.1'
compile 'com.android.support:design:24.0.0'
compile'com.android.support:recyclerview-v7:24.0.0'
compile 'com.github.bumptech.glide:glide:3.7.0'
compile 'com.android.support:cardview-v7:24.1.1'
compile 'de.hdodenhof:circleimageview:2.1.0'

1. Toolbar

效果如下：

toolbar.PNG

它有點類似于之前得ActionBar尤揣，就是活動最頂部得哪個標題欄。但是柬祠，它只能位于活動得頂部北戏，從而影響效果，所有官方現(xiàn)在已經不再建議使用ActionBar了漫蛔。

1. 設置AppTheme("NoActionBar")

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        ...
    </style>

2. 添加控件

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/Theme.AppCompat.Light" />

其他屬性我就不說了嗜愈，app:popupTheme 這個是單獨將彈出得菜單項指定成淡色主題。

這個時候需要指定一個新的命名空間 xmlns:app 這是由于MaterialDesign是在Android5.0系統(tǒng)中才出現(xiàn)得莽龟，而很多Material屬性在5.0之前得系統(tǒng)中是不存在得蠕嫁，那么為了能夠兼容之前得老系統(tǒng)，我們就得使用 app: 毯盈。

3. 在代碼中使用

mToolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);

首先通過 findViewById 得到Toobar實例剃毒，然后調用setSupportActionBar()方法將實例傳入。

4. 設置菜單選項

<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
    android:id="@+id/backup"
    android:icon="@drawable/ic_backup"
    android:title="Backup"
    app:showAsAction="always"/>
<item
    android:id="@+id/delete"
    android:icon="@drawable/ic_delete"
    android:title="Delete"
    app:showAsAction="ifRoom"/>
<item
    android:id="@+id/settings"
    android:icon="@drawable/ic_settings"
    android:title="Settings"
    app:showAsAction="never"/>
</menu>

在menu文件夾中創(chuàng)建xml文件

app:showAsAction 來指定按鈕得顯示位置

ifRoom: 表示屏幕空間足夠得情況下顯示再Toolbar搂赋，不夠就顯示再菜單中

always: 表示永遠顯示在Toolbar中迟赃，如果屏幕空間不夠則不顯示

never: 表示永遠顯示在菜單當中

5. 在代碼中實用菜單選項

/***************************
 * 創(chuàng)建菜單
 ***************************/
@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu, menu);
    return true;
}

/***************************
 * 給菜單設置點擊事件
 ***************************/
@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case R.id.backup:
            Toast.makeText(MainActivity.this, "backup", Toast.LENGTH_SHORT).show();
            break;
        case R.id.delete:
            Toast.makeText(this, "delete", Toast.LENGTH_SHORT).show();
            break;
        case R.id.settings:
            Toast.makeText(this, "setting", Toast.LENGTH_SHORT).show();
            break;
        default:
    }
    return true;
}

2. DrawerLayout

這個在我之前得文章講過，可以直接點擊查看高大上的側滑菜單DrawerLayout厂镇，解決了不能全屏滑動的問題
不過左側可以再優(yōu)化下纤壁，實用新的控件 NavigationView
NavigationView

在使用前，提前準備好兩個東西：menu 和 headerLayout

1. 創(chuàng)建menu

<?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/nav_call"
            android:icon="@drawable/nav_call"
            android:title="妹紙" />
        <item
            android:id="@+id/nav_friends"
            android:icon="@drawable/nav_friends"
            android:title="段子" />
        <item
            android:id="@+id/nav_location"
            android:icon="@drawable/nav_location"
            android:title="新聞" />
        <item
            android:id="@+id/nav_mail"
            android:icon="@drawable/nav_mail"
            android:title="本地" />
        <item
            android:id="@+id/nav_task"
            android:icon="@drawable/nav_task"
            android:title="收藏" />
    </group>
</menu>

將group得 checkableBehavior 屬性指定為single捺信，表示所有得菜單項只能單選

2. 創(chuàng)建headerLayout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="180dp"
android:background="?attr/colorPrimary"
android:padding="10dp">

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/icon_image"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_centerInParent="true"
        android:src="@drawable/nav_icon" />

    <TextView
        android:id="@+id/username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="1012126908@qq.com"
        android:textColor="#FFF"
        android:textSize="14sp" />

    <TextView
        android:id="@+id/mail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/username"
        android:text="夏韋子"
        android:textColor="#FFF"
        android:textSize="14sp" />

</RelativeLayout>

3. 在布局中使用

<android.support.design.widget.NavigationView
    android:id="@+id/nv_left"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="left"
    app:headerLayout="@layout/nav_header"
    app:menu="@menu/nav_menu">
</android.support.design.widget.NavigationView>

app:headerLayout ： headerLayout文件

app:menu: menu文件

android:layout_gravity="left" 設置為左側菜單

4. 在代碼中使用

//給NavigationView設置item選擇事件
mNavigationView.setCheckedItem(R.id.nav_call);
mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(MenuItem item) {
        ...
        return true;
    }
});

3. SnackBar

跟Toast有點相似帽驯，不過不同點在于加入一個可交互按鈕厢塘，當用戶點擊按鈕得時候可以執(zhí)行一些額外得邏輯操作

效果如下：

SnackBar.gif

使用起來比較簡單熙暴，跟Toast很像。

Snackbar snackbar = Snackbar.make(getCurrentFocus(), item.getTitle(), Snackbar.LENGTH_SHORT);
snackbar.setAction("Undo", new View.OnClickListener() {
    @Override
    public void onClick(View v) {

    }
});
snackbar.setActionTextColor(Color.BLUE);
snackbar.show();

4. CardView

效果如下：

CardView.PNG

CardView 其實是一個FrameLayout喇辽，只是額外提供了圓角和陰影效果，
直接在布局中使用雨席。

<android.support.v7.widget.CardView
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="wrap_content"
android:background="?android:attr/selectableItemBackground"
app:cardElevation="10dp"
android:layout_margin="5dp"
app:cardCornerRadius="18dp">
...//子布局
</android.support.v7.widget.CardView>

app:cardCornerRadius 指定卡片圓角得弧度菩咨，數值越大，圓角得弧度越大

app:cardElevation 制定卡片得高度陡厘，高度值越大抽米，投影得范圍越大

5. RecyclerView

這個在之前得文章也說過，如果需要查看糙置，請移駕到：簡單粗暴----RecyclerView
本次得Demo里數據我就不詳細說了云茸，太多了，很簡單谤饭。

6. SwipeRefreshLayout

效果如下：

SwipeRefreshLayout.gif

使用 SwipeRefreshLayout 直接可以實現(xiàn)下拉刷新的功能

1. 在布局中添加

<android.support.v4.widget.SwipeRefreshLayout
android:id="@+id/srl_main"
android:layout_width="match_parent"
android:layout_height="match_parent">

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

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

2. 在代碼中添加

mRefreshLayout.setColorSchemeColors(Color.RED, Color.BLUE, Color.YELLOW, Color.GREEN);
mRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
    @Override
    public void onRefresh() {
        refreshFruits();
    }
});

可以給刷新得時候設置顏色的變換标捺，在 onRefresh() 中實現(xiàn)刷新得功能

7. AppBarLayout

先看一下效果：

AppBarLayout.gif

AppBarLayout 實際是一個垂直方向得 LinearLayout，它在內部做了很多滾動事件得封裝揉抵，并應用了MaterialDesign設計理念亡容。

在布局中實用：

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!--
       android:theme 設置背景主題深色，這樣字體會變成白色
       app:popupTheme 設置彈出的主題是亮色
    -->
    <android.support.design.widget.AppBarLayout
        android:fitsSystemWindows="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:fitsSystemWindows="true"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:layout_scrollFlags="scroll|enterAlways|snap"
            app:popupTheme="@style/Theme.AppCompat.Light" />
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.SwipeRefreshLayout
        ...
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        ...
    </android.support.v4.widget.SwipeRefreshLayout>

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

app:layout_scrollFlags：當AppBarLayout接收到滾動事件得時候冤今，它內部得子空間就是通過這個屬性影響這些事件的

scroll：表示當 RecyclerView向上滾動得時候萍倡，Toolbar會跟著一起向上滾動并實現(xiàn)隱藏。

enterAlways:表示當 RecyclerView向下滾動得時候辟汰，Toolbar會跟著一起向下滾動并重新顯示列敲。

snap：表示當Toolbar還沒有完全隱藏或顯示得時候，會根據當前滾動得距離帖汞，自動選擇是隱藏還是顯示戴而。

8. CollapsingToolbarLayout

效果如下：

CollapsingToolbarLayout.gif

可折疊式標題欄這個就比之前就負責點了，我先貼代碼翩蘸，然后一一解釋所意。

<?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/appBar"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/fruit_image_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax" />

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

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

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="15dp"
                android:layout_marginLeft="15dp"
                android:layout_marginRight="15dp"
                android:layout_marginTop="35dp"
                app:cardCornerRadius="4dp">

                <TextView
                    android:id="@+id/fruit_content_text"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="10dp" />
            </android.support.v7.widget.CardView>
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

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

app:contentScrim:在趨于折疊狀態(tài)以及折疊之后得背景色

app:layout_scrollFlags 這個之前講過

scroll :表示 CollapsingToolbarLayout會隨著妹紙內容詳情得滾動一起滾動

exitUntilCollapsed:表示當 CollapsingToolbarLayout隨著滾動完成折疊之后就保留在界面上，不再移出屏幕

app:layout_collapseMode="pin" 把Toolbar指定成pin催首，表示在折疊的過程中位置始終保持不變

app:layout_collapseMode="parallax" ImageView 指定成 parallax扶踊，表示會在折疊得過程中產生一定得錯位偏移，這種模式得視覺效果會非常好

NestedScrollView ：在ScrollView基礎上增加了嵌套響應滾動事件得功能

9. 沉浸式狀態(tài)欄

這個只是在Android5.0后才有的郎任，設置狀態(tài)欄為透明

在setContentView();之前添加代碼：

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    //透明狀態(tài)欄
    getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
    //透明導航欄
    getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
}

需要在直接子布局添加：android:fitsSystemWindows="true 表示該控件會出現(xiàn)在系統(tǒng)狀態(tài)欄里

我的源碼地址：https://github.com/xiaweizi/MaterialDesign

我的博客

最后編輯于：2018.02.23 10:43:48

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

人面猴
序言：七十年代末秧耗，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子舶治，更是在濱河造成了極大的恐慌分井，老刑警劉巖车猬，帶你破解...
沈念sama閱讀 222,252評論 6贊 516
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異尺锚，居然都是意外死亡珠闰，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 94,886評論 3贊 399
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門瘫辩，熙熙樓的掌柜王于貴愁眉苦臉地迎上來伏嗜，“玉大人，你說我怎么就攤上這事伐厌〕谐瘢” “怎么了？”我有些...
開封第一講書人閱讀 168,814評論 0贊 361
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵弧械，是天一觀的道長八酒。經常有香客問我空民，道長刃唐，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 59,869評論 1贊 299
?港島之戀（遺憾婚禮）
正文為了忘掉前任界轩，我火速辦了婚禮画饥，結果婚禮上，老公的妹妹穿的比我還像新娘浊猾。我一直安慰自己抖甘，他們只是感情好，可當我...
茶點故事閱讀 68,888評論 6贊 398
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布葫慎。她就那樣靜靜地躺著衔彻，像睡著了一般。火紅的嫁衣襯著肌膚如雪偷办。梳的紋絲不亂的頭發(fā)上艰额，一...
開封第一講書人閱讀 52,475評論 1贊 312
城市分裂傳說
那天，我揣著相機與錄音椒涯，去河邊找鬼柄沮。笑死，一個胖子當著我的面吹牛废岂，可吹牛的內容都是我干的祖搓。我是一名探鬼主播，決...
沈念sama閱讀 41,010評論 3贊 422
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼湖苞，長吁一口氣：“原來是場噩夢啊……” “哼拯欧！你這毒婦竟也來了？” 一聲冷哼從身側響起财骨，我...
開封第一講書人閱讀 39,924評論 0贊 277
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤哈扮，失蹤者是張志新（化名）和其女友劉穎纬纪，沒想到半個月后，有當地人在樹林里發(fā)現(xiàn)了一具尸體滑肉，經...
沈念sama閱讀 46,469評論 1贊 319
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡包各，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 38,552評論 3贊 342
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了靶庙。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片问畅。...
茶點故事閱讀 40,680評論 1贊 353
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖六荒，靈堂內的尸體忽然破棺而出护姆，到底是詐尸還是另有隱情，我是刑警寧澤掏击，帶...
沈念sama閱讀 36,362評論 5贊 351
?日本核電站爆炸內幕
正文年R本政府宣布卵皂，位于F島的核電站，受9級特大地震影響砚亭，放射性物質發(fā)生泄漏灯变。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點故事閱讀 42,037評論 3贊 335
男人毒藥：我在死后第九天來索命
文/蒙蒙一捅膘、第九天我趴在偏房一處隱蔽的房頂上張望添祸。院中可真熱鬧，春花似錦寻仗、人聲如沸刃泌。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,519評論 0贊 25
一樁弒父案署尤，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽耙替。三九已至，卻和暖如春曹体，著一層夾襖步出監(jiān)牢的瞬間俗扇，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 33,621評論 1贊 274
情欲美人皮
我被黑心中介騙來泰國打工混坞，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留狐援，地道東北人。一個月前我還...
沈念sama閱讀 49,099評論 3贊 378
代替公主和親
正文我出身青樓究孕，卻偏偏與公主長得像啥酱，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子厨诸，可洞房花燭夜當晚...
茶點故事閱讀 45,691評論 2贊 361

基于MaterialDesign設計風格的妹紙app的簡單實現(xiàn)

1. Toolbar

1. 設置AppTheme("NoActionBar")

2. 添加控件

3. 在代碼中使用

4. 設置菜單選項

5. 在代碼中實用菜單選項

2. DrawerLayout

1. 創(chuàng)建menu

2. 創(chuàng)建headerLayout

3. 在布局中使用

4. 在代碼中使用

3. SnackBar

4. CardView

5. RecyclerView

6. SwipeRefreshLayout

1. 在布局中添加

2. 在代碼中添加

7. AppBarLayout

8. CollapsingToolbarLayout

9. 沉浸式狀態(tài)欄

推薦閱讀更多精彩內容