ios一些控件还是挺美丽的,可是对android程序猿来说可能比較苦逼,由于ios一些看起来简单的效果对android来说可能就没那么简单了,可是没办法非常多产品都是拿ios的一些控件叫android开发者来照着做,今天就来做一个设置中常见的开关效果,

思路:

1:准备二张图片 一个是包括开和关二种状态的图片,一个是上面滑动的button图片

2:这些图片肯定是不能通过原生态的控件显示上去的,要通过canvas画上去

3:要解决点击和滑动的事件冲突,由于点击包括 按下 离开,而滑动包括按下  移动 离开,

以下看代码逻辑首先是布局文件,非常easy

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<com.example.toggle.ui.MyToggleView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
/>
</RelativeLayout>

MyToggleView.java 自己定义的控件

package com.example.toggle.ui;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View; import com.example.toggle.R;
/**
* 一个view从创建到显示要经历的过程
* 1:构造函数 实例初始化
* 2:測量 onMeasure
* 3:假设当前view是ViewGroup 还要义务測量它孩子(子view)
* 4:指定控件的大小和位置 (onLayout)
* 假设当前view是ViewGroup 还要义务指定它孩子的大小和位置(子view)
* 5:绘制(就是画出来再屏幕上可见)onDraw(Canvas canvas)
* @author Administrator
*
* 点击事件包括点击 和 离开 而这个离开刚好和移动中的up事件一样
*
*/
public class MyToggleView extends View implements View.OnClickListener {
private static final String TAG = "MyToggleView";
Paint paint ;
private Bitmap bg_bitmap;
private Bitmap sliding_bitmap;
private float slidingLeft = 0;
private int slideLeftMax;
/**
* 自己定义样式用它
* @param context
* @param attrs
* @param defStyleAttr
*/
public MyToggleView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
/**
* 在布局时候用它
* @param context
* @param attrs
*/
public MyToggleView(Context context, AttributeSet attrs) {
super(context, attrs);
initView();
}
private void initView() {
paint = new Paint();
bg_bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.switch_background);
sliding_bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.slide_button);
slideLeftMax = bg_bitmap.getWidth() - sliding_bitmap.getWidth();
setOnClickListener(this);
}
/**
* 在代码new的时候用它
* @param context
*/
public MyToggleView(Context context) {
super(context);
}
/**
* 測量
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
/**
* 这是父类去測量子view的大小 而我们能够不要父类去測量
*/
// super.onMeasure(bg_bitmap.getWidth(), bg_bitmap.getHeight());
/**
* 人为指定控件測量大小 (就是说没有測量)
*/
setMeasuredDimension(bg_bitmap.getWidth(), bg_bitmap.getHeight());
}
@Override
protected void onDraw(Canvas canvas) {
canvas.drawBitmap(bg_bitmap, 0, 0, paint);
canvas.drawBitmap(sliding_bitmap, slidingLeft , 0, paint);
}
private boolean isOpened = false;
/**
* isClickenble为true表示点击事件生效 但触摸事件无效
* isClickenble 为false表示点击事件失效 触摸事件有效
*/
private boolean isClickenble = false;
@Override
public void onClick(View v) {
if(isClickenble){
isOpened = !isOpened;
if(isOpened){
slidingLeft = bg_bitmap.getWidth()-sliding_bitmap.getWidth();
}else{
slidingLeft = 0;
}
invalidate();
}
}
private float startX = 0;//手指刚触动时候的x轴坐标
private float lastX = 0;//手指刚触动时候的x轴坐标
@Override
public boolean onTouchEvent(MotionEvent event) {
super.onTouchEvent(event);//运行父类的方法
switch (event.getAction()) {//推断滑动的动作 是刚按下 还是拖动 还是手指 抬起
case MotionEvent.ACTION_DOWN :
lastX = startX = event.getX();//这是距离 这个控件的x轴坐标值
isClickenble = true;
break;
case MotionEvent.ACTION_MOVE :
float endX = event.getX();
int distanceX = (int) Math.abs(endX - lastX);
if(distanceX > 5){
isClickenble = false;
}
refreshView(endX);
startX = event.getX();//又一次计算初始值
break;
case MotionEvent.ACTION_UP :
if(slidingLeft>slideLeftMax/2){ //开
isOpened = true;
slidingLeft = slideLeftMax;
}else{//关
isOpened = false;
slidingLeft = 0;
}
invalidate();
break;
}
return true;//表示自己处理 不须要调用父类的方法
}
private void refreshView(float endX) {
float distance = (endX - startX) ;
slidingLeft+=distance;
if(slidingLeft<0){
slidingLeft = 0;
}
if(slidingLeft>slideLeftMax){
slidingLeft = slideLeftMax;
}
invalidate();
}
}

效果图:

android 仿ios开关控件的更多相关文章

  1. JS调用Android、Ios原生控件

    在上一篇博客中已经和大家聊了,关于JS与Android.Ios原生控件之间相互通信的详细代码实现,今天我们一起聊一下JS调用Android.Ios通信的相同点和不同点,以便帮助我们在进行混合式开发时, ...

  2. Android仿iPhone 滚轮控件 实现

    Android_开发 实用滚轮效果选择数字http://blog.csdn.net/zhangtengyuan23/article/details/8653771 Android仿iPhone滚轮控件 ...

  3. android自己定义开关控件

    近日在android项目要使用开关控件.可是android中自带的开关控件不太惬意,所以就打算通过自己定义View写一个开关控件 ios的开关控件当然就是我要仿照的目标. 先上图:   waterma ...

  4. 自定义仿 IPhone 开关控件

    极力推荐文章:欢迎收藏 Android 干货分享 阅读五分钟,每日十点,和您一起终身学习,这里是程序员Android 本篇文章主要介绍 Android 开发中的部分知识点,通过阅读本篇文章,您将收获以 ...

  5. 高仿QQ顶部控件之IOS SegmentView

    经常会看到QQ上面有一个 消息和电话 的顶部面板,这个空间是IOS7的分段控制,android中没有这个控件,今天在威哥的微信公众号中成功gank到这个自定义控件的实现,下面跟着尝试一波. 首先是定义 ...

  6. Android常用酷炫控件(开源项目)github地址汇总

    转载一个很牛逼的控件收集帖... 第一部分 个性化控件(View) 主要介绍那些不错个性化的 View,包括 ListView.ActionBar.Menu.ViewPager.Gallery.Gri ...

  7. Android 常用炫酷控件(开源项目)git地址汇总

    第一部分 个性化控件(View) 主要介绍那些不错个性化的 View,包括 ListView.ActionBar.Menu.ViewPager.Gallery.GridView.ImageView.P ...

  8. iOS常见控件的基本使用

    UI相关类继承关系 UIView 常见属性和方法 UIView属性 UIView方法 UIControl 常用控件 UIImageView 图片显示控件android ImageView UISlid ...

  9. UISwitch 开关控件

    UISwitch iOS中的开关控件,只有两种状态,打开或关闭. aSwitch.tintColor = [UIColor redColor]; //关闭状态下的渲染颜色 aSwitch.onTint ...

随机推荐

  1. BZOJ 1855: [Scoi2010]股票交易(DP+单调队列)

    1855: [Scoi2010]股票交易 Description 最近lxhgww又迷上了投资股票,通过一段时间的观察和学习,他总结出了股票行情的一些规律. 通过一段时间的观察,lxhgww预测到了未 ...

  2. BZOJ 2015:[Noi2010]能量采集(数论+容斥原理)

    2005: [Noi2010]能量采集 Description 栋栋有一块长方形的地,他在地上种了一种能量植物,这种植物可以采集太阳光的能量.在这些植物采集能量后,栋栋再使用一个能量汇集机器把这些植物 ...

  3. java读取文件的基本操作

    import java.io.FileInputStream; /** * 使用FileInputStream读取文件 */ public class FileRead { /** * @param ...

  4. 如何用jquery获得td里边的内容

    jQuery 中使用 text() 或者 html() 函数可以获取td的内容: $("td").text();   // 或者 $("td").html(); ...

  5. express中放置静态文件

    不使用模版引擎的话要直接添加html,可以使用express.static()中间件设定静态文件目录,然后将html文件放在里面,如:express默认静态文件目录为 app.use(express. ...

  6. 【转】axios的基本使用

    axios的基本使用 vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的 axios 基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中 ...

  7. 【BZOJ1030】文本生成器(容斥原理,AC自动机,计数DP)

    题意:给出n个字符串,求长为m至少包含n个里其中一个的串的字符串一共有多少个,字符集为A到Z,答案对10007取模 n<=60,len<=100 思路:将至少一个转化为所有个数减去没有出现 ...

  8. 【Reship】use of tangible T4 template engine

    1.first of all 之前在 “使用T4模板生成代码 – 初探” 文章简单的使用了T4模板的生成功能,但对于一个模板生成多个实例文件,如何实现这个方式呢?无意发现一个解决方案 “Multipl ...

  9. Struts2的使用注解配置Action(零配置)

    1.首先引入struts2注解的jar包:struts2-convention-plugin.jar ------------------------------第一种方式-------------- ...

  10. 此时不应有 \Microsoft (转)

    原文转自 http://www.tuicool.com/articles/J7RFRz 下载boost库后,在cmd中运行bootstrap.bat ,输出 "此时不应有 \Microsof ...