代码地址如下:
http://www.demodashi.com/demo/11644.html

*今天看了郭神的第二行代码,深深的被MaterialDesign的设计风格所吸引,然后就照例做了一个小Demo,希望多多支持,图片资源来源于网络。

我的博客地址

照例,一波动态图来袭:

效果还不错吧,就是有点失真...其实在这之前Android的UI风格都不是很美观,所谷歌的设计工程师们就开始研究出了一种新的设计语言---MaterialDesign。在2015年得谷歌大会上推出了DesignSupport库,使得开发者在即使不了解MaterialDesign的情况下也能非常轻松地将自己得应用Material化。

接下来我会按照下面流程介绍如何实现这一效果

  1. Toolbar
  2. DrawerLayout
  3. SnackBar
  4. CardView
  5. RecyclerView
  6. SwipeRefreshLayout
  7. AppBarLayout
  8. CollapsingToolbarLayout
  9. 沉浸式状态栏

首先添加依赖:

compile 'com.android.support:appcompat-v7:24.2.1'
compile 'com.android.support:design:24.0.0'
compile'com.android.support:recyclerview-v7:24.0.0'
compile 'com.github.bumptech.glide:glide:3.7.0'
compile 'com.android.support:cardview-v7:24.1.1'
compile 'de.hdodenhof:circleimageview:2.1.0'

1. Toolbar

效果如下:

它有点类似于之前得ActionBar,就是活动最顶部得哪个标题栏。但是,它只能位于活动得顶部,从而影响效果,所有官方现在已经不再建议使用ActionBar了。

1. 设置AppTheme("NoActionBar")

	<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
...
</style>

2. 添加控件

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

其他属性我就不说了,app:popupTheme 这个是单独将弹出得菜单项指定成淡色主题。

这个时候需要指定一个新的命名空间 xmlns:app 这是由于MaterialDesign是在Android5.0系统中才出现得,而很多Material属性在5.0之前得系统中是不存在得,那么为了能够兼容之前得老系统,我们就得使用 app:

3. 在代码中使用

mToolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);

首先通过 findViewById 得到Toobar实例,然后调用setSupportActionBar()方法将实例传入。

4. 设置菜单选项

<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/backup"
android:icon="@drawable/ic_backup"
android:title="Backup"
app:showAsAction="always"/>
<item
android:id="@+id/delete"
android:icon="@drawable/ic_delete"
android:title="Delete"
app:showAsAction="ifRoom"/>
<item
android:id="@+id/settings"
android:icon="@drawable/ic_settings"
android:title="Settings"
app:showAsAction="never"/>
</menu>

在menu文件夹中创建xml文件

app:showAsAction 来指定按钮得显示位置

ifRoom: 表示屏幕空间足够得情况下显示再Toolbar,不够就显示再菜单中

always: 表示永远显示在Toolbar中,如果屏幕空间不够则不显示

never: 表示永远显示在菜单当中

5. 在代码中实用菜单选项

/***************************
* 创建菜单
***************************/
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu, menu);
return true;
} /***************************
* 给菜单设置点击事件
***************************/
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.backup:
Toast.makeText(MainActivity.this, "backup", Toast.LENGTH_SHORT).show();
break;
case R.id.delete:
Toast.makeText(this, "delete", Toast.LENGTH_SHORT).show();
break;
case R.id.settings:
Toast.makeText(this, "setting", Toast.LENGTH_SHORT).show();
break;
default:
}
return true;
}

2. DrawerLayout

这个在我之前得文章讲过,可以直接点击查看 高大上的侧滑菜单DrawerLayout,解决了不能全屏滑动的问题

不过左侧可以再优化下,实用新的控件 NavigationView

NavigationView

在使用前,提前准备好两个东西:menuheaderLayout

1. 创建menu

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="@+id/nav_call"
android:icon="@drawable/nav_call"
android:title="妹纸" />
<item
android:id="@+id/nav_friends"
android:icon="@drawable/nav_friends"
android:title="段子" />
<item
android:id="@+id/nav_location"
android:icon="@drawable/nav_location"
android:title="新闻" />
<item
android:id="@+id/nav_mail"
android:icon="@drawable/nav_mail"
android:title="本地" />
<item
android:id="@+id/nav_task"
android:icon="@drawable/nav_task"
android:title="收藏" />
</group>
</menu>

