Android 设置主题实现点击波纹效果的示例

开头先说说大家都知道的Material Design。

Material Design:

Material Design是Google推出的一个全新的设计语言,它的特点就是拟物扁平化。

Material Design包含了很多内容,我大致把它分为四部分:

  1. 主题和布局
  2. 视图和阴影
  3. UI控件
  4. 动画

Material Theme

使用Material主题:

Material主题只能应用在Android L版本。

应用Material主题很简单,只需要修改res/values/styles.xml文件,使其继承android:Theme.Material。如下:

<!-- res/values/styles.xml -->
<resources>
 <!-- your app's theme inherits from the Material theme -->
 <style name="AppTheme" parent="android:Theme.Material">
  <!-- theme customizations -->
 </style>
</resources> 

或者在AndroidManifest.xml中直接设置主题:

android:theme="@android:style/Theme.Material.Light" 

在最新的5.0中,google似乎不推荐使用Material Design主题了,而是由AppCompat代替。

<resources> 

  <!-- Base application theme. -->
  <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
  </style> 

</resources> 

自定义状态条和导航条:

material还允许你轻松的自定义状态条和导航条的颜色。

可以使用如下属性(参考下方图片):

android:statusBarColor,Window.setStatusBarColor

兼容性:

由于Material Theme只可以在Android L Developer Preview中使用。

所以在低版本使用的话就需要为其另设一套主题:

在老版本使用一套主题 res/values/styles.xml,在新版本使用Material主题res/values-v21/styles.xml.

系统自带点击事件的控件一般都具有默认的波纹效果,直接使用即可:

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        > 

        <Button
          android:id="@+id/myBtn"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:drawablePadding="10dp"
          android:gravity="center_vertical"
          android:paddingBottom="15dip"
          android:paddingLeft="15dip"
          android:paddingRight="25dip"
          android:paddingTop="15dip"
          android:text="Click"
          android:textColor="@color/common_black_text"
          android:textSize="16sp" />
      </RelativeLayout>

怎么为view添加点击波纹效果呢,先了解下面的东西。

触摸反馈:

在Android L5.0中加入了触摸反馈动画。

其中最明显,最具代表性的就是波纹动画,比如当点击按钮时会从点击的位置产生类似于波纹的扩散效果。

波纹效果(Ripple):

当你使用了Material主题后,波纹动画会自动应用在所有的控件上,我们当然可以来设置其属性来调整到我们需要的效果。

可以通过如下代码设置波纹的背景:

android:background="?android:attr/selectableItemBackground"波纹有边界
android:background="?android:attr/selectableItemBackgroundBorderless"波纹超出边界

使用效果如下:

B1是不设任何背景的按钮

B2设置了?android:attr/selectableItemBackground

B3设置了?android:attr/selectableItemBackgroundBorderless

设置颜色

我们也可以通过设置xml属性来调节动画颜色,从而可以适应不同的主题:

android:colorControlHighlight:设置波纹颜色

android:colorAccent:设置checkbox等控件的选中颜色

比如下面这个比较粉嫩的主题,就需要修改动画颜色来匹配(上面已经有介绍):

为view添加波纹效果:

<RelativeLayout
        android:id="@+id/user_info_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:background="?android:attr/selectableItemBackground"
        android:layout_marginTop="10dp"
        android:paddingBottom="15dip"
        android:paddingTop="15dip"> 

        <TextView
          android:id="@+id/user_info_text"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:drawablePadding="10dp"
          android:gravity="center_vertical"
          android:paddingLeft="15dip"
          android:paddingRight="25dip"
          android:text="我的资料"
          android:textSize="16sp" /> 

        <ImageView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_alignParentRight="true"
          android:layout_centerInParent="true"
          android:contentDescription="@null"
          android:paddingRight="15dip"
           />
      </RelativeLayout>

