Xamarin Forms:如何使用TabbedPageRenderer更改所选选项卡的文本颜色 [英] Xamarin Forms: How to change text color of selected tab using TabbedPageRenderer
本文介绍了Xamarin Forms:如何使用TabbedPageRenderer更改所选选项卡的文本颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用TabbedPageRenderer开发Tabs.我无法更改所选标签的文本颜色(只能更改所选标签的图标颜色).
下面是MyTabbedPageRenderer.cs类
public class MyTabbedPageRenderer : TabbedPageRenderer
{
bool setup;
ViewPager pager;
TabLayout layout;
public MyTabbedPageRenderer(Context context) : base(context)
{ }
protected override void SetTabIcon(TabLayout.Tab tab, FileImageSource icon)
{
base.SetTabIcon(tab, icon);
tab.SetCustomView(Resource.Layout.Custom_tab_layou);
var imageview = tab.CustomView.FindViewById<ImageView>(Resource.Id.icon);
var tv = tab.CustomView.FindViewById<TextView>(Resource.Id.tv);
tv.SetText(tab.Text, TextView.BufferType.Normal);
imageview.SetBackgroundDrawable(tab.Icon);
}
protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
if (setup)
return;
if (e.PropertyName == "Renderer")
{
pager = (ViewPager)ViewGroup.GetChildAt(0);
layout = (TabLayout)ViewGroup.GetChildAt(1);
setup = true;
ColorStateList colors = null;
//using xml file
if ((int)Build.VERSION.SdkInt >= 23)
colors = Resources.GetColorStateList(Resource.Color.icon_tab, Forms.Context.Theme);
else
colors = Resources.GetColorStateList(Resource.Color.icon_tab);
for (int i = 0; i < layout.TabCount; i++)
{
var tab = layout.GetTabAt(i);
var icon = tab.Icon;
Android.Views.View view = GetChildAt(i);
if (view is TabLayout)
layout = (TabLayout)view;
if (icon != null)
{
icon = Android.Support.V4.Graphics.Drawable.DrawableCompat.Wrap(icon);
Android.Support.V4.Graphics.Drawable.DrawableCompat.SetTintList(icon, colors);
}
}
}
}
}
此xml文件适用于更改选定的标签&文字颜色
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:color="#E2725B"
android:state_selected="true" />
<item android:color="#FFFFFF" />
<item app:tabSelectedTextColor="#F3E5AB" />
</selector>
用于MainActivity
样式
<style name="MainTheme" parent="MainTheme.Base">
</style>
<!-- Base theme applied no matter what API -->
<style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
样式用于splashActivity
<style name="MyTheme.Splash" parent
="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:windowBackground">@drawable/splash</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowFullscreen">true</item>
</style>
下面的Tabbar.axml文件
<android.support.design.widget.TabLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:tabIndicatorColor="#BF94E4"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:tabSelectedTextColor="#DFFF00"
app:tabGravity="fill"
app:tabMode="fixed" />
下面的输出屏幕截图中，仅图标颜色被更改
解决方案
Xamarin表单:如何使用TabbedPageRenderer更改所选标签的文本颜色
无需使用TabbedPageRenderer更改所选标签文本的颜色，您可以直接通过XML属性对其进行更改.
在您的 Resource\layout\Tabbar.axml 中:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.TabLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:tabMode="fixed"
app:tabGravity="fill"
app:tabTextColor="@color/your_unselected_text_color"
app:tabSelectedTextColor="@color/your_selected_text_color"
app:tabIndicatorColor="@color/your_indicator_color"
/>
更新:
给您TextView一个ColorStateList即可解决此问题.在您的MyTabbedPageRenderer SetTabIcon方法中:
protected override void SetTabIcon(TabLayout.Tab tab, FileImageSource icon)
{
base.SetTabIcon(tab, icon);
tab.SetCustomView(Resource.Layout.Custom_tab_layou);
var imageview = tab.CustomView.FindViewById<ImageView>(Resource.Id.icon);
var tv = tab.CustomView.FindViewById<TextView>(Resource.Id.tv);
tv.SetText(tab.Text, TextView.BufferType.Normal);
imageview.SetBackgroundDrawable(tab.Icon);
ColorStateList colors2 = null;
if ((int)Build.VERSION.SdkInt >= 23)
colors2 = Resources.GetColorStateList(Resource.Color.icon_tab, Forms.Context.Theme);
else
colors2 = Resources.GetColorStateList(Resource.Color.icon_tab);
tv.SetTextColor(colors2);
}
效果.
I am developing Tabs using TabbedPageRenderer. I am not able to change text color of selected tab(Only getting change selected tab icon color).
Below is MyTabbedPageRenderer.cs class
public class MyTabbedPageRenderer : TabbedPageRenderer
{
bool setup;
ViewPager pager;
TabLayout layout;
public MyTabbedPageRenderer(Context context) : base(context)
{ }
protected override void SetTabIcon(TabLayout.Tab tab, FileImageSource icon)
{
base.SetTabIcon(tab, icon);
tab.SetCustomView(Resource.Layout.Custom_tab_layou);
var imageview = tab.CustomView.FindViewById<ImageView>(Resource.Id.icon);
var tv = tab.CustomView.FindViewById<TextView>(Resource.Id.tv);
tv.SetText(tab.Text, TextView.BufferType.Normal);
imageview.SetBackgroundDrawable(tab.Icon);
}
protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
if (setup)
return;
if (e.PropertyName == "Renderer")
{
pager = (ViewPager)ViewGroup.GetChildAt(0);
layout = (TabLayout)ViewGroup.GetChildAt(1);
setup = true;
ColorStateList colors = null;
//using xml file
if ((int)Build.VERSION.SdkInt >= 23)
colors = Resources.GetColorStateList(Resource.Color.icon_tab, Forms.Context.Theme);
else
colors = Resources.GetColorStateList(Resource.Color.icon_tab);
for (int i = 0; i < layout.TabCount; i++)
{
var tab = layout.GetTabAt(i);
var icon = tab.Icon;
Android.Views.View view = GetChildAt(i);
if (view is TabLayout)
layout = (TabLayout)view;
if (icon != null)
{
icon = Android.Support.V4.Graphics.Drawable.DrawableCompat.Wrap(icon);
Android.Support.V4.Graphics.Drawable.DrawableCompat.SetTintList(icon, colors);
}
}
}
}
}
This xml file applied for changing selected tab & text color
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:color="#E2725B"
android:state_selected="true" />
<item android:color="#FFFFFF" />
<item app:tabSelectedTextColor="#F3E5AB" />
</selector>
styles using for MainActivity
<style name="MainTheme" parent="MainTheme.Base">
</style>
<!-- Base theme applied no matter what API -->
<style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
style using for splashActivity
<style name="MyTheme.Splash" parent
="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:windowBackground">@drawable/splash</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowFullscreen">true</item>
</style>
Tabbar.axml file below
<android.support.design.widget.TabLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:tabIndicatorColor="#BF94E4"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:tabSelectedTextColor="#DFFF00"
app:tabGravity="fill"
app:tabMode="fixed" />
Below screenshot of output where only icon color getting changed
解决方案
Xamarin Forms: How to change text color of selected tab using TabbedPageRenderer
There is no need to use TabbedPageRenderer to change the selected tab text color, you can change it directly Via XML attributes.
In your Resource\layout\Tabbar.axml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.TabLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:tabMode="fixed"
app:tabGravity="fill"
app:tabTextColor="@color/your_unselected_text_color"
app:tabSelectedTextColor="@color/your_selected_text_color"
app:tabIndicatorColor="@color/your_indicator_color"
/>
Update:
Give your TextView a ColorStateList will solve this issue. In your MyTabbedPageRenderer SetTabIcon method:
protected override void SetTabIcon(TabLayout.Tab tab, FileImageSource icon)
{
base.SetTabIcon(tab, icon);
tab.SetCustomView(Resource.Layout.Custom_tab_layou);
var imageview = tab.CustomView.FindViewById<ImageView>(Resource.Id.icon);
var tv = tab.CustomView.FindViewById<TextView>(Resource.Id.tv);
tv.SetText(tab.Text, TextView.BufferType.Normal);
imageview.SetBackgroundDrawable(tab.Icon);
ColorStateList colors2 = null;
if ((int)Build.VERSION.SdkInt >= 23)
colors2 = Resources.GetColorStateList(Resource.Color.icon_tab, Forms.Context.Theme);
else
colors2 = Resources.GetColorStateList(Resource.Color.icon_tab);
tv.SetTextColor(colors2);
}
这篇关于Xamarin Forms:如何使用TabbedPageRenderer更改所选选项卡的文本颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
