我如何設計Android開關？

113

在API 14中引入的開關小部件的默認樣式爲全息主題。我想讓它略有不同，爲了品牌的原因改變它的顏色和形狀。人們如何去做這件事？我知道這一定是可能的，因爲我見過我想我需要一些狀態可繪製默認ICS和三星的TouchWiz主題我如何設計Android開關？

enter image description here

之間的區別，我已經看到了一些樣式http://developer.android.com/reference/android/R.styleable.html與Switch_thumb和Switch_track，看起來像我可能會後。我只是不知道如何去使用它們。

我正在使用ActionbarSherlock，如果這有所作爲。當然，只有運行API v14或更高版本的設備才能夠使用交換機。

來源

2012-04-12 Glenn.nz

247

您可以定義用作背景的圖形內容和切換器部分是這樣的：

<Switch 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:thumb="@drawable/switch_thumb" 
    android:track="@drawable/switch_bg" />

現在，你需要創建一個選擇用於定義切換繪製的不同狀態。這裏從Android源的副本：

<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item android:state_enabled="false" android:drawable="@drawable/switch_thumb_disabled_holo_light" /> 
    <item android:state_pressed="true" android:drawable="@drawable/switch_thumb_pressed_holo_light" /> 
    <item android:state_checked="true" android:drawable="@drawable/switch_thumb_activated_holo_light" /> 
    <item        android:drawable="@drawable/switch_thumb_holo_light" /> 
</selector>

這定義了拇指可繪製，即上方移動背景的圖像。有用於滑塊4個ninepatch圖像：

失活的版本（即Android是使用xhdpi版本） The deactivated version
壓制滑塊： The pressed slider
活化的滑塊（接通狀態）： The activated slider
缺省版本（關閉狀態）： enter image description here

也有以下選擇中定義爲背景三種不同狀態：

<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item android:state_enabled="false" android:drawable="@drawable/switch_bg_disabled_holo_dark" /> 
    <item android:state_focused="true" android:drawable="@drawable/switch_bg_focused_holo_dark" /> 
    <item        android:drawable="@drawable/switch_bg_holo_dark" /> 
</selector>

停用的版本： The deactivated version
聚焦的版本： The focused version
和默認版本： the default version

爲了有一個風格的切換隻需創建此兩個選擇，它們設置爲你的交換機視圖，然後更改7張圖像到你想要的風格。

來源

2012-04-13 12:27:03 Janusz

非常詳細的感謝，可以讓拇指搬出軌道的一部分9補丁滑塊的圖像是特別有幫助，因爲我不能工作了他們是如何做。（默認的滑塊有尖的邊緣位移過軌道末端以在一側形成方形端） – 2012-04-15 23:54:26

很棒的工作 - 非常詳細 – Ahmad 2012-04-30 16:39:07

還有一個狀態是哪個當開關處於「開」狀態時可以改變軌道圖像。所以如果你想改變軌道上的「開」/「關」，使用這種狀態。 – narangrajeev81 2013-10-08 11:11:48

這是一個非常棒的詳細回覆Janusz。但只是爲了尋求答案的人們，更簡單的方法是從Android Asset Studio鏈接http://android-holo-colors.com/（無效鏈接）

所有工具的詳細描述都在AndroidOnRocks.com（網站現在離線）

但是，我強烈建議大家閱讀Janusz的回覆，因爲它會使理解更清晰。使用該工具真正快速地做東西

來源

2013-02-21 22:38:46 kishu27

很棒的時間節省9-補丁，狀態列表drawables等所有在一個點擊！ – Steve 2013-11-15 23:23:34

這個工具是太棒了 – dirkoneill 2014-06-13 19:36:01

豎起大拇指爲神話般的鏈接 – 2015-09-01 18:08:23

替代和更簡單的方法是使用形狀而不是9個補丁。這裏已經說明了： https://stackoverflow.com/a/24725831/512011

來源

2015-10-08 09:14:58 netpork

idk，工具我在kishu27的回答中提到的只是改變顏色，因爲它爲你製作所有的文件要快得多。我想如果你想定製除了顏色之外的形狀，雖然這可能更快。 – JStephen 2015-10-08 18:28:01

這個工具真的很棒，但坦率地說，我不喜歡這樣一個想法，即如果你只想改變一些你需要生成一些圖像的顏色。另外，如果您正在使用形狀，則可以使用不同的顏色來關閉/打開開關位置。 – netpork 2015-10-09 14:27:44

是真的，如果你像我一樣優柔寡斷，不停地改變顏色，直到找到你喜歡的顏色，那麼這個速度要快得多，對我來說，幸運的是別人負責挑選顏色:) – JStephen 2015-10-09 15:11:13

您可以通過設置不同的顏色屬性來自定義材質樣式。例如自定義應用程序的主題

<style name="CustomAppTheme" parent="Theme.AppCompat"> 
    <item name="android:textColorPrimaryDisableOnly">#00838f</item> 
    <item name="colorAccent">#e91e63</item> 
</style>

自定義開關主題

<style name="MySwitch" parent="@style/Widget.AppCompat.CompoundButton.Switch"> 
    <item name="android:textColorPrimaryDisableOnly">#b71c1c</item> 
    <item name="android:colorControlActivated">#1b5e20</item> 
    <item name="android:colorForeground">#f57f17</item> 
    <item name="android:textAppearance">@style/TextAppearance.AppCompat</item> 
</style>

可以自定義開關跟蹤和定義XML繪圖資源切換拇指像下面的圖像。欲瞭解更多信息http://www.zoftino.com/android-switch-button-and-custom-switch-examples

來源

2017-09-19 08:18:06

我如何設計Android開關？

回答

相關問題