【Android】Material Design基礎詳解

分類：編程 時間:2017-02-14

一.簡介

Material Design是Google在2014年I/O大會上發布的一種新的設計規範。一經推出就好評如潮，個人是非常喜歡這種風格的，由於他只支持5.0及其以上的設備，開發者也只是自己空閑時嘗嘗鮮，並沒用在真實的項目中去，使得其在國內的市場並不是太好。公司的設計也並沒有按照找個規範來設計過App，但是市場上還是有些MD風格的App，如知乎，簡書等都能找到它的身影，不管怎樣，先學了再說，今天我們要實現一個這樣的效果：

這裏寫圖片描述

二.總體概覽

本例使用android Studio開發，開發之前先引入design庫，在build.gradle文件中添加如下代碼並編譯：

compile 'com.android.support:design:25.1.0'
compile 'com.jakewharton:butterknife:7.0.0'

註：我這裏使用了butterknife註解框架，這個開源庫可以讓我們從大量的findViewById()和setonclicktListener()解放出來，這裏不做具體介紹，自行百度；

1.首先看一下最頂部的Toolbar控件

這裏寫圖片描述

在這裏引用一下網上的一張講解Toolbar的圖：

這裏寫圖片描述

我們例子中布局文件如下：

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/draw_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/root_coordina_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="256dp"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsingToolbarLayout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:contentScrim="?attr/colorPrimary"
                app:expandedTitleMarginStart="10dp"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop"
                    android:src=http://www.ithao123.cn/"@mipmap/header"
                    app:layout_collapseMode="parallax"
                    app:layout_collapseParallaxMultiplier="0.7" />

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

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

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">


            <android.support.design.widget.TabLayout
                android:id="@+id/tab_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#1565C0"
                android:visibility="gone"
                app:tabGravity="fill"
                app:tabMode="fixed"
                app:tabSelectedTextColor="#f3512d"
                app:tabTextAppearance="@style/MyTabLayoutTextAppearanceInverse"
                app:tabTextColor="#ffffff" />

            <android.support.v4.view.ViewPager
                android:id="@+id/viewPager"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_below="@+id/tab_layout"
                android:visibility="gone" />

            <android.support.v4.widget.NestedScrollView
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

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

                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="200dp"
                        android:src=http://www.ithao123.cn/"@mipmap/ic_launcher" />

                    <--此處省略了很多imageView-->

                </LinearLayout>
            </android.support.v4.widget.NestedScrollView>
        </RelativeLayout>
        <!--外層根需為CoordinatorLayout,指定make()的第一個參數-->
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fabBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|right"
            android:layout_margin="16dp"
            android:src=http://www.ithao123.cn/"@mipmap/fbb"
            app:fabSize="normal" />
    </android.support.design.widget.CoordinatorLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header"
        app:itemIconTint="#333"
        app:itemTextColor="#333"
        app:menu="@menu/navigation_drawer_items" />

</android.support.v4.widget.DrawerLayout>

2.下面一一介紹下各個控件的作用:

(1).CoordinatorLayout：在Material Design裏，CoordinatorLayout通常用來作為頂層視圖，來協調處理各個子View之間的動作，從而實現各種動畫效果，如Snackbar與FloatingActionButton的配合顯示效果，就是以CoordinatorLayout作為根布局來實現的；

(2).AppBarLayout 是繼承LinerLayout實現的一個ViewGroup容器組件，它是為了Material Design設計的App Bar，支持手勢滑動操作。

(3).CollapsingToolbarLayout作用是提供了一個可以折疊的Toolbar，它繼承至FrameLayout，給它設置layout_scrollFlags，它可以控制包含在CollapsingToolbarLayout中的控件(如：ImageView、Toolbar)在響應layout_behavior事件時作出相應的scrollFlags滾動事件(移除屏幕或固定在屏幕頂端)。

通過app:layout_scrollFlags=”scroll|enterAlways”屬性來確定哪個組件是可滑動的.

設置的layout_scrollFlags有如下幾種選項：

  • scroll: 所有想滾動出屏幕的view都需要設置這個flag- 沒有設置這個flag的view將被固定在屏幕頂部。
  • enterAlways: 這個flag讓任意向下的滾動都會導致該view變為可見，啟用快速“返回模式”。
  • enterAlwaysCollapsed: 當你的視圖已經設置minHeight屬性又使用此標誌時，你的視圖只能已最小高度進入，只有當滾動視圖到達頂部時才擴大到完整高度。
  • exitUntilCollapsed: 滾動退出屏幕，最後折疊在頂端。

