基于MaterialDesign设计风格的妹纸app的简单实现
代码地址如下:
http://www.demodashi.com/demo/11644.html
*今天看了郭神的第二行代码,深深的被MaterialDesign的设计风格所吸引,然后就照例做了一个小Demo,希望多多支持,图片资源来源于网络。
我的博客地址
照例,一波动态图来袭:
效果还不错吧,就是有点失真…其实在这之前Android的UI风格都不是很美观,所谷歌的设计工程师们就开始研究出了一种新的设计语言—MaterialDesign。在2015年得谷歌大会上推出了DesignSupport库,使得开发者在即使不了解MaterialDesign的情况下也能非常轻松地将自己得应用Material化。
接下来我会按照下面流程介绍如何实现这一效果
Toolbar
DrawerLayout
SnackBar
CardView
RecyclerView
SwipeRefreshLayout
AppBarLayout
CollapsingToolbarLayout
沉浸式状态栏
首先添加依赖:
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.Toolbarandroid: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">
<itemandroid:id="@+id/backup"android:icon="@drawable/ic_backup"android:title="Backup"app:showAsAction="always"/>
<itemandroid:id="@+id/delete"android:icon="@drawable/ic_delete"android:title="Delete"app:showAsAction="ifRoom"/>
<itemandroid: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
在使用前,提前准备好两个东西:
menu
和headerLayout
1. 创建menu
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"><group android:checkableBehavior="single"><itemandroid:id="@+id/nav_call"android:icon="@drawable/nav_call"android:title="妹纸" /><itemandroid:id="@+id/nav_friends"android:icon="@drawable/nav_friends"android:title="段子" /><itemandroid:id="@+id/nav_location"android:icon="@drawable/nav_location"android:title="新闻" /><itemandroid:id="@+id/nav_mail"android:icon="@drawable/nav_mail"android:title="本地" /><itemandroid: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.CircleImageViewandroid:id="@+id/icon_image"android:layout_width="70dp"android:layout_height="70dp"android:layout_centerInParent="true"android:src="@drawable/nav_icon" /><TextViewandroid: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" /><TextViewandroid: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.NavigationViewandroid: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() {@Overridepublic 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() {@Overridepublic 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.RecyclerViewandroid: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() {@Overridepublic void onRefresh() {refreshFruits();}
});
可以给刷新得时候设置颜色的变换,在
onRefresh()
中实现刷新得功能
7. AppBarLayout
先看一下效果:
AppBarLayout
实际是一个垂直方向得LinearLayout
,它在内部做了很多滚动事件得封装,并应用了MaterialDesign设计理念。
在布局中实用:
<android.support.design.widget.CoordinatorLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"><!--android:theme 设置背景主题深色,这样字体会变成白色app:popupTheme 设置弹出的主题是亮色--><android.support.design.widget.AppBarLayoutandroid:fitsSystemWindows="true"android:layout_width="match_parent"android:layout_height="wrap_content"><android.support.v7.widget.Toolbarandroid: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.AppBarLayoutandroid:id="@+id/appBar"android:layout_width="match_parent"android:layout_height="250dp"android:fitsSystemWindows="true"><android.support.design.widget.CollapsingToolbarLayoutandroid: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"><ImageViewandroid: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.Toolbarandroid: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.NestedScrollViewandroid:layout_width="match_parent"android:layout_height="match_parent"app:layout_behavior="@string/appbar_scrolling_view_behavior"><LinearLayoutandroid:orientation="vertical"android:layout_width="match_parent"android:layout_height="wrap_content"><android.support.v7.widget.CardViewandroid: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"><TextViewandroid: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的简单实现相关推荐
- android设计风格是什么软件下载,基于MaterialDesign设计风格的妹纸app的简单实现
今天看了郭神的第二行代码,深深的被MaterialDesign的设计风格所吸引,然后就照例做了一个小Demo,希望多多支持,图片资源来源于网络.先附上我的源码地址:https://github.com ...
- 某金融产品妹纸:四种姿势教你跪舔程序员不要不要的
我 是一个妹纸 是一位互联网金融产品的产品经理 谈起跟程序员哥哥死磕的经历 我先征求了一下朋友们意见 结果 ...... 难道程序员和产品经理真的到了只能互相砍杀的地步了吗?在工作中,我遇到了几种不同 ...
- pyspider实战:爬取想要的妹纸图(附源码)
pyspider基本使用 爬取网页:https://www.99tu.com/sjbz/meinv/的妹纸图片及其标题 网页介绍 "久久图库是一个崭新而夺目的图片视觉冲击平台.汇聚全球最 ...
- 基于Cordova的博客园APP
背景: 自从今年下半年接触一个基于ReactJS 的手机APP项目.开始了解到了Corodva这个神奇的东西.后续自己也自作了一些小的APP放到了应用宝上.8月份开始想做一个博客园APP ...
- Android图片爬虫,看妹纸神器项目源码,ListView单张图片查看
Android图片爬虫,看妹纸神器项目源码 刚自学完安卓,国庆7七天花了6天纯手写入门级app,从集成图片爬虫到整个项目结束真是一步一个坑. 整个项目没有用框架,都是手写纯属练手,项目中主要用到的技术 ...
- 还在肝阴阳师?别错过千年一遇的高冷妹纸
由日本知名公司GREE推出的<消灭都市>,基于Cocos引擎开发,是一款有着丰富剧情故事的跑酷类战斗RPG.虽然已经推出多时,但是现在来看,可玩性依然不输于最新款游戏. <消灭都市& ...
- hexo 博客小功能添加-评论、萌妹纸、相册、字数统计...
前言 前段时间 个人博客全新上线(阿里域名+GitPages+hexo+Yelee) 搭建的博客 我的博客,基础的功能已经实现了,想着既然有了自己的博客就要好好的维护(折腾)一下,于是便参考着别人的博 ...
- 开题报告-基于Android的外卖点餐APP的设计与实现
目录 1.课题研究立项依据 2.文献综述 3.课题研究的基本内容及预期目标或成果 4.课题的研究方案 5.研究进度安排 6.主要参考文献 1.课题研究立项依据 (内容格式要求:字体为5号宋体,行距为固 ...
- 一个97年测试妹纸的成长经历:试用期转正薪资加2K
这篇文章,涉及测试团队管理.测试流程建设.测试从业者能力成长.优秀测试从业者的状态.以及同样是两年的Tester,为何他人如此优秀 . 一切的一切,都是有原因的 . 期望这篇文章,对关注「简尚」公号的 ...
最新文章
- js同时打开两个连接
- numpy-random函数
- 奥鹏C语言专科在线作业答案,奥鹏13春电子科大《C语言(专科)》在线作业3答案...
- Kubernetes数据持久化方案
- sam服务器是什么_使用SAM CLI将机器学习模型部署到无服务器后端
- python日志统计_python试用-日志统计
- 开源加密库和 GnuPG 模块 Libgcrypt 紧急修复严重漏洞
- Atitit path query 路径查询语言 数据检索语言 目录 1.1. List map spel	1 1.2. Html数据 》》Css选择符	1 1.3. Json 》map》
- 思源宋体+Courier New字体
- html传参,css接受?What 弄啥嘞?
- 数据库应用系统的生命周期
- David I 盛大之行
- 偶现BUG的处理方式
- 什么是android应用程序未安装,应用程序未安装,教您安卓系统应用程序未安装怎么解决...
- “融而开放、合以创新”T-HIM融合通信技术开发实战
- 第二章华氏度摄氏度转换
- kde调整分辨率_7个很酷的KDE调整将改变您的生活
- 爬取段子网里面的搞笑段子
- ubuntu中如何运行exe文件
- Rundll32解密
热门文章
- 【飞控理论】从零开始学习Kalman Filters之二:最优状态估计、最优估计算法和方程
- 【C语言】一维数组排序(函数,数组和循环结构语句)
- 想要考计算机证要学,学长忠告:建议新生要考取的三类证书,不然你就虚度四年了...
- 32位有符号整数_008. 字符串转换整数 (atoi) | Leetcode题解
- 【重难点】【Java基础 03】hashCode() 和 equals()、代理模式
- Mybatisplus插件
- 快速入门MyBatis-Plus,看这一篇就够了。
- Apache/Tomcat/JBOSS/Neginx/lighttpd/Jetty 的区别
- [转] ASP.NET使用AJAX联动
- [hdu1269]迷宫城堡(SCC)