Android控件SeekBar仿淘宝滑动验证效果

SeekBar是一个拖动条控件,最简单的案例就是我们的调节音量,还有音频视频的播放,传统的SeekBar样式,如图

传统的实现太简单,不足以让我们到能装逼的地步。本来是打算实现滴滴出行滑动完成订单的效果,可惜找不到效果图,今天也就用淘宝的滑动验证来作为实例

1.1 实现分析

SeekBar:使用progressDrawable属性自定义SeekBar
拖动块:使用thumb属性更改,其实就是一张图片
文字:使用RelativeLayout嵌套在一起

1.2 实现布局

<?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="wrap_content"
  android:padding="16dp">

  <SeekBar
    android:id="@+id/sb"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:max="100"
    android:progress="0"
    android:progressDrawable="@drawable/seekbar_bg"
    android:thumb="@drawable/thumb"
    android:thumbOffset="0dp" />

  <TextView
    android:id="@+id/tv"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:gravity="center"
    android:text="请按住滑块,拖动到最右边"
    android:textColor="#888888"
    android:textSize="14dp" />
</RelativeLayout>

其效果是

SeekBar属性介绍

android:max:设置进度条最大的进度值
android:progress:设置当前的进度值
android:progressDrawable:设置进度条的Drawable样式
android:thumb:设置进度条滑块
android:thumbOffset:设置进度条滑块的偏移量

1.3 SeekBar样式

这里是Android:progressDrawable里面的seekbar_bg.xml

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <!--seekBar背景-->
  <item android:id="@android:id/background">
    <!--形状-->
    <shape android:shape="rectangle">
      <!--大小-->
      <size android:height="29dp" />
      <!--圆角-->
      <corners android:radius="2dp" />
      <!--背景-->
      <solid android:color="#E7EAE9" />
      <!--边框-->
      <stroke
        android:width="1dp"
        android:color="#C3C5C4" />
    </shape>
  </item>
  <!--seekBar的进度条-->
  <item android:id="@android:id/progress">
    <clip>
      <shape>
        <corners android:radius="2dp" />
        <solid android:color="#7AC23C" />
        <stroke
          android:width="1dp"
          android:color="#C3C5C4" />
      </shape>
    </clip>
  </item>
</layer-list>

1.4 代码实现逻辑

代码也非常简单,seekBar提供了一个监听事件OnSeekBarChangeListener,在对应的回调中实现文字的出现和消失、文本内容的修改

public class MainActivity extends AppCompatActivity implements SeekBar.OnSeekBarChangeListener {

  private TextView tv;
  private SeekBar seekBar;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    tv = (TextView) findViewById(R.id.tv);
    seekBar = (SeekBar) findViewById(R.id.sb);
    seekBar.setOnSeekBarChangeListener(this);
  }

  /**
   * seekBar进度变化时回调
   *
   * @param seekBar
   * @param progress
   * @param fromUser
   */
  @Override
  public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
    if (seekBar.getProgress() == seekBar.getMax()) {
      tv.setVisibility(View.VISIBLE);
      tv.setTextColor(Color.WHITE);
      tv.setText("完成验证");
    } else {
      tv.setVisibility(View.INVISIBLE);
    }
  }

  /**
   * seekBar开始触摸时回调
   *
   * @param seekBar
   */
  @Override
  public void onStartTrackingTouch(SeekBar seekBar) {

  }

  /**
   * seekBar停止触摸时回调
   *
   * @param seekBar
   */
  @Override
  public void onStopTrackingTouch(SeekBar seekBar) {
    if (seekBar.getProgress() != seekBar.getMax()) {
      seekBar.setProgress(0);
      tv.setVisibility(View.VISIBLE);
      tv.setTextColor(Color.GRAY);
      tv.setText("请按住滑块,拖动到最右边");
    }
  }
}

好了,今天的SeekBar的使用就到这里,如果对其他基础控件感兴趣的,可以关注我的博客,基础控件系列,欢迎提供大家idea。

源码下载:http://xiazai.jb51.net/201611/yuanma/Androidseekbar(jb51.net).rar

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

时间: 2016-11-21

Android 高仿斗鱼滑动验证码

如下图.在Android上实现起来就不太容易,有些效果还是不如web端酷炫.) 我们的Demo,Ac娘镇楼 (图很渣,也忽略底下的SeekBar,这不是重点) 一些动画,效果录不出来了,大家可以去斗鱼web端看一下,然后下载Demo看一下,效果还是可以的. 代码 传送门: https://github.com/mcxtzhang/SwipeCaptcha 我们的Demo和web端基本上一样. 那么本控件包含不仅包含以下功能: 随机区域起点(左上角x,y)生成一个验证码阴影.验证码拼图 凹凸图形会

Android自定义滑动验证条的示例代码

本文介绍了Android自定义滑动验证条的示例代码,分享给大家,具体如下: *注:不知道为什么,h5的标签在这里没用了,所以我也只能用Markdown的语法来写了 项目地址:https://github.com/994866755/handsomeYe.seekbar.github.io 需求: 在我们的某些应用中需要滑动验证.比如说这个样子的: 刚开始我也很懵逼要怎么去弄,结果我去看了一些人的代码,有人是用自定义viewgroup去做,就是viewgroup包含滑动块和滑动条.但我觉得太麻烦,

Android自定义滑动删除效果的实现代码

先给大家展示下效果图,如果感觉不错,请参考实现代码: 序言 最近项目中需要用到滑动删除,然后去网上搜了一下,发现现有网上的各种解决办法各式各样,但是还是找不到一个能将所有细节和逻辑处理好的,至于滑动删除部分,我觉得处理的相对比较好的是 QQ(包括处理各种逻辑和细节);最终,苦寻无果,于是决定自己动手,丰衣足食 这篇文章将从现有 Android 滑动删除的痛点,到搭建好一个基本的框架,到最终提供一份完整的 Demo为止,争取为读者提供最大的可定制化 正文 一. 滑动删除的痛点 (1). 现有资料中

Android自定义View实现多边形统计图示例代码

前言   最近利用空闲时间学习了自定义View的一些知识,为了巩固,写了一个小东西,顺便分享出来,下面话不多说了,来一起看看详细的介绍吧. 简介   一个多边形统计图.边数,每个方向的值,每个点的文字等等都是可以设置的. 下面就来分析一下这个自定义View 这个view由以下几个部分组成 M层N边形 中心到各顶点的连线 填充区域 文字 @Override protected void onDraw(Canvas canvas) { if (!canDraw()) { return; } canv

Android自定义双向进度条的实现代码

想整个双向的进度条,就是可以选取播放范围的. 像这样: 然而官方控件里只有单向的.不要慌,我们自己画一个. 绘制一个进度条主要是三方面.1.样式,2.尺寸,3.操作监听. 完整代码来一遍: 注释基本上就把原理说明了一下. package util; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint;

Android 侧边滑动关闭Activity的示例代码

0.效果图 1.设置Activity样式属性 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <item name="android:windowIsTranslucent">true</item> </style> 2.自定义侧边阴影视图 class SlideBackView extends View { pr

Laravel 5.5 的自定义验证对象/类示例代码详解

Laravel 5.5 将提供一个全新的自定义验证规则的对象,以作为原来的 Validator::extend 方法的替代. Laravel 5.5 将提供一个全新的自定义验证规则的对象,以作为原来的 Validator::extend 方法的替代..很多时候我们会直接用正则表达式来处理这种特殊的验证,也有时候我们会选择用 Validator::extend 来扩展一个自定义的规则.但在 Laravel 5.5 版本中,我们有了新的手段,只要定义一个实现 Illuminate\Contracts

Android 实现自定义圆形进度条的实例代码

Android 自定义圆形进度条 今天无意中发现一个圆形进度,想想自己实现一个,如下图: 基本思路是这样的: 1.首先绘制一个实心圆 2.绘制一个白色实心的正方形,遮住实心圆 3.在圆的中心动态绘制当前进度的百分比字符 4.绘制一个与之前实心圆相同颜色的空心圆 5.逐渐改变当前的百分比 6.根据百分比,逐渐改变正方形的大小,逐渐减小正方形的底部y轴的坐标,不断重绘,直到达到100% 首先看看自定义的属性 在values目录下新建attrs.xml内容如下: 定义绘制圆形的背景色,和绘制圆形的半径

Android 给图片加上水印的示例代码(支持logo+文字)

本文介绍了Android 给图片加上水印的示例代码(支持logo+文字),分享给大家,具体如下: 现在我们想要往图片上打上水印,该水印应符合这样的需求的: 支持logo+文字: 文字信息支持多行展示: 用户可以选择水印在图片上的生成位置(左上.右上.右下和左下). 粗略的结构图低配版大概就长这样... 水印结构图.png 现在提供这样的一种思路去实现这一个需求,我们可以通过自定义一个view,view的布局中包含logo.公司名称和相关信息,这个view就是我们要打上图片的水印. 这样的一个vi

Android自定义指示器时间轴效果实例代码详解

指示器时间轴在外卖.购物类的APP里会经常用到,效果大概就像下面这样,看了网上很多文章,大都是自己绘制,太麻烦,其实通过ListView就可以实现. 在Activity关联的布局文件activity_main.xml中放置一个ListView,代码如下.由于这个列表只是用于展示信息,并不需要用户去点击,所以将其clickable属性置为false:为了消除ListView点击产生的波纹效果,我们设置其listSelector属性的值为透明:我们不需要列表项之间的分割线,所以设置其divider属

微信小程序自定义音乐进度条的实例代码

需求:显示音乐播放按钮.可手动拖拽进度条:页面中含多个音乐,播放当前音乐时暂停其他音乐播放. 小程序自带标签 audio 小程序自带的audio标签含固定的样式,且有最小尺寸.目前项目也不含name和author字段,所以放弃audio标签. 实现效果图 初始化音乐数据 <text>{{currentProcess}}</text> <slider bindchange="" bindtouchstart="" bindtouchend