将group得 checkableBehavior 属性指定为single,表示所有得菜单项只能单选

2. 创建headerLayout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="180dp"
android:background="?attr/colorPrimary"
android:padding="10dp"> <de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/icon_image"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_centerInParent="true"
android:src="@drawable/nav_icon" /> <TextView
android:id="@+id/username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="1012126908@qq.com"
android:textColor="#FFF"
android:textSize="14sp" /> <TextView
android:id="@+id/mail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/username"
android:text="夏韦子"
android:textColor="#FFF"
android:textSize="14sp" /> </RelativeLayout>

3. 在布局中使用

<android.support.design.widget.NavigationView
android:id="@+id/nv_left"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="left"
app:headerLayout="@layout/nav_header"
app:menu="@menu/nav_menu">
</android.support.design.widget.NavigationView>

app:headerLayout : headerLayout文件

app:menu: menu文件

android:layout_gravity="left" 设置为左侧菜单

4. 在代码中使用

//给NavigationView设置item选择事件
mNavigationView.setCheckedItem(R.id.nav_call);
mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem item) {
...
return true;
}
});

3. SnackBar

跟Toast有点相似,不过不同点在于加入一个可交互按钮,当用户点击按钮得时候可以执行一些额外得逻辑操作

效果如下:

使用起来比较简单,跟Toast很像。

Snackbar snackbar = Snackbar.make(getCurrentFocus(), item.getTitle(), Snackbar.LENGTH_SHORT);
snackbar.setAction("Undo", new View.OnClickListener() {
@Override
public void onClick(View v) { }
});
snackbar.setActionTextColor(Color.BLUE);
snackbar.show();

4. CardView

效果如下:

CardView 其实是一个FrameLayout,只是额外提供了圆角和阴影效果,

直接在布局中使用。

<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/selectableItemBackground"
app:cardElevation="10dp"
android:layout_margin="5dp"
app:cardCornerRadius="18dp">
...//子布局
</android.support.v7.widget.CardView>

app:cardCornerRadius 指定卡片圆角得弧度,数值越大,圆角得弧度越大

app:cardElevation 制定卡片得高度,高度值越大,投影得范围越大

5. RecyclerView

这个在之前得文章也说过,如果需要查看,请移驾到: 简单粗暴----RecyclerView

本次得Demo里数据我就不详细说了,太多了,很简单。

6. SwipeRefreshLayout

效果如下:



使用 SwipeRefreshLayout 直接可以实现下拉刷新的功能

1. 在布局中添加

<android.support.v4.widget.SwipeRefreshLayout
android:id="@+id/srl_main"
android:layout_width="match_parent"
android:layout_height="match_parent"> <android.support.v7.widget.RecyclerView
android:id="@+id/rv_main"
android:layout_width="match_parent"
android:layout_height="match_parent"> </android.support.v7.widget.RecyclerView>
</android.support.v4.widget.SwipeRefreshLayout>

2. 在代码中添加

mRefreshLayout.setColorSchemeColors(Color.RED, Color.BLUE, Color.YELLOW, Color.GREEN);
mRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
@Override
public void onRefresh() {
refreshFruits();
}
});

可以给刷新得时候设置颜色的变换,在 onRefresh() 中实现刷新得功能

7. AppBarLayout

先看一下效果:

AppBarLayout 实际是一个垂直方向得 LinearLayout,它在内部做了很多滚动事件得封装,并应用了MaterialDesign设计理念。

在布局中实用:

<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--
android:theme 设置背景主题深色,这样字体会变成白色
app:popupTheme 设置弹出的主题是亮色
-->
<android.support.design.widget.AppBarLayout
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"> <android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:popupTheme="@style/Theme.AppCompat.Light" />
</android.support.design.widget.AppBarLayout> <android.support.v4.widget.SwipeRefreshLayout
...
app:layout_behavior="@string/appbar_scrolling_view_behavior">
...
</android.support.v4.widget.SwipeRefreshLayout> </android.support.design.widget.CoordinatorLayout>