3.為了使得Toolbar可以滑動，我們必須還得有個條件，就是CoordinatorLayout布局下包裹一個可以滑動的布局，比如 RecyclerView，NestedScrollView(經過測試，ListView，ScrollView不支持)具有滑動效果的組件。並且給這些組件設置如下屬性來告訴CoordinatorLayout，該組件是帶有滑動行為的組件，然後CoordinatorLayout在接受到滑動時會通知AppBarLayout 中可滑動的Toolbar可以滑出屏幕了。

app:layout_behavior="@string/appbar_scrolling_view_behavior"

4.下面來看下MainActivity的代碼：

public class MainActivity extends AppCompatActivity {

    @Bind(R.id.toolbar)
    Toolbar toolbar;
    @Bind(R.id.tab_layout)
    TabLayout tabLayout;
    @Bind(R.id.viewPager)
    ViewPager viewPager;
    @Bind(R.id.collapsingToolbarLayout)
    CollapsingToolbarLayout collapsingToolbarLayout;
    @Bind(R.id.fabBtn)
    FloatingActionButton fabBtn;
    @Bind(R.id.root_coordina_layout)
    CoordinatorLayout rootCoordinaLayout;
    @Bind(R.id.navigation)
    NavigationView navigation;

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

        initView();
    }

    private void initView() {
        //指定我們自己的Toolbar
        setSupportActionBar(toolbar);
        //設置左上角的圖標是否顯示
        getSupportActionBar().setHomeButtonEnabled(true);
        //給左上角圖標加上返回圖標
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        fabBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Snackbar.make(rootCoordinaLayout, "floating", Snackbar.LENGTH_LONG).show();
            }
        });
        //設置toolbar的title
        collapsingToolbarLayout.setTitle("酒色");
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();
        if (id == R.id.setting) {
            Snackbar.make(toolbar, "設置", Snackbar.LENGTH_LONG).show();
            return true;
        } else if (id == R.id.message) {
            Snackbar.make(toolbar, "消息", Snackbar.LENGTH_LONG).show();
            return true;
        } else if (id == R.id.about) {
            Snackbar.make(toolbar, "關於", Snackbar.LENGTH_LONG).show();
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

三.Snackbar

SnackBar是DesignSupportLibrary中的一個重要的控件，用於在界面下面提示一些關鍵信息，跟Toast不同的地方是SnackBar允許用戶向右滑動消除它，同時，也允許在SnackBar中設定一個Action，當用戶點擊了SnackBar裏面的按鈕的時候，可以進行一些操作.

如下代碼就可以彈出一個提示信息：

Snackbar.make(toolbar, "設置", Snackbar.LENGTH_LONG).show();

這裏寫圖片描述

還可以設定一個action，比如：

Snackbar.make(toolbar, "設置", Snackbar.LENGTH_LONG)
                    .setAction("todo", new View.OnClickListener() {
                        @Override
                        public void onClick(View v) {

                        }
                    })
                    .show();

小夥伴們可以自己試試效果，這裏不再演示。

四.FloatingActionButton懸浮按鈕

可以通過src指定懸浮按鈕的圖標

android:src=http://www.ithao123.cn/"@mipmap/fbb"

可以通過setOnClickListener監聽懸浮按鈕的點擊事件：

fabBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Snackbar.make(rootCoordinaLayout, "floating", Snackbar.LENGTH_LONG).show();
            }
        });

這裏寫圖片描述

五.Toolbar右上角的按鈕

這裏寫圖片描述

在res目錄下新建menu目錄，創建menu_main.xml

<menu 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"
    tools:context=".MainActivity">


    <item
        android:id="@+id/message"
        //設置優先級，值越大優先級越低
        android:orderInCategory="10"
        //標題
        android:title="消息"
        //always:總是顯示在界面上,never:不顯示在界面上ifRoom：如果有位置才顯示
        app:showAsAction="never" />

    <item
        android:id="@+id/setting"
        android:orderInCategory="20"
        android:title="設置"
        app:showAsAction="never" />

    <item
        android:id="@+id/about"
        android:orderInCategory="30"
        android:title="關於"
        app:showAsAction="never" />
</menu>

相應的Activity中對應的代碼：

 @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        //導入菜單布局文件
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();
        //處理點擊事件
        if (id == R.id.setting) {
            Snackbar.make(toolbar, "設置", Snackbar.LENGTH_LONG).show();
            return true;
        } else if (id == R.id.message) {
            Snackbar.make(toolbar, "消息", Snackbar.LENGTH_LONG).show();
            return true;
        } else if (id == R.id.about) {
            Snackbar.make(toolbar, "關於", Snackbar.LENGTH_LONG).show();
            return true;
        } 
        return super.onOptionsItemSelected(item);
    }

先說這麽多吧，源碼下載：

源碼下載


Tags:

文章來源：

ads
ads
相關文章
ads

相關文章

ad