0.引言

(1)Android从4.0开始提供了switch的滑动开关效果组件,但是之前版本却没有

(2)很多时候我们写程序,都希望把有用的通用的通用的东西封装起来,以便以后重用。

本文根据组件开发思想,首先介绍android自定义控件,然后将自定义的控件封装为jar包。最为实现了一个滑动开关的例子。最后效果如图所示:

Android 自定义控件 点击事件 android自定义开关控件_android

下面是开发步骤:

1.android自定义控件

自定义控件过程:建立一个应用程序,新建一个类,该类继承View类,并实现参数为(Context context,AttributeSet attrs)的构造函数,定义控件对应的xml布局文件,定义控件的属性文件attrs

2.封装为jar包

封装jar包有两种方法,一是在新建工程的时候就勾选Mark this project as a library

Android 自定义控件 点击事件 android自定义开关控件_xml_02

这样建立的就是库文件,但是这样的话建立项目的时候不利于调式,因此使用的二种方法;第二种方法是在建立调试好项目后将,选择项目右键——>属性——>在左边面板中选择Android,在面板中勾选Is Library

Android 自定义控件 点击事件 android自定义开关控件_Android 自定义控件 点击事件_03

3.switchview实例

声明:本例子是在别人的基础上更改而来的部分代码版权属于他人

(1)建立工程switchview2

建立类SwitchView,SwitchView继承自LinearLayout

(2)新建布局文件switch_view.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/sv_container"
    android:layout_width="230dip"
    android:layout_height="38dip"
    android:background="@drawable/usage_list_dark" >    <ImageButton
        android:id="@+id/iv_switch_cursor"
        android:layout_width="120dip"
        android:layout_height="36dip"
        android:layout_centerVertical="true"
        android:layout_marginLeft="0.5dip"
        android:layout_marginRight="0.5dip"
        android:background="@drawable/usage_list_green" />    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center" >        <TextView
            android:id="@+id/switch_text_true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="开" />        <TextView
            android:id="@+id/switch_text_false"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="关" />
    </LinearLayout></RelativeLayout>

布局文件包括外边框sv_container,滑动块iv_switch_cursor,以及显示文本的两个TextView

(3)在res->values文件夹下新建立控件的属性文件attrs.xml,里面建立了一个name为SwitchView的declare-styleable来自定义属性,属性包括当开关返回的是true时显示的文本,为false显示的文本,常见的是“是否”、“男女”等二选一的地方。container_Hight、container_Width、container_Background是表示的是背景高度、宽度、背景图或颜色,cursor_Hight、cursor_Width、cursor_Background表示的是滑动块的高度、宽度、背景图或颜色,这里背景一般都是用图片,因为颜色表示不出效果来,最终滑动开关的效果关键也要靠这些属性综合决定。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="SwitchView">
         <attr name="textTrue" format="string" />
         <attr name="textFalse" format="string" />
         <attr name="container_Hight" format="dimension" />
         <attr name="container_Width" format="dimension" />
         <attr name="cursor_Hight" format="dimension" />
         <attr name="cursor_Width" format="dimension" />
          <attr name="cursor_Background" format="reference|color" />
         <attr name="container_Background" format="reference|color" />
    </declare-styleable>
</resources>

(4)重构SwitchView方法。方法必须包含AttributeSet属性attrs,attrs通过context.obtainStyledAttributes(attrs, R.styleable.SwitchView);方法建立TypedArray与attrs.xml中的SwitchView对应,然后就可以为相应的控件赋值。

public SwitchView(Context context, AttributeSet attrs) {
super(context, attrs);
this.context = context;
initView();//设置滑动开关的显示文本
TypedArray styledAttrs = context.obtainStyledAttributes(attrs, R.styleable.SwitchView);//TypedArray是一个数组容器
this.setTextTrue(styledAttrs.getString(R.styleable.SwitchView_textTrue));
this.setTextFalse(styledAttrs.getString(R.styleable.SwitchView_textFalse));

int c_h=(int) styledAttrs.getDimension(R.styleable.SwitchView_container_Hight, 38);
int c_w=(int)styledAttrs.getDimension(R.styleable.SwitchView_container_Width, 230);
int iv_h=(int) styledAttrs.getDimension(R.styleable.SwitchView_cursor_Hight,36);
int iv_w=(int)styledAttrs.getDimension(R.styleable.SwitchView_cursor_Width, 120);

//更改布局大小,用setLayoutParams报错
sv_container.getLayoutParams().height=c_h;
sv_container.getLayoutParams().width=c_w;
Drawable drawable1=styledAttrs.getDrawable(R.styleable.SwitchView_container_Background);
if(drawable1!=null)
sv_container.setBackground(drawable1);
sv_container.invalidate();
iv_switch_cursor.getLayoutParams().height=iv_h;
iv_switch_cursor.getLayoutParams().width=iv_w;
Drawable drawable2=styledAttrs.getDrawable(R.styleable.SwitchView_cursor_Background);
if(drawable1!=null)
iv_switch_cursor.setBackground(drawable2);
iv_switch_cursor.invalidate();

//	 iv_switch_cursor.setLayoutParams(new LayoutParams(iv_w,iv_h));
}

(5)按照第二步的方法封装为jar包

4.实例应用

新建一个工程项目SwitchViewExample,建立一个Activity类MainActivity.class

在项目的属性中选择Android,点击Add添加SwitcView的库

Android 自定义控件 点击事件 android自定义开关控件_控件_04

或着在项目SwitchView2项目的bin下面将switchview2.jar拷贝靠SwitchViewExample项目下的libs文件夹下面,通过添加外部jar包引用的方式加载进来。

在MainActivity对应的布局文件中添加前面自定义的控件,并设置对应的属性

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:sv="http://schemas.android.com/apk/res-auto/com.jiesai.ljp.switchview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" xmlns:app="http://schemas.android.com/apk/res/com.example.switchviewexample">    <com.jiesai.ljp.switchview.SwitchView 
        android:id="@+id/sv_test"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:textTrue="男"
        app:textFalse="女">
    </com.jiesai.ljp.switchview.SwitchView></RelativeLayout>

在MainActivity类中可以实例化一个SwitchView,通过switchView.isChecked();可以判断滑动开关选择的是什么项,然后想做什么就可以随便了

public class MainActivity extends Activity {
 @Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		SwitchView switchView=(SwitchView)findViewById(R.id.sv_test);
		boolean check=switchView.isChecked();
		if(check){
			Toast.makeText(this, "你选择了:男", Toast.LENGTH_LONG).show();
		}else{
			Toast.makeText(this, "你选择了:女", Toast.LENGTH_LONG).show();
		}
	}	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}}