app:layout_scrollFlags: 当AppBarLayout接收到滚动事件得时候,它内部得子空间就是通过这个属性影响这些事件的

scroll:表示当 RecyclerView向上滚动得时候,Toolbar会跟着一起向上滚动并实现隐藏。

enterAlways:表示当 RecyclerView向下滚动得时候,Toolbar会跟着一起向下滚动并重新显示。

snap:表示当Toolbar还没有完全隐藏或显示得时候,会根据当前滚动得距离,自动选择是隐藏还是显示。

8. CollapsingToolbarLayout

效果如下:



可折叠式标题栏这个就比之前就负责点了,我先贴代码,然后一一解释。

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"> <android.support.design.widget.AppBarLayout
android:id="@+id/appBar"
android:layout_width="match_parent"
android:layout_height="250dp"
android:fitsSystemWindows="true"> <android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView
android:id="@+id/fruit_image_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" /> <android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout> <android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"> <LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"> <android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="15dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="35dp"
app:cardCornerRadius="4dp"> <TextView
android:id="@+id/fruit_content_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp" />
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView> </android.support.design.widget.CoordinatorLayout>

app:contentScrim:在趋于折叠状态以及折叠之后得背景色

app:layout_scrollFlags 这个之前讲过

scroll :表示 CollapsingToolbarLayout会随着妹纸内容详情得滚动一起滚动

exitUntilCollapsed:表示当 CollapsingToolbarLayout随着滚动完成折叠之后就保留在界面上,不再移出屏幕

app:layout_collapseMode="pin" 把Toolbar指定成pin,表示在折叠的过程中位置始终保持不变

app:layout_collapseMode="parallax" ImageView 指定成 parallax,表示会在折叠得过程中产生一定得错位偏移,这种模式得视觉效果会非常好

NestedScrollView :在ScrollView基础上增加了嵌套响应滚动事件得功能

9. 沉浸式状态栏

这个只是在Android5.0后才有的,设置状态栏为透明

setContentView();之前添加代码:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
//透明状态栏
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
//透明导航栏
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
}

需要在直接子布局添加:android:fitsSystemWindows="true 表示该控件会出现在系统状态栏里

项目文件截图:

基于MaterialDesign设计风格的妹纸app的简单实现

代码地址如下:
http://www.demodashi.com/demo/11644.html

注:本文著作权归作者,由demo大师代发,拒绝转载,转载需要作者授权