为Textview添加波纹效果:

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="68dp"
        android:weightSum="4"
        android:gravity="center_vertical"> 

        <TextView
          android:id="@+id/user_unpaid"
          android:layout_width="0dp"
          android:layout_height="wrap_content"
          android:background="?android:attr/selectableItemBackgroundBorderless"
          android:drawableTop="@mipmap/ic_user_paid"
          android:drawablePadding="5dp"
          android:gravity="center"
          android:layout_weight="1"
          android:text="待付款"
          android:textSize="12sp"
          android:clickable="true"/>
        <TextView
          android:id="@+id/user_paid"
          android:layout_width="0dp"
          android:layout_height="wrap_content"
          android:background="?android:attr/selectableItemBackgroundBorderless"
          android:drawableTop="@mipmap/ic_user_paid"
          android:drawablePadding="5dp"
          android:layout_weight="1"
          android:gravity="center"
          android:text="待发货"
          android:textColor="@color/common_black_text"
          android:textSize="12sp"
          android:clickable="true"/>
        <TextView
          android:id="@+id/user_unreceived"
          android:layout_width="0dp"
          android:layout_height="wrap_content"
          android:background="?android:attr/selectableItemBackgroundBorderless"
          android:drawableTop="@mipmap/ic_user_paid"
          android:drawablePadding="5dp"
          android:gravity="center"
          android:layout_weight="1"
          android:text="待收货"
          android:textColor="@color/common_black_text"
          android:textSize="12sp"
          android:clickable="true"/>
        <TextView
          android:id="@+id/user_completed"
          android:layout_width="0dp"
          android:layout_height="wrap_content"
          android:background="?android:attr/selectableItemBackgroundBorderless"
          android:drawableTop="@mipmap/ic_user_paid"
          android:drawablePadding="5dp"
          android:gravity="center"
          android:layout_weight="1"
          android:text="已完成"
          android:textSize="12sp"
          android:clickable="true"/> 

      </LinearLayout>

