1. 程式人生 > >SwitchButton開關按鈕的多種實現方式

SwitchButton開關按鈕的多種實現方式

原始碼下載:http://download.csdn.net/download/a876434758/8751487
  • 剛開始接觸開關樣式的按鈕是在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