自定义控件--滑动开关

滑动开关--------
自定义控件步骤:
测量:onMeasure  设置自己显示在屏幕上的宽高
布局:onLayout   设置自己显示在屏幕上的位置(只有在自定义ViewGroup中才用到)
绘制:onDraw     控制显示在屏幕上的样子(自定义viewgroup时不需要这个)

View和ViewGroup的区别
1.他们都需要进行测量操作
2.ViewGroup主要是控制子view如何摆放,所以必须实现onLayout

  View没有子view,所以不需要onLayout方法,但是必须实现onDraw

UI特效大全网站:http://www.23code.com/

滑动开关属于自定义控件,首先创建一个java文件ToggleButton实现自定义控件的方法,初始化2个构造方法,只有一个参数的那个构造方法是在java文件中使用的,2个参数的是在xml的使用方法,MainActivity中需要实现控件的几个方法,设置控件的背景图片setSlideBackgroundResource,设置滑块的背景图片setSwitchBackgroundResource,2个方法在自定义控件中实现,需要实现onMeasure 方法和onDraw方法,将元素显示在界面上面,由于需要添加案件监听,自己实现按键的一些操作,并监听修改按钮的位置,根据按钮的状态分为滑动状态和不滑动状态,按键起来以后根据位置来设置ToggleState。同时创建了一个监听OnToggleStateChangeListener,创建接口创建一个方法,在逻辑代码中实现自定义控件中的状态监听。

布局文件activity_main.xml

<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"
    tools:context=".MainActivity" >

    <com.ldw.toggle.view.ToggleButton
        android:id="@+id/toggle"
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</RelativeLayout>

逻辑代码MainActivity.java

package com.ldw.toggle;

import android.app.Activity;
import android.os.Bundle;
import android.widget.Toast;

import com.ldw.toggle.view.ToggleButton;
import com.ldw.toggle.view.ToggleButton.OnToggleStateChangeListener;
import com.ldw.toggle.view.ToggleButton.ToggleState;

public class MainActivity extends Activity {
	
	private ToggleButton toggleButton;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        toggleButton = (ToggleButton) findViewById(R.id.toggle);
        //设置最下面的背景图片
        toggleButton.setSlideBackgroundResource(R.drawable.slide_background);
        //设置开关的图片
        toggleButton.setSwitchBackgroundResource(R.drawable.key);
        //设置开关的状态
        toggleButton.setToggleState(ToggleState.Open);
        
        //添加监听器
        toggleButton.setOnToggleStateChangeListener(new OnToggleStateChangeListener(){

			@Override
			public void onToggleStateChange(ToggleState state) {
				Toast.makeText(MainActivity.this, state == ToggleState.Open?"开启":"关闭", 0).show();
				
			}
        	
        });
    }

    
}

自定义控件ToggleButton.java

package com.ldw.toggle.view;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

public class ToggleButton extends View{

	private ToggleState toggleState;//开关状态
	private Bitmap slideBg;//背景图片
	private Bitmap switchBg;//开关图片
	private int currentX;//当前触摸点的x坐标
	private boolean isSliding;//是否在滑动
	/*
	 * 如果View在布局文件xml中使用只需要创建这个方法
	 */
	public ToggleButton(Context context, AttributeSet attrs) {
		super(context, attrs);
	}
	
	/*
	 * 如果View需要在java代码中动态去new,就用这个方法,
	 * 比如View view = new View()这种
	 */
	public ToggleButton(Context context) {
		super(context);
	}
	
	public enum ToggleState{
		Open, Close;
	}

	//设置滑块的北京图标
	public void setSlideBackgroundResource(int slideBackground) {
		slideBg = BitmapFactory.decodeResource(getResources(), slideBackground);
		
	}

	//设置滑动开关的北京图片
	public void setSwitchBackgroundResource(int key) {
		switchBg = BitmapFactory.decodeResource(getResources(), key);
		
	}

	/*
	 * 设置开关的状态
	 */
	public void setToggleState(ToggleState state) {
		toggleState = state; 
		
	}

	/*
	 * 设置当前控件在屏幕的宽高
	 */
	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
		setMeasuredDimension(switchBg.getWidth(), switchBg.getHeight());
	}
	
	/*
	 * 绘制控件在屏幕上的显示
	 */
	@Override
	protected void onDraw(Canvas canvas){
		super.onDraw(canvas);
		//1.绘制背景图片
		//第一个参数是距离左边的距离,第二个参数是距离顶部的距离
		canvas.drawBitmap(switchBg, 0, 0, null);
		
		//2.绘制滑动块的图片
		//滑动的状态
		if(isSliding) {
			int left = currentX - slideBg.getWidth() / 2;
			if(left < 0) left = 0;
			if(left > (switchBg.getWidth() - slideBg.getWidth())){
				left = switchBg.getWidth() - slideBg.getWidth();
			}
			canvas.drawBitmap(slideBg, left, 0, null);
		}else{
			//此时按键抬起
			if(toggleState == ToggleState.Open){
				canvas.drawBitmap(slideBg, slideBg.getWidth()- slideBg.getHeight(),0, null);
			}else{
				canvas.drawBitmap(slideBg, 0, 0, null);
			}
		}
		
	}
	
	@Override
	public boolean onTouchEvent(MotionEvent event){
		currentX = (int) event.getX();
		switch(event.getAction()) {
			case MotionEvent.ACTION_DOWN:
				isSliding = true;
				break;
			case MotionEvent.ACTION_HOVER_MOVE:
				break;
			case MotionEvent.ACTION_UP:
				isSliding = false;
				int cen = switchBg.getWidth()/2;
				if(currentX > cen){
					//open,当状态发生改变的的时候才会触发监听的方法
					if(toggleState != ToggleState.Open){
						//设置toggleState的状态
						toggleState = ToggleState.Open;
						if(listener != null){
							listener.onToggleStateChange(toggleState);
						}
					}
					
				}else{
					//close,当状态发生改变的的时候才会触发监听的方法
					if(toggleState != ToggleState.Close){
						//设置toggleState的状态
						toggleState = ToggleState.Close;
						if(listener != null){
							listener.onToggleStateChange(toggleState);
						}
					}
					
				}
				break;
		}
		//调用invalidate系统会调用onDraw,不需要自己调用,onDraw是系统方法
		invalidate();
		//按键自己处理,不抛出
		return true;
	}
	
	private OnToggleStateChangeListener listener;
	public void setOnToggleStateChangeListener(OnToggleStateChangeListener listener){
		this.listener = listener;
	}
	//监听,利用接口暴漏数据给外界
	public interface OnToggleStateChangeListener{
		void onToggleStateChange(ToggleState state);
	}

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值