android自定义控件——以滑动开关为例

0.引言

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

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

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

下面是开发步骤:

1.android自定义控件

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

2.封装为jar包

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

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

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的库

或着在项目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;
}

}

 

附源码下载地址:http://download.csdn.net/detail/luojianpingljp/5842129

posted @ 2013-07-30 22:50  gisdream  阅读(15223)  评论(0编辑  收藏  举报