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下载

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之后，就可以愉快的使用新控件了。

时间： 2024-11-08 19:41:18

android开发游记：meterial design 5.0 开源控件整套合集 及使用demo的相关文章

android开发 软键盘出现后 防止EditText控件遮挡 整体平移UI

在EditText控件接近底部的情况下 软键盘弹出后会把获得焦点的EditText控件遮挡 无法看到输入信息 防止这样的情况发生 就需要设置AndroidManifest.xml的属性 前面的xml信息省略 在activity中 增加android:windowSoftInputMode="adjustPan" <activity ........................................................ android:windowSoft

Android开发技巧之使用weight属性实现控件的按比例分配空间

从今天开始,把看书时候的知识点整理成博客, 这个比较简单,估计有经验的都用过,weight属性 在做Android布局的时候,经常遇到需要几个控件按比例分配空间的情况 比如下图效果 在底部设置两个button,占据底部宽度一部分的同时,保持1:3的比例, 当然了,这么难看的布局用处不大,仅是用来说明weight的用法 布局代码如下: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" x

Android开发技巧——定制仿微信图片裁剪控件

拍照--裁剪,或者是选择图片--裁剪,是我们设置头像或上传图片时经常需要的一组操作.上篇讲了Camera的使用,这篇讲一下我对图片裁剪的实现. 背景 下面的需求都来自产品. 裁剪图片要像微信那样,拖动和放大的是图片,裁剪框不动. 裁剪框外的内容要有半透明黑色遮罩. 裁剪框下面要显示一行提示文字(这点我至今还是持保留意见的). 在Android中,裁剪图片的控件库还是挺多的,特别是github上比较流行的几个,都已经进化到比较稳定的阶段,但比较遗憾的是它们的裁剪过程是拖动或缩放裁剪框,于是只好自己

android开发 软键盘出现后 防止EditText控件遮挡 总体平移UI

在EditText控件接近底部的情况下 软键盘弹出后会把获得焦点的EditText控件遮挡 无法看到输入信息 防止这种情况发生 就须要设置AndroidManifest.xml的属性 前面的xml信息省略 在activity中 添加android:windowSoftInputMode="adjustPan" <activity ........................................................ android:windowSoftI

Android开发之动态创建布局文件及控件

日常开发过程当中,有些页面往往比较小,我们需要展示一些信息,这个时候我们伟哥快读,就需要在代码中进行页面的绘制,就是通过编码的方式来实现布局. <pre name="code" class="java">LinearLayout linearLayout = new LinearLayout(this); textView tv=new TextView(this); linearLayout.addView(tv); import android.su

Android开发学习——UI篇1.0

Android开发学习--UI篇1.0 从控件开始 TextView 最基本的文本显示控件 相信同学对刚开始使用Android studio时生成的第一个程序还有印象.兴致满满地将软件已经编好的基础程序运行在手机上,一句Hello world!赫然出现在手机中间,也标志着你开始走进了一个Android的世界! 而这句话,就是用我们的TextView控件来显示出来的. 未完待续! 原文地址:https://www.cnblogs.com/8cloud33zzk/p/9164546.html

开源整理：Android App新手指引开源控件

开源整理:Android App新手指引开源控件 一个App第一次与用户接触或者发生大版本更新时,常常会用户进行新手引导,而一个好的新手指引,往往能够方便新用户快速了解操作你的应用功能.新手指引的重要性,不言而喻.本文搜集整理了Github上一些效果不错的新手指引开源控件,帮助你的应用在用户面前有更好的效果展示.当然,如果你有精力,也可以自己开发维护一套新手指引效果. GuideView https://github.com/binIoter/GuideView 国人开发者出品的一个轻量级新手指

Win10 UWP开发系列——开源控件库：UWPCommunityToolkit

原文:Win10 UWP开发系列--开源控件库:UWPCommunityToolkit 在开发应用的过程中,不可避免的会使用第三方类库.之前用过一个WinRTXamlToolkit.UWP,现在微软官方发布了一个新的开源控件库—— UWPCommunityToolkit 项目代码托管在Github上:https://github.com/Microsoft/UWPCommunityToolkit 包括以下几个类库: 都可以很方便的从Nuget上安装. NuGet Package Name des

PullToRefresh开源控件和5.0新特性SwipeRefreshLayout的对比使用

PullToRefresh开源控件可以实现下拉和上拉刷新数据,而后者SwipeRefreshLayout主要用于下拉刷新,知乎的首页刷新数据用的就是这个控件. 一,先介绍PullToRefresh开源控件的使用 PullToRefresh开源控件可以实现下拉和上拉刷新数据,在项目中首先要导入这个包,可以先从github上进行下载,之后在Android Studio中进行导入,之前试了直接导入总会报错,后来直接右键New Module,新建android library即可,按照PullToRef