[Xamarin] PagerSlidingTabStrip 換背景顏色，換selected 文字顏色，selected 背景顏色
2016-07-29
上一篇文章 裡用 PagerSlidingTabStrip 建立 material style tab ，這篇我們要調整一些視覺上的東西分別用幾種不同的方式
1.改變預設(未選取狀態)的tab 顏色
//設定 Tab 背景顏色tabs.SetBackgroundColor(Android.Graphics.Color.Magenta);
我是設定為Magenta 桃紅色，所以讓整個tab變成桃紅色
2.設定預設(未選取狀態)字的顏色
//設定文字顏色tabs.SetTabTextColor(Android.Graphics.Color.BlueViolet);
3.改變ActionBar的顏色 ，讓上方的ActionBar也改變為同顏色
// 更改ActionBar的顏色Drawable colorDrawable = new ColorDrawable(Android.Graphics.Color.Magenta);Drawable bottomDrawable = new ColorDrawable(Resources.GetColor(Android.Resource.Color.Transparent));var ld = new LayerDrawable(new[] { colorDrawable, bottomDrawable });
SupportActionBar.SetBackgroundDrawable(ld);
4.改變選取後字的顏色這地方要直接修改layout的部分加上一個attribute : app:pstsTextColorSelected="#FFFF33"
之後的Layout 的Code :
<com.refractored.PagerSlidingTabStrip
android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:pstsPaddingMiddle="true" app:pstsDividerWidth="1dp" app:pstsDividerPadding="12dp" app:pstsDividerColor="#50FFFFFF" android:textColor="#50FFFFFF" app:pstsTextColorSelected="#FFFF33" app:pstsIndicatorColor="@android:color/white" app:pstsTabBackground="@drawable/cust_bg1" app:pstsUnderlineColor="@android:color/white" />5. 改變選取後的背景，這我們透過style 的方法進行輔助，首先我們將 layout 的地方 app:pstsTabBackground="@drawable/cust_bg1" 指定到drawable 的cust_bg1 ，之後我們在drawable 中建立一個cust_bg1.xml :
<selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:state_pressed="true" android:drawable="@color/gray"/>
<item android:state_selected="true" android:drawable="@color/gray"/>
</selector>
這裡面，提到的color 為 gray 這時候在 values 檔案夾中加入一個colors.xml ，其中定義gray的顏色
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="gray">#444444</color></resources>
範例我把每個顏色都區隔開來，讓你好參考該改哪個地方
reference : https://components.xamarin.com/gettingstarted/pagerslidingtabstrip
source code : https://www.dropbox.com/s/8w5ohmxaqrzl1ry/SliderTest2_style.7z?dl=0