2017-06-13 11 views
1

Xamarinフォームの新機能。Tabbedページの設定方法

私は以下のタブ付きページを持っています。私は次のことをしたかった:

1)タブの背景色は、白または白、色付きのものです。

2)タブの下線の色を変更します。

3)いくつのタブを使用できますか?

4)テキストのフォントサイズ。

5)各タブはcontentPageを持っているので、私のcontentpageが非常に長くて複雑なので、Tabの内側ではなく、contentPageを外部から参照する方法。

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms" 
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
      BackgroundColor="White" 
      x:Class="MainPage2"> 

    <ContentPage Title ="Page1" Icon="itemIcon1" WidthRequest="200" BackgroundColor="White"> 

     <ContentPage.Content> 

      <StackLayout VerticalOptions="Center" HorizontalOptions="Center"> 


       <Label Text="T1"> 
       </Label> 

      </StackLayout> 

     </ContentPage.Content> 
    </ContentPage> 

    <ContentPage Title ="Page2" Icon="itemIcon2" WidthRequest="200" BackgroundColor="White"> 

     <ContentPage.Content> 

      <StackLayout VerticalOptions="Center" HorizontalOptions="Center"> 

       <Label Text="T2"> 
       </Label> 

      </StackLayout> 

     </ContentPage.Content> 
    </ContentPage> 



    <ContentPage Title ="Page3" Icon="itemIcon3" WidthRequest="200"> 

     <ContentPage.Content> 

      <StackLayout VerticalOptions="Center" HorizontalOptions="Center"> 

       <Label Text="T3"> 
       </Label> 
      </StackLayout> 

     </ContentPage.Content> 
    </ContentPage> 
</TabbedPage> 

おかげ

+1

ここで心配しているプラ​​ットフォームはどれですか?それはAndroidのように思えますが、iOSでもその量のカスタマイズが必要ですか?具体的には、「タブの下線」 – SuavePirate

答えて

0

タブの背景色、文字サイズのスタイルタブ

スタイリング、そしてハイライトは、プラットフォーム固有のプロジェクトに処理する必要があります。だから、Androidのためにこれを使用すると、リソースに変更することができますカスタムテーマ、との基本スタイルをオーバーライドすることによって達成することができます>値>styles.xml

<?xml version="1.0" encoding="UTF-8"?> 
<resources> 
    <color name="CustomHighlight">@android:color/transparent</color> 

    <style name="MyTheme" parent="MyTheme.Base"> 
    </style> 

    <!-- Base theme applied no matter what API --> 
    <style name="MyTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar"> 
     <item name="android:tabWidgetStyle">@android:style/Widget.TabWidget</item> 
     ... 
     <!-- The rest of your styles would go here --> 
     ... 
    </style> 
    <style name="Widget.TabWidget"> 
     <item name="android:textAppearance">@style/TextAppearance.Widget.TabWidget</item> 
     <item name="android:ellipsize">marquee</item> 
     <item name="android:singleLine">true</item> 
    </style> 


    <style name="TextAppearance.Widget.TabWidget"> 
     <item name="android:textSize">14sp</item> 
     <item name="android:textStyle">normal</item> 
     <item name="android:textColor">@android:color/tab_indicator_text</item> 
    </style> 
</resources> 

(たっぷり、この質問から借り:Android - How to Change Color of Selected Tab

あなたの中に-line背景色は、あなたの.xamlマークアップで十分です:iOS用

<ContentPage Title ="Page2" Icon="itemIcon2" WidthRequest="200" BackgroundColor="White"> 

は、ハイライトカラーを変更することがかなり簡単です。あなたのAppDelegate.csで:

public override bool FinishedLaunching(UIApplication app, NSDictionary options) 
{ 
    UITabBar.Appearance.TintColor = UIColor.Red; 

    global::Xamarin.Forms.Forms.Init(); 

    ... 

物事はそこから毛を得るので、私はカスタムレンダラーを作成するための偉大なチュートリアルを持っている開発者向けドキュメントを参照してくださいよ:Customize Tab Bar on iOS

タブカウント

ドキュメントから

ユーザーは、acrであるタブのコレクションをスクロールすることができますそのコレクションが1つの画面に収まるには大きすぎる場合は、画面の上部をossしてください。

実際、タブの数は、ユーザーエクスペリエンスの観点からは意味があるものに限定されています。私は個人的に6つ以上を持っていないようにしていますが、あなたのユースケースはもう少し正当なものかもしれません。

関連する問題