[Xamarin] 可滑動Tab 實作 , 改變Style
承襲上一篇 [Xamarin] 可滑動Tab 實作 我們製作了可以滑動的 Tab ，但是style 方面有點複雜寫一篇紀錄一下，看一下完成後結果是長這樣，基本上我用色比較誇張這樣就可以知道要改那些地方
1. 在resource中 建立 styles.xml 加入
<resources>
<style name="StyledIndicators" parent="@android:style/Theme.Light">
<item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item></style>
<style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator">
<item name="android:background">@drawable/custom_tab_indicator</item> <item name="android:textColor">#FF555555</item> <item name="android:textSize">16sp</item> <item name="android:divider">@drawable/divider</item> <item name="android:dividerPadding">0dp</item> <item name="android:showDividers">middle</item> <item name="android:paddingLeft">8dp</item> <item name="android:paddingRight">8dp</item> <item name="android:fadingEdge">horizontal</item> <item name="android:fadingEdgeLength">8dp</item></style>
</resources>
其中已經包含了基本文字上的設定至於其中有一個 custom_tab_indicator 必須在drawable 中加入 custom_tab_indicator.xml
2. custom_tab_indicator.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android"><!-- Non focused states -->
<!-- 不是選中的狀態 -->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/unselected" />
<item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/selected" />
<!-- Pressed -->
<!--按下後 -->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/pressed" />
<item android:state_focused="false" android:state_selected="true" android:state_pressed="true" android:drawable="@drawable/pressed" />
<!-- Focused states -->
<!--選中狀態 -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/pressed" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="true" android:drawable="@drawable/pressed" />
</selector>
3. 接下來就是把需要的圖片放進去，但是你會發現不是隨便放就可以的，原因是因為裡面使用到的 xxx.9.png 都是必須符合android 9-patch 的規格 ( https://developer.android.com/studio/write/draw9patch.html)
如何製作呢? 首先你可以開啟繪圖軟體我這邊是用Paint.net 先製作一個1px 或是 2px 的圖片並且用色塊填滿
再來開啟你android sdk 的路徑 ，我的電腦路徑是在 C:\Program Files (x86)\Android\android-sdk\tools\draw9patch.bat 開起來後，將圖片的延伸區塊制定好，儲存好應該是 檔名.9.png
為什麼要製作 9-patch 圖片 可以參考這篇文章 ( http://guidans.blogspot.tw/2012/06/9-patch-image.html )，簡單的說他可以讓圖片做放大延展因應多解釋析度的需求
執行結果
source code : https://www.dropbox.com/s/h2r76t6nru93p59/SlideTabSample_style.7z?dl=0