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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM