Material Design 兼容性控件學習

簡述

Material Design從Android 5.0開始引入味悄,是一種全新的設計語言,稱為“原材料設計”塌鸯,是谷歌提倡的一種設計風格侍瑟、理念、原則。結合擬物設計和扁平化設計風格涨颜,融入了一些科技理念费韭。

想深入了解的話,可以查這篇wiki:Material Design 中文版

*注:使用下文中介紹的控件庭瑰,需在項目中引入v7包的支持星持。正如上面所說,Material Design從Android 5.0開始引入弹灭,故低版本的系統(tǒng)沒有這類控件督暂。

如:使用Android Studio可以在gradle的dependencies中寫入:

compile 'com.android.support:appcompat-v7:25.3.0'

Eclipse的請自行百度吧,畢竟就算導入了v7包穷吮,若編譯版本和v7包的版本存在新舊問題時逻翁,v7包工程自身會報錯的,還有其他一些細節(jié)要注意酒来,這里就不做介紹了卢未。

一、SwipeRefreshLayout

1堰汉、使用

SwipeRefreshLayout是谷歌推出的一個下拉刷新控件辽社,符合MD設計,使用方便翘鸭,可通過其提供的方法設置控件的尺寸滴铅、顏色、刷新距頂懸浮距離等就乓,具體使用如下:

//設置 SwipeRefreshLayout 的尺寸
mSrl.setSize(SwipeRefreshLayout.LARGE);
//設置 SwipeRefreshLayout 刷新時的顏色切換(可以有無數(shù)種)
mSrl.setColorSchemeColors(Color.RED, Color.YELLOW, Color.GREEN);
//設置 SwipeRefreshLayout 的背景色
mSrl.setBackgroundColor(Color.GRAY);
//設置 SwipeRefreshLayout 的下拉距離
mSrl.setDistanceToTriggerSync(100);
//設置 SwipeRefreshLayout 正在刷新監(jiān)聽
mSrl.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
    @Override
    public void onRefresh() {
        ...
        刷新數(shù)據(jù)源
        ...
    }
});
//手動停止刷新
mSrl.setRefreshing(false);

2汉匙、效果預覽:

SwipeRefreshLayout

二、ListPopupWindow

popupWindow大家都知道生蚁,是Android中彈出式菜單噩翠,而ListPopupWindow顧名思義就是列表型的彈出式菜單,使用該控件可以做到類似下拉菜單的功能邦投,但不限如此伤锚。

1、使用

mListPopupWindow = new ListPopupWindow(this);
//設置 ListPopupWindow 的數(shù)據(jù)適配器
mListPopupWindow.setAdapter(mAdapter);
//設置 ListPopupWindow 的顯示位置(在指定控件下方)
mListPopupWindow.setAnchorView(view);
//設置 ListPopupWindow 的寬度
mListPopupWindow.setWidth(200);
//設置 ListPopupWindow 的高度
mListPopupWindow.setHeight(500);
//設置 ListPopupWindow 的條目點擊事件(必須在show方法前設置志衣,否則無效)
mListPopupWindow.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        Toast.makeText(getApplicationContext(), mItemArr[position], Toast.LENGTH_SHORT).show();
        mListPopupWindow.dismiss();
    }
});
mListPopupWindow.show();

2屯援、效果預覽:

ListPopupWindow

三、PopupMenu

PopupMenu代表彈出式菜單,它會在指定組件上彈出PopupMenu,默認情況下,PopupMenu會顯示在該組件的下方或上方念脯。與ListPopupWindow的區(qū)別在于狞洋,ListPopupWindow使用適配器來填充條目,而PopupMenu則是使用menu布局來填充條目绿店。

1吉懊、使用

PopupMenu popupMenu = new PopupMenu(this, view);
//設置 PopupMenu 的顯示菜單項
popupMenu.inflate(R.menu.main);
// popupMenu.getMenuInflater().inflate(R.menu.main, popupMenu.getMenu());//與一行沒什么區(qū)別

//默認 PopupMenu 不顯示條目icon,可以通過反射來強制使其顯示icon
Field field = popupMenu.getClass().getDeclaredField("mPopup");
field.setAccessible(true);
MenuPopupHelper mHelper = (MenuPopupHelper) field.get(popupMenu);
mHelper.setForceShowIcon(true);

//設置 PopupMenu 的條目點擊事件(點擊后會自動dismiss)
popupMenu.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {
    @Override
    public boolean onMenuItemClick(MenuItem item) {
        Toast.makeText(getApplicationContext(), item.getTitle(), Toast.LENGTH_SHORT).show();
        return false;
    }
});
//顯示 PopupMenu
popupMenu.show();

2、效果預覽:

PopupMenu

四借嗽、LinearLayoutCompat

LinearLayoutCompat是對LinearLayout的擴展怕午,可以為此布局中的子View之間添加分割線divider⊙推牵可以通過自定義屬性divider來指定分割線的樣式,通過自定義屬性showDividers來指定分割線的顯示位置堡距。

1甲锡、使用

<android.support.v7.widget.LinearLayoutCompat
    android:id="@+id/llc"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:orientation="vertical"
    app:divider="@drawable/line"
    app:showDividers="beginning">
        ...
        子控件
        ...
