從繁到簡Material Design—1 MD簡介

Material Design---1 MD簡介

Material Design從Android5.0開始引入的，是一種全新的設(shè)計語言（翻譯為“原材料設(shè)計”），其實(shí)是谷歌提倡的一種設(shè)計風(fēng)格、理念、原則。
擬物設(shè)計和扁平化設(shè)計一種結(jié)合體驗。還吸取了最新一些科技理念。

國內(nèi)有對應(yīng)的翻譯網(wǎng)站可以了解MD風(fēng)格的概念和設(shè)計原則，當(dāng)然英語能力比較好的可以直接到官網(wǎng)查看MD風(fēng)格的相關(guān)介紹，MD風(fēng)格主要通過z軸來增加控件的層次感，而在App中則具體展現(xiàn)為控件周邊加對應(yīng)的陰影效果。對于開發(fā)人員來說，不需要過多的關(guān)注MD風(fēng)格的界面設(shè)計、頁面跳轉(zhuǎn)、動畫效果和交互設(shè)計，只需要對其進(jìn)行良好的實(shí)現(xiàn)即可。再真正開始聊Material Design之前，先說點(diǎn)別的，首先先說下Support庫。

Android Support相關(guān)

谷歌開放以及收集了一些最新的開源的項目(很多是自己開發(fā)的)，匯集到最新的support兼容支持包以及最新的5.X API里面。其實(shí)在support包中有很多有用并且常用的類，下面對其進(jìn)行大致的介紹：

  • android-support-v4：最低會兼容到1.6；常見使用的類有ViewPager，NestedScrollView，LruCache，ViewDragHelper，CircleImageView，ColorUtils，RoundedBitmapDrawable等，這只是列舉了一小部分，其實(shí)我們常寫的好多東西，谷歌已經(jīng)幫我們封裝好了，最簡單的拿圓形頭像來說，Google早就為我們準(zhǔn)備好了，作為面向?qū)ο蟮拈_發(fā)者，為啥還要再自己寫呢。
  • android-support-v7：最低兼容到Android 2.1的（個別的控件只兼容到3.0），常見的使用的類有appcompat、CardView、gridlayout、mediarouter、palette、preference、recyclerView等，這些控件值得我們研究一下。

這里可以查看官方對support支持庫的介紹，在使用時，最好將Andoird SDK，工具以及Support包都更新到最新。

style中控制全局樣式

一般我們新建好項目以后，默認(rèn)使用的就是Support-v7中的AppCompatActivity，而且，在style文件中，也會默認(rèn)創(chuàng)建對應(yīng)的Theme：
這里的主題主要是給你的整體應(yīng)用定一個基調(diào)，比如字體的顏色、主色調(diào)，次主色調(diào)，狀態(tài)欄顏色，導(dǎo)航欄顏色，各個控件的眼色等等。使用appcompat項目，主要也是為了解決android碎片化開發(fā)、的問題，讓我們app編譯出來在各種高低版本之間、不同的廠商生產(chǎn)的ROM之間顯示出來的效果UI控件等有較一致的體驗。關(guān)于整體基調(diào)的設(shè)定如下：

<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>

colorPrimary：主色
colorPrimaryDark：主色--深色，一般可以用于狀態(tài)欄顏色
colorAccent：代表各個空間的基調(diào)顏色--CheckBox、RadioButton、ProgressBar等等
android:textColor：當(dāng)前所有的文本顏色
navigationBarColor：底部導(dǎo)航

這個可以做5.0以上的沉浸式效果

下面這張圖是從google官網(wǎng)copy下來，可以參考一下：


主題詳解
主題詳解

不同的Android版本會加載不同的value文件夾，一般會找據(jù)當(dāng)前版本號最近的value文件夾，比如：Android5.0（版本號為21）會優(yōu)先加載value-21下的style.xml文件。
Android SDK更新有幾個重要的版本分別為：4.0（版本號14）、4.4（版本號19）、5.0（版本號21）。所以一般項目中進(jìn)行兼容性開發(fā)，可直接新建value-14,value-19,value-21即可。

Support-v7包中常用控件簡介

在Support-v7包中有一系列用于兼容低版本的控件，可以配合appcompat的主題達(dá)到各個版本中的UI體驗一致性。

  1. android.support.v7.app.AlertDialog
    該控件的使用與android包下的AlertDialog使用方法相同，但是此控件會兼容5.0以下的效果。
  2. SwipeRefreshLayout
    該控件是用于下拉刷新的一個控件，幾乎可以包裹一個任何可以滾動的內(nèi)容（ListView GridView ScrollView RecyclerView），可以自動識別垂直滾動手勢。使用起來非常方便。（需要包裹可滾動的內(nèi)容使用）。用法如下：
    第一步，在xml中,包裹一個可滑動的控件，如RecyclerView
<android.support.v4.widget.SwipeRefreshLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</android.support.v4.widget.SwipeRefreshLayout>

第二步，設(shè)置刷新動畫的觸發(fā)回調(diào)

//設(shè)置下拉出現(xiàn)小圓圈是否是縮放出現(xiàn)，出現(xiàn)的位置，最大的下拉位置
mySwipeRefreshLayout.setProgressViewOffset(true, 50, 200);
//設(shè)置下拉圓圈的大小，兩個值 LARGE， DEFAULT
mySwipeRefreshLayout.setSize(SwipeRefreshLayout.LARGE);
// 設(shè)置下拉圓圈上的顏色，藍(lán)色、綠色、橙色、紅色
mySwipeRefreshLayout.setColorSchemeResources(
    android.R.color.holo_blue_bright,
    android.R.color.holo_green_light,
    android.R.color.holo_orange_light,
    android.R.color.holo_red_light);
// 通過 setEnabled(false) 禁用下拉刷新
mySwipeRefreshLayout.setEnabled(false);
// 設(shè)定下拉圓圈的背景
mSwipeLayout.setProgressBackgroundColor(R.color.red);
/*
 * 設(shè)置手勢下拉刷新的監(jiān)聽
 */
mySwipeRefreshLayout.setOnRefreshListener(
    new SwipeRefreshLayout.OnRefreshListener() {
        @Override
        public void onRefresh() {
            // 刷新動畫開始后回調(diào)到此方法
        }
    }
);

通過 setRefreshing(false) 和 setRefreshing(true) 來手動調(diào)用刷新的動畫。用法其實(shí)很簡單，當(dāng)然還有其他的Api，官方文檔中寫的很詳細(xì)，本文中參考了這位同學(xué)的開源項目，同時該同學(xué)也對其進(jìn)行了源碼解析，大家可以參考。

  1. PopupWindow/ListPopupWindow/PopupMenu
    這里只簡單說一下ListPopupWindow的使用：
//初始化ListPopupWindow
ListPopupWindow listPopupWindow = new ListPopupWindow(this);
// 給listPopupWindow添加Adapter，填充數(shù)據(jù)
listPopupWindow.setAdapter(new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,
        new String[]{"test1","test2","test3"}));
// 設(shè)置錨點(diǎn)，即顯示的位置
listPopupWindow.setAnchorView(view);
// 給每一個條目添加點(diǎn)擊事件
listPopupWindow.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
        Toast.makeText(MainActivity.this, view.getId()+ " " + i, Toast.LENGTH_SHORT).show();
    }
});
// 調(diào)用show方法
listPopupWindow.show();

這個控件在項目中還是很好用的，使用方便，PopupWindow的顯示有高度，可以看出有陰影效果

  1. android.support.v7.widget.LinearLayoutCompat
    給包裹在里面的所有子控件添加間隔線
    <android.support.v7.widget.LinearLayoutCompat
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:divider="@drawable/abc_list_divider_mtrl_alpha" // 自定義屬性，添加分割線
    app:showDividers="beginning|middle" // 分割線位置顯示
    android:orientation="vertical" >
  2. Appcompat打頭的控件，如下圖：
    兼容控件

    上圖為一系列兼容控件，不做過多的贅述，詳細(xì)的內(nèi)容可以看官方文檔.
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

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