Android UI设计系列之自定义SwitchButton开关实现类似IOS中UISwitch的动画效果(2)

做IOS开发的都知道,IOS提供了一个具有动态开关效果的UISwitch组件,这个组件很好用效果相对来说也很绚丽,当我们去点击开关的时候有动画效果,但遗憾的是Android上并没有给我们提供类似的组件(听说在Android4.0的版本上提供了具有动态效果的开关组件,不过我还没有去看文档),如果我们想实现类似的效果那该怎么办了呢?看来又得去自定义了。
公司的产品最近一直在做升级,主要做的就是把界面做的更绚丽更美观给用户更好的体验(唉,顾客是上帝......),其中的设置功能中就有开关按钮,原来的开关做的是两幅图片,通过点击图片来给开关设置不同的状态图片,但是这种效果很死板和程序的整体风格不太协调,于是就想着实现类似于IOS中的开关效果。
拿着笔在图纸上画了画,我实现的原理也是采用了两幅图片,一个整体的背景图:和一个小滑块图:,用小滑块图实现在背景图上滑动,当小滑块滑到左边时恰好遮挡了开字,就是显示的关了,同样原理当小滑块滑动到右侧时恰好遮挡了关字也就是现实开了,滑动的实现主要用的就是TranslateAnimation类,如有对TranslateAnimation不太熟悉的,问问度娘,她那有关TranslateAnimation的解说多了去了,毕竟自己动手,丰衣食足嘛,(*^__^*) 嘻嘻……
好了,老规矩来看一下项目结构吧:

工程中switch_button.xml文件就是对应的SwitchButton的布局文件,内容不需要解释,你一看就懂

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/switch_parent"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:background="@drawable/switch_bg"> 

 <ImageView
  android:id="@+id/switch_button"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:src="@drawable/switch_btn" /> 

</LinearLayout>

SwitchButton的布局文件中根节点是个LinearLayout,把它的背景设置成了一个含有开关文字的图片,里边包含一个ImageView,这个ImageView就是用来在LinearLayout中进行滑动的。
其中自定义开关组件就是都在wedgit包下的SwitchButton,那么赶紧来看一下SwitchButton的代码吧

public class SwitchButton extends LinearLayout { 

 /**
  * 开关图片
  */
 private LinearLayout switchParent;
 /**
  * 滑块图片
  */
 private ImageView switchButton;
 /**
  * 按钮状态,默认关闭
  */
 private boolean isOn = false;
 /**
  * 滑块需要滑动的距离
  */
 private int scrollDistance;
 /**
  * 开关按钮监听器
  */
 private SwitchChangedListner listner; 

 public SwitchButton(Context context) {
  super(context);
  initWedgits(context);
 } 

 public SwitchButton(Context context, AttributeSet attrs) {
  super(context, attrs);
  initWedgits(context);
 } 

 /**
  * 初始化组件
  *
  * @param context
  *   上下文环境
  */
 private void initWedgits(Context context) {
  try {
   View view = LayoutInflater.from(context).inflate(
     R.layout.switch_button, this);
   switchParent = (LinearLayout) view.findViewById(R.id.switch_parent);
   switchButton = (ImageView) view.findViewById(R.id.switch_button);
   addListeners();
  } catch (Exception e) {
   e.printStackTrace();
  }
 } 

 /**
  * 添加事件监听器
  */
 private void addListeners() {
  try {
   switchParent.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View v) {
     isOn = !isOn;
     scrollSwitch();
     if (null != listner) {
      // 开关开发或者关闭的回调方法
      listner.switchChanged(getId(), isOn);
     }
    }
   });
  } catch (Exception e) {
   e.printStackTrace();
  }
 } 

 /**
  * 滑动开关
  */
 private void scrollSwitch() {
  // 获取滑块需要滑动的距离,滑动距离等于父组建的宽度减去滑块的宽度
  scrollDistance = switchParent.getWidth() - switchButton.getWidth();
  // 初始化滑动事件
  Animation animation = null;
  if (isOn) {
   animation = new TranslateAnimation(0, scrollDistance, 0, 0);
  } else {
   animation = new TranslateAnimation(scrollDistance, 0, 0, 0);
  }
  // 设置滑动时间
  animation.setDuration(200);
  // 滑动之后保持状态
  animation.setFillAfter(true);
  // 开始滑动
  switchButton.startAnimation(animation);
 } 

 /**
  * 获取开关状态
  *
  * @return 【true:打开】【false:关闭】
  */
 public boolean isOn() {
  return isOn;
 } 

 /**
  * 设置开关状态
  *
  * @param isOn
  *   开关状态【true:打开】【false:关闭】
  */
 public void setOn(boolean isOn) {
  if (this.isOn == isOn) {
   return;
  }
  this.isOn = isOn;
  post(new Runnable() {
   @Override
   public void run() {
    scrollSwitch();
   }
  });
 } 

 /**
  * 设置开关状态监听器
  *
  * @param listner
  *   开关状态监听器
  */
 public void setOnSwitchListner(SwitchChangedListner listner) {
  this.listner = listner;
 } 

 /**
  * 开关状态监听器
  *
  * @author llew
  *
  */
 public interface SwitchChangedListner {
  /**
   * 开关状态改变
   *
   * @param viewId
   *   当前开关ID
   * @param isOn
   *   开关是否打开【true:打开】【false:关闭】
   */
  public void switchChanged(Integer viewId, boolean isOn);
 }
}

SwitchButton的实现也很简单,首先是初始化组件initWedgits(),然后添加事件监听器addListeners(),在监听器中做逻辑判断,代码都有注释,就不再详细说明了
那么到了最后,我们来看看MainActivity中对SwitchButton的用法吧

public class MainActivity extends Activity { 

 private SwitchButton switchButton; 

 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);
  initWedgits();
 } 

 /**
  * 初始化各组件
  */
 private void initWedgits() {
  try {
   switchButton = (SwitchButton) findViewById(R.id.switchButton);
   // switchButton.setOn(false);
   switchButton.setOn(true);
   addListeners();
  } catch (Exception e) {
   e.printStackTrace();
  }
 } 

 /**
  * 添加事件监听器
  */
 private void addListeners() {
  try {
   switchButton.setOnSwitchListner(new SwitchChangedListner() {
    @Override
    public void switchChanged(Integer viewId, boolean isOn) {
     if(isOn) {
      Toast.makeText(getApplicationContext(), "开关打开了", Toast.LENGTH_LONG).show();
     } else {
      Toast.makeText(getApplicationContext(), "开关关闭了", Toast.LENGTH_LONG).show();
     }
    }
   });
  } catch (Exception e) {
   e.printStackTrace();
  }
 }
}

好了,代码都贴完了,接下来看看运行效果吧,(*^__^*) 嘻嘻……

很遗憾的是,木有动画效果,呜呜~~~~(>_<)~~~~ ,先这样吧,呵呵
好了,基本上自定义开关组件到这里就讲完了,如有不足,请大家谅解。

源码下载: Android UI实现类似IOS中UISwitch的动画效果

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

时间: 2016-06-04

Android UI控件Switch的使用方法

在Android中偶尔会用到开关,Switch就是一个简单易使用的不错的控件. 首先,在布局中添加上Switch控件: <Switch android:id="@+id/s_v" android:layout_width="wrap_content" android:layout_height="wrap_content" android:switchMinWidth="20dp" android:textOn=&quo

很赞的引导界面效果Android控件ImageSwitcher实现

本文实例为大家分享了Android控件ImageSwitcher实现引导界面的代码,供大家参考,具体内容如下 效果图: 布局代码: <?xml version="1.0" encoding="UTF-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent&

Android开发之ViewSwitcher用法实例

本文实例讲述了Android开发之ViewSwitcher用法.分享给大家供大家参考,具体如下: android.widget.ViewSwitcher是ViewAnimator的子类,用于在两个View之间切换,但每次只能显示一个View. ViewSwitcher的addView函数的代码如下: /** * {@inheritDoc} * * @throws IllegalStateException if this switcher already contains two childre

Android使用gallery和imageSwitch制作可左右循环滑动的图片浏览器

效果图: 为了使图片浏览器左右无限循环滑动 我们要自定义gallery的adapter 如果要想自定义adapter首先要了解这几个方法 @Override public int getCount() { // TODO Auto-generated method stub return 0; } @Override public Object getItem(int position) { // TODO Auto-generated method stub return null; } @O

Android控件ImageSwitcher实现左右图片切换功能

ImageSwitcher类是ViewSwitcher类的子类,它实现的效果是在完成ImageView的切换并且带有动画效果.要使用这个类需要以下两个步骤: 1)为ImageSwitcher类提供一个ViewFactory,该ViewFactory生成的View组件必须是ImageView. 2)需要切换的时候,只需要嗲用ImageSwitcher的setImageDrawable().setImageResource().setImageURL()方法即可实现切换. activity_main

Android入门之Gallery+ImageSwitcher用法实例解析

继上一篇介绍了如何使用Gallery控件之后,本文就来讲一下Gallery 与ImageSwitcher的结合使用.本文所述实例代码将实现一个简单的浏览图片的功能. 先贴出程序运行截图如下: 除了Gallery可以拖拉切换图片,我在ImageSwitcher控件加入了setOnTouchListener事件实现,使得ImageSwitcher也可以在拖拉中切换图片.本例子依然使用JAVA的反射机制来自动读取资源中的图片. main.xml的源码如下: <?xml version="1.0&

android基本控件ToggleButton&Switch使用指南

ToggleButton(开关按钮)和Switch(开关)讲解: 一.核心属性讲解: (1)ToggleButton textOn:按钮被选中的时候文字显示 textOff:按钮没有被选中的时候文字显示 ToggleButton的状态只能是选中和未选中,并且需要为不同的状态设置不同的显示文本. 以下案例为ToggleButton的用法 目录结构 main.xml布局文件 <?xml version="1.0" encoding="utf-8"?> <

Android基于ImageSwitcher实现图片切换功能

左右切换图片控件大家都用ViewPager, ViewFipper比较多吧,我之前也用ViewPager实现了,使用ViewPager实现左右循环滑动图片,有兴趣的可以去看下,今天介绍的是基于ImageSwitcher实现的左右切换图片,先上截图吧 好了,接下来来看代码吧,第一张图是一个GridView,点击item跳转到第二个界面,第一个界面可以忽略,主要是讲解ImageSwitcher的左右却换图片,先看布局文件 <?xml version="1.0" encoding=&q

android开发教程之switch控件使用示例

复制代码 代码如下: <Switchandroid:id="@+id/open"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textOff="蓝牙关闭中"android:textOn="蓝牙开启中" /> 复制代码 代码如下: open.setOnCheckedChangeListe

Android中使用GridView和ImageViewSwitcher实现电子相册简单功能实例

我们在手机上查看相册时,首先看到的是网格状的图片展示界面,然后我们选择想要欣赏的照片点击进入,这样就可以全屏观看该照片,并且可以通过左右滑动来切换照片.如下图的显示效果: 实现Activity之间的跳转以及照片标记位置的传递需要用到intent,并分别使用putExtra以及getExtra,传入和获取照片的标记位置. (关于intent,后期会有专门博文介绍具体使用,请大家持续关注哦) 下面我们开始功能的实现: 第一步:Layout中建立首页GridView布局grid_layout.xml文

Android中使用GridView实现仿微信图片上传功能(附源代码)

由于工作要求最近在使用GridView完成图片的批量上传功能,我的例子当中包含仿微信图片上传.拍照.本地选择.相片裁剪等功能,如果有需要的朋友可以看一下,希望我的实际经验能对您有所帮助. 直接上图,下面的图片就是点击"加号"后弹出的对话框,通过对话框可以根据自己需求进行相片选择. 项目结构: 下面直接上代码. 整体的布局文件activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/

Android中的二维码生成与扫描功能

0. 前言 今天这篇文章主要描述二维码的生成与扫描,使用目前流行的Zxing,为什么要讲二维码,因为二维码太普遍了,随便一个Android APP都会有二维码扫描.本篇旨在帮助有需求的同学快速完成二维码生成和扫描的功能. 1.    Zxing的使用 从github上下载项目后,可以看到整体代码结构如下: 我们只需将Zxing包下的所有代码copy一份到我们的项目中去,除了这些还需要zxing的jar包,最后相应的资源文件,包括values文件下的ids文件.raw文件中的资源文件(可以替换).

Android 中自定义ContentProvider与ContentObserver的使用简单实例

Android 中自定义ContentProvider与ContentObserver的使用简单实例 示例说明: 该示例中一共包含两个工程.其中一个工程完成了自定义ContentProvider,另外一个工程用于测试该自定义ContentProvider且在该工程中使用了ContentObserver监听自定义ContentProvider的数据变化 以下代码为工程TestContentProvider ContentProviderTest如下: package cn.testcontentp

Android中使用SharedPreferences完成记住账号密码的功能

效果图: 记住密码后,再次登录就会出现账号密码,否则没有. 分析: SharedPreferences可将数据存储到本地的配置文件中 SharedPreferences会记录CheckBox的状态,如果CheckBox被选,则将配置文件中记录的账号密码信息回馈给账号密码控件,否则清空. SharedPreferences使用方法: 1.创建名为config的配置文件,并且私有 private SharedPreferences config; config=getSharedPreference

Android 中Popwindow弹出菜单的两种方法实例

Android 中Popwindow弹出菜单的两种方法实例 1.popWindow就是对话框的一种方式! 此文讲解的android中对话框的一种使用方式,它叫popWindow. 2.popWindow的特性 Android的对话框有两种:PopupWindow和AlertDialog.它们的不同点在于: AlertDialog的位置固定,而PopupWindow的位置可以随意. AlertDialog是非阻塞线程的,而PopupWindow是阻塞线程的. PopupWindow的位置按照有无偏

Android 中使用 dlib+opencv 实现动态人脸检测功能

1 概述 完成 Android 相机预览功能以后,在此基础上我使用 dlib 与 opencv 库做了一个关于人脸检测的 demo.该 demo 在相机预览过程中对人脸进行实时检测,并将检测到的人脸用矩形框描绘出来.具体实现原理如下: 采用双层 View,底层的 TextureView 用于预览,程序从 TextureView 中获取预览帧数据,然后调用 dlib 库对帧数据进行处理,最后将检测结果绘制在顶层的 SurfaceView 中. 2 项目配置 由于项目中用到了 dlib 与 open

Android中在GridView网格视图上实现item拖拽交换的方法

GridView基础 新建一个HelloGridView的工程 修改main.xml代码如下: <?xml version="1.0" encoding="utf-8"?> <GridView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/gridview" android:layout_width=&q

Android中Spinner控件之键值对用法实例分析

本文实例讲述了Android中Spinner控件之键值对用法.分享给大家供大家参考.具体如下: 一.字典表,用来存放键值对信息 package com.ljq.activity; import java.io.Serializable; @SuppressWarnings("serial") public class Dict implements Serializable { private Integer id; private String text; public Dict()

Android中系统自带锁WalkLock与KeyguardLock用法实例详解

本文实例讲述了Android中系统自带锁WalkLock与KeyguardLock用法.分享给大家供大家参考,具体如下: WalkLock - 顾名思义 唤醒锁 点亮屏幕用的 KeyguardLock - 顾名思义 键盘锁 解锁键盘用的 详细介绍: 1: WalkLock 唤醒锁 - WalkLock真的能点亮屏幕吗? 答案是肯定的. 可是有时候为什么不点亮屏幕,这个就是参数设置的问题了. 复制代码 代码如下: PowerManager.newWakeLock(PowerManager.FULL