android开发游记:meterial design 5.0 开源控件整套合集 及使用demo
android 的5.0公布不光google官方给出了一些新控件,同一时候还给出了一套符合material design风格的设计标准,这套标准将未来将覆盖google全部产品包括pc端,站点,移动端。在android端上陆续出现了很多开源的控件库開始以google的以 material design为指导而设计的新风格控件库。对照了多个库之后这里推荐一套比較齐全且效果比較好的控件库。用法和传统控件高度一致,并向下兼容。附上使用方式和demo下载。
效果图:
这是由rey5137公布的material design libaray,这里能够下载源代码。里面也有demo,可是相对有点难懂:
material design libaray源代码下载地址
以下这个是我使用libaray库的控件顺便做的一个适合学习的简单版demo
demo效果图:
配置和用法:
首先使用自己定义Application,在onCreate()中调用ThemeManager.init()
public class MyApplication extends Application{
@Override
public void onCreate() {
super.onCreate();
ThemeManager.init(this, 2, 0, null);
}
}
接着。就能够在布局文件里使用新控件来取代传统的控件了。这里以button为例:
<com.rey.material.widget.Button
android:layout_width="0dp"
android:layout_height="36dp"
android:text="BUTTON"
style="@style/LightFlatButtonRippleStyle"/>
使用方式和传统控件一致,注意这里的style使用了自己定义的风格,你也须要在项目中取配置每一个控件的风格,继承自Material Libaray中的style。以我定义的为例,代码例如以下:
<style name="LightFlatButtonRippleStyle" parent="Material.Drawable.Ripple.Touch.Light">
<item name="android:background">@null</item>
<item name="rd_cornerRadius">4dp</item>
<item name="android:textAppearance">@style/Base.TextAppearance.AppCompat.Button</item>
<item name="android:textColor">@color/abc_primary_text_material_light</item>
</style>
这样就能够执行看到效果了。
须要制定style的控件非常多,难免会让style.xml文件变得混乱,能够新建一个styles_light.xml,写在这里面这样既不会与style.xml冲突也不会导致style.xml变得混乱。
这里我把我定义的styles_light.xml贴出来。包括10多种控件的40多种风格,能够通过改动这个xml来配置自己须要的风格样式:
这里贴上自己的styles_light代码:
<?
xml version="1.0" encoding="utf-8"?
>
<resources>
<!-- Button Style -->
<style name="LightFlatButtonRippleStyle" parent="Material.Drawable.Ripple.Touch.Light">
<item name="android:background">@null</item>
<item name="rd_cornerRadius">4dp</item>
<item name="android:textAppearance">@style/Base.TextAppearance.AppCompat.Button</item>
<item name="android:textColor">@color/abc_primary_text_material_light</item>
</style>
<style name="LightFlatColorButtonRippleStyle" parent="Material.Drawable.Ripple.Touch.Light">
<item name="android:background">@null</item>
<item name="rd_backgroundColor">@color/colorPrimaryQuarter</item>
<item name="rd_rippleColor">@color/colorPrimaryQuarter</item>
<item name="rd_cornerRadius">4dp</item>
<item name="rd_delayClick">afterRelease</item>
<item name="android:textAppearance">@style/Base.TextAppearance.AppCompat.Button</item>
<item name="android:textColor">@color/colorPrimary</item>
</style>
<style name="LightFlatWaveButtonRippleStyle" parent="Material.Drawable.Ripple.Wave.Light">
<item name="android:background">@null</item>
<item name="rd_cornerRadius">4dp</item>
<item name="android:textAppearance">@style/Base.TextAppearance.AppCompat.Button</item>
<item name="android:textColor">@color/abc_primary_text_material_light</item>
</style>
<style name="LightFlatWaveColorButtonRippleStyle" parent="Material.Drawable.Ripple.Wave.Light">
<item name="android:background">@null</item>
<item name="rd_rippleColor">@color/colorPrimaryHalf</item>
<item name="rd_cornerRadius">4dp</item>
<item name="rd_delayClick">afterRelease</item>
<item name="android:textAppearance">@style/Base.TextAppearance.AppCompat.Button</item>
<item name="android:textColor">@color/colorPrimary</item>
</style>
<style name="LightRaiseButtonRippleStyle" parent="Material.Drawable.Ripple.Touch.Light">
<item name="android:background">@drawable/bg_bt_raise</item>
<item name="rd_leftPadding">1dp</item>
<item name="rd_topPadding">1dp</item>
<item name="rd_rightPadding">1dp</item>
<item name="rd_bottomPadding">2dp</item>
<item name="android:textAppearance">@style/Base.TextAppearance.AppCompat.Button</item>
<item name="android:textColor">@color/abc_primary_text_material_light</item>
</style>
<style name="LightRaiseColorButtonRippleStyle" parent="Material.Drawable.Ripple.Touch.Light">
<item name="android:background">@drawable/bg_bt_raise_color</item>
<item name="rd_rippleColor">#33000000</item>
<item name="rd_leftPadding">1dp</item>
<item name="rd_topPadding">1dp</item>
<item name="rd_rightPadding">1dp</item>
<item name="rd_bottomPadding">2dp</item>
<item name="rd_delayClick">none</item>
<item name="android:textAppearance">@style/Base.TextAppearance.AppCompat.Button</item>
<item name="android:textColor">@color/abc_primary_text_material_dark</item>
</style>
<style name="LightRaiseWaveButtonRippleStyle" parent="Material.Drawable.Ripple.Wave.Light">
<item name="android:background">@drawable/bg_bt_raise</item>
<item name="rd_leftPadding">1dp</item>
<item name="rd_topPadding">1dp</item>
<item name="rd_rightPadding">1dp</item>
<item name="rd_bottomPadding">2dp</item>
<item name="android:textAppearance">@style/Base.TextAppearance.AppCompat.Button</item>
<item name="android:textColor">@color/abc_primary_text_material_light</item>
</style>
<style name="LightRaiseWaveColorButtonRippleStyle" parent="Material.Drawable.Ripple.Wave.Light">
<item name="android:background">@drawable/bg_bt_raise_color</item>
<item name="rd_rippleColor">#33000000</item>
<item name="rd_leftPadding">1dp</item>
<item name="rd_topPadding">1dp</item>
<item name="rd_rightPadding">1dp</item>
<item name="rd_bottomPadding">2dp</item>
<item name="rd_delayClick">afterRelease</item>
<item name="android:textAppearance">@style/Base.TextAppearance.AppCompat.Button</item>
<item name="android:textColor">@color/abc_primary_text_material_dark</item>
</style>
<!--design float button-->
<style name="LightFloatingActionButtonIcon" >
<item name="lmd_state">@xml/fab_icon_states</item>
<item name="lmd_curState">0</item>
<item name="lmd_padding">2dp</item>
<item name="lmd_animDuration">400</item>
<item name="lmd_interpolator">@android:anim/accelerate_decelerate_interpolator</item>
<item name="lmd_strokeSize">3dp</item>
<item name="lmd_strokeColor">#FFFFFFFF</item>
<item name="lmd_strokeCap">butt</item>
<item name="lmd_strokeJoin">miter</item>
<item name="lmd_clockwise">true</item>
</style>
<style name="DarkFloatingActionButtonIcon" parent="LightFloatingActionButtonIcon">
<item name="lmd_strokeColor">#FF000000</item>
</style>
<style name="LightFAB" parent="Material.Drawable.Ripple.Touch.Light">
<item name="fab_backgroundColor">#FFDFDFDF</item>
<item name="fab_elevation">4dp</item>
<item name="fab_iconLineMorphing">@style/DarkFloatingActionButtonIcon</item>
</style>
<style name="LightFABColor" parent="Material.Drawable.Ripple.Touch.Light">
<item name="rd_rippleColor">#33000000</item>
<item name="fab_backgroundColor">@color/colorPrimary</item>
<item name="fab_elevation">4dp</item>
<item name="fab_iconLineMorphing">@style/LightFloatingActionButtonIcon</item>
</style>
<style name="LightFABWave" parent="Material.Drawable.Ripple.Wave.Light">
<item name="fab_backgroundColor">#FFDFDFDF</item>
<item name="fab_elevation">4dp</item>
<item name="fab_iconLineMorphing">@style/DarkFloatingActionButtonIcon</item>
</style>
<style name="LightFABWaveColor" parent="Material.Drawable.Ripple.Wave.Light">
<item name="rd_rippleColor">#33000000</item>
<item name="fab_backgroundColor">@color/colorPrimary</item>
<item name="fab_elevation">4dp</item>
<item name="fab_iconLineMorphing">@style/LightFloatingActionButtonIcon</item>
</style>
<!-- Circular Progress Style -->
<style name="LightCircularProgressDrawable" parent="Material.Drawable.CircularProgress">
<item name="cpd_strokeColor">@color/colorPrimary</item>
</style>
<style name="LightColorCircularProgressDrawable" parent="Material.Drawable.CircularProgress">
<item name="cpd_strokeColors">@array/progress_colors_light</item>
</style>
<style name="LightInCircularProgressDrawable" parent="Material.Drawable.CircularProgress">
<item name="cpd_strokeColor">@color/colorPrimary</item>
<item name="cpd_inAnimDuration">800</item>
<item name="cpd_inStepPercent">0.5</item>
<item name="cpd_inStepColors">@array/in_colors_light</item>
<item name="cpd_outAnimDuration">400</item>
</style>
<style name="LightInColorCircularProgressDrawable" parent="LightInCircularProgressDrawable">
<item name="cpd_strokeColors">@array/progress_colors_light</item>
</style>
<style name="LightDeterminateCircularProgressDrawable" parent="Material.Drawable.CircularProgress.Determinate">
<item name="cpd_strokeColor">@color/colorPrimary</item>
<item name="cpd_inAnimDuration">0</item>
<item name="cpd_outAnimDuration">0</item>
<item name="cpd_initialAngle">-90</item>
</style>
<style name="LightDeterminateInCircularProgressDrawable" parent="LightDeterminateCircularProgressDrawable">
<item name="cpd_inAnimDuration">400</item>
<item name="cpd_outAnimDuration">400</item>
</style>
<style name="LightCircularProgressView">
<item name="pv_autostart">false</item>
<item name="pv_circular">true</item>
<item name="pv_progressStyle">@style/LightCircularProgressDrawable</item>
<item name="pv_progressMode">indeterminate</item>
</style>
<style name="LightColorCircularProgressView" parent="LightCircularProgressView">
<item name="pv_progressStyle">@style/LightColorCircularProgressDrawable</item>
</style>
<style name="LightInCircularProgressView" parent="LightCircularProgressView">
<item name="pv_progressStyle">@style/LightInCircularProgressDrawable</item>
</style>
<style name="LightInColorCircularProgressView" parent="LightCircularProgressView">
<item name="pv_progressStyle">@style/LightInColorCircularProgressDrawable</item>
</style>
<style name="LightDeterminateCircularProgressView">
<item name="pv_autostart">false</item>
<item name="pv_circular">true</item>
<item name="pv_progressStyle">@style/LightDeterminateCircularProgressDrawable</item>
<item name="pv_progressMode">determinate</item>
</style>
<style name="LightDeterminateInCircularProgressView" parent="LightDeterminateCircularProgressView">
<item name="pv_progressStyle">@style/LightDeterminateInCircularProgressDrawable</item>
</style>
<!-- Linear Progress Style -->
<style name="LightLinearProgressDrawable" parent="Material.Drawable.LinearProgress">
<item name="lpd_strokeColor">@color/colorPrimary</item>
<item name="lpd_strokeSecondaryColor">@android:color/transparent</item>
</style>
<style name="LightColorLinearProgressDrawable" parent="LightLinearProgressDrawable">
<item name="lpd_strokeColors">@array/progress_colors_light</item>
</style>
<style name="LightDeterminateLinearProgressDrawable" parent="Material.Drawable.LinearProgress.Determinate">
<item name="lpd_strokeColor">@color/colorPrimary</item>
<item name="lpd_strokeSecondaryColor">@color/colorPrimaryQuarter</item>
</style>
<style name="LightBufferLinearProgressDrawable" parent="LightDeterminateLinearProgressDrawable">
<item name="lpd_travelDuration">400</item>
<item name="lpd_transformDuration">400</item>
<item name="lpd_keepDuration">100</item>
</style>
<style name="LightLinearProgressView">
<item name="pv_autostart">false</item>
<item name="pv_circular">false</item>
<item name="pv_progressStyle">@style/LightLinearProgressDrawable</item>
<item name="pv_progressMode">indeterminate</item>
</style>
<style name="LightColorLinearProgressView" parent="LightLinearProgressView">
<item name="pv_progressStyle">@style/LightColorLinearProgressDrawable</item>
</style>
<style name="LightDeterminateLinearProgressView" parent="LightLinearProgressView">
<item name="pv_progressStyle">@style/LightDeterminateLinearProgressDrawable</item>
<item name="pv_progressMode">determinate</item>
</style>
<style name="LightQueryLinearProgressView" parent="LightLinearProgressView">
<item name="pv_progressStyle">@style/LightDeterminateLinearProgressDrawable</item>
<item name="pv_progressMode">query</item>
</style>
<style name="LightBufferLinearProgressView" parent="LightLinearProgressView">
<item name="pv_progressStyle">@style/LightBufferLinearProgressDrawable</item>
<item name="pv_progressMode">buffer</item>
</style>
<!-- EditText Style-->
<style name="LightEditText" parent="Material.Widget.EditText.Light">
<item name="android:textAppearance">@style/Base.TextAppearance.AppCompat.Body1</item>
<item name="android:textColor">@color/abc_primary_text_material_light</item>
<item name="android:textColorHint">@color/abc_secondary_text_material_light</item>
<item name="et_dividerColor">@drawable/color_divider_light</item>
<item name="et_labelTextColor">@drawable/color_label_light</item>
<item name="et_supportTextErrorColor">#FFFF0000</item>
<item name="et_dividerErrorColor">#FFFF0000</item>
</style>
<!-- Slider Style -->
<style name="LightSlider" parent="Material.Widget.Slider">
<item name="sl_primaryColor">@color/colorPrimary</item>
</style>
<style name="LightSliderDiscrete" parent="Material.Widget.Slider.Discrete">
<item name="sl_primaryColor">@color/colorPrimary</item>
<item name="sl_stepValue">1</item>
</style>
<!-- Spinner Style -->
<style name="MySpinnerTouchStyle" parent="Material.Drawable.Ripple.Touch.Light">
<item name="rd_backgroundColor">@color/colorPrimaryQuarter</item>
<item name="rd_rippleColor">@color/colorPrimaryQuarter</item>
</style>
<style name="LightSpinner" parent="Material.Widget.Spinner.Light">
<item name="rd_style">@style/MySpinnerTouchStyle</item>
<item name="spn_labelEnable">true</item>
<item name="spn_arrowSwitchMode">true</item>
<item name="spn_arrowAnimDuration">@android:integer/config_shortAnimTime</item><!---->
<item name="spn_arrowInterpolator">@android:anim/decelerate_interpolator</item>
<item name="spn_arrowColor">@color/colorControlNormal</item>
<item name="android:popupBackground">@drawable/abc_popup_background_mtrl_mult</item>
</style>
<style name="LightSpinnerNoArrow" parent="LightSpinner">
<item name="spn_arrowSize">0dp</item>
<item name="spn_popupItemAnimation">@anim/abc_fade_in</item>
</style>
<style name="LightSpinnerItem" parent="MySpinnerTouchStyle">
<item name="rd_rippleAnimDuration">100</item>
<item name="rd_maskType">rectangle</item>
<item name="rd_cornerRadius">0dp</item>
<item name="rd_delayClick">none</item>
<item name="android:textAppearance">@style/TextAppearance.AppCompat.Body1</item>
<item name="android:textColor">@color/abc_primary_text_material_light</item>
</style>
<!--bottomsheet dialog style-->
<style name="MyBottomSheetDialogStyle" parent="Material.App.BottomSheetDialog">
<item name="android:layout_height">wrap_content</item>
<item name="android:windowIsFloating">false</item>
<item name="bsd_inDuration">200</item>
<item name="bsd_inInterpolator">@android:anim/decelerate_interpolator</item>
<item name="bsd_outDuration">200</item>
<item name="bsd_outInterpolator">@android:anim/accelerate_interpolator</item>
<item name="bsd_cancelable">true</item>
<item name="bsd_canceledOnTouchOutside">true</item>
<item name="bsd_dimAmount">0.5</item>
</style>
</resources>
注意关联的colors.xml、strings.xml。在demo里面能找到。篇幅有限就不贴了。
引入上面的style_light.xml之后,就能够愉快的使用新控件了。
android开发游记:meterial design 5.0 开源控件整套合集 及使用demo的更多相关文章
- android 开发进阶 自定义控件-仿ios自动清除控件
先上图: 开发中经常需要自定义view控件或者组合控件,某些控件可能需要一些额外的配置.比如自定义一个标题栏,你可能需要根据不同尺寸的手机定制不同长度的标题栏,或者更常见的你需要配置标题栏的背景,这时 ...
- Android开发技巧——定制仿微信图片裁剪控件
拍照--裁剪,或者是选择图片--裁剪,是我们设置头像或上传图片时经常需要的一组操作.上篇讲了Camera的使用,这篇讲一下我对图片裁剪的实现. 背景 下面的需求都来自产品. 裁剪图片要像微信那样,拖动 ...
- Android 开发最牛的图片轮播控件,基本什么都包含了。
Android图片轮播控件 源码下载地址: Android 图片轮播 现在的绝大数app都有banner界面,实现循环播放多个广告图片和手动滑动循环等功能.因为ViewPager并不支持循环翻页, ...
- Android开发:在布局里移动ImageView控件
在做一个app时碰到需要移动一个图案的位置,查了一上午资料都没找到demo,自己写一个吧 RelativeLayout.LayoutParams lp = new RelativeLayout.Lay ...
- android开发 软键盘出现后 防止EditText控件遮挡 总体平移UI
在EditText控件接近底部的情况下 软键盘弹出后会把获得焦点的EditText控件遮挡 无法看到输入信息 防止这种情况发生 就须要设置AndroidManifest.xml的属性 前面的xml信 ...
- 学习笔记001之[Android开发视频教学].01_06_Android当中的常见控件
文本框,按钮 菜单按钮(需复写两个方法) 后续需完成联系代码.
- eclipse android开发,文本编辑xml文件,给控件添加ID后,R.java,不自动的问题。
直接编辑xml文件给控件添加id,不自动更新.原来的id写法:@id/et_tel 然后改写成这样:@+id/et_tel 然后就好了!操`1
- 开源整理:Android App新手指引开源控件
开源整理:Android App新手指引开源控件 一个App第一次与用户接触或者发生大版本更新时,常常会用户进行新手引导,而一个好的新手指引,往往能够方便新用户快速了解操作你的应用功能.新手指引的重要 ...
- Android 5.0新控件——FloatingActionButton(悬浮按钮)
Android 5.0新控件--FloatingActionButton(悬浮按钮) FloatingActionButton是5.0以后的新控件,一个悬浮按钮,之所以叫做悬浮按钮,主要是因为自带阴影 ...
随机推荐
- sublime text mac使用技巧
工欲善其事,必先利其器 1.列选择 鼠标左键+OPTION 2.查找替换 COMMAND+OPTION+F 3.分屏 COMMAND+OPTION+数字,具体数字代表要分几个屏
- hdu 1506 Largest Rectangle in a Histogram 构造
题目链接:HDU - 1506 A histogram is a polygon composed of a sequence of rectangles aligned at a common ba ...
- Android Studio+WebApi(一)属于我们自己的App
AndroidStudio(以后都简称AS),作为google的亲儿子,终于出了个像样的android ide,再也不用在eclipse中又是Adt,又是这又是那的,一大堆的集成了.废话不多说,这个系 ...
- 关于spring.net的面向切面编程 (Aspect Oriented Programming with Spring.NET)-简介
本文翻译自Spring.NET官方文档Version 1.3.2. 受限于个人知识水平,有些地方翻译可能不准确,但是我还是希望我的这些微薄的努力能为他人提供帮助. 侵删. 简介 Aspect-Orie ...
- 三种Web前端框架比较与介绍--Vue, react, angular
一.Angular 1.MVVM(Model)(View)(View-model): 2.模块化(Module)控制器(Contoller)依赖注入: 3.双向数据绑定:界面的操作能实时反映到数据,数 ...
- 5分钟教程:如何通过UART获得root权限
写在前面的话 你知道物联网设备以及其他硬件制造商是如何调试和测试自家设备的吗?没错,绝大多数情况下,他们都会留下一个串行接口,这样就可以利用这个接口并通过shell来读取实时的调试日志或与硬件进行交互 ...
- django book表单验证学习
django提供了强大的表单验证功能form 个人认为是把html代码封装到form里面,就像封装models中的数据一样.而且带有强大的验证功能,不需要后台再去写一堆乱七八糟的验证 具体操作查看dj ...
- Json序列化为对象方法
/// <summary>/// json 序列化为对象/// </summary>/// <typeparam name="T">对象类型&l ...
- 6. datasource - mysql【从零开始学Spring Boot】
在任何一个平台都逃离不了数据库的操作,那么在spring boot中怎么接入数据库呢? 很简单,我们需要在application.properties进行配置一下,application.proper ...
- 使用WIFI连接android进行调试和adb操作
本人需要wifi连接android进行调试的原因主要是要经常用到IDA pro进行调试,但手头有的IDA Pro版本只是windows的,开发可能更多用Mac OS X了,来回拔插.调试很不方便,所以 ...