Android Study之Material Design初体验

前言

首先,我们要明确一个,什么是Material Design?Material Design,是谷歌在14年的IO大会上提出的一种新的理念,也被称为新的设计语言(也被称为“原材料设计”),称它为设计语言不为过,但是实际上,这仅仅是谷歌提倡的一种新的设计风格、理念以及设计基本原则。

同时,大家也要明白,它在Android 5.0之后被引入,而LZ,现在才开始接触,了解,希望为时不晚~这里附上官方学习地址:

https://developer.android.google.cn/about/versions/lollipop.html

Material Design基础了解

Material Design重点在于一点,它的存在,让控件有了生命,对应的也拥有了层次感,提升了用户交互感触。

那么层次感又是什么呢?如下图所示:

之前,仅仅是X、Y轴,而现在新增了一个Y轴,也就是屏幕上方位置,具体与用户交互效果如下:


那么对于不同的职业对待它的标准又是什么呢?

美工:尽量遵循Material Design设计,提升原有界面UI以及图标设计;

产品:尽量遵循Material Design界面设计、界面跳转、动画效果、以及与用户交互设计;

开发:实现基于Material Design设计

Material Design基础使用

谷歌开发以及收集了一些最新的开源的项目,汇集到最新的support兼容支持包以及最新的5.X API里面。而关于support包,我们不得不提有如下几点:

android-support-v4:最低兼容到Android 1.6系统,里面包含类似ViewPager等控件;

android-support-v7:最低兼容到Android 2.1的系统,这个工程可以让开发人员统一开发标准,在任何的系统版本下保证兼容性,but,其中有的控件就不能兼容到2.1,比如我们强大的recyclerView,它最低兼容到3.0

而关于兼容性,我们会在下面进行讲解说明。But,大家在引入v7的时候,是不是总会有些问题?这里为大家举例说明一下:

自动导入的appcompat-v7项目自身就是报错的,什么原因?

build的版本太低了,要么是SDK很新但是兼容包没有更新。

appcompat-v7好不容易没报错,但是项目报错,一看控制台:报appcompat里面的某个res/values/theme/xxx属性不存在 等等问题,这又是什么原因?

因为你引入的是很新的appcompat-v7项目,它要求必须很高的版本编译,所以直接使用最高版本编译即可。况且,现在我们一般的app开发,最低兼容到4.0,感觉4.0的设备少之又少了吧,不过也不排除~

Material Design初体验

Material Design控制项目全局样式

引入v7包依赖

编写自定义主题文件

默认创建项目自动创建如下:

@color/colorPrimary@color/colorPrimaryDark@color/colorAccent

基于以上内容,我们进行相应编辑。

@color/mytextcolor@color/colorPrimary_pink@color/colorPrimary_pinkDark@color/background#906292@color/colorPrimary_pink

显示的效果如下:

在此,网上给大家找了一个针对以上属性绘制比较细致的图,方便大家更好的理解和掌握。

拓展控件

在这里,我们首先要明确,我们为什么要使用v7包下面的资源内容呢?

因为这里面是谷歌为了解决Android碎片化而准备的很牛逼的新技能,它的出现,让我们开发出来的app可以在不同的系统版本,不同的厂商定制的Android上面运行有着几乎相同的体验~

不信?那我们举几个简单的例子瞅瞅~专治各种不服

1. AlertDialog与v7 AlertDialog

点击按钮,弹出Dialog,关键代码如下:

publicvoidshowDialog(View view){        AlertDialog.Builder builder =newAlertDialog.Builder(this);        builder.setTitle("提示").setMessage("哇咔咔");        builder.setPositiveButton("嗯嗯好",newDialogInterface.OnClickListener() {

@OverridepublicvoidonClick(DialogInterface dialogInterface,inti){            }        });        builder.setNegativeButton("555No",newDialogInterface.OnClickListener() {

@OverridepublicvoidonClick(DialogInterface dialogInterface,inti){            }        });        builder.show();    }

publicvoidshowSupportDialog(View view){        android.support.v7.app.AlertDialog.Builder builder =newandroid.support.v7.app.AlertDialog.Builder(this);        builder.setTitle("提示").setMessage("哇咔咔");        builder.setPositiveButton("嗯嗯好",newDialogInterface.OnClickListener() {

@OverridepublicvoidonClick(DialogInterface dialogInterface,inti){            }        });        builder.setNegativeButton("555No",newDialogInterface.OnClickListener() {

@OverridepublicvoidonClick(DialogInterface dialogInterface,inti){            }        });        builder.show();    }

而实现的效果,在5.0设备如下:


而在4.4的设备上,差距变真正显示出来了,如下:


2. Button PK AppCompatButton

上码:

效果如下:

啊哦,没啥效果,接着往下瞅瞅~

3. ProgressBar

直接撸码,没啥可说的,布局文件:

activity设置进度条属性:

bar= (ProgressBar) findViewById(R.id.id_pro);

bar.setMax(100);

bar.setProgress(50);

效果如下:


4. SwipeRefreshLayout

上一套布局:


... ...

再来一套初始化:

srl = (SwipeRefreshLayout) findViewById(R.id.id_srl);srl.setSize(SwipeRefreshLayout.LARGE);srl.setOnRefreshListener(newSwipeRefreshLayout.OnRefreshListener() {

@OverridepublicvoidonRefresh(){

// 下拉完毕 加载更多数据

// srl.setRefreshing(false);}});srl.setColorSchemeColors(Color.RED, Color.BLUE, Color.GREEN);

//设置进度条的背景颜色

srl.setProgressBackgroundColorSchemeColor(Color.YELLOW);

//设置下拉多少距离开始刷新

srl.setDistanceToTriggerSync(70);

最后放个大招,效果图:

5. LinearLayoutCompat:给包裹在里面的所有子控件添加间隔线

效果如下:

6. PopupWindow 拓展 ListPopupWindow PopupMenu

ListPopupWindow :

privateArrayAdapter adapter;        String[] items = {"条目0","条目1","条目2","条目3","条目4","条目5","条目6",};

// 数据adapter =newArrayAdapter<>(this, android.R.layout.simple_list_item_1, items);publicvoidshowPopup(View v){

finalListPopupWindow listPopupWindow =newListPopupWindow(this);        listPopupWindow.setAdapter(adapter);

//设置锚点,弹出的位置是相对于v的位置listPopupWindow.setAnchorView(v);        listPopupWindow.setWidth(200);        listPopupWindow.setHeight(500);        listPopupWindow.show();        listPopupWindow.setOnItemClickListener(newAdapterView.OnItemClickListener() {

@OverridepublicvoidonItemClick(AdapterView parent, Viewview,

intposition,longid){                Toast.makeText(getApplicationContext(),"点了第"+ position,0).show();                listPopupWindow.dismiss();            }        });    }

效果如下:

PopupMenu:

编写布局文件:

Activity:

PopupMenu popup =newPopupMenu(SupportUseActivity.this, view);    popup.getMenuInflater()            .inflate(R.menu.main, popup.getMenu());    popup.setOnMenuItemClickListener(newPopupMenu.OnMenuItemClickListener() {

publicbooleanonMenuItemClick(MenuItem item){

returntrue;        }    });    popup.show();

效果如下:


Demo查看地址

https://github.com/HLQ-Struggle/MaterialDesignStudy


该文章转自:http://mp.weixin.qq.com/s/lZW-mH_Ftc00we3-ijTZCw

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容