这样就可以实现波纹效果啦!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android实现点击Button产生水波纹效果

    先上图,看看接下来我要向大家介绍的是个什么东西,如下图: 接下来要介绍的就是如何实现上述图中的波纹效果,这种效果如果大家没有体验过的话,可以看看百度手机卫士或者360手机卫士,里面的按钮点击效果都是这样的,另外Android 5.0以上的版本也出现了这种效果.不多说,下面聊聊具体的怎么实现. 首先大家看到的是三个button,水波纹的出现给我们的错觉是直接将波纹绘制在button上面的,但是这样能做到吗?首先button自己有background和src,如果把半透明的水波纹当作backgrou

  • Android实现水波纹点击效果

    Android实现水波纹点击效果只在Android5.0以上版本有效,水波纹点击效果代码供大家参考,具体内容如下 圆角背景的水波纹效果(如上图) 1. 定义一个普通圆角背景的xml; rounded_corners.xml <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"

  • Android 设置主题实现点击波纹效果的示例

    开头先说说大家都知道的Material Design. Material Design: Material Design是Google推出的一个全新的设计语言,它的特点就是拟物扁平化. Material Design包含了很多内容,我大致把它分为四部分: 主题和布局 视图和阴影 UI控件 动画 Material Theme 使用Material主题: Material主题只能应用在Android L版本. 应用Material主题很简单,只需要修改res/values/styles.xml文件,

  • Android 通过自定义view实现水波纹效果案例详解

    在实际的开发中,很多时候还会遇到相对比较复杂的需求,比如产品妹纸或UI妹纸在哪看了个让人兴奋的效果,兴致高昂的来找你,看了之后目的很明确,当然就是希望你能给她: 在这样的关键时候,身子板就一定得硬了,可千万别说不行,爷们儿怎么能说不行呢: 好了,为了让大家都能给妹纸们想要的,后面会逐渐分享一些比较比较不错的效果,目的只有一个,通过自定义view实现我们所能实现的动效: 今天主要分享水波纹效果: 标准正余弦水波纹: 非标准圆形液柱水波纹: 虽说都是水波纹,但两者在实现上差异是比较大的,一个通过正余

  • Android 自定义加载动画Dialog弹窗效果的示例代码

    效果图 首先是创建弹窗的背景 这是上面用到的 以shape_bg_5_blue.xml为例,其他的三个无非就是里面的颜色不一样而已 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <corners android:radius="5dp"

  • Android 实现仿QQ拖拽气泡效果的示例

    目录 效果图: 一.实现思路 二.功能实现 三.全屏拖拽效果实现 源码地址: 效果图: 一.实现思路 在列表中默认使用自定义的TextView控件来展示消息气泡,在自定义的TextView控件中重写onTouchEvent方法,然后在DOWN.MOVE.UP事件中分别处理拖拽效果. 整个拖拽效果我们可以拆分成以下几步来实现: 1.默认状态 2.两气泡相连状态 3.两气泡分离状态 4.气泡消失状态 二.功能实现 默认状态:用来做一个状态的标识,无需特别处理. 两气泡相连状态:绘制一个固定圆和一个移

  • vue结合Echarts实现点击高亮效果的示例

    本文主要介绍如何在vue中使用Echarts实现点击高亮效果. 1.首先看一下官方网站上的介绍: http://echarts.baidu.com/api.html#action.graph.focusNodeAdjacency 2.在初始化的时候绑定这两个事件.需要绑定的事件是鼠标的点击事件和右键点击事件. mounted: function () { let that = this; let myChart = this.$echarts.init(document.getElementBy

  • Android仿高德首页三段式滑动效果的示例代码

    目录 高德的效果 实现的效果 自定义View源码 xml布局中的使用 高德首页按钮处理 源码地址 最近发现很多app都使用了三段式滑动,比如说高德的首页和某宝等物流信息都是使用的三段式滑动方式,谷歌其实给了我们很好的2段式滑动,就是BottomSheet,所以这次我也是在这个原理基础上做了一个小小的修改来实现我们今天想要的效果. 高德的效果 实现的效果 我们实现的效果和高德差距不是很大,也很顺滑.具体实现其实就是继承CoordinatorLayout.Behavior 自定义View源码 /**

  • Android实现自定义华丽的水波纹效果

    先来看看效果 实现效果 模拟水波纹的效果:点击屏幕就有圆环出现,半径从小到大,透明度从大到小(0为透明) 实现思路 1.自定义类继承View. 2.定义每个圆环的实体类 Wave,并初始化绘制圆环的画笔的数据. 3.重写onTouchEvent方法,down时,获得坐标点,做为圆环圆心. 4.发送handler信息,对数据进行修改,刷新页面. 5.重写onDraw方法,绘制一个圆环. 1. 自定义类继承View 新建WaterWaveView2类继承View public class Water

  • Android自定义viewGroup实现点击动画效果

    本文实例为大家分享了viewGroup实现点击动画效果展示的具体代码,供大家参考,具体内容如下 public class MyCustomView extends ViewGroup implements View.OnClickListener { private OnMenuItemClickListener mMenuItemClickListener; /** * 点击子菜单项的回调接口 */ public interface OnMenuItemClickListener { void

  • Android自定义View实现简单水波纹效果

    本文实例为大家分享了Android自定义View实现水波纹效果的具体代码,供大家参考,具体内容如下 效果如下: 原理 控制代码 //这里用的kotlin //主线程刷新控件  val mHandler = object : Handler() {         override fun handleMessage(msg: Message?) {             waterRippleView.refreshView()         }      //开启动画,开线程,延时刷新pe

  • Android用过TextView实现跑马灯效果的示例

    以前就遇到过这个问题,今天重新拾起来. 跑马灯效果其实就是当文字超过TextView控件宽度的时候,使用滚动的方式显示出来: 方法1:(直接xml搞定) Android系统中TextView实现跑马灯效果,必须具备以下几个条件: 1.android:ellipsize="marquee": 2.TextView必须单行显示,且内容必须超出TextView宽度: 3.TextView要获得焦点才能滚动. xml代码如下: <TextView android:id="@+i

随机推荐