3

custom を使用してタブを開発していますTabbedPageRenderer。タブの高さを減らす必要があります。タブの下部と上部に大きな余白が表示されています。以下の私のコード MyTabbedPageRenderer.csを参照してください

    [assembly: ExportRenderer(typeof(MyTabbedPage), typeof(MyTabbedPageRenderer))]
namespace TabbedApp.Droid
{
    public class MyTabbedPageRenderer : TabbedPageRenderer
    {
        protected override void SetTabIcon(TabLayout.Tab tab, FileImageSource icon)
        {
            base.SetTabIcon(tab, icon);
            tab.SetCustomView(Resource.Layout.CustomTabLayout);           
            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);

        }
    }
}

CustomTabLayout.axml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="45dp"
    android:orientation="vertical">
    <ImageView
        android:id="@+id/icon"
        android:layout_width="20dp"
        android:layout_height="20dp"
        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="13dp" />
</LinearLayout>

MainPage & MyTabbedPage

public partial class MainPage : MyTabbedPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }

public class MyTabbedPage : TabbedPage
    {

    }

Main.xaml

 <MyTabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="TabbedApp.MainPage"        
                 xmlns:local="clr-namespace:TabbedApp">
         <local:DairyTabPage  Icon="dairy" HeightRequest="10" WidthRequest="10" ></local:DairyTabPage>
         <local:MykidTab   Icon="kid" ></local:MykidTab>
         <local:Events   Icon="events"></local:Events>
         <local:About  Icon="about"></local:About>
    </MyTabbedPage>

ここに画像の説明を入力

4

1 に答える 1