風格化的 Toggle Buttons

2021-06-16 15:17:40 字數 3180 閱讀 4511

android到預設ui比ios到預設ui在美觀程度上還是有一定到差距的,我們希望能夠美化ui,並且替換掉系統預設的ui風格,使得程式在使用這些ui的時候都預設使用我們自定義到ui。本文以togglebutton為例,介紹如何使用,下圖是效果圖。

1、設定xml屬性
我們需要設定togglebutton的背景,以及當togglebutton為on或者off時到狀態圖。
首先,我們設定togglebutton的背景,建立 /res/drawable/btn_toggle_bg.xml

[html]view plain

copy

xmlversion

="1.0"

encoding

="utf-8"

?>

<

layer-list

xmlns:android

="">

<

item

android:id

="@+android:id/background"

android:drawable

="@android:color/transparent"

/>

<

item

android:id

="@+android:id/toggle"

android:drawable

="@drawable/btn_toggle"

/>

layer-list

>

在這裡,我們使用layer-list把togglebutton分成2個圖層,底層是背景(設定成透明),頂層是selector效果圖

接下來,設定togglebutton的on和off的selector效果圖:

建立/res/drawable/btn_toggle.xml

[html]view plain

copy

xmlversion

="1.0"

encoding

="utf-8"

?>

<

selector

xmlns:android

="">

<

item

android:state_checked

="false"

android:drawable

="@drawable/btn_toggle_no"

/>

<

item

android:state_checked

="true"

android:drawable

="@drawable/btn_toggle_yes"

/>

selector

>

使用到以下兩張圖,也可通過以下鏈結查詢

到此,我們已經把togglebutton的效果已經製作完畢.

2、設定style & theme

togglebutton到效果圖已經製作完畢,接下來,我們就要把這種效果設定成一種統一的風格,否則我們在使用的時候必須每次都得顯示指定這種風格,在這裡,即:在宣告togglebutton的時候,每次都得指定android:background="@drawable/btn_toggle_bg"。

我們希望達到到效果是,當我們每次使用tooglebutton的時候,預設就是使用我們所設定的風格。在此之前,最好先閱讀下android自帶到文件:basics of creating android themes,對style和theme有一定的了解。

接下來,建立/res/drawable/themes.xml檔案

[html]view plain

copy

<

style

name

="widget.button.toggle"

parent

="android:widget"

>

<

item

name

="android:background"

>

@drawable/btn_toggle_bg

item

>

<

item

name

="android:texton"

>

@null

item

>

<

item

name

="android:textoff"

>

@null

item

>

<

item

name

="android:clickable"

>

true

item

>

<

item

name

="android:disabledalpha"

>

?android:attr/disabledalpha

item

>

style

>

在這裡,要把texton和textoff的屬性設定為null,否則,系統會在按鈕上顯示文字,這個可根據使用情況而定。

然後,把該風格設定成主題

[html]view plain

copy

<

style

name

="yourthemename"

parent

="@android:theme.black"

>

<

item

name

="android:buttonstyletoggle"

>

@style/widget.button.toggle

item

>

style

>

android:theme="@style/yourthemename")

3、注意事項

Qt的風格化機制

qt中每個控制項的繪製工作不是由控制項本身來完成,而是由qstyle完成的。static void setstyle qstyle static qstyle setstyle const qstring style 控制項將所有風格分為三類 基本元素 pe 控制項元素 ce 和複雜控制項元素 cc...

風格化材質製作

風格化渲染例項 我們對場景中應用的材質採用了一些特殊技術,使得場景看起來像是栩栩如生的油畫作品。兩個關鍵的示例是可在樹頂附近看到的 floating brush stroke 懸浮畫刷描畫 效果以及總是朝向玩家的2d風格植被。大多數為此場景建立的材質實際上是通過材質例項常量 來進行應用的。這使得我們...

mysqli 過程化風格

author administrator mysqli conncet obj mysqli set charset bool mysqli query mixed 輸入bool 輸出result obj mysqli fetch array row mysqli fetch all all cla...