</android.support.v7.widget.LinearLayoutCompat>

2、效果預覽:

LinearLayoutCompat

五羽戒、RecyclerView

RecyclerView是v7包中最重要缤沦、最常用的控件之一,可實現(xiàn)線性列表易稠、網(wǎng)格列表缸废、瀑布流列表效果,卻具有高度解耦驶社、性能優(yōu)化的優(yōu)勢企量,可以說是ListView、GridView的增強版亡电。

1届巩、使用

RecyclerViewr的使用大體分兩步:

  • 設置適配器Adapter
  • 設置布局管理器LayoutManager

1)設置適配器Adapter

RecyclerView使用的適配器必須繼承RecyclerView.Adapter,并指定RecyclerView.ViewHolder份乒,在onCreateViewHolder()中創(chuàng)建自定義的RecyclerView.ViewHolder恕汇,在onBindViewHolder()中對條目進行設置,理解上相對簡單或辖,代碼如下:

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> {

    private List<String> mData;

    public MyAdapter(List<String> data) {
        mData = data;
    }

    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View itemView = View.inflate(parent.getContext(), android.R.layout.simple_list_item_1, null);
        return new MyViewHolder(itemView);
    }

    @Override
    public void onBindViewHolder(MyViewHolder holder, int position) {
        holder.mTv.setText(mData.get(position));
    }

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

    class MyViewHolder extends RecyclerView.ViewHolder {

        TextView mTv;

        public MyViewHolder(View itemView) {
            super(itemView);
            mTv = (TextView) itemView.findViewById(android.R.id.text1);
        }
    }

}

2)設置布局管理器LayoutManager

RecyclerView可以使用布局管理器有三種:

  • LinearLayoutManager:線性列表
  • GridLayoutManager:網(wǎng)格列表
  • StaggeredGridLayoutManager:瀑布流列表

以LinearLayoutManager為例:

LinearLayoutManager(Context context, int orientation, boolean reverseLayout)

在創(chuàng)建LinearLayoutManage時瘾英,可以通過參數(shù)二指定列表的方向,通過參數(shù)三指定數(shù)據(jù)是否反轉(本來數(shù)據(jù)是從上到下進行填充颂暇,當設置了reverseLayout為true時缺谴,數(shù)據(jù)則從下到上進行填充),GridLayoutManager及StaggeredGridLayoutManager的使用也差不多蟀架。

調(diào)用RecyclerView的setLayoutManager()即可設置布局管理器

mRv.setLayoutManager(new LinearLayoutManager(this));

2瓣赂、效果預覽:

RecyclerView

最后附上Demo鏈接

https://github.com/GitLqr/MaterialDesignDemo

歡迎關注微信公眾號:全棧行動
最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市片拍,隨后出現(xiàn)的幾起案子煌集,更是在濱河造成了極大的恐慌,老刑警劉巖捌省,帶你破解...
    沈念sama閱讀 212,816評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件苫纤,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機卷拘,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,729評論 3 385
  • 文/潘曉璐 我一進店門喊废,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人栗弟,你說我怎么就攤上這事污筷。” “怎么了乍赫?”我有些...
    開封第一講書人閱讀 158,300評論 0 348
  • 文/不壞的土叔 我叫張陵瓣蛀,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么风响? 我笑而不...
    開封第一講書人閱讀 56,780評論 1 285
  • 正文 為了忘掉前任酌心,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好稽亏,可當我...
    茶點故事閱讀 65,890評論 6 385
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著讲弄,像睡著了一般措左。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上避除,一...
    開封第一講書人閱讀 50,084評論 1 291
  • 那天怎披,我揣著相機與錄音,去河邊找鬼瓶摆。 笑死凉逛,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的群井。 我是一名探鬼主播状飞,決...
    沈念sama閱讀 39,151評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼书斜!你這毒婦竟也來了诬辈?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,912評論 0 268
  • 序言:老撾萬榮一對情侶失蹤荐吉,失蹤者是張志新(化名)和其女友劉穎焙糟,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體样屠,經(jīng)...
    沈念sama閱讀 44,355評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡穿撮,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,666評論 2 327
  • 正文 我和宋清朗相戀三年缺脉,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片悦穿。...
    茶點故事閱讀 38,809評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡攻礼,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出栗柒,到底是詐尸還是另有隱情礁扮,我是刑警寧澤,帶...
    沈念sama閱讀 34,504評論 4 334
  • 正文 年R本政府宣布瞬沦,位于F島的核電站深员,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏蛙埂。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 40,150評論 3 317
  • 文/蒙蒙 一遮糖、第九天 我趴在偏房一處隱蔽的房頂上張望绣的。 院中可真熱鬧,春花似錦欲账、人聲如沸屡江。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,882評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽惩嘉。三九已至,卻和暖如春踢故,著一層夾襖步出監(jiān)牢的瞬間文黎,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,121評論 1 267
  • 我被黑心中介騙來泰國打工殿较, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留耸峭,地道東北人。 一個月前我還...
    沈念sama閱讀 46,628評論 2 362
  • 正文 我出身青樓淋纲,卻偏偏與公主長得像劳闹,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子洽瞬,可洞房花燭夜當晚...
    茶點故事閱讀 43,724評論 2 351

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