TabbedPageについて纏めてみました。

TabbedPageはタブを表示する事ができるページです。

思っていたよりも手軽に生成できるのが特徴です。タブを10個、20個と増やしていった場合の動作は…?

TabbedPageの動き方について

かりまたかりまた

TabbedPageを使うとどのように動くかをまずは見てみましょう。

TabbedPageの動作

AndroidiPhone

TabbedPageの作り方(Xamlメイン)

かりまたかりまた

なんとなく、「難しそうかな?」と思ってたのですが所がどっこい。全然そんな事はないですね。MainPage.xaml.csは継承元をTabbedPageに変更しているだけです。

Code Example

TabbedPageの作り方(コードビハインドメイン)

りんちゃんりんちゃん

コードビハインド中心にTabbedPageを生成してみるのにゃ~。

Code Example

TabbedPageの動作

AndroidiPhone

TabbedPageのタブをもっと増やしてみると?

りんちゃんりんちゃん

TabbedPageのタブを増やしてみるとどうなるかが気になったので検証してみるのにゃ~。

Tabを増やした時の動作

りんちゃんりんちゃん

ここでは上の青いBoxViewをタップした時にタブが増え、赤いBoxViewタップ時に現在のタブが消えるようにしてみたのにゃ~。

AndroidiPhone
 
りんちゃんりんちゃん

にゃるほどにゃ~。Androidの場合はタブが1行で収まらなくなったら2行に、それでも収まらないなら消えるんだにゃ~。

りんちゃんりんちゃん

iOSの場合はタブが5つ以上になるとMoreタブで一纏めにされるみたいだにゃ~。どちらかというとiOSの方が理に適った動きになってるとおもうのにゃ~。

Code Example

りんちゃんりんちゃん

上記のような動きをするコードを以下に載せるにゃ~。

かりまたかりまた

殆どコードビハインドに書いているのは私の技術力がないからです、すみません。どなたか強い人、Xamlメインで同じように書ける人がいたら教えてください。

かりまたかりまた

それと、真ん中の空白をどうやって埋めれば良いかも教えてください。

まとめ

  • TabbedPageは意外と楽ちん
  • TabbedPageをXaml側で書いた場合はCotentPageとは違ってコントロールを配置できない (Pageを入れるハコの為)