Android 自定义的开关按钮——SwitchButton
本文转自:http://blog.csdn.net/swust_chenpeng/article/details/19967501
我将原文的控件进行了一些修改,去掉了原来控件的外边框,只留下重要的遮罩、背景和滑块。并且可以在布局文件中预览(预览效果不是太好,凑合看看还可以)。自己修改了下监听器,增加了一些方法。总之目前已经和官方的控件差不多了。重要的是可以自定义控件的大小了!
上面粉红色的那个就是我们自定义的控件了,下面的两个是用的官方的控件,自己改样式。基本处于没用的级别。
好了,现在我们开始讲自定义控件添加入代码中。
首先,定义attrs.xml文件
layout_width 控件的宽度,必须为确定数值的单位,不能用match_parent/wrap_content
layout_height 控件的高度,必须为确定数值的单位,不能用match_parent/wrap_content
mask 控件的遮罩,在这个遮罩范围内的图片才予以显示,可以实现圆角
track 控件的轨道背景图
thumb 控件的滑块图片
这里的5个属性必须同时指定,否则会出问题!
mask.png
track.png
thumb.png(这里可以看见这原点做的时候,应该做到和轨道一个长度,并且正好能在轨道的中间位置)
效果要达到这样能完美显示 → ╮(╯▽╰)╭这种事情就交给美工妹子去做吧,程序员就好好地编程吧~
<?xml version="1.0" encoding="utf-8"?>
<resources> <declare-styleable name="SwitchButton">
<attr name="android:layout_width"/>
<attr name="android:layout_height"/>
<attr name="mask" format="reference"/>
<attr name="android:track"/>
<attr name="android:thumb"/>
</declare-styleable> </resources>
然后,我们写这个控件的类 SwitchButton.java
package com.kale.switchbutton; import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.PorterDuff.Mode;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.drawable.BitmapDrawable;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener; /**
* @author:swust_chenpeng
* 本文转自:http://blog.csdn.net/swust_chenpeng/article/details/19967501
* @tips : 白色圆点:switch_btn_pressed;
* 左白右红的长条:switch_bottom;
* 无色长条:switch_frame;
* 黑色长条:switch_mask.
* @date :2014-7-20
*/
public class SwitchButton extends View implements OnClickListener {
private Bitmap mSwitchTrack, mSwitchThumb, mSwitchMask;
private float mCurrentX = ;// 当前的x坐标
private boolean mSwitchOn = true;// 开关默认是开着的
private int mMoveLength;// 最大移动距离
private float mLastX = ;// 第一次按下的有效区域 private Rect mDest = null;// 绘制的目标区域大小
private Rect mSrc = null;// 截取源图片的大小
private int mDeltX = ;// 移动的偏移量 private int width, height; private Paint mPaint = null;
private OnCheckedChangeListener mListener = null;
private boolean mFlag = false; private float scaleWidth,scaleHeight;//图片缩放的比例 public SwitchButton(Context context) {
this(context, null);
} public SwitchButton(Context context, AttributeSet attrs) {
this(context, attrs, ); } public SwitchButton(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(context, attrs);
} /**
* 初始化相关资源
*/
private void init(Context context, AttributeSet attrs) {
TypedArray mTypedArray = context.obtainStyledAttributes(attrs,
R.styleable.SwitchButton); width = (int) mTypedArray.getDimension(
R.styleable.SwitchButton_android_layout_width, );
height = (int) mTypedArray.getDimension(
R.styleable.SwitchButton_android_layout_height,); // 遮罩
mSwitchMask = getSrcBitmap(mTypedArray, R.styleable.SwitchButton_mask);
// 背景(轨道的背景)
mSwitchTrack = getSrcBitmap(mTypedArray, R.styleable.SwitchButton_android_track);
// 滑块
mSwitchThumb = getSrcBitmap(mTypedArray, R.styleable.SwitchButton_android_thumb); // 计算缩放的比例
scaleWidth = ((float) width / mSwitchMask.getWidth());
scaleHeight = ((float) height / mSwitchMask.getHeight()); mSwitchMask = getScaleBitmap(mSwitchMask);
mSwitchTrack = getScaleBitmap(mSwitchTrack);
mSwitchThumb = getScaleBitmap(mSwitchThumb); setOnClickListener(this);
setOnTouchListener(new OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
return false;
}
});
// 可以移动的长度
mMoveLength = mSwitchTrack.getWidth() - mSwitchMask.getWidth();
// 创建一个矩形对象(目标区域的大小),通过使用四个整数来初始化矩形左上角的横坐标、纵坐标以及矩形的高度、宽度
mDest = new Rect(, , mSwitchMask.getWidth(),mSwitchMask.getHeight());
// 创建一个矩形对象,矩形左上角的横坐标、纵坐标以及矩形的宽度、高度均为零。这是默认的构造函数
mSrc = new Rect();
mPaint = new Paint();
mPaint.setAntiAlias(true);// 消除锯齿
mPaint.setAlpha();// 设置透明度
mPaint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));
} // 从资源中获取图片对象
private Bitmap getSrcBitmap(TypedArray mTypedArray,int index) {
BitmapDrawable tempBit;
tempBit = (BitmapDrawable)mTypedArray.getDrawable(index);
return tempBit.getBitmap();
} // 将原图,按照布局文件中的控件长度来缩放
private Bitmap getScaleBitmap(Bitmap bitmap) {
Matrix matrix = new Matrix();
if (isInEditMode()) {
return bitmap;
}
matrix.postScale(scaleWidth, scaleHeight);
bitmap = Bitmap.createBitmap(bitmap, , , bitmap.getWidth(),
bitmap.getHeight(), matrix, true);
return bitmap;
} // 该方法指定该控件在屏幕上的大小,这里要计算一下控件的实际大小,然后调用setMeasuredDimension来设置
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
setMeasuredDimension(width, height);
} @Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (mDeltX > || mDeltX == && mSwitchOn) {
if (mSrc != null) {
mSrc.set(mMoveLength - mDeltX, ,
mSwitchTrack.getWidth() - mDeltX, mSwitchMask.getHeight());
}
}
else if (mDeltX < || mDeltX == && !mSwitchOn) {
if (mSrc != null) {
mSrc.set(-mDeltX, , mSwitchMask.getWidth() - mDeltX,
mSwitchMask.getHeight());
}
} // 这儿是离屏缓冲,自己感觉类似双缓冲机制吧
int count = canvas.saveLayer(new RectF(mDest), null,
Canvas.MATRIX_SAVE_FLAG
| Canvas.CLIP_SAVE_FLAG
| Canvas.HAS_ALPHA_LAYER_SAVE_FLAG
| Canvas.FULL_COLOR_LAYER_SAVE_FLAG
| Canvas.CLIP_TO_LAYER_SAVE_FLAG); canvas.drawBitmap(mSwitchTrack, mSrc, mDest, null);
canvas.drawBitmap(mSwitchTrack, mSrc, mDest, null);
canvas.drawBitmap(mSwitchMask, , , mPaint);
canvas.drawBitmap(mSwitchThumb, mSrc, mDest, null);
//这个判断,用来让这个控件可以在布局文件中预览
if (isInEditMode()) {
return ;
}
canvas.restoreToCount(count); } @Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
mLastX = event.getX();
break;
case MotionEvent.ACTION_MOVE:
mCurrentX = event.getX();
mDeltX = (int) (mCurrentX - mLastX);
// 如果开关开着向左滑动,或者开关关着向右滑动(这时候是不需要处理的)
if ((mSwitchOn && mDeltX < ) || (!mSwitchOn && mDeltX > )) {
mFlag = true;
mDeltX = ;
} if (Math.abs(mDeltX) > mMoveLength) {
mDeltX = mDeltX > ? mMoveLength : -mMoveLength;
}
invalidate();
return true;
case MotionEvent.ACTION_UP:
if (Math.abs(mDeltX) > && Math.abs(mDeltX) < mMoveLength / ) {
mDeltX = ;
invalidate();
return true;
} else if (Math.abs(mDeltX) > mMoveLength /
&& Math.abs(mDeltX) <= mMoveLength) {
mDeltX = mDeltX > ? mMoveLength : -mMoveLength;
mSwitchOn = !mSwitchOn;
if (mListener != null) {
mListener.onCheckedChanged(this, mSwitchOn);
}
invalidate();
mDeltX = ;
return true;
} else if (mDeltX == && mFlag) {
// 这时候得到的是不需要进行处理的,因为已经move过了
mDeltX = ;
mFlag = false;
return true;
}
return super.onTouchEvent(event);
default:
break;
}
invalidate();
return super.onTouchEvent(event);
} public void setOnCheckedChangeListener(OnCheckedChangeListener listener) {
mListener = listener;
} public interface OnCheckedChangeListener {
public void onCheckedChanged(SwitchButton button, boolean isChecked);
} @Override
public void onClick(View v) {
mDeltX = mSwitchOn ? mMoveLength : -mMoveLength;
mSwitchOn = !mSwitchOn;
if (mListener != null) {
mListener.onCheckedChanged(this, mSwitchOn);
}
invalidate();// 重绘
mDeltX = ;
} public Boolean isChecked() {
return mSwitchOn;
} public void setChecked(Boolean checked) {
mSwitchOn = checked;
invalidate();
} }
最后,在布局文件中使用它。(记得写上命名空间)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:pv="http://schemas.android.com/apk/res/com.kale.switchbutton"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" > <com.kale.switchbutton.SwitchButton
android:id="@+id/switch_id"
android:layout_width="80dp"
android:layout_height="34dp"
android:layout_marginTop="20dp"
android:layout_gravity="center_horizontal"
android:thumb="@drawable/switch_thumb"
android:track="@drawable/switch_bottom"
pv:mask="@drawable/switch_mask" /> <Switch
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_gravity="center_horizontal"
android:switchMinWidth="40dp"
android:switchPadding="30dp"
android:padding="5dp"
android:text="自定义风格"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textOff=" "
android:textOn=" "
android:thumb="@drawable/tt_button"
android:track="@drawable/tt_path" /> <Switch
android:id="@+id/switch1"
android:layout_marginTop="20dp"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/> </LinearLayout>
源码下载:http://download.csdn.net/detail/shark0017/7659623
Android 自定义的开关按钮——SwitchButton的更多相关文章
- 自定义的开关按钮——SwitchButton
本文转自:http://blog.csdn.net/swust_chenpeng/article/details/19967501 我将原文的控件进行了一些修改,去掉了原来控件的外边框,只留下重要的遮 ...
- Android 自定义View合集
自定义控件学习 https://github.com/GcsSloop/AndroidNote/tree/master/CustomView 小良自定义控件合集 https://github.com/ ...
- android 自定义动画
android自定义动画注意是继承Animation,重写里面的initialize和applyTransformation,在initialize方法做一些初始化的工作,在applyTransfor ...
- Android自定义View 画弧形,文字,并增加动画效果
一个简单的Android自定义View的demo,画弧形,文字,开启一个多线程更新ui界面,在子线程更新ui是不允许的,但是View提供了方法,让我们来了解下吧. 1.封装一个抽象的View类 B ...
- Android自定义View4——统计图View
1.介绍 周末在逛慕课网的时候,看到了一张学习计划报告图,详细记录了自己一周的学习情况,天天都是0节课啊!正好在学习Android自定义View,于是就想着自己去写了一个,这里先给出一张慕课网的图,和 ...
- (转)[原] Android 自定义View 密码框 例子
遵从准则 暴露您view中所有影响可见外观的属性或者行为. 通过XML添加和设置样式 通过元素的属性来控制其外观和行为,支持和重要事件交流的事件监听器 详细步骤见:Android 自定义View步骤 ...
- Android 自定义View (五)——实践
前言: 前面已经介绍了<Android 自定义 view(四)-- onMeasure 方法理解>,那么这次我们就来小实践下吧 任务: 公司现有两个任务需要我完成 (1)监测液化天然气液压 ...
- Android 自定义 view(四)—— onMeasure 方法理解
前言: 前面我们已经学过<Android 自定义 view(三)-- onDraw 方法理解>,那么接下我们还需要继续去理解自定义view里面的onMeasure 方法 推荐文章: htt ...
- Android 自定义 view(三)—— onDraw 方法理解
前言: 上一篇已经介绍了用自己定义的属性怎么简单定义一个view<Android 自定义view(二) -- attr 使用>,那么接下来我们继续深究自定义view,下一步将要去简单理解自 ...
随机推荐
- POJ 3664 Election Time 题解
这道题网上非常多人都会说easy,水题之类的话,只是我看了下说这种话的人的程序,能够说他们的程序都不及格! 为什么呢?由于他们的程序都是使用简单的二次排序水过(大概你能搜索到的多是这种程序).那样自然 ...
- Java的接口总结
Java最主要的封装是class.除此之外还有接口interface. 这段时间一直在想接口有什么作用呢.有了接口有哪些优点呢.结合网络上各位大神的文章,接口的作用大概体如今下面几个方面. 1.回调 ...
- 在Redhat Linux中执行非Redhat的Openstack, Redhat将对其Linux不提供支持
一声叹息. IBM.HP.Dell, Mirantis, Piston等.请问.你们还把你们的Openstack部署在Redhat中吗? http://blogs.wsj.com/digits/201 ...
- bzoj2150: 部落战争(匈牙利)
2150: 部落战争 题目:传送门 题解: 辣鸡数据..毁我AC率 先说做法,很容易就可以看出是二分图匹配的最小路径覆盖(可能是之前不久刚做过类似的题) 一开始还傻逼逼的去直接连边然后准备跑floyd ...
- nyoj--214--单调递增子序列(二)(二分查找+LIS)
单调递增子序列(二) 时间限制:1000 ms | 内存限制:65535 KB 难度:4 描述 给定一整型数列{a1,a2...,an}(0<n<=100000),找出单调递增最长子序 ...
- 5.Git使用详细教程
转自:https://www.cnblogs.com/seven-ahz/p/7712125.html 一:Git是什么? Git是目前世界上最先进的分布式版本控制系统. 二:SVN与Git的最主要的 ...
- SpringMVC+Spring+Hibernate框架整合原理,作用及使用方法
转自:https://blog.csdn.net/bieleyang/article/details/77862042 SSM框架是spring MVC ,spring和mybatis框架的整合,是标 ...
- [jzoj 5930] [NOIP2018模拟10.26】山花 解题报告 (质因数分类)
题目链接: http://172.16.0.132/senior/#contest/show/2538/2 题目: 小S决定从某一个节点$u$开始对其子树中与$u$距离小于$K$的节点代表的花树进行采 ...
- HD-ACM算法专攻系列(10)——大明A+B
题目描述: 源码: 需要注意的一点是输出是最简形式,需要去除小数的后导0,而调用stripTrailingZeros()函数后,数会以科学计数法输出,所以需要调用toPlainString(). im ...
- angular踩坑记录
ng-repeat和ng-click同时使用的时候,注意不能直接在ng-click当中写代码,必须在当前$scope中绑定一个事件,转为调用该事件.否则会出现意想不到的情况.具体原因点击这里. 使用自 ...