如何制作自定义标签页？（底部的圆框）

Question

如何制作自定义标签页？抱歉问了一个愚蠢的问题，但是现在请 help.Maybe 有人如何制作这样的自定义标签页不知道怎么在底部做这个圆角框来自定义标签页

Answer 1

您可以使用 Xamarin Community Toolkit available via NuGet. There you have examples，这可能有助于获得您想要的内容。这是我通过查看他们的示例很快得到的：

使用 TabStripBackgroundView 获得圆角框架，如下所示：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TestTabbedCustom.MainPage"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit">

    <Grid>
        <xct:TabView
                TabStripPlacement="Bottom"
                TabStripHeight="60"
                TabIndicatorColor="Yellow"
                TabContentBackgroundColor="Yellow"
                IsTabTransitionEnabled ="True">
                <xct:TabView.TabStripBackgroundView>
                <BoxView
                        Color="Blue"
                        CornerRadius="36, 36, 0, 0"/>
                 </xct:TabView.TabStripBackgroundView>
            
            <xct:TabViewItem
                    Icon="icon.png"
                    Text="Tab 1"
                    TextColor="White"
                    TextColorSelected="Yellow"
                    FontSize="12">
                <Grid 
                        BackgroundColor="Gray">
                    <Label
                            HorizontalOptions="Center"
                            VerticalOptions="Center"
                            Text="TabContent1" />
                </Grid>
            </xct:TabViewItem>

            <xct:TabViewItem
                    Icon="icon.png"
                    Text="Tab 2"
                    TextColor="White"
                    TextColorSelected="Yellow"
                    FontSize="12">
                <Grid>
                    <Label    
                            HorizontalOptions="Center"
                            VerticalOptions="Center"
                            Text="TabContent2" />
                </Grid>
            </xct:TabViewItem>
        </xct:TabView>
    </Grid>

</ContentPage>

Answer 2

Android:

在drawable文件夹中添加shape_indicator_radius.xml：

<?xml version="1.0" encoding="utf-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"  >
  <corners android:bottomRightRadius="50dp" android:bottomLeftRadius="50dp"/>
  <solid
       android:color="@android:color/black"/>
</shape>

在 Tabbar.xml 中设置背景：

<?xml version="1.0" encoding="utf-8"?>
 <android.support.design.widget.TabLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content" 
android:background="@drawable/shape_indicator_radius">

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

在 MainActivity 中，在 OnCreate 方法中设置 TabLayoutResource。

 TabLayoutResource = Resource.Layout.Tabbar;

iOS:

您可以使用自定义渲染器执行此操作。

[assembly:ExportRenderer(typeof(TabbedPage),typeof(MyCustomRenderer))]
namespace App4.iOS
{
    class MyCustomRenderer: TabbedRenderer
    {
        public override void ViewDidLoad()
        {
            base.ViewDidLoad();
            this.TabBar.Layer.MasksToBounds = true;
            this.TabBar.Translucent = true;
            
            this.TabBar.BarStyle = UIBarStyle.Black;
            this.TabBar.Layer.CornerRadius = 50;
            this.TabBar.Layer.MaskedCorners = 
            CoreAnimation.CACornerMask.MaxXMinYCorner | 
            CoreAnimation.CACornerMask.MinXMinYCorner;
        }
    }
   
}

如何制作自定义标签页？（底部的圆框）

How can I make custom tabbed page?(Rounded frame on the bottom)

c#

customization

xaml

xamarin

xamarin.forms