基于MaterialDesign设计风格的妹纸app的简单实现的更多相关文章

  1. 50.EasyGank妹纸App

    50.EasyGank妹纸App 前言 基于MVP模式下 , RxJava+RxAndroid+Retrofit的组合 . RxJava RxAndroid Retrofit Okhttp Gson ...

  2. 小程序-demo:妹纸图

    ylbtech-小程序-demo:妹纸图 1.返回顶部 0.     1.app.js //app.js App({ onLaunch: function () { //调用API从本地缓存中获取数据 ...

  3. 一个97年测试妹纸的成长经历,转正直接涨薪2K

    这篇文章,涉及测试团队管理.测试流程建设.测试从业者能力成长.优秀测试从业者的状态.以及同样是两年的Tester,为何他人如此优秀 . 一切的一切,都是有原因的 . 期望这篇文章,对关注「简尚」公号的 ...

  4. .net妹纸转Java---java环境的搭建,myeclipse10.0 的安装环境变量配置和破解

    啦啦啦 ,因为公司项目需要,从我大火炉--大武汉被拖到了更大的火炉--大广西  其实一开始 我的内心是拒绝的. 但是我在大武汉呆了近2年木有出过远门,对, 生活除了眼前的苟且,还有远方的苟且.怀揣这样 ...

  5. 利用WiFi钓鱼法追邻居漂亮妹纸

    假设,你的邻居是一个妹纸.漂亮单身,你,技术狗,家穷人丑,集体户口.像借酱油这种老套搭讪方式的成功率对你来说实在很低. 你要做的是了解她,然后接近她.通过搜集更多的情报,为创造机会提供帮助. 初级情报 ...

  6. 拥抱ARM妹纸第二季 之 第二次 约会需要浪漫,这么大灯泡怎么弄?

    终于轮到俺的小穆出场啦.有请能让太阳也为之暗淡的小穆闪亮登场-,鼓掌吧,欢呼吧!-- ♪♪ We can burn brighter Than the sun ~~~ ♪♪ “谢谢---“ 唱的太棒啦 ...

  7. UESTC_秋实大哥与妹纸 2015 UESTC Training for Data Structures<Problem F>

    F - 秋实大哥与妹纸 Time Limit: 3000/1000MS (Java/Others)     Memory Limit: 1500/1500KB (Java/Others) Submit ...

  8. 第一次当Uber司机,就拉到漂亮妹纸

    黑马哥的Uber司机端装上很久了,一次活儿也没拉,心里一直有一种当“张师傅”的冲动.黑马哥当Uber司机,肯定不是为了图挣钱,也不是因为Uber有“新约炮神器”的称号,能通过“拉活”来泡妹纸.黑马哥体 ...

  9. Math.random引发的骗术,绝对是用随机数骗前端妹纸的最佳方法

    我觉得今天我运气特好,今天我们来赌一赌,我们来搞个随机数,Math.floor(Math.random() * 10),如果这个数等于0到7,这个月的饭,我全请了,如果是8或9,你就请一个礼拜成不?于 ...

随机推荐

  1. 上传文件提示413 Request Entity Too Large错误

    打开nginx主配置文件nginx.conf 一般在/usr/local/nginx/conf/nginx.conf这个位置 找到http{}段并修改以下内容 client_max_body_size ...

  2. ionic3 关于屏幕方向问题

    关于屏幕方向问题 使用ionic-native中的screen-orientation ionic cordova plugin add cordova-plugin-screen-orientati ...

  3. AC日记——Dynamic Problem Scoring codeforces 807d

    Dynamic Problem Scoring 思路: 水题: 代码: #include <cstdio> #include <cstring> #include <io ...

  4. System Center VMM请注意不同语言版本的差异

    在私有云的项目中,经常需要判断System Center一些组件的连接是否OK. 我这里有开发,和测试两个环境,开发是英文版的System Center VMM,测试用的是中文版的System Cen ...

  5. Oracle SQL*Loader commit point tips

    http://www.dba-oracle.com/t_sql_loader_commit_frequency.htm - Question:  Can I control the commit fr ...

  6. n2n搭建手记-1-V1

    搭建环境 supernode :阿里云主机一台 aly1(Centos 6.5) edg2node:美团云机器两台 mty1,mty2(Centos 7.0) Step-1 各机器安装subviers ...

  7. [HDU5739]Fantasia(圆方树DP)

    题意:给一张无向点带有权无向图.定义连通图的权值为图中各点权的乘积,图的权值为其包含的各连通图的权和.设z_i为删除i点后图的权值,求$S = (\sum\limits_{i=1}^{n}i\cdot ...

  8. python3-开发面试题(python)6.23基础篇(2)

    1.请至少列举5个 PEP8 规范(越多越好). 一.代码编排 1.缩进.4个空格的缩进,不使用Tap,更不能混合使用Tap和空格 2.每行最大长度79,换行可以使用反斜杠,最好使用圆括号.换行点要在 ...

  9. 【R笔记】glm函数报错原因及解析

    R语言glm函数学习:  [转载时请注明来源]:http://www.cnblogs.com/runner-ljt/ Ljt 作为一个初学者,水平有限,欢迎交流指正. glm函数介绍: glm(for ...

  10. Python自带的hmac模块

    Python自带的hmac模块实现了标准的Hmac算法 我们首先需要准备待计算的原始消息message,随机key,哈希算法,这里采用MD5,使用hmac的代码如下: import hmac mess ...