Android UI 详解之ToggleButton、Swith
1、ToggleButton 和Swith同样是继承Button而来的,所以剧本Button的一切属性
ToggleButton新加的最重要属性,
android:checked 设置按钮是否被选中
android:textOff 设置当该按钮的状态关闭时显示的文本
android:textOn 设置当该按钮的状态为打开时显示的文本
2、下面是自定义的ToggleButton
设计思想,先选取两张图片,然后通过selector 去设置状态变化的对应图片
在代码中通过setOnchangeCheckListener()去监听,注意:与单选和按钮的监听器不同,和复选的按钮监听器一样,上一次在讨论单选按钮的时候没后用到参数,这次我们用一下,其实参数也就是两个值True和False,和调用ischecked 一样,只不过这里用True和False更能易懂,因为他毕竟是开关,
效果图
代码如下
package com.example.togglebuttondemo;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.widget.Button;
import android.widget.CompoundButton;
import android.widget.CompoundButton.OnCheckedChangeListener;
import android.widget.EditText;
import android.widget.Toast;
import android.widget.ToggleButton;
@SuppressLint("ShowToast")
public class MainActivity extends Activity {
private ToggleButton tbb;
private Button bt;
private EditText et;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
tbb = (ToggleButton)findViewById(R.id.tb1);
et = (EditText)findViewById(R.id.et);
tbb.setOnCheckedChangeListener(new OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton arg0, boolean isChecked) {
Log.i("Toggle","Toggle1");
if (tbb.isChecked()){
et.setText("Yes");
Log.i("Toggle","Yes");
}else{
et.setText("NO");
Log.i("Toggle","NO");
}
}
});
}
}
布局代码
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ToggleButton
android:id="@+id/tb1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:textOn="1"
android:textOff="2"
android:background="@drawable/btn_toggle"/>
<EditText android:id="@+id/et"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="@drawable/et"
/>
</LinearLayout>
btn_toggle.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false" android:drawable="@drawable/btn_toggle_no" />
<item android:state_checked="true" android:drawable="@drawable/btn_toggle_yes" />
</selector>
3、Swith
代码
package org.crazyit.ui;
import android.app.Activity;
import android.os.Bundle;
import android.widget.CompoundButton;
import android.widget.CompoundButton.OnCheckedChangeListener;
import android.widget.LinearLayout;
import android.widget.Switch;
import android.widget.ToggleButton;
public class ToggleButtonTest extends Activity
{
ToggleButton toggle;
Switch switcher;
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
switcher = (Switch)findViewById(R.id.switcher);
final LinearLayout test = (LinearLayout)findViewById(R.id.test);
OnCheckedChangeListener listener = new OnCheckedChangeListener()
{
@Override
public void onCheckedChanged(CompoundButton button
, boolean isChecked)
{
if(isChecked)
{
//设置LinearLayout垂直布局
test.setOrientation(1);
}
else
{
//设置LinearLayout水平布局
test.setOrientation(0);
}
}
};
switcher.setOnCheckedChangeListener(listener);
}
}
layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<Switch android:id="@+id/switcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOff="横向排列"
android:textOn="纵向排列"
android:thumb="@drawable/check"
android:checked="true"/>
<!-- 定义一个可以动态改变方向的线性布局 -->
<LinearLayout android:id="@+id/test"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="测试按钮一"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="测试按钮二"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="测试按钮三"
/>
</LinearLayout>
</LinearLayout>
效果图