【Android 应用开发】Android - 按钮组件详解
總結(jié)了Android中常用的按鈕用法
示例源碼下載地址?:
-- CSDN : ?http://download.csdn.net/detail/han1202012/6852091?
-- GitHub :?https://github.com/han1202012/Button_Test.git
.
作者?:萬境絕塵?
轉(zhuǎn)載請注明出處?:?http://blog.csdn.net/shulianghan/article/details/18964835
.
一. Button按鈕用法
背景可設(shè)置 : Button按鈕組件可以使用android:background屬性設(shè)置按鈕組件的背景顏色, 圖片;
1. Button按鈕陰影文字
設(shè)置四屬性 : 為Button設(shè)置陰影, 與TextView設(shè)置陰影類似, 需要設(shè)置以下四個(gè)屬性 :?
-- 陰影顏色 :android:shadowColor, 該屬性可設(shè)置陰影顏色, 如"#FFF";
-- 模糊程度 :android:shadowRadius, 屬性值為int值, 一般為1, 值越大, 越模糊;
-- 水平偏移 :android:shadowDx, 屬性值為int值, 文字陰影在水平方向上的偏移量;
-- 垂直偏移:android:shadowDy, 屬性值為int值, 文字陰影在垂直;
代碼示例 :?
<Button android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="陰影按鈕"android:textSize="20pt"android:shadowColor="#DF01A5"android:shadowRadius="1"android:shadowDx="5"android:shadowDy="5"/>
2. 設(shè)置可切換的圖片點(diǎn)擊資源
selector資源 : 在res的drawable下創(chuàng)建selector文件, 該文件可以定義一個(gè)Drawable資源, 可以設(shè)置在按鈕點(diǎn)擊時(shí)切換成另一張圖片, 抬起的時(shí)候換成原來的圖片;
-- item屬性 : 設(shè)置按下與送開時(shí)的圖片;
-- 按鈕按下 : item的屬性android:state_pressed 為true的時(shí)候, 按鈕按下, 反之按鈕抬起;
-- 按鈕資源 : item的android:drawable屬性代表按鈕顯示的背景圖片;
如何實(shí)現(xiàn) : 在selector跟標(biāo)簽下定義兩個(gè)item, 其中android:pressed_state一個(gè)為true, 一個(gè)為false, 分別代表按鈕按下和抬起, 為每個(gè)item設(shè)置一個(gè)android:drawable資源, 即可實(shí)現(xiàn)按鈕點(diǎn)擊切換圖片的Drawable資源;
代碼示例 :?
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" ><!-- 按鈕按下時(shí)顯示bg_pressed圖片 --><item android:state_pressed="true"android:drawable="@drawable/bg_pressed"/><!-- 按鈕抬起的時(shí)候顯示bg_normal圖片 --><item android:state_pressed="false"android:drawable="@drawable/bg_normal"/></selector>
3. 案例演示?
XML布局文件 :?
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_height="fill_parent"android:layout_width="fill_parent"><!-- android:shadowColor 屬性設(shè)置陰影的顏色android:shadowRadius 屬性設(shè)置引用的模糊程度, 該值越大模糊程度越高android:shadowDx 屬性設(shè)置陰影在水平方向的偏移android:shadowDy 屬性設(shè)置陰影在垂直方向的偏移--><Button android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="陰影按鈕"android:textSize="20pt"android:shadowColor="#DF01A5"android:shadowRadius="1"android:shadowDx="5"android:shadowDy="5"/><!-- android:background屬性設(shè)置的背景可以是圖片,可以是xml資源文件 --><Button android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="普通按鈕"android:textSize="20pt"android:background="@drawable/bg"/><Button android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="XML文件按鈕"android:textSize="20pt"android:background="@drawable/button_selector"/></LinearLayout>
selector資源文件 :?
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" ><!-- 按鈕按下時(shí)顯示bg_pressed圖片 --><item android:state_pressed="true"android:drawable="@drawable/bg_pressed"/><!-- 按鈕抬起的時(shí)候顯示bg_normal圖片 --><item android:state_pressed="false"android:drawable="@drawable/bg_normal"/></selector>
效果圖 :?
二 9Patch圖片詳解
9patch圖片可以縮放圖片的一部分, 來充滿全屏, 我們設(shè)置不縮放的部門不會被縮放;?
圖片規(guī)則 : 9patch圖片四周1像素的線條規(guī)定了圖片的縮放, 顯示規(guī)則;
-- 縮放規(guī)則 : 左側(cè) 和 上面的線條規(guī)定了縮放區(qū)域,左邊直線覆蓋的區(qū)域可以垂直縮放;右邊直線覆蓋的區(qū)域可以水平縮放;
-- 顯示規(guī)則: 右側(cè) 和 下側(cè)的線條規(guī)定了繪制區(qū)域, 在該區(qū)域之外的圖形不會被顯示;
1. 簡單的按鈕背景填充
9patch圖片制作 : 進(jìn)入sdk中的tools,雙擊?draw9patch.bat 工具, 彈出下面的對話框;
操作方法: 將鼠標(biāo)放在邊界的水平垂直的標(biāo)線上, 會出現(xiàn)雙向箭頭, 拖動(dòng)雙向箭頭即可設(shè)置四周的規(guī)則線條;
案例展示 : ?下面的三個(gè)按鈕圖片, 第一個(gè)按鈕顯示原來大小, 第二個(gè)按鈕顯示完全拉伸, 第三個(gè)按鈕使用9patch拉伸;
XML布局文件 :?
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/nine_patch"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" ><Button android:layout_height="100dp"android:layout_width="wrap_content"android:background="@drawable/nine_patch_normal"/><TextView android:layout_width="fill_parent"android:layout_height="5dp"android:background="#F00"/><Button android:layout_height="100dp"android:layout_width="fill_parent"android:background="@drawable/nine_patch_normal"/><TextView android:layout_width="fill_parent"android:layout_height="5dp"android:background="#F00"/><Button android:layout_height="100dp"android:layout_width="fill_parent"android:background="@drawable/bt"/></LinearLayout>效果圖 :?
.
2. 制作可拉伸的圓角矩形按鈕
注意 : 如果只設(shè)置了拉伸區(qū)域, 沒有設(shè)置內(nèi)容顯示區(qū)域, 默認(rèn)情況下 右側(cè) 和 下方 是有一定的邊距的;
(1)素材準(zhǔn)備
搞一張圖片, 正方形就好 :?
(2) 拉伸區(qū)域編輯
拉伸位置選擇 : 為了保證該圖片拉伸的時(shí)候, 四個(gè)角能夠保持原樣, 只拉伸中間的部位, 因此左邊 和 上邊的線條要避開四個(gè)角, 盡量將拉伸部位設(shè)置在中間;
不設(shè)定右側(cè)和下冊邊距 : 如果不設(shè)定右側(cè) 和 下冊的線條, 那么默認(rèn)右邊和下側(cè)會有一定邊距;
設(shè)定右邊和下邊距完全顯示 : 這里為了顯示效果明顯, 設(shè)置完全顯示;
拉入?draw9patch.bat 編輯器, 開始編輯 :?
(3) 設(shè)置內(nèi)容顯示區(qū)域
如果只設(shè)置了拉伸區(qū)域, 圖片按鈕拉伸不會失真, 但是內(nèi)容會將整個(gè)圖片按鈕填充, 設(shè)置了內(nèi)容顯示區(qū)域, 類似于設(shè)置了一個(gè)padding, 這樣按鈕文字可以顯示在拉伸圖片中央位置, 與邊緣會有一定的距離;
(4) 案例代碼
XML布局文件 :?
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" ><!-- 原來的圖片, 顯示實(shí)際的圖片大小 --><Button android:layout_height="wrap_content"android:layout_width="wrap_content"android:text="原圖"android:background="@drawable/nine_patch_button_normal"/><!-- 拉伸的圖片, 但沒有設(shè)置內(nèi)容顯示區(qū)域 --><Button android:layout_height="wrap_content"android:layout_width="fill_parent"android:text="沒有設(shè)置右邊距和下邊距沒有設(shè)置右邊距和下邊距沒有設(shè)置右邊距和下邊距沒有設(shè)置右邊距和下邊距"android:background="@drawable/nine_patch_button_lt"/><!-- 拉伸圖片, 同時(shí)設(shè)置了內(nèi)容顯示區(qū)域 --><Button android:layout_height="wrap_content"android:layout_width="fill_parent"android:text="設(shè)置了內(nèi)容顯示區(qū)域設(shè)置了內(nèi)容顯示區(qū)域設(shè)置了內(nèi)容顯示區(qū)域設(shè)置了內(nèi)容顯示區(qū)域"android:background="@drawable/nine_patch_button_lftb"/></LinearLayout>
效果圖 :?
.
三. 單選按鈕組件
單個(gè)選中 : 一組單選按鈕定義在一個(gè)RadioGroup中, 這一組RadioButton只能有一個(gè)被選中;
設(shè)置監(jiān)聽 : 可以給RadioGroup設(shè)置OnCheckedChangeListener監(jiān)聽器, 當(dāng)出現(xiàn)選項(xiàng)改變的時(shí)候, 可以調(diào)用被選中的RadioButton的id, 然后執(zhí)行相應(yīng)方法;
指定id : RadioButton必須為每個(gè)單選按鈕指定id, 否則將無法激活回調(diào)方法;
代碼示例 :?
XML源碼 :?
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" ><TextView android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="性別 : "android:textSize="15pt"/><RadioGroup android:id="@+id/radio_group"android:orientation="vertical"android:layout_height="wrap_content"android:layout_width="fill_parent"><RadioButton android:id="@+id/nan"android:layout_width="fill_parent"android:layout_height="wrap_content"android:text="男"/><RadioButton android:id="@+id/nv"android:layout_width="fill_parent"android:layout_height="wrap_content"android:text="女"/><RadioButton android:id="@+id/renyao"android:layout_width="fill_parent"android:layout_height="wrap_content"android:text="人妖"/><RadioButton android:id="@+id/yaoren"android:layout_width="fill_parent"android:layout_height="wrap_content"android:text="妖人"/></RadioGroup></LinearLayout>
Activity源碼 :?
package shuliang.han.button;import android.app.Activity; import android.os.Bundle; import android.widget.RadioGroup; import android.widget.Toast; import android.widget.RadioGroup.OnCheckedChangeListener;public class RadioButtonActivity extends Activity {RadioGroup radioGroup;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.radio_button);radioGroup = (RadioGroup) findViewById(R.id.radio_group);radioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() {@Overridepublic void onCheckedChanged(RadioGroup group, int checkedId) {switch (checkedId) {case R.id.nan:Toast.makeText(getApplicationContext(), "男", Toast.LENGTH_LONG).show();break;case R.id.nv:Toast.makeText(getApplicationContext(), "女", Toast.LENGTH_LONG).show();break;case R.id.renyao:Toast.makeText(getApplicationContext(), "人妖", Toast.LENGTH_LONG).show();break;case R.id.yaoren:Toast.makeText(getApplicationContext(), "妖人", Toast.LENGTH_LONG).show();break;default:break;}}} );}}
.
.
作者?:萬境絕塵?
轉(zhuǎn)載請注明出處?:?http://blog.csdn.net/shulianghan/article/details/18964835
.
四. 復(fù)選框CheckBox組件
CheckBox復(fù)選框可以同時(shí)勾選幾個(gè)選項(xiàng) :?
代碼示例 :?
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" ><TextView android:layout_height="wrap_content"android:layout_width="fill_parent"android:text="愛好"/><CheckBox android:id="@+id/smoke"android:layout_height="wrap_content"android:layout_width="fill_parent"android:text="抽煙"android:checked="true"/><CheckBox android:id="@+id/drink"android:layout_height="wrap_content"android:layout_width="fill_parent"android:text="喝酒"/><CheckBox android:id="@+id/head"android:layout_height="wrap_content"android:layout_width="fill_parent"android:text="燙頭"/></LinearLayout>
效果圖 :?
五. ToggleButton組件
組件介紹 : 該組件外形與按鈕相似, 該按鈕組件的底部有一個(gè)帶顏色線條, 當(dāng)checked屬性為true的時(shí)候, 該線條顯示顏色, checked屬性為false的時(shí)候, 蓋線條不顯示顏色;
文本顯示 : 當(dāng)android:checked屬性為true的時(shí)候, 顯示android:textOn文本, 反之顯示android:textOff文本;
重要的XML屬性 :?
-- 是否選中 : android:checked, 值為true, 或者false;
-- 選中文本 : android:textOn, 字符串, 當(dāng)checked屬性為true的時(shí)候顯示該文本;
-- 取消文本 : android:textOff, 字符串, 當(dāng)checked屬性為false的時(shí)候顯示該文本;
代碼示例 :?
XML代碼 :?
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" ><ToggleButton android:id="@+id/toggle"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textOn="為了聯(lián)盟"android:textOff="為了部落"android:checked="true"/></LinearLayout>
Activity代碼 :?
package shuliang.han.button;import android.app.Activity; import android.os.Bundle; import android.widget.CompoundButton; import android.widget.CompoundButton.OnCheckedChangeListener; import android.widget.Toast; import android.widget.ToggleButton;public class ToggleButtonActivity extends Activity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.toggle_button);ToggleButton toggleButton = (ToggleButton) findViewById(R.id.toggle);toggleButton.setOnCheckedChangeListener(new OnCheckedChangeListener() {@Overridepublic void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {if(isChecked)Toast.makeText(getApplicationContext(), "為了聯(lián)盟", Toast.LENGTH_LONG).show();elseToast.makeText(getApplicationContext(), "為了部落", Toast.LENGTH_LONG).show();}});}}
效果圖 :?
六. Switch按鈕
最低版本要求 : Switch組件需要最低的SDK版本是14;
Switch的XML屬性 :?
-- 是否選中 : android:checked, 值為true 或者 false;
-- 最小寬度 : android:switchMinWidth, 設(shè)置開關(guān)的最小寬度;
-- 設(shè)置空白 : android:switchPadding, 設(shè)置開關(guān) 與 文本 之間的空白;
-- 文本樣式 : android:switchTextAppearance, 設(shè)置文本的樣式;
-- 選中文本 : android:textOn, android:checked為true的時(shí)候顯示的文本;
-- 關(guān)閉文本 : android:textOff, android:checked為false的時(shí)候顯示的文本;
-- 文本風(fēng)格 : android:textStyle, 設(shè)置文本的風(fēng)格, 可以是資源文件;
-- 開關(guān)按鈕 : android:thumb, 值為int, 即R.id的資源, 設(shè)置開關(guān)的按鈕;
-- 開關(guān)軌道 : android:track, 值為int, 即R.id的資源, 設(shè)置開關(guān)的軌道;
-- 字體風(fēng)格 : android:typeface, 設(shè)置開關(guān)文本的字體風(fēng)格;
代碼示例 :?
XML源碼 :?
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" ><Switch android:id="@+id/switch_button"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textOff="為了部落"android:textOn="為了聯(lián)盟"android:thumb="@drawable/check"android:checked="true"/></LinearLayout>
Activity代碼 :?
package shuliang.han.button;import android.app.Activity; import android.os.Bundle; import android.widget.CompoundButton; import android.widget.CompoundButton.OnCheckedChangeListener; import android.widget.Switch; import android.widget.Toast;public class SwitchButtonActivity extends Activity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.switch_button);Switch switch1 = (Switch) findViewById(R.id.switch_button);switch1.setOnCheckedChangeListener(new OnCheckedChangeListener() {@Overridepublic void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {if(isChecked)Toast.makeText(getApplicationContext(), "為了聯(lián)盟", Toast.LENGTH_LONG).show();elseToast.makeText(getApplicationContext(), "為了部落", Toast.LENGTH_LONG).show();}});}}
效果圖 :?
.
作者?:萬境絕塵?
轉(zhuǎn)載請注明出處?:?http://blog.csdn.net/shulianghan/article/details/18964835
.
示例源碼下載地址 :
-- CSDN : ?http://download.csdn.net/detail/han1202012/6852091?
-- GitHub :?https://github.com/han1202012/Button_Test.git
總結(jié)
以上是生活随笔為你收集整理的【Android 应用开发】Android - 按钮组件详解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【Android 应用开发】Androi
- 下一篇： 【Android 应用开发】Androi