每次吃一點AndroidのMD開發(fā)

目錄：
1、Material Design 概述
2、CardView
3、RecyclerView
4、RippleEffect
Android小仙

1. Material Design 概述

Material Design（材料設(shè)計語言）
推出目的：
為手機、平板電腦、臺式機和“其他平臺”提供更一致、更廣泛的“外觀和感覺”。

MD參考資料：
Material Design 中文版
最全面的 Material Design 學(xué)習(xí)資料
material design 的android開源代碼整理
調(diào)色板
MaterialDesignLibrary
在Android 2.2系統(tǒng)上使用Android 5.0才支持的控件效果，比如扁平、矩形、浮動按鈕，復(fù)選框以及各式各樣的進度指示器等。除上述之外，MaterialDesignLibrary還擁有SnackBar、Dialog、Color selector組件，可非常便捷地對應(yīng)用界面進行設(shè)置。
RippleEffect
能夠在Android API 9+上實現(xiàn)Material Design，為開發(fā)者提供了一種極為簡易的方式來創(chuàng)建帶有可擴展視圖的header視圖，并且允許最大程度上的自定制。
MaterialEditText
無需修改Java文件即能實現(xiàn)自定義控件顏色
LollipopShowcase
集中演示了新Material Design中所有的UI效果，以及Android Lollipop中其他非?？犰诺奶匦栽兀热鏣oolbar、RecyclerView、ActionBarDrawerToggle、Floating Action Button（FAB）、Android Compat Theme等。
MaterialList
作為ListView的擴展，MaterialList可以接收、存儲卡片列表，并根據(jù)它們的Android風(fēng)格和設(shè)計模式進行展示。此外，開發(fā)者還可以創(chuàng)建專屬于自己的卡片布局，并輕松將其添加到CardList中。
FloatActionButton
FAB通過圓形元素與分割線、卡片、各種Bar的直線形成鮮明對比，并使用色彩設(shè)定中鮮艷的輔色，帶來更具突破性的視覺效果。
MaterialMenu
Material Menu為開發(fā)者帶來了非?？犰诺腁ndroid菜單、返回、刪除以及檢查按鈕變形，完全控制動畫，并為開發(fā)者提供了兩種MaterialMenuDrawable包裝。
ObservableScrollView
Android-ObservableScrollView是一款用于在滾動視圖中觀測滾動事件的Android庫。支持ListView、ScrollView、WebView、RecyclerView、GridView組件。
MaterialDesignIcons
Google Material Design規(guī)范的官方開源圖標(biāo)集Material Design Icons
ViewPagerCards
MD風(fēng)格的ViewPager，github兩千多顆星星，贊

2. CardView

CardView是一種卡片視圖，支持卡片設(shè)置圓角和陰影效果。常作為列表RecyclerView的Item布局。內(nèi)部也可以嵌套其他view。

2.1. 添加依賴

compile 'com.android.support:cardview-v7:24.2.1

2.2. 屬性

為布局添加命名空間：
xmlns:card_view="http://schemas.android.com/apk/res-auto"
屬性：
card_view : cardCornerRadius：設(shè)置圓角半徑
card_view : cardElevation：設(shè)置陰影大小
card_view : cardMaxElevation：設(shè)置陰影的最大高度
card_view : contentPadding：卡片內(nèi)容與邊的間隔
card_view : contentPaddingBottom
card_view : contentPaddingTop
card_view : contentPaddingLeft
card_view : contentPaddingRight
card_view : contentPaddingStart
card_view : contentPaddingEnd
card_view : cardPreventConrerOverlap = false：取消5.0以下版本的間隔
水波效果：

android:clickable = "true"
android:foreground="?attr/selectableItemBackground"

動畫效果（5.0以上有效）：
android:stateListAnimator="@anim/xxx
去除陰影：
card_view:cardElevation="0dp"

2.3. 例子

<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android : clickable = "true"
    android:foreground="?attr/selectableItemBackground"
    card_view:cardBackgroundColor="@android:color/gray"
    card_view:contentPadding = "10dp"
    card_view:cardCornerRadius="10dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:padding="1dp">

        <TextView
            android:id="@+id/content_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_centerInParent="true"
            android:scaleType="centerCrop" />
    </RelativeLayout>
</android.support.v7.widget.CardView>

3. RecyclerView

RecyclerView 可說是ListView、GridView的升級版，還可以輕松實現(xiàn)瀑布流效果。

3.1. 添加依賴

compile 'com.android.support:recyclerview-v7:23.1.1'

3.2. RecyclerView的幾個抽象類

  • RecyclerView.Adapter
    顧名思義，就是適配器，提供數(shù)據(jù)支持
  • RecyclerView.LayoutManager
    布局管理器，可測量RecyclerView的item，并且實現(xiàn)不同的布局效果：
    列表：LinearLayoutManager
    表格：GridLayoutManager
    瀑布流：StaggeredGridLayoutManager
  • RecyclerView.ItemAnimator
    Item動畫，實現(xiàn)添加或刪除Item時的動畫效果。
  • RecyclerView.ItemDecoration
    Item裝飾，可實現(xiàn)分割線的添加。

3.3. 基本使用

  • 布局
<android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
  • Item布局
    子item布局常常用到CardView，比如可以將上面2.3. 例子作為item布局
  • 適配器
    定義一個類繼承RecyclerView.Adapter，留意三個抽象方法
    onCreateViewHolder：創(chuàng)建ViewHolder
    onBindViewHolder：將數(shù)據(jù)綁定到ViewHolder
    getItemCount：返回item個數(shù)
    另外我們需要自己在適配器中定義一個ViewHolder類繼承RecyclerView.ViewHolder。
    具體實現(xiàn)如下：
public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {

    private List<String> mData;

    // 構(gòu)造方法
    public MyAdapter(List<String> data){
        mData= data;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        //加載布局文件
        View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.itemlayout,parent,false);
        ViewHolder vh = new ViewHolder(v);
        return vh;
    }

    @Override
    public void onBindViewHolder(final ViewHolder holder, int position) {
        //將數(shù)據(jù)填充到具體的view中
        holder.tvContent.setText(mData.get(position));
    }

    @Override
    public int getItemCount() {
        return mData.size();
    }

    class ViewHolder extends RecyclerView.ViewHolder{
        public TextView tvContent
        public ViewHolder(View itemView) {
            super(itemView); 
            // 通過onBindViewHolder方法會直接填充數(shù)據(jù)到每一個textView了
            tvContent= (TextView) itemView.findViewById(R.id.content_view);
        }
    }
}
  • 在Activity中啟用
// 獲取實例對象
RecyclerView mRecyclerView = (RecyclerView) findViewById(R.id.recyclerview);
// 定義布局管理器
RecyclerView.LayoutManager mLayoutManager ；
// 如果是要實現(xiàn)列表效果：
mLayoutManager = new LinearLayoutManager(this);
// 如果是要實現(xiàn)表格效果,參數(shù)2表示列數(shù)：
// mLayoutManager = new GridLayoutManager(this,2);
// 如果是要實現(xiàn)瀑布流效果，兩個參數(shù)表示3行，HORIZONTAL改成VERTICAL表示3列：
// mLayoutManager = new StaggerLayoutManager(3，  StaggeredGridLayoutManager.HORIZONTAL);
// 為RecyclerView設(shè)置布局管理器
mRecyclerView.setLayoutManager(mLayoutManager);
// 設(shè)置item添加和刪除的動畫效果，谷歌還提供了很多其他動畫效果，看3.4.2
mRecyclerView.setItemAnimator(new DefaultItemAnimator());
//添加分割線
mRecyclerView.addItemDecoration(new DividerItemDecoration(
                getActivity(), DividerItemDecoration.HORIZONTAL_LIST));
// 適配器
MyAdapter mAdapter = new MyAdapter(data);
mRecyclerView.setAdapter(mAdapter );

3.4. 注意點

3.4.1. 適配器刷新方法
RecyclerView適配器的刷新不是用的adapter.notifyDataSetChanged(),而是換成了這兩個：notifyItemInserted(position)與notifyItemRemoved(position)。如下：

public void addData(int position) {
        mData.add(position, "Insert One");
        notifyItemInserted(position);
    }

    public void removeData(int position) {
            mData.remove(position);
        notifyItemRemoved(position);
    }

3.4.2 添加、刪除Item的動畫效果
上面的例子中我們的動畫效果使用的是DefaultItemAnimator()：

mRecyclerView.setItemAnimator(new DefaultItemAnimator());

谷歌還良心推出了一整套的動畫效果供使用，簡直棒棒噠！??！
傳送門，快跟我來~
SlideInOutLeftItemAnimator
ScaleInOutItemAnimator
SlideScaleInOutRightItemAnimator 等等等。。。。
3.4.3. 點擊、長按事件要自己實現(xiàn)?。?！
具體可參考：
揭開RecyclerView的神秘面紗(二)：處理RecyclerView的點擊事件

4. RippleEffect

RippleEffect是一個Android類庫，為運行在Android API 9+中的應(yīng)用實現(xiàn)來自Material Design的點擊波紋效果。點擊界面上的按鈕組件時出現(xiàn)波紋效果。
傳送門，快，跟我走~

demo.gif

4.1. 添加依賴

compile 'com.github.traex.rippleeffect:library:1.3'

4.2. 屬性

ripple:rv_centered="true" ：表示漣漪出現(xiàn)在中間位置；
ripple:rv_type="rectangle"：表示漣漪的形狀-長方形；
ripple:rv_type="doubleRipple" ：表示雙漣漪；
ripple:rv_zoom="true" ：表示控件有縮放效果
ripple:rv_color="#000000" ：表示漣漪的顏色為黑色

4.3. 使用

<com.andexert.library.RippleView
  android:id="@+id/more"
  android:layout_width="?android:actionBarSize"
  android:layout_height="?android:actionBarSize"
  android:layout_toLeftOf="@+id/more2"
  android:layout_margin="5dp"
  ripple:rv_centered="true">
 
  <ImageView
    android:layout_width="?android:actionBarSize"
    android:layout_height="?android:actionBarSize"
    android:src="@android:drawable/ic_menu_edit"
    android:layout_centerInParent="true"
    android:padding="10dp"
    android:background="@android:color/holo_blue_dark"/>
 
</com.andexert.library.RippleView>

4.4. 注意

RippleEffect不適合應(yīng)用在點擊后立刻消失的控件，因為當(dāng)該控件又展示出來時會播放未播放完畢的水波效果。體驗不佳
Ripple 水波紋效果

尊重版權(quán)，參考資料大匯總：

直接拿來用！十大Material Design開源項目
揭開RecyclerView的神秘面紗(一)：RecyclerView的基本使用
Android RecyclerView 使用完全解析 體驗藝術(shù)般的控件

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,150評論 25贊 708
  • afinalAfinal是一個android的ioc，orm框架 https://github.com/yangf...
    passiontim閱讀 15,889評論 2贊 45
  • 內(nèi)容抽屜菜單ListViewWebViewSwitchButton按鈕點贊按鈕進度條TabLayout圖標(biāo)下拉刷新...
    皇小弟閱讀 47,164評論 22贊 665
  • ?昨天學(xué)校里好像很熱鬧，一位研究生學(xué)姐結(jié)婚了，宿舍的樓道上鋪上紅毯，婚車直接開到宿舍樓下，很是令人羨慕 那種從校服...
    小滿心歡喜閱讀 403評論 0贊 0
  • 記得前不久，不知道自己是愛學(xué)習(xí)了？還是因為好奇，關(guān)注了不少公眾號，其中有個睡前讀一本書使我每天堅持讀完！ 就在昨天...
    melody靜閱讀 269評論 0贊 0

友情鏈接更多精彩內(nèi)容