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

我的博客地址

照例，一波動態圖來襲：

MaterialDesign風格.gif

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

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

Toolbar
DrawerLayout
SnackBar
CardView
RecyclerView
SwipeRefreshLayout
AppBarLayout
CollapsingToolbarLayout
沉浸式狀態欄

首先添加依賴：

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，就是活動最頂部得哪個標題欄。但是，它只能位于活動得頂部，從而影響效果，所有官方現在已經不再建議使用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系統中才出現得，而很多Material屬性在5.0之前得系統中是不存在得，那么為了能夠兼容之前得老系統，我們就得使用 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文件夾中創建xml文件

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

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

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

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

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

/***************************
 * 創建菜單
 ***************************/
@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，解決了不能全屏滑動的問題
不過左側可以再優化下，實用新的控件 NavigationView
NavigationView

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

1. 創建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. 創建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有點相似，不過不同點在于加入一個可交互按鈕，當用戶點擊按鈕得時候可以執行一些額外得邏輯操作

效果如下：

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 直接可以實現下拉刷新的功能

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() 中實現刷新得功能

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會跟著一起向上滾動并實現隱藏。

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:在趨于折疊狀態以及折疊之后得背景色

app:layout_scrollFlags 這個之前講過

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

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

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

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

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

9. 沉浸式狀態欄

這個只是在Android5.0后才有的，設置狀態欄為透明

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

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

需要在直接子布局添加：android:fitsSystemWindows="true 表示該控件會出現在系統狀態欄里

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

我的博客

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

基于MaterialDesign設計風格的妹紙app的簡單實現

基于MaterialDesign設計風格的妹紙app的簡單實現

1. Toolbar

1. 設置AppTheme("NoActionBar")

2. 添加控件

3. 在代碼中使用

4. 設置菜單選項

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

2. DrawerLayout

1. 創建menu

2. 創建headerLayout

3. 在布局中使用

4. 在代碼中使用

3. SnackBar

4. CardView

5. RecyclerView

6. SwipeRefreshLayout

1. 在布局中添加

2. 在代碼中添加

7. AppBarLayout

8. CollapsingToolbarLayout

9. 沉浸式狀態欄

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

基于MaterialDesign設計風格的妹紙app的簡單實現

1. Toolbar

1. 設置AppTheme("NoActionBar")

2. 添加控件

3. 在代碼中使用

4. 設置菜單選項

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

2. DrawerLayout

1. 創建menu

2. 創建headerLayout

3. 在布局中使用

4. 在代碼中使用

3. SnackBar

4. CardView

5. RecyclerView

6. SwipeRefreshLayout

1. 在布局中添加

2. 在代碼中添加

7. AppBarLayout

8. CollapsingToolbarLayout

9. 沉浸式狀態欄

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频