【Android 應用開發】Android
總結了Android中常用的按鈕用法
示例原始碼下載地址 :
-- GitHub : https://github.com/han1202012/Button_Test.git
.
作者 :萬境絕塵
.
一. Button按鈕用法
背景可設定 : Button按鈕元件可以使用android:background屬性設定按鈕元件的背景顏色, 圖片;
1. Button按鈕陰影文字
設定四屬性 : 為Button設定陰影, 與TextView設定陰影類似, 需要設定以下四個屬性 :
-- 陰影顏色 :android:shadowColor, 該屬性可設定陰影顏色, 如"#FFF";
-- 模糊程度 :android:shadowRadius
-- 水平偏移 :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. 設定可切換的圖片點選資源
selector資源 : 在res的drawable下建立selector檔案, 該檔案可以定義一個Drawable資源, 可以設定在按鈕點選時切換成另一張圖片, 擡起的時候換成原來的圖片;
-- item屬性 : 設定按下與送開時的圖片;
-- 按鈕按下 : item的屬性android:state_pressed 為true的時候, 按鈕按下, 反之按鈕擡起;
-- 按鈕資源 : item的android:drawable屬性代表按鈕顯示的背景圖片;
如何實現 : 在selector跟標籤下定義兩個item, 其中android:pressed_state一個為true, 一個為false, 分別代表按鈕按下和擡起, 為每個item設定一個android:drawable資源, 即可實現按鈕點選切換圖片的Drawable資源;
程式碼示例 :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- 按鈕按下時顯示bg_pressed圖片 -->
<item
android:state_pressed="true"
android:drawable="@drawable/bg_pressed"/>
<!-- 按鈕擡起的時候顯示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 屬性設定陰影的顏色
android:shadowRadius 屬性設定引用的模糊程度, 該值越大模糊程度越高
android:shadowDx 屬性設定陰影在水平方向的偏移
android:shadowDy 屬性設定陰影在垂直方向的偏移
-->
<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屬性設定的背景可以是圖片,可以是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" >
<!-- 按鈕按下時顯示bg_pressed圖片 -->
<item
android:state_pressed="true"
android:drawable="@drawable/bg_pressed"/>
<!-- 按鈕擡起的時候顯示bg_normal圖片 -->
<item
android:state_pressed="false"
android:drawable="@drawable/bg_normal"/>
</selector>
效果圖 :
二 9Patch圖片詳解
9patch圖片可以縮放圖片的一部分, 來充滿全屏, 我們設定不縮放的部門不會被縮放;
圖片規則 : 9patch圖片四周1畫素的線條規定了圖片的縮放, 顯示規則;
-- 縮放規則 : 左側 和 上面的線條規定了縮放區域,左邊直線覆蓋的區域可以垂直縮放;右邊直線覆蓋的區域可以水平縮放;
-- 顯示規則: 右側 和 下側的線條規定了繪製區域, 在該區域之外的圖形不會被顯示;
1. 簡單的按鈕背景填充
9patch圖片製作 : 進入sdk中的tools,雙擊 draw9patch.bat 工具, 彈出下面的對話方塊;
操作方法: 將滑鼠放在邊界的水平垂直的標線上, 會出現雙向箭頭, 拖動雙向箭頭即可設定四周的規則線條;
案例展示 : 下面的三個按鈕圖片, 第一個按鈕顯示原來大小, 第二個按鈕顯示完全拉伸, 第三個按鈕使用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. 製作可拉伸的圓角矩形按鈕
注意 : 如果只設置了拉伸區域, 沒有設定內容顯示區域, 預設情況下 右側 和 下方 是有一定的邊距的;
(1)素材準備
搞一張圖片, 正方形就好 :
(2) 拉伸區域編輯
拉伸位置選擇 : 為了保證該圖片拉伸的時候, 四個角能夠保持原樣, 只拉伸中間的部位, 因此左邊 和 上邊的線條要避開四個角, 儘量將拉伸部位設定在中間;
不設定右側和下冊邊距 : 如果不設定右側 和 下冊的線條, 那麼預設右邊和下側會有一定邊距;
設定右邊和下邊距完全顯示 : 這裡為了顯示效果明顯, 設定完全顯示;
拉入 draw9patch.bat 編輯器, 開始編輯 :
(3) 設定內容顯示區域
如果只設置了拉伸區域, 圖片按鈕拉伸不會失真, 但是內容會將整個圖片按鈕填充, 設定了內容顯示區域, 類似於設定了一個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" >
<!-- 原來的圖片, 顯示實際的圖片大小 -->
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="原圖"
android:background="@drawable/nine_patch_button_normal"/>
<!-- 拉伸的圖片, 但沒有設定內容顯示區域 -->
<Button
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:text="沒有設定右邊距和下邊距沒有設定右邊距和下邊距沒有設定右邊距和下邊距沒有設定右邊距和下邊距"
android:background="@drawable/nine_patch_button_lt"/>
<!-- 拉伸圖片, 同時設定了內容顯示區域 -->
<Button
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:text="設定了內容顯示區域設定了內容顯示區域設定了內容顯示區域設定了內容顯示區域"
android:background="@drawable/nine_patch_button_lftb"/>
</LinearLayout>
效果圖 :
.
三. 單選按鈕元件
單個選中 : 一組單選按鈕定義在一個RadioGroup中, 這一組RadioButton只能有一個被選中;
設定監聽 : 可以給RadioGroup設定OnCheckedChangeListener監聽器, 當出現選項改變的時候, 可以呼叫被選中的RadioButton的id, 然後執行相應方法;
指定id : RadioButton必須為每個單選按鈕指定id, 否則將無法啟用回撥方法;
程式碼示例 :
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;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.radio_button);
radioGroup = (RadioGroup) findViewById(R.id.radio_group);
radioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() {
@Override
public 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;
}
}
} );
}
}
.
.
作者 :萬境絕塵
.
四. 複選框CheckBox元件
CheckBox複選框可以同時勾選幾個選項 :
程式碼示例 :
<?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元件
元件介紹 : 該元件外形與按鈕相似, 該按鈕元件的底部有一個帶顏色線條, 當checked屬性為true的時候, 該線條顯示顏色, checked屬性為false的時候, 蓋線條不顯示顏色;
文字顯示 : 當android:checked屬性為true的時候, 顯示android:textOn文字, 反之顯示android:textOff文字;
重要的XML屬性 :
-- 是否選中 : android:checked, 值為true, 或者false;
-- 選中文字 : android:textOn, 字串, 當checked屬性為true的時候顯示該文字;
-- 取消文字 : android:textOff, 字串, 當checked屬性為false的時候顯示該文字;
程式碼示例 :
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="為了聯盟"
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 {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.toggle_button);
ToggleButton toggleButton = (ToggleButton) findViewById(R.id.toggle);
toggleButton.setOnCheckedChangeListener(new OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
if(isChecked)
Toast.makeText(getApplicationContext(), "為了聯盟", Toast.LENGTH_LONG).show();
else
Toast.makeText(getApplicationContext(), "為了部落", Toast.LENGTH_LONG).show();
}
});
}
}
效果圖 :
六. Switch按鈕
最低版本要求 : Switch元件需要最低的SDK版本是14;
Switch的XML屬性 :
-- 是否選中 : android:checked, 值為true 或者 false;
-- 最小寬度 : android:switchMinWidth, 設定開關的最小寬度;
-- 設定空白 : android:switchPadding, 設定開關 與 文字 之間的空白;
-- 文字樣式 : android:switchTextAppearance, 設定文字的樣式;
-- 選中文字 : android:textOn, android:checked為true的時候顯示的文字;
-- 關閉文字 : android:textOff, android:checked為false的時候顯示的文字;
-- 文字風格 : android:textStyle, 設定文字的風格, 可以是資原始檔;
-- 開關按鈕 : android:thumb, 值為int, 即R.id的資源, 設定開關的按鈕;
-- 開關軌道 : android:track, 值為int, 即R.id的資源, 設定開關的軌道;
-- 字型風格 : android:typeface, 設定開關文字的字型風格;
程式碼示例 :
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="為了聯盟"
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 {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.switch_button);
Switch switch1 = (Switch) findViewById(R.id.switch_button);
switch1.setOnCheckedChangeListener(new OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
if(isChecked)
Toast.makeText(getApplicationContext(), "為了聯盟", Toast.LENGTH_LONG).show();
else
Toast.makeText(getApplicationContext(), "為了部落", Toast.LENGTH_LONG).show();
}
});
}
}
效果圖 :
.
作者 :萬境絕塵
.
示例原始碼下載地址 :
-- GitHub : https://github.com/han1202012/Button_Test.git