SwitchButton開關按鈕的多種實現方式
-
剛開始接觸開關樣式的按鈕是在IOS系統上面,它的切換以及滑動十分帥氣,深入人心。
所謂的開關按鈕,就是隻有2個狀態:on和off,下圖就是系統IOS 7上開關按鈕效果。
起初我在android上我只會使用CheckBox去滿足對應的功能。後來,檢視開發文件發現,android也有了自己的原生態開關控制元件,並且在4.0版本中又優化加入了新的類似控制元件--Switch控制元件,以及使用起來十分簡單的ToggleButton,可是它們只是帶有切換效果,而不帶有滑動切換效果,並且Switch控制元件只支援高版本的系統,對於2.3就不支援。所以,要想看如何實現滑動切換的效果,必須瞭解這些控制元件的實現方式。下面,讓我們檢視下android開發文件,看看這些是如何實現使用的。
注意:本文中涉及到自定義控制元件 並自定義配置屬性declare-styleable,
如果你對於自定義控制元件的自定義配置屬性還不是很瞭解可以看:android 自定義控制元件 使用declare-styleable進行配置屬性(原始碼角度)
檢視檢視開發文件:
CompoundButton
extends Button
implements Checkable
java.lang.Object |
||||
? |
android.view.View |
|||
? |
android.widget.TextView |
|||
? |
android.widget.Button |
|||
? |
android.widget.CompoundButton |
Known Direct Subclasses CheckBox,RadioButton,Switch,ToggleButton |
以上4類都是開關型別切換的控制元件,它們的父類都是CompoundButton。
它對應的方法和類有:
點選選擇監聽介面。
Nested Classes |
||
interface |
CompoundButton.OnCheckedChangeListener |
Interface definition for a callback to be invoked when the checked state of a compound button changed. |
返回左右填充的VIEW,加上間隔
Public Methods |
|
int |
getCompoundPaddingLeft()Returns the left padding of the view, plus space for the left Drawable if any. |
int |
getCompoundPaddingRight()Returns the right padding of the view, plus space for the right Drawable if any. |
boolean:是否被選中。
boolean |
isChecked() |
設定Button的Drawable屬性
void |
setButtonDrawable(int resid)Set the background to a given Drawable, identified by its resource id. |
設定是否選中
void |
setChecked(boolean checked)Changes the checked state of this button. |
改變當前的狀態,true-->false ;false-->true
void |
toggle()Change the checked state of the view to the inverse of its current state |
控制元件全域性 繪製
void |
onDraw(Canvas canvas)Implement this to do your drawing. |
protected void onDraw (Canvas canvas)
實現你自己的繪製。
引數
canvas 在畫布上繪製背景
protected boolean verifyDrawable (Drawable who)
如果你的檢視子類顯示他自己的視覺化物件,他將要重寫此方法並且為了顯示可繪製返回true。此操作允許進行繪製時有動畫效果。
確認當重寫從方法時,需呼叫父類相應方法。
引數
who 需判斷的可繪製物件(Drawable)。如果是你要顯示的物件,返回True,否則返回呼叫父類的結果。
返回值
boolean 如果可繪製物件(Drawable)已經在檢視中顯示,返回True否則返回false。並且此處不允許使用動畫。
下面讓我們來看看如何實現這個效果把:
一.使用ToggleButton控制元件實現:
使用ToggleButton控制元件十分方便,你可以看作他為一個CheckBox,只用設定它的button、background等幾個屬性即可。
首先:res--建立drawable資料夾 -- 建立switch_btn.xml資原始檔--作以下配置
1.
<?xml version=
"1.0"
encoding=
"utf-8"
?>
2.
<selector
4.
<item android:state_checked=
"true"
android:drawable=
"@drawable/ios7_switch_on"
/>
5.
<item android:drawable=
"@drawable/ios7_switch_off"
/>
6.
</selector>
其中:android:state_checked="true" 表示選中on時候的,效果為:android:drawable="@drawable/ios7_switch_on"
反之就是未選中off情況下的效果:android:drawable="@drawable/ios7_switch_off"
之後在佈局檔案中寫控制元件:
01.
<ToggleButton
02.
android:id=
"@+id/mTogBtn"
03.
android:layout_width=
"wrap_content"
04.
android:layout_height=
"wrap_content"
05.
android:layout_gravity=
"center_horizontal"
06.
android:background=
"@android:color/transparent"
07.
android:button=
"@drawable/toggle_btn"
08.
android:checked=
"false"
09.
android:text=
""
10.
android:textOff=
""
11.
android:textOn=
""
/>
這裡的
android:textOn="" 表示:選中情況下顯示的文字
android:textOff="" 表示:未選中情況下顯示的文字
android:checked="false" 表示:初始化時候,預設是未選中的
android:button="@drawable/toggle_btn" 表示:button樣式
android:background="@android:color/transparent" 表示:背景,這裡不用它的預設背景,所以設定為透明
之後在主程式中例項化,並設定checked點選監聽
01.
ToggleButton mTogBtn = (ToggleButton) findViewById(R.id.mTogBtn);
// 獲取到控制元件
02.
mTogBtn.setOnCheckedChangeListener(
new
OnCheckedChangeListener() {
03.
04.
@Override
05.
public
void
onCheckedChanged(CompoundButton buttonView,
boolean
isChecked) {
06.
// TODO Auto-generated method stub
07.
if
(isChecked){
08.
//選中
09.
}
else
{
10.
//未選中
11.
}
12.
}
13.
});
// 新增監聽事件
這樣ToggleButton的開關切換就輕鬆實現了。
二.重寫CompoundButton控制元件實現帶滑動效果的開關按鈕:
重寫CompuundButton的實現可能會顯得相對繁瑣些,主要是考慮狀態是否已經選中等情況的文字顯示。
可以檢視官方文件,之後繼承CompuundButton,在佈局的動畫和顯示上呼叫onDraw(Canvas canvas)重畫既可以,如果想要加入拖動屬性,那麼在該VIEW內重寫觸控事件onTouchEvent(MotionEvent ev)在裡面判斷拖動距離,之後根據拖動情況判斷開關是on還是off。
由於繼承的是CompoundButton,所以裡面的監聽方法,setChecked等方法都是自帶的,繼承下來寫操作就可以了,不用自己在去加判斷什麼的屬性了。
由於DEMO中的繼承CompoundButton的SwitchButton是使用自定義配置的,所以如果不瞭解自定義配置的可以看以下文章:android 自定義控制元件 使用declare-styleable進行配置屬性(原始碼角度)
具體的這邊不貼程式碼了,可以檢視DEMO裡面的,都有註釋。
三.重寫CheckBox控制元件實現帶滑動效果的開關按鈕:
其實,看上面給的開發文件內容,大家都可以知道,CheckBox其實就是繼承CompoundButton控制元件的,只是重構CheckBox會比CompoundButton方便好多,裡面的很多方法都是寫好的,只要自己去判斷觸控事件onTouchEvent(MotionEvent ev),以及onDraw(Canvas canvas)重畫就可以。這裡DEMO中使用到的是第3放庫內的一個控制元件,大致操作和上面其實大同小異。
四.重寫View實現帶滑動效果的開關按鈕:
眾所周知,以上所有的控制元件都是繼承了View這個父類,所以,如果你用View去操作的話,就沒有自帶方法的限制,可是要滿足你要實現的SwitchButton效果,你必須自己寫開關狀態監聽介面,並且自己寫setChecked方法實現同等的效果。在優化方面要自己多加細心考慮。其他操作與以上控制元件的重構大同小異。
注意:由於狀態切換等,enabled屬性改變等,是你自定義的方法內的話,你必須自己去呼叫invalidate();方法,去讓UI判斷是否有更改並做出相應的變化。
例如:
01.
@Override
02.
public
void
setEnabled(
boolean
enabled) {
03.
// TODO Auto-generated method stub
04.
mEnabled = enabled;
05.
mAlpha = enabled ? MAX_ALPHA : MAX_ALPHA/
2
;
06.
Log.d(
"enabled"
,enabled ?
"true"
:
"false"
);
07.
super
.setEnabled(enabled);
08.
invalidate();
09.
}
10.
11.
/** 自動判斷切換至相反的屬性 : true -->false ;false -->true */
12.
public
void
toggle() {
13.
setChecked(!mSwitchOn);
14.
}
15.
16.
/** 設定選中的狀態(選中:true 非選中: false) */
17.
public
void
setChecked(
boolean
checked) {
18.
mSwitchOn = checked;
19.
invalidate();
20.
}
還有,你如果是自定義的VIEW,你在裡面設定了enabled屬性,你必須在onTouchEvent(MotionEvent event)觸控操作的時候判斷你所設定的enabled屬性是否為true,是的話就可以相應點選事件,否則的話你要遮蔽掉點選事件。因為你自定義的view中的enabled屬性並不知道他設定後會達到什麼效果,這些都是要注意的點。
還有就是要設定介面監聽狀態變化:
01.
/**
02.
* 設定 switch 狀態監聽
03.
* */
04.
public
void
setOnChangeListener(OnSwitchChangedListener listener) {
05.
switchListener = listener;
06.
}
07.
/**
08.
* switch 開關監聽介面
09.
* */
10.
public
interface
OnSwitchChangedListener{
11.
public
void
onSwitchChange(SlideSwitchView switchView,
boolean
isChecked);
12.
}
有的人可能會希望有SwitchButton在enabled設定為false的時候,SwitchButton不能點選且要改變顏色,使他看過去是不能點選的。你可以進行如下操作(在學習別的人程式碼中得到的提示,學以致用):
先初始化透明度:255為不透明
1.
/** 最大透明度,就是不透明 */
2.
private
final
int
MAX_ALPHA =
255
;
3.
/** 當前透明度,這裡主要用於如果控制元件的enable屬性為false時候設定半透明 ,即不可以點選 */
4.
private
int
mAlpha = MAX_ALPHA;
之後重寫setEnabled方法,通過這個方法判斷enabled屬性值
1.
@Override
2.
public
void
setEnabled(
boolean
enabled) {
3.
// TODO Auto-generated method stub
4.
mEnabled = enabled;
5.
mAlpha = enabled ? MAX_ALPHA : MAX_ALPHA/
2
;
6.
super
.setEnabled(enabled);
7.
invalidate();
8.
}
如果改變了enabled屬性,系統便會檢視UI是否需要變化,之後在UI方法onDraw(Canvas canvas)中呼叫:
1.
android.graphics.Canvas.saveLayerAlpha(RectF bounds,
int
alpha,
int
saveFlags)
方法,其中的第2個屬性alpha就是透明度,之後便可以實現相應的效果。由於目前對於重寫VIEW的onDraw方法的瞭解不是很深入,所以這裡的DEMO中的幾個方法都是檢視網路之後加上自己的優化和註釋演變過來,等這一塊深入了後在重寫寫一篇關於這個的感受和使用說明。由於可能理解不是很深刻,如果有什麼不足之處可以提出,謝謝。
最後讓我們來看看效果如何,上圖:
相關推薦
SwitchButton 開關按鈕 的多種實現方式 (附原始碼DEMO)
剛開始接觸開關樣式的按鈕是在IOS系統上面,它的切換以及滑動十分帥氣,深入人心。 所謂的開關按鈕,就是隻有2個狀態:on和off,下圖就是系統IOS 7上開關按鈕效果。 起初我在android上我只會使用CheckBox去滿足對應的功能。後來,檢視開發文件發現,andro
SwitchButton開關按鈕的多種實現方式
原始碼下載:http://download.csdn.net/download/a876434758/8751487 剛開始接觸開關樣式的按鈕是在IOS系統上面,它的切換以及滑動十分帥氣,深入人心。 所謂的開關按鈕,就是隻有2個狀態:on和off,下圖就是系統IOS
SwitchButton 開關按鈕 的多種實現方式 (附原始碼DEMO)
剛開始接觸開關樣式的按鈕是在iOS系統上面,它的切換以及滑動十分帥氣,深入人心。 所謂的開關按鈕,就是隻有2個狀態:on和off,下圖就是系統IOS 7上開關按鈕效果。 起初我在Android上我只會使用CheckBox去滿足對應的功能。後來,檢視開發文件發現,android也有了自己的原生態開關
開源庫實現SwitchButton開關按鈕
實現效果圖: (1)在biuld.gradle檔案中加入compile 'com.github.zcweng:switch-button:[email protected]'(2)新建xml檔案<LinearLayout xmlns:android="
【轉】C# 高性能 TCP 服務的多種實現方式
http c# del sha 開源 https tar .com targe 原文鏈接: http://www.cnblogs.com/gaochundong/p/csharp_tcp_service_models.html 開源庫: https://g
C# 高性能 TCP 服務的多種實現方式
優點 edi 簡單 {} 禁止 i/o 觸發 desktop soft 哎~~ 想想大部分園友應該對 "高性能" 字樣更感興趣,為了吸引眼球所以標題中一定要突出,其實我更喜歡的標題是《猴賽雷,C# 編寫 TCP 服務的花樣姿勢!》。 本篇文章的主旨是使用 .NET/C#
Java單例模式 多種實現方式
main 概念 ron system sta ava 實現 args == 一:通過靜態私有成員實現單例模式 (1):私有化構造函數 (2):new靜態實例屬性對象,加鎖。 單例類: package SinglePag; /* * 構造函數私有化,結合鎖+靜態的概念 實
通過純css實現圖片居中的多種實現方式
splay add pad src 純css webkit web center -c html結構: 1 <div class="demo" style="width: 800px;height: 600px; border:1px solid #ddd">
java 異步查詢轉同步多種實現方式:循環等待,CountDownLatch,Spring Even
null line [] 返回 編寫 nal books ans 異步查詢 異步轉同步 業務需求 有些接口查詢反饋結果是異步返回的,無法立刻獲取查詢結果。 正常處理邏輯 觸發異步操作,然後傳遞一個唯一標識。 等到異步結果返回,根據傳入的唯一標識,匹配此次結果。 如何轉
省市縣三級聯動多種實現方式
採用HTML+css+jQuery 後臺使用Javaweb+JDBC+DBUtils+MySQL 省市縣資料為資料庫獲取的資料 後期也會增加準確度更高的行政區劃分資料,供網友參考使用。 歡迎關注部落格:https://blog.c
連結串列的多種實現方式
連結串列是什麼??? 連結串列是一種區別於順序儲存的非連續、非順序的物理儲存結構,也就是說,不像佇列、堆疊之類的邏輯資料結構,它只是一種資料儲存的物理結構。我們所使用的陣列便是一種物理儲存結構。 但與陣列不同的是,它是鏈式儲存的,而陣列採用了順序儲存。 那麼,什麼是順序儲存與鏈式
堆疊的多種實現方式
何謂堆疊 堆疊是一種只能在一端進行插入或刪除操作的線性表,屬於邏輯結構。有陣列與指標兩種實現方式。 堆疊的主要特點為後進先出,每次進棧的新元素都在原來的棧頂元素之上,每次出棧的元素也是原來的棧頂元素。如下圖: 下面給出堆疊的兩種實現方式。 堆疊之指標實現:
Python模擬登入多種實現方式
Python模擬登入多種實現方式 基於Python 3.6 #coding:utf-8 import sys import io import urllib.request import http.cookiejar ################## 第一種登陸方式
Android - SwitchButton開關按鈕
工具類 : package utils; import android.content.Context; import android.content.res.TypedArray; import android.os.Build; import android.util.Attr
分散式鎖的多種實現方式
目前幾乎很多大型網站及應用都是分散式部署的,分散式場景中的資料一致性問題一直是一個比較重要的話題。分散式的CAP理論告訴我們“任何一個分散式系統都無法同時滿足一致性(Consistency)、可用性(Availability)和分割槽容錯性(Partition toler
C# 高效能 TCP 服務的多種實現方式
哎~~ 想想大部分園友應該對 "高效能" 字樣更感興趣,為了吸引眼球所以標題中一定要突出,其實我更喜歡的標題是《猴賽雷,C# 編寫 TCP 服務的花樣姿勢!》。 本篇文章的主旨是使用 .NET/C# 實現 TCP 高效能服務的不同方式,包括但不限於如下內容: 在 .NET/C# 中對於 Socket
Android之——史上最簡單自定義開關按鈕的實現
很多時候,我們在很多無論是Android還是IOS的APP中都會遇到這樣的一種效果,有一個按鈕,我們點選一下,便會滑動一下,一會顯示“開”,一會顯示“關”,這便是開關按鈕了,比如:很多Android手機的設定功能裡,就有很多功能是用開關按鈕實現的,那麼這些開關按鈕時如何實
lua的多種實現方式(1-100的和)
function add( a, b ) return a + b end -- print( add( 10, 20 ) ) function loopT( T ) for i, v in ipairs( T ) do
分散式鎖的多種實現方式,你瞭解嗎?
為什麼要使用分散式鎖? 在網際網路中很多場景下,我們為了保證資料的一致性,需要保證同一個方法,在同一時間,只能有一個執行緒在執行。這在單機環境中,我們有很多辦法實現,在java.util.concurrent包下,java提供了很多併發相關API,但這些API在分散式場景下
SpringMvc中,Controller方法的多種實現方式(指定返回到哪個頁面,指定返回到頁面的資料)
1)ModelAndView@RequestMapping("/list") public ModelAndView itemsList() throws Exception{ List<Items> list = itmesService.lis