在Android中的控件種類已經足夠我們使用,但是有時候大家需要根據美工的設計來改變一些控件的顏色,式樣,以及背景圖片
最近正好有這方面的需要,用了很久時間,找到了改變基本顏色以及圖片的方法
下面以SeekBar爲例,爲大家描述一下我的做法
首先在layout文件夾中的main.xml內容如下
-
<?xml version="1.0" encoding="utf-8"?>
-
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
-
android:orientation="vertical" android:layout_width="fill_parent"
-
android:layout_height="fill_parent">
-
-
<SeekBar android:id="@+id/seek" android:layout_width="300px"
-
android:layout_height="wrap_content" android:max="100"
-
android:progress="50" android:progressDrawable="@drawable/seekbar_img"
-
android:thumb="@drawable/thumb" />
-
</LinearLayout>
很簡單,只有一個SeekBar控件,注意它的 android:progressDrawable="@drawable/seekbar_img" 以及android:thumb="@drawable/thumb" 它們分別對應的是 進度條的圖片以及拖動滑塊的圖片,這裏的圖片也可以是我們自定義的drawable中的xml文件,可以理解成這兩個屬性應該如何顯示的意思,而@drawable/seekbar_img和@drawable/thumb它們分別對應着
drawable 文件夾中的文件seekbar_img.xml和thumb.xml,它們表示着如何去顯示進度條與滑塊
當初我想的是在網上找SeekBar的原始樣式文件是如何定義,這樣就可以照搬代碼,修改一些我需要的圖片以及顏色和大小就行了,於是就開始搜索,這裏要用到的是Android的系統源碼,具體下載辦法網上很多,需要用到cygwin,大家可以參考 http://tech.it168.com/a2009/0529/579/000000579026.shtml
下好源代以後,可以在 C:\cygwin\home\android\frameworks\base\core\res\res\drawable 這個路徑下找到很多圖片與android的原始控件樣式(即xml文件)
找一下,哈哈,好東西可不少,以後要改樣式全靠它們了
我們可以在這是裏面找到seek_thumb.xml,內容如下
-
<?xml version="1.0" encoding="utf-8"?>
-
<!-- Copyright (C) 2008 The Android Open Source Project
-
-
Licensed under the Apache License, Version 2.0 (the "License");
-
you may not use this file except in compliance with the License.
-
You may obtain a copy of the License at
-
-
http://www.apache.org/licenses/LICENSE-2.0
-
-
Unless required by applicable law or agreed to in writing, software
-
distributed under the License is distributed on an "AS IS" BASIS,
-
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-
See the License for the specific language governing permissions and
-
limitations under the License.
-
-->
-
-
-
<selector xmlns:android="http://schemas.android.com/apk/res/android">
-
-
<item android:state_pressed="true"
-
android:state_window_focused="true"
-
android:drawable="@drawable/seek_thumb_pressed" />
-
-
<item android:state_focused="true"
-
android:state_window_focused="true"
-
android:drawable="@drawable/seek_thumb_selected" />
-
-
<item android:state_selected="true"
-
android:state_window_focused="true"
-
android:drawable="@drawable/seek_thumb_selected" />
-
-
<item android:drawable="@drawable/seek_thumb_normal" />
-
-
</selector>
它定義的是seekbar的滑塊樣式,內容很簡單,大家應該看得懂,分別對應着按下,選中,以及獲得焦點時滑塊的圖片
另外,我們還可以找到 progress_horizontal.xml,內容如下
-
<?xml version="1.0" encoding="utf-8"?>
-
<!-- Copyright (C) 2008 The Android Open Source Project
-
-
Licensed under the Apache License, Version 2.0 (the "License");
-
you may not use this file except in compliance with the License.
-
You may obtain a copy of the License at
-
-
http://www.apache.org/licenses/LICENSE-2.0
-
-
Unless required by applicable law or agreed to in writing, software
-
distributed under the License is distributed on an "AS IS" BASIS,
-
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-
See the License for the specific language governing permissions and
-
limitations under the License.
-
-->
-
-
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
-
-
<item android:id="@android:id/background">
-
<shape>
-
<corners android:radius="5dip" />
-
<gradient
-
android:startColor="#ff9d9e9d"
-
android:centerColor="#ff5a5d5a"
-
android:centerY="0.75"
-
android:endColor="#ff747674"
-
android:angle="270"
-
/>
-
</shape>
-
</item>
-
-
<item android:id="@android:id/secondaryProgress">
-
<clip>
-
<shape>
-
<corners android:radius="5dip" />
-
<gradient
-
android:startColor="#80ffd300"
-
android:centerColor="#80ffb600"
-
android:centerY="0.75"
-
android:endColor="#a0ffcb00"
-
android:angle="270"
-
/>
-
</shape>
-
</clip>
-
</item>
-
-
<item android:id="@android:id/progress">
-
<clip>
-
<shape>
-
<corners android:radius="5dip" />
-
<gradient
-
android:startColor="#ffffd300"
-
android:centerColor="#ffffb600"
-
android:centerY="0.75"
-
android:endColor="#ffffcb00"
-
android:angle="270"
-
/>
-
</shape>
-
</clip>
-
</item>
-
-
</layer-list>
有了這兩個文件的源代碼,我們就可以依樣畫葫蘆了
首先在自己的工程下drawable文件夾中建立seek_bar.xml文件與thumb.xml文件
我寫的兩個文件內容如下
seekbar_img.xml
-
<?xml version="1.0" encoding="utf-8"?>
-
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
-
-
<item android:id="@+android:id/background" android:drawable="@drawable/bg" />
-
-
<item android:id="@+android:id/SecondaryProgress"
-
android:drawable="@drawable/bg" />
-
-
<item android:id="@+android:id/progress" android:drawable="@drawable/bg2" />
-
</layer-list>
thumb.xml
-
<?xml version="1.0" encoding="UTF-8"?>
-
<selector xmlns:android="http://schemas.android.com/apk/res/android">
-
-
<item android:state_pressed="true" android:drawable="@drawable/bg3" />
-
-
-
<item android:state_focused="false" android:state_pressed="false"
-
android:drawable="@drawable/bg4" />
-
</selector>