xaml
のTabbedPageを使用してタブを開発しています。デフォルトのタブアイコンとテキストのサイズが大きいので、アイコンとテキストのサイズを小さくする必要があります。以下は、アイコンを設定する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>
これは、タブのタイトルを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>
アイコンとタブテキストを確認できる以下のスクリーンショットを参照してください。
少し努力した後、Android TabbedPageRenderer
を使用して動作します。ImageView
&TetxtView
を以下に使用してカスタムレイアウトを作成しましたCustom_tab_layou。 xaml
<?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>
作成された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);
}
}
}
}
}
あなたのAndroidプロジェクトのResources/values/style.xml
ファイル、スタイルを作成できます:
<style name="MyTabTextStyle" parent="Base.Widget.Design.TabLayout">
<item name="Android:textSize">8sp</item>
</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" />
アイコンについては、これを試してください: https://stackoverflow.com/a/46465233/3183946
ちなみに、アプリでは「乳製品」は「日記」にすべきだと思います
私の場合、私は本当にすべてのカスタムレンダラーをスキップしたかったのです...そして実装の多くは必要以上に多くの作業をしているように見えました。 Font Awesome Iconsも実装していましたが、これは非常に簡単に見えましたが、見つけたすべての例では、アイコンをラベルに適用し、タブ付きページでは何も適用していませんでした。少し遊んだ後、私はついにこれをコンパイルしました。これはうまく機能し、レンダラーの必要性を取り除きます。
<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>...