开关控件(可随手指移动)的

开关

1、继承View

2、测量宽高,等于背景图片的宽高

3、绘制自己,背景+滑动块

4、处理触摸事件,让滑动块随手指移动

1、继承View

public class ToggleButton extends View {

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

2、测量宽高,等于背景图片的宽高

public class ToggleButton extends View {

private Bitmap backgroundBitmap;
private Bitmap slideBitmap;
private int slideLeftPos;// 滑动块距离左边的距离
private int slideLeftPosMax;

public ToggleButton(Context context, AttributeSet attrs) {
     super(context, attrs);
     // 初始化背景图片和滑动块图片
     backgroundBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.toogle_background);
     slideBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.toogle_slidebg);
     slideLeftPosMax = backgroundBitmap.getWidth()-slideBitmap.getWidth();// 滑动块距离左边最大值
}

// 测量
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
      // 设置自己的宽高,把背景图片的宽高作为自己的宽高
      setMeasuredDimension(backgroundBitmap.getWidth(), backgroundBitmap.getHeight());
}
}

3、绘制自己,背景+滑动块

// 绘制
@Override
protected void onDraw(Canvas canvas) {
      // 绘制背景图片
      canvas.drawBitmap(backgroundBitmap, 0, 0, null);
      // 绘制滑动块
      canvas.drawBitmap(slideBitmap, slideLeftPos, 0, null);
}

4、处理触摸事件,让滑动块随手指移动

// 处理触摸事件
@Override
public boolean onTouchEvent(MotionEvent event) {
   switch (event.getAction()) {
       case MotionEvent.ACTION_DOWN:
             downX = (int) event.getX();
       break;
       case MotionEvent.ACTION_MOVE:

            int moveX = (int) event.getX();
            // 计算手指移动的距离
            int distanceX = moveX - downX;

           // 更新滑动块距离左边的距离
           slideLeftPos += distanceX;
           // 限制滑动块距离左边的距离
           if(slideLeftPos<0){
                slideLeftPos = 0;
           }else if(slideLeftPos>slideLeftPosMax){
                slideLeftPos = slideLeftPosMax;
}

// 每次移动后,需要把当前move的位置赋值给down
downX = moveX;
// 重新绘制控件
invalidate();
break;
case MotionEvent.ACTION_UP:
// 计算滑动块中间点的位置,与背景图片中间点进行比较
// 滑动块中间点的位置<背景图片中间点 ,应该画到最左边,否则画到最右边
if(slideLeftPos + slideBitmap.getWidth()/2<backgroundBitmap.getWidth()/2){
slideLeftPos = 0;
}else{
slideLeftPos = slideLeftPosMax;
}
// 重新绘制控件
invalidate();
break;

default:
break;
}
return true;// 消费掉事件
}
时间: 2024-12-06 16:30:57

开关控件(可随手指移动)的的相关文章

android自定义开关控件

近日在android项目要使用开关控件,但是android中自带的开关控件不太满意,所以就打算通过自定义View写一个开关控件 ios的开关控件当然就是我要仿照的目标. 先上图:    分析: 开关控件,中包含了两个部分,一个是一个圆,一个是圆角矩形,好了那我们只要通过view来进行绘制这两部分就可以了 直接上代码: package com.example.widget; import com.example.switchbutton_master.R; import android.conte

开关控件在主流前端框架中的使用方法

本文仅介绍使用方法,后续再介绍实现方案及优劣对比. jquerymobile jqm可以使用checkbox和select模拟switch控件,只需要增加data-role='flipswitch'即可: 默认开关控件: <input type="checkbox" data-role="flipswitch" /> 若要变为选中状态,只需要增加一个checked属性即可,如下: <input type="checkbox" d

UISwitch 开关控件

UISwitch iOS中的开关控件,只有两种状态,打开或关闭. aSwitch.tintColor = [UIColor redColor]; //关闭状态下的渲染颜色 aSwitch.onTintColor = [UIColor blueColor]; //打开状态下的渲染颜色. aSwitch.on = NO; //将其显示状态为打开 (默认关闭). aSwitch.thumbTintColor = [UIColor blackColor]; //改变switch开关按钮的颜色. [aSw

weui-switch开关控件,表单提交后如何取值

最近在学习weui这个框架,做了一些小的试验,发现weui-switch控件直接提交不能获取到表单信息,在segmentfault上发现也有人提了这个问题,有人说可以设置一个隐含标签来捕获开关的状态,试了一下,确实可以,把我自己的解决方法写下来如下: weui这个switch开关控件好像确实只能用来显示开关状态,无法提交数据,我根据楼上的思路,建了一个隐藏的radio标签,然后通过这个开关控件来设置radio标签的value属性,这样提交,后台php就能获取到正确的表单信息了: <!--隐含元素

自定义switch开关控件,实现点击和滑动效果

效果图 1. xml布局中 <com.etoury.etoury.ui.view.SlideSwitch android:id="@+id/slideSwitch3" android:layout_width="wrap_content" android:layout_height="wrap_content" /> 2. SlideSwitch.java package com.etoury.etoury.ui.view; impo

HYSwitch - iOS7风格的开关控件

可以自定义控件大小. 可以修改关闭背景色.打开背景色.按钮颜色. 通过block回调. 详见.h文件 GitHub:  https://github.com/rainbownight/HYSwitchExample HYSwitch - iOS7风格的开关控件

Android 自定义SwitchButton开关控件

SwitchButton开关控件早已经非常流行.有各种各样的样式,SwitchButton开关控件一般用于app软件设置那里,控制缓存.声音.提示.下载等等.是具有很好的UI体验以及用户的习惯性.那么再下面介绍一个SwitchButton开关控件.并附上源码. 源码下载:点击 一.看实现的效果图 二.自定义SwitchButton 这是一个继承CheckBox的SwitchButton类.来实现做这些动画效果的,首先准备好这些图片,然后canvas绘制控件 的边框.背景.以及按钮.绘制时候加上相

【iOS开发-12】UISwitch开关控件属性介绍以及获取开关状态并做出响应

(1)UISwitch的大小也是固定的,不随我们frame设置的大小改变:也是裁剪成圆角的,设置背景就露马脚发现背景是矩形. (2)UISwitch的背景图片设置无效,即我们只能设置颜色,不能用图片当背景,虽然实验了很小的图片,也是不行.可能需要借助第三方类来实现. (3)UISwitch也可以增加addTarget:方法,来获取值变动的操作,从而做出响应的反应. (4).isOn属性比较特殊,不能设置值,因为是哥getter方法,不是setter方法,所以只能获取值,例如判断是否开启,一般用在

小米3系统计算器自定义开关控件-MySwitchView

1.前言 在android4.0以后,有switch控件,类似于iPhone上面滑块的效果,但是只能用在4.0以后的系统中,之前的平台,就无法使用这种控件.近段时间,看到了小米3手机上自带的计算器app,有这样的效果,上面的一个控件,觉得很漂亮,并且与iPhone上的效果略有不同,于是自己动手编写了一下这个功能,在编写的过程中,参考过网上的一些demo,运行后,在控件滑动的时候,感觉动画不平滑,有卡顿的现象,反复修改,最后还是有一些问题,感觉是在滑动中的状态,没有合理的控制好.无奈只能参考Goo

Framework7新版学习笔记之 开关控件

一:开关控件 新版F7增加了开关控件,在界面中提供一个开关按钮,点击它进行 打开/关闭. 二:定义开关控件并自动初始化 <label class="toggle color-xx toggle-init"> <input type="checkbox"> <span class="toggle-icon"></span> </label> 三:在js中获取开关值 var toggle =