[英]Xamarin.Forms: Change Icon & Text size in TabbedPage tabs
I am developing Tabs using TabbedPage in xaml
.我正在
xaml
使用 TabbedPage 开发选项卡。 The default tabs Icons & Text size is big so I need to reduce the size of Icons & Text.默认选项卡图标和文本大小很大,所以我需要减小图标和文本的大小。 Below is my
main.xaml
code Where I am setting icons.下面是我设置图标的
main.xaml
代码。
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:TabbedApp">
<local:DairyTabs Icon="dairy" HeightRequest="10" WidthRequest="10" ></local:DairyTabs>
<local:Mykid Icon="kid" ></local:Mykid>
<local:Event Icon="about"></local:Event>
</TabbedPage>
This is First page of tabs where I am giving Title of tab as Title="Dairy"
这是标签的第一页,我将标签的
Title="Dairy"
设为Title="Dairy"
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
Title="Dairy">
<ContentPage.Content>
<StackLayout>
<Button x:Name="btnDemo" Text="Go for 2nd page"></Button>
</StackLayout>
</ContentPage.Content>
</ContentPage>
See the below Screenshot where you can see icons and tab text.请参阅下面的屏幕截图,您可以在其中看到图标和标签文本。
In your Android project's Resources/values/style.xml
file, you can create a style:在您的 Android 项目的
Resources/values/style.xml
文件中,您可以创建一个样式:
<style name="MyTabTextStyle" parent="Base.Widget.Design.TabLayout">
<item name="android:textSize">8sp</item>
</style>
And then in your Resources/layout/tabs.axml
file, you can use the style:然后在您的
Resources/layout/tabs.axml
文件中,您可以使用以下样式:
<android.support.design.widget.TabLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
... other attributes ...
app:tabTextAppearance="@style/MyTabTextStyle" />
As for the icon, try this: https://stackoverflow.com/a/46465233/3183946至于图标,试试这个: https : //stackoverflow.com/a/46465233/3183946
And by the way, I think "Dairy" should be "Diary" in your app顺便说一句,我认为您的应用程序中的“Dairy”应该是“Diary”
After some effort i get it work for android using TabbedPageRenderer
.经过一番努力,我使用
TabbedPageRenderer
让它为 android 工作。 Created custom layout with ImageView
& TetxtView
below Custom_tab_layou.xaml在Custom_tab_layou.xaml 下使用
ImageView
和TetxtView
创建自定义布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="41dp"
android:orientation="vertical">
<ImageView
android:id="@+id/icon"
android:layout_width="18dp"
android:layout_height="18dp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="4dp"
android:layout_marginBottom="4dp" />
<TextView
android:id="@+id/tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="hello"
android:gravity="center"
android:textSize="11dp"
android:textColor="#00FF6F" />
</LinearLayout>
Created MyTabbedPageRenderer
class创建
MyTabbedPageRenderer
类
public class MyTabbedPageRenderer : TabbedPageRenderer
{
private Dictionary<Int32, Int32> icons = new Dictionary<Int32, Int32>();
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);
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);
}
//this is for changing text color of select tab
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;
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);
}
}
}
}
}
In my case I really wanted to skip all the custom renderers... and many of the implementations seemed much more work than should be necessary.就我而言,我真的很想跳过所有自定义渲染器……许多实现似乎比必要的工作要多得多。 I was also implementing Font Awesome Icons which seemed pretty straight forward, but all of the examples I found applied the icons to labels and nothing with tabbed page.
我还在实现 Font Awesome Icons,这看起来很简单,但是我发现的所有示例都将图标应用于标签,而没有使用标签页。 After some dinking around I finally compiled this which works great and removes the need of a renderer.
经过一番讨论后,我终于编译了这个,效果很好,并且不需要渲染器。
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:IBMobile.Views"
xmlns:local2="clr-namespace:FontAwesome"
x:Class="IBMobile.Views.HomePage"
Visual="Material">
<ContentPage.IconImageSource>
<FontImageSource FontFamily="{StaticResource FontAwesomeSolid}" Glyph="{x:Static local2:IconFont.Home}" />
</ContentPage.IconImageSource>...
To answer the question of setting FontSize: Font Icon is a Font so it is set like any other.回答设置 FontSize 的问题:字体图标是一种字体,因此它的设置与任何其他字体一样。 Example:
例子:
<Button x:Name="btnEmail" Clicked="BtnEmail_Clicked" CommandParameter="{Binding email}" FontFamily="{StaticResource FontAwesomeSolid}" FontSize="Large" Text="{x:Static local2:IconFont.Envelope}" Grid.Column="3" Grid.Row="1" BackgroundColor="#007d5d" Margin="10" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.