首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Xamarin窗体:如何使用TabbedPageRenderer更改选定选项卡的文本颜色

Xamarin窗体:如何使用TabbedPageRenderer更改选定选项卡的文本颜色
EN

Stack Overflow用户
提问于 2018-04-07 12:58:31
回答 2查看 2K关注 0票数 2

我正在使用TabbedPageRenderer开发Tabs。我无法更改所选选项卡的文本颜色(只获得所选选项卡的图标颜色)。下面是MyTabbedPageRenderer.cs

代码语言:javascript
复制
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文件用于更改选定的选项卡和文本颜色。

代码语言:javascript
复制
<?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的样式

代码语言:javascript
复制
  <style name="MainTheme" parent="MainTheme.Base">
  </style>
  <!-- Base theme applied no matter what API -->
  <style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">

用于splashActivity的样式

代码语言:javascript
复制
<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文件

代码语言:javascript
复制
   <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" />

在下面的输出屏幕截图中,只有图标颜色被更改

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-04-09 14:53:28

Xamarin窗体:如何使用TabbedPageRenderer更改选定选项卡的文本颜色

不需要使用TabbedPageRenderer来更改选定的选项卡文本颜色,您可以通过XML属性直接更改它。

在你的Resource\layout\Tabbar.axml

代码语言:javascript
复制
<?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方法中:

代码语言:javascript
复制
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);
}

效果

票数 3
EN

Stack Overflow用户

发布于 2018-04-08 10:00:27

看看这对你是否有帮助,如何更改选定的选项卡文本颜色

您可以像这样使用TabLayout:

代码语言:javascript
复制
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

  <android.support.design.widget.TabLayout
   android:layout_height="wrap_content"
   android:layout_width="match_parent"
   android:id="@+id/tablayout"
   app:tabTextColor="@color/colorPrimary"
   app:tabSelectedTextColor="@color/colorAccent"
   app:tabIndicatorColor="@android:color/holo_orange_light">

  <android.support.design.widget.TabItem
      android:text="tab 1"/>
  <android.support.design.widget.TabItem
      android:text="tab 2"/>
  <android.support.design.widget.TabItem
      android:text="tab 3"/>

 </android.support.design.widget.TabLayout>

</LinearLayout>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/49707608

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档