Shell์ ์ฌ์ฉํ์ฌ ํญ์ ๊ฐ์ง ์ ์์ต๋๋ค. ๊ทธ๋ฌ๋ ํน์ ์น์ (์: ๊ทธ๋ฆฌ๋) ๋ด์ ์ค์ฒฉ๋ ํญ์ ๊ฐ๊ณ ์ถ๋ค๋ฉด ์ด๋ป๊ฒ ๋ฉ๋๊น?, _๊ฐ ํญ์ ์์ ํ ์ฌ์ฉ์ ์ ์ํ๋ ค๋ฉด ์ด๋ป๊ฒ ํด์ผ ํฉ๋๊น?_. ์ด๋ฌํ ๊ฒฝ์ฐ ์ง๊ธ๊น์ง๋ Custom Renderer๊ฐ ํ์ํฉ๋๋ค...
TabView ๋ ํญ ์งํฉ๊ณผ ํด๋น ์ฝํ ์ธ ๋ฅผ ํ์ํ๋ ๋ฐฉ๋ฒ์ ๋๋ค. TabView๋ ์ฌ์ฉ์์๊ฒ ๋๋ถ๋ถ์ ๋ชจ๋ ๊ฒ์ ์ฌ์ฉ์ ์ ์ํ ์ ์๋ ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ฉด์ ์ฌ๋ฌ ์ฝํ ์ธ ๋ฅผ ํ์ํ๋ ๋ฐ ์ ์ฉํฉ๋๋ค.
์ฐธ๊ณ : TabView๋ ๋ ์ด์์์ ์ฌ์ฉํ ์์น ์ง์ , ์คํ์ผ ์ง์ , ๋์ถ๋ ๋ฒํผ๊ณผ ๊ฐ์ ๊ท ์ผํ์ง ์์ ์คํ์ผ ์ง์ ๊ณผ ๊ฐ์ ๋ค์ดํฐ๋ธ ํญ์ด ํ๊ณ์ ๋๋ฌํ์ ๋ ์ธ๊ณ๋ฐ๋ ํฌ๋ก์ค ํ๋ซํผ ๋ณด๊ธฐ ์ ๋๋ค.
๋ค์์ผ๋ก TabView ์์ฑ, ์ด๋ฒคํธ ๋ฐ ์๊ฐ์ ์ํ๊ฐ ์๋ ๋ชฉ๋ก์ ๋๋ค.
| ์ฌ์ฐ | ์ ํ | ์ค๋ช
|
|------------|:-------------:|:------------:|
| ํญ ํญ๋ชฉ ์์ค | IE์ซ์ | TabView์ ํญ ํญ๋ชฉ์ ์์ฑํ๋ ๋ฐ ์ฌ์ฉ๋๋ ์ปฌ๋ ์
์
๋๋ค. |
| ํญ๋ทฐ์์ดํ
๋ฐ์ดํฐํ
ํ๋ฆฟ | ๋ฐ์ดํฐ ํ
ํ๋ฆฟ | ํญ ๋ณด๊ธฐ๊ฐ ํญ ํญ๋ชฉ์ ํค๋๋ฅผ ์์ฑํ๋ ๋ฐ ์ฌ์ฉํ๋ ํ
ํ๋ฆฟ์
๋๋ค. |
| ํญ ์ฝํ
์ธ ๋ฐ์ดํฐ ํ
ํ๋ฆฟ | ๋ฐ์ดํฐ ํ
ํ๋ฆฟ | ํญ ๋ณด๊ธฐ๊ฐ ํญ ํญ๋ชฉ์ ์ฝํ
์ธ ๋ฅผ ์์ฑํ๋ ๋ฐ ์ฌ์ฉํ๋ ํ
ํ๋ฆฟ์
๋๋ค. |
| IsCyclical | ๋ถ์ธ | ์ํ ํญ ํ์์ ํ์ฑํํ๊ฑฐ๋ ๋นํ์ฑํํฉ๋๋ค. |
| ์ด์ฌ๋ ์ด์ง | ๋ถ์ธ | ์ง์ฐ ํญ ๋ก๋๋ฅผ โโํ์ฑํํ๊ฑฐ๋ ๋นํ์ฑํํฉ๋๋ค. |
| ์ ํ ์ธ๋ฑ์ค | ์ธํธ | ํ์ฌ ์ ํ๋ ํญ์ ๊ฐ์ ธ์ค๊ฑฐ๋ ์ค์ ํฉ๋๋ค. ๊ธฐ๋ณธ๊ฐ์ 0์
๋๋ค. |
| ํญ์คํธ๋ฆฝ๋ฐฐ์น | ํญ์คํธ๋ฆฝ๋ฐฐ์น | TabStrip ๋ฐฐ์น(์๋จ ๋๋ ํ๋จ). |
| ํญ์คํธ๋ฆฝ๋ฐฐ๊ฒฝ | ๋ธ๋ฌ์ | TabStrip ๋ฐฐ๊ฒฝ์
๋๋ค. |
| ํญ ํ์๊ธฐ ๋ธ๋ฌ์ | ๋ธ๋ฌ์ | TabIndicator ๋ฐฐ๊ฒฝ. |
| ํญ ํ์๊ธฐ ๋์ด | ๋๋ธ | TabIndicator ๋์ด์
๋๋ค. |
| ํญ ํ์๊ธฐ ๋๋น | ๋๋ธ | TabIndicator ๋๋น์
๋๋ค. |
| TabIndicator๋ฐฐ์น | TabIndicator๋ฐฐ์น | |
| ํญ ํ์๊ธฐ ๋ณด๊ธฐ | ๋ณด๊ธฐ | TabIndicator ์ฝํ
์ธ . |
| ํญ ์ฝํ
์ธ ๋ฐฐ๊ฒฝ | ๋ธ๋ฌ์ | ํญ ์ฝํ
์ธ ๋ฐฐ๊ฒฝ์
๋๋ค. |
| ํญ ์ฝํ
์ธ ๋์ด | ๋๋ธ | ํญ ์ฝํ
์ธ ๋์ด์
๋๋ค. |
| ํญ์คํธ๋ฆฝ ๋์ด | ๋๋ธ | TabStrip ๋์ด์
๋๋ค. |
| ํญ ์ฝํ
์ธ ๋์ด | ๋๋ธ | ํญ ์ฝํ
์ธ ๋์ด์
๋๋ค. |
| HasTabStripShadow | ๋ถ์ธ | TabStrip ๊ทธ๋ฆผ์ ํจ๊ณผ๋ฅผ ํ์ํ๊ฑฐ๋ ์จ๊น๋๋ค. |
| IsTabTransitionEnabled | ๋ถ์ธ | ํญ ๊ฐ ์ ํ์ ํ์ฑํํ๊ฑฐ๋ ๋นํ์ฑํํฉ๋๋ค. |
| IsSwipeํ์ฑํ | ๋ถ์ธ | ์ค์์ดํ ์ ์ค์ฒ๋ฅผ ํ์ฑํํ๊ฑฐ๋ ๋นํ์ฑํํฉ๋๋ค. |
| ์ฌ์ฐ | ์ ํ | ์ค๋ช
|
|------------|:-------------:|:------------:|
| ํ
์คํธ | ๋ฌธ์์ด | ํญ์ ํ
์คํธ์
๋๋ค. |
| ํ
์คํธ ์์ | ์์ | ํญ์ ํ
์คํธ ์์์
๋๋ค. |
| ํ
์คํธ ์์ ์ ํ | ์์ | ์ ํํ ํญ์ ํ
์คํธ ์์์
๋๋ค. |
| ๊ธ๊ผด ํฌ๊ธฐ | ๊ธ๊ผด ํฌ๊ธฐ | ํญ ํ
์คํธ์ ์ฌ์ฉ๋ ๊ธ๊ผด ํฌ๊ธฐ์
๋๋ค. |
| ๊ธ๊ผด ํฌ๊ธฐ ์ ํ | ๊ธ๊ผด ํฌ๊ธฐ | ์ ํํ ํญ์ ์ฌ์ฉ๋ ๊ธ๊ผด ํฌ๊ธฐ์
๋๋ค. |
| ํฐํธํจ๋ฐ๋ฆฌ | ๋ฌธ์์ด | ํญ์ ์ฌ์ฉ๋ ๊ธ๊ผด ๋ชจ์์
๋๋ค. |
| FontFamily์ ํ | ๋ฌธ์์ด | ์ ํํ ํญ์ ์ฌ์ฉ๋ ๊ธ๊ผด ๋ชจ์์
๋๋ค. |
| ๊ธ๊ผด ์์ฑ | ๊ธ๊ผด ์์ฑ | ํญ์ ์ฌ์ฉ๋ ๊ธ๊ผด ์์ฑ์
๋๋ค. |
| FontAttributes์ ํ๋จ | ๊ธ๊ผด ์์ฑ | ์ ํํ ํญ์ ์ฌ์ฉ๋ ๊ธ๊ผด ์์ฑ์
๋๋ค. |
| ์์ด์ฝ | ์ด๋ฏธ์ง ์์ค | ํญ์ ์์ด์ฝ์
๋๋ค. |
| ์์ด์ฝ์ ํ | ์ด๋ฏธ์ง ์์ค | ์ ํํ ํญ์์ ์์ด์ฝ์ผ๋ก ์ฌ์ฉ๋๋ ImageSource์
๋๋ค. |
| ๋ด์ฉ | ๋ณด๊ธฐ | ํญ์ ๋ด์ฉ์
๋๋ค. View๋ ๋ฌด์์ด๋ ์ฝํ
์ธ ๋ก ์ฌ์ฉํ ์ ์์ต๋๋ค. |
| ๋ฐฐ์ง ํ
์คํธ | ๋ถ์ธ | ํญ์ ์ฌ์ฉ๋ ๋ฐฐ์ง ํ
์คํธ์
๋๋ค. |
| ๋ฐฐ์ง ํ
์คํธ ์์ | ์์ | ํญ์ ์ฌ์ฉ๋ ๋ฐฐ์ง ํ
์คํธ ์์์
๋๋ค. |
| ๋ฐฐ์งํ
์คํธ์์์ ํ | ์์ | ์ ํํ ํญ์ ์ฌ์ฉ๋ ๋ฐฐ์ง ํ
์คํธ ์์์
๋๋ค. |
| ๋ฐฐ์ง ๋ฐฐ๊ฒฝ์ | ์์ | ํญ์ ์ฌ์ฉ๋ ๋ฐฐ์ง ์์์
๋๋ค. |
| ๋ฐฐ์ง ๋ฐฐ๊ฒฝ์ ์ ํ | ์์ | ์ ํํ ํญ์ ์ฌ์ฉ๋ ๋ฐฐ์ง ์์์
๋๋ค. |
| ์ ํ๋จ | ๋ถ์ธ | ํญ์ด ์ ํ๋์๋์ง ์ฌ๋ถ๋ฅผ ๋ํ๋ด๋ bool. |
| ํญ์ปค๋งจ๋ | ์์ด์ปค๋งจ๋ | ์ฌ์ฉ์๊ฐ ํญ์ ํญํ ๋ ์คํ๋๋ ๋ช
๋ น์
๋๋ค. |
| TapCommand๋งค๊ฐ๋ณ์ | ๊ฐ์ฒด | ํญ ๋ช
๋ น ๋งค๊ฐ๋ณ์. |
| ์ด๋ฒคํธ | ์ค๋ช
|
|------------|:-------------:|
| ์ ํ ๋ณ๊ฒฝ๋จ | ์ ํํ ํญ์ด ๋ณ๊ฒฝ๋ ๋ ๋ฐ์ํ๋ ์ด๋ฒคํธ์
๋๋ค. |
| ์คํฌ๋กค | ํญ ์ฌ์ด๋ฅผ ์ค์์ดํํ ๋ ๋ฐ์ํ๋ ์ด๋ฒคํธ์
๋๋ค. |
| ์ด๋ฒคํธ | ์ค๋ช
|
|------------|:-------------:|
| ํญํญ | ์ฌ์ฉ์๊ฐ ํญ์ ํญํ ๋ ๋ฐ์ํ๋ ์ด๋ฒคํธ์
๋๋ค. |
VSM(Visual State Manager)์ ์ฝ๋์์ ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ฅผ ์๊ฐ์ ์ผ๋ก ๋ณ๊ฒฝํ ์ ์๋ ๊ตฌ์กฐํ๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํฉ๋๋ค.
VSM์ ์๊ฐ์ ์ํ์ ๊ฐ๋
์ ์๊ฐํฉ๋๋ค. TabView๋ ๊ธฐ๋ณธ ์ํ์ ๋ฐ๋ผ ์ฌ๋ฌ ๊ฐ์ง ๋ค๋ฅธ ์๊ฐ์ ๋ชจ์์ ๊ฐ์ง ์ ์์ต๋๋ค.
TabView์๋ ๋ค ๊ฐ์ง ํน์ VisualState๊ฐ ์์ต๋๋ค .
์ผ๋ฐ์ ์ธ ์๋๋ฆฌ์ค๋ฅผ ๋ค๋ฃจ๋ ๋ช ๊ฐ์ง ์ํ์ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
๊ธฐ๋ณธ ์๋ฅผ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
<TabView
TabStripPlacement="Bottom"
TabStripBackgroundColor="Blue">
<TabViewItem
Icon="triangle.png"
Text="Tab 1">
<Grid
BackgroundColor="Gray">
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="TabContent1" />
</Grid>
</TabViewItem>
<TabViewItem
Icon="circle.png"
Text="Tab 2">
<Grid>
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="TabContent2" />
</Grid>
</TabViewItem>
</TabView>
TabItemsSource(๋์ ํญ) ์ฌ์ฉ:
<TabView
TabItemsSource="{Binding Monkeys}"
TabViewItemDataTemplate="{StaticResource TabViewItemTemplate}"
TabContentDataTemplate="{StaticResource TabContentTemplate}" />
๊ฐ ํญ์ ๋ชจ์์ ์ฌ์ฉ์ ์ ์ํ ์ ์์ต๋๋ค.
<ControlTemplate
x:Key="TabItemTemplate">
<Grid>
...
</Grid>
</ControlTemplate>
<TabView>
<TabViewItem
Text="Tab 1"
ControlTemplate="{StaticResource TabItemTemplate}">
</TabViewItem>
</TabView>
ํญ ์ฌ์ด๋ฅผ ์ฃผ๊ธฐ์ ์ผ๋ก ํ์ํ์๊ฒ ์ต๋๊น?
<TabView
IsCyclical="True">
...
</TabView>
์ง์ฐ ํญ ๋ก๋ฉ:
<TabView
IsLazy="True">
...
</TabView>
Xamarin.Forms ์ ๋๋ฉ์ด์ ์ ์ฌ์ฉํ์ฌ ๊ฐ ํญ ๊ฐ์ ์ ํ์ ์ฌ์ฉ์ ์ง์ ํ๊ณ , ๋ํ๋๊ฑฐ๋ ์ฌ๋ผ์ง ๋ ํญ์ ์ ๋๋ฉ์ด์ ์ ์ ์ฉํ๊ฑฐ๋, ๋ํ๋๊ฑฐ๋ ์ฌ๋ผ์ง ๋ ๋ฐฐ์ง์ ์ ๋๋ฉ์ด์ ์ ์ ์ฉํ ์๋ ์์ต๋๋ค.
<TabView>
<TabView.TabTransition>
<local:CustomTabTransition />
</TabView.TabTransition>
<TabViewItem
Text="Tab 1">
<TabViewItem.TabAnimation>
<local:CustomTabViewItemAnimation />
</TabViewItem.TabAnimation>
<Grid
BackgroundColor="LawnGreen">
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="TabContent1" />
</Grid>
</TabViewItem>
...
</TabView>
๋ค๋ฅธ ์๊ฐ์ ์ํ๋ฅผ ์ฌ์ฉํ์ฌ ํ์ฌ ํญ, ๋ค์ ํญ ๋ฑ์ ์ฌ์ฉ์ ์ง์ ํ ์ ์์ต๋๋ค.
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="TabViewStates">
<VisualState x:Name="CurrentTab">
<VisualState.Setters>
<Setter Property="Opacity" Value="1" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PreviousTab">
<VisualState.Setters>
<Setter Property="Opacity" Value="0.7" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="NextTab">
<VisualState.Setters>
<Setter Property="Opacity" Value="0.7" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="DefaultTab">
<VisualState.Setters>
<Setter Property="Opacity" Value="0.9" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Label Text="{Binding Index}" HorizontalOptions="Center" VerticalOptions="End" />
</Grid>
XAML ๋๋ C#์ ์ฌ์ฉํ์ฌ Xamarin.Forms์์ UI๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค. C#์ ์ฌ์ฉํ์ฌ ํญ์ ๋ง๋๋ ๋ฐฉ๋ฒ์ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
var tabView = new Tabs
{
TabStripPlacement = TabStripPlacement.Bottom,
TabStripBackgroundColor = Color.Blue,
TabStripHeight = 60,
TabIndicatorColor = Color.Yellow,
TabContentBackgroundColor = Color.Yellow
};
var tabViewItem1 = new TabViewItem
{
Icon = "triangle.png",
Text = "Tab 1",
TextColor = Color.White,
TextColorSelected = Color.Yellow,
};
var tabViewItem1Content = new Grid
{
BackgroundColor = Color.Gray
};
var label1 = new Label
{
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center,
Text = "TabContent1"
};
tabViewItem1Content.Children.Add(label1);
tabViewItem1.Content = tabViewItem1Content;
tabView.TabItems.Add(tabViewItem1);
var tabViewItem2 = new TabViewItem
{
Icon = "circle.png",
Text = "Tab 2",
TextColor = Color.White,
TextColorSelected = Color.Yellow
};
var tabViewItem2Content = new Grid
{
BackgroundColor = Color.OrangeRed
};
var label2 = new Label
{
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center,
Text = "TabContent2"
};
tabViewItem2Content.Children.Add(label2);
tabViewItem2.Content = tabViewItem2Content;
tabView.TabItems.Add(tabViewItem2);
XAML ์คํ์ผ ๋๋ CSS๋ฅผ ์ฌ์ฉํ์ฌ ํญ ์ฝํ ์ธ , ํญ ์คํธ๋ฆฝ, ํญ ํญ๋ชฉ ๋ฑ์ ๋ชจ์์ ์ฌ์ฉ์ ์ง์ ํ ์ ์์ต๋๋ค.
XAML ์ฌ์ฉ:
<Style
x:Key="TabItemStyle"
TargetType="TabViewItem">
<Setter
Property="FontSize"
Value="12" />
<Setter
Property="TextColor"
Value="#979797" />
</Style>
CSS ์ฌ์ฉ:
.customTabItem {
font-size: medium;
text-color: red;
}
https://github.com/xamarin/Xamarin.Forms/issues/10773 ๊ธฐ๋ฐ
MVU์์ C# ์ํ์ ๋ณผ ์ ์์ต๋๊น?
TabView ๋์์ด ํ์ฅ๋์ด ๋์คํ๋ ์ด๊ฐ ์ถฉ๋ถํ ๋์ผ๋ฉด ํญ์ด 'ํฌ์ฅ ํด์ '๋์ด ๋ชจ๋ ํญ์ ๋ด์ฉ์ด ํ์๋๋๋ก ์ผ๋ถ ์ฌ์ฉ ์๋๋ฆฌ์ค(์: ๊ด์ฐ)์ ์ ๋ง ๋์์ด ๋ ๊ฒ์ ๋๋ค. ํ๋ฉด์ ๊ฐ๋ก์ง๋ฌ. ์ด๊ฒ์ ํ๋ธ๋ฆฟ๊ณผ ์ ๋ง ์ ์ด์ธ๋ฆฌ๋ ๊น๋ํ '๋ฐ์ํ ๋์์ธ'์ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค.
ํด๋์ ํ ๋๋ ์ธ๋ก ๋ชจ๋๋ก ์ ์ง๋๋ ํ๋ธ๋ฆฟ์์ ์ฌ์ฉ์๋ ํ ์ฐฝ์ด ํ๋ฉด์ ํ์๋๊ณ ๋ค๋ฅธ ์ฐฝ์ 'ํญ ์ ํ' ์ ์ค์ฒ๋ฅผ ํตํด ์ฐ๊ฒฐํ ์ ์๋ ํญ ๋ณด๊ธฐ๋ฅผ ๋ณผ ์ ์์ต๋๋ค. ๊ทธ๋ฌ๋ ํ๋ธ๋ฆฟ์ด ๊ฐ๋ก ๋ชจ๋๋ก ํ์ ํ๋ฉด(๋๋ ํ๋ฉด์ด ์ถฉ๋ถํ ๋์ ๋ฐ์คํฌํ ์ปดํจํฐ์์) ํ๋ฉด์ ๋ชจ๋ ์ฐฝ์ด ๋์์ ํ๋ฉด ์ ์ฒด์ ๊ฑธ์ณ ๋๋ํ ํ์๋ฉ๋๋ค.
์์ด์ฝ์ ImageSource ๋์ View ์ ํ์ด ๋๋๋ก ํ์ญ์์ค. ์๋ฆผ์ ํ์ํ๊ณ ์ถ์ต๋๋ค(์ผ๋ฐ์ ์ผ๋ก ํญ ์์ด์ฝ์ ์๋จ ๋ชจ์๋ฆฌ์ ์์ ์ ์ผ๋ก ํ์).
์์ด์ฝ์ ImageSource ๋์ View ์ ํ์ด ๋๋๋ก ํ์ญ์์ค. ์๋ฆผ์ ํ์ํ๊ณ ์ถ์ต๋๋ค(์ผ๋ฐ์ ์ผ๋ก ํญ ์์ด์ฝ์ ์๋จ ๋ชจ์๋ฆฌ์ ์์ ์ ์ผ๋ก ํ์).
@MhAllan ๋๋ ๊ทธ๊ฒ์ด TabViewItem ์์ฑ BadgeText, BadgeTextColor, BadgeTextColorSelected, BadgeBackgroundColor & BadgeBackgroundColorSelected๋ฅผ ์ฌ์ฉํ์ฌ ๋ฌ์ฑ๋ ๊ฒ์ด๋ผ๊ณ ๋ฏฟ์ต๋๋ค.
BadgeText์ ์๋ชป๋ ์ ํ์ด ๋์ด๋์ด ์๋ ๊ฒ ๊ฐ์ต๋๋ค. Bool์ด ์๋๋ผ String์ด์ด์ผ ํฉ๋๋ค.
@irongut , ๋ฉ๋ชจ ๊ฐ์ฌํฉ๋๋ค. ์ ๋ ์๋ชป๋ ๋์์ธ์ด๋ผ๊ณ ์๊ฐํฉ๋๋ค. BadgeText์ ๊ฐ์ ๊ฒ์ด ์์ด์ผ ํฉ๋๋ค.
๋ฏธ๋์ ์๊ตฌ ์ฌํญ์ ์ถฉ์กฑํ ์ ์๋ ํ๋ ์์ํฌ๋ฅผ ์๊ฐํ๋ค๋ฉด String ๋๋ ImageSource์ ๊ฐ์ ์ ํ์ผ๋ก ๊ฐ๋ฐ์๋ฅผ ์ ํํด์๋ ์ ๋ฉ๋๋ค. ๊ทธ๋ ๊ฒ ํ๋ฉด ๊ณง ๋ค์๊ณผ ๊ฐ์ ๋ฌธ์ ๊ฐ ๋ฐ์ํฉ๋๋ค. ๋ฐฐ์ง ๋ชจ์๋ฆฌ๋ฅผ ๋ฅ๊ธ๊ฒ ๋ง๋ค๊ธฐ, ๋ฐฐ์ง๋ฅผ ํฌ๊ฒ, ์๊ฒ, ๊ทธ๋ฆผ์, ์์ด์ฝ ์ผ์ชฝ, ์, ์๋, ์ค๋ฅธ์ชฝ, ์์ด์ฝ ์, ์์ด์ฝ ๋ค, ์ ๋๋ฉ์ด์ ... ๋ฑ๋ฑ. ๊ทธ๋ฆฌ๊ณ ์ฌ๋๋ค์ ์ฝ๊ฒ ์ฌ์ฉ์ ์ ์ํ ์ ์๋ค๋ ์ข์ ๊ฐ์ ๋๋ ๊ฒ์ ๋๋ค. ์ด ๊ธ์ ์ฐ๋ฉด์ ์ ๋ ํ์ฌ X์ถ์ ์ค์ฌ์ผ๋ก ๋ ๋ฒ ํ์ ํ๋ ์๋ฆผ ๋ฐฐ์ง๋ฅผ ๋ง๋ค๊ณ ์์ต๋๋ค. ์ปค์คํฐ๋ง์ด์ง์ด ์ผ๋ง๋ ์ด์ํ์ง ๋ณผ๊น์?
@MhAllan Syncfusion์ SfTabview๋ ๋ณด๋ค ๋์ ์ผ๋ก ์ํํ ์ ์๋ ์ข์ ์์ ๋๋ค.
๊ฐ์ฌํฉ๋๋ค. ํ์ง๋ง ์ด์ ์ฒด์ , ํ๋ก๊ทธ๋๋ฐ ์ธ์ด, ๋ฉ์ง ํ๋ ์์ํฌ๊ฐ ๋ฌด๋ฃ์ผ ๋ ์์ฒ ๋ฌ๋ฌ์ ํ๋ฆฌ๊ณ ์๋ ๊ฑฐ๋จธ๋ฆฌ์ ์ํ์ ๋ณด๊ณ ์ถ์ด ํ๋ ์ฌ๋์ ๋๊ตฌ์ ๋๊น?
๋๋ Syncfusion์ ์ฌ์ฉํ๋ค๋ ๊ฒ์ ์๋ฏธํ์ง ์์์ต๋๋ค. ๊ทธ๋ค์ด ๊ทธ๊ฒ์ ์ด๋ป๊ฒํ๋์ง๋ณด๊ณ ์๊ฐ์์ฃผ๋ ์ข์ ์๋ผ๊ณ ๋งํ๋ ๊ฒ์ ๋๋ค. ๊ทธ ์ธ์ 100๋ง ์ด์์ ๋๊ธฐ์ ์ ๋ํด์๋ง ์ง๋ถํ ๊ฐ์ธ ๊ณ ๊ฐ์๊ฒ ๋ฌด๋ฃ๋ก ์ ๊ณตํฉ๋๋ค. ๊ทธ๋ค์ Xamarin ์์ฒด๋ณด๋ค 1-2 ๋จ๊ณ ์์ ์๋ค๊ณ ๋ฏฟ์ต๋๋ค. ๋ช ๋ฌ, ๋ช ๋ ๋์ ์ ์ ํ Collection/ListView๋ฅผ ์ป์ ์์กฐ์ฐจ ์์ต๋๋ค.
TabViewItem ์ ์ฒด์๋ ํญ ํญ๋ชฉ ์์ ์ํ๋ ๋ณด๊ธฐ๋ฅผ ๋ฃ์ ์ ์๋ ContentView๊ฐ ์์ด์ผ ํ๋ค๋ ๋ฐ ๋์ํฉ๋๋ค. ํ์ฌ ์งํ ์ค์ธ ์์
์ ํญ ๋ณด๊ธฐ๋ฅผ ์ํ๋ ๋ฐฉ์์ด ์๋ ์ฌ์ฉ์๊ฐ ๊ตฌ์ํ ๋ฐฉ์์ผ๋ก ํญ ๋ณด๊ธฐ๋ฅผ ๊ตฌํํ๋๋ก ์ ํํฉ๋๋ค. ๊ธฐ๋ณธ ๋ชจ์์ "์ฌ์ฉํ๊ธฐ ์ฌ์ด" ํญ ๋ณด๊ธฐ๋ฅผ ์ํ๋ฉด SimpleTabItemView
ํด๋์ค๋ฅผ ๋ง๋ค๋ฉด ๋ฉ๋๋ค. ์ฐ๋ฆฌ ์์ ์ ์ฌ์ฉ์ ์ ์ ๋ณด๊ธฐ๋ฅผ ํตํด ์์ ์ ๋ชจ์๊ณผ ๋๋.
TabViewItem ์ ์ฒด์๋ ํญ ํญ๋ชฉ ์์ ์ํ๋ ๋ณด๊ธฐ๋ฅผ ๋ฃ์ ์ ์๋ ContentView๊ฐ ์์ด์ผ ํ๋ค๋ ๋ฐ ๋์ํฉ๋๋ค. ํ์ฌ ์งํ ์ค์ธ ์์ ์ ํญ ๋ณด๊ธฐ๋ฅผ ์ํ๋ ๋ฐฉ์์ด ์๋ ์ฌ์ฉ์๊ฐ ๊ตฌ์ํ ๋ฐฉ์์ผ๋ก ํญ ๋ณด๊ธฐ๋ฅผ ๊ตฌํํ๋๋ก ์ ํํฉ๋๋ค. ๊ธฐ๋ณธ ๋ชจ์์ "์ฌ์ฉํ๊ธฐ ์ฌ์ด" ํญ ๋ณด๊ธฐ๋ฅผ ์ํ๋ฉด
SimpleTabItemView
ํด๋์ค๋ฅผ ๋ง๋ค๋ฉด ๋ฉ๋๋ค. ์ฐ๋ฆฌ ์์ ์ ์ฌ์ฉ์ ์ ์ ๋ณด๊ธฐ๋ฅผ ํตํด ์์ ์ ๋ชจ์๊ณผ ๋๋.
์์ ์ ์ธ ์ด์์ ์ํด์๋ ์ด๋์ ๋์ ์ ์ฝ์ด ์๋๊ฑด ์ข์๊ฑฐ ๊ฐ์์
์์ ์ ์ธ ์ด์์ ์ํด์๋ ์ด๋์ ๋์ ์ ์ฝ์ด ์๋๊ฑด ์ข์๊ฑฐ ๊ฐ์์
์ฌ์ฉํ๊ธฐ ์ฌ์ด "์์ ์ ์ธ ์์ "์ ์ํด ๊ธฐ๋ณธ ํญ ๋ณด๊ธฐ๋ฅผ ๊ณ์ ์ฌ์ฉํ ์ ์์ต๋๋ค. ์ ์ฒด ๋ณด๊ธฐ๋ฅผ ์ ํํ ์ด์ ๊ฐ ์์ต๋๋ค.
ํ์ฌ๋ Xamarin Community Toolkit์ผ๋ก ์ด๋ํ๊ณ ์์ต๋๋ค.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
@irongut , ๋ฉ๋ชจ ๊ฐ์ฌํฉ๋๋ค. ์ ๋ ์๋ชป๋ ๋์์ธ์ด๋ผ๊ณ ์๊ฐํฉ๋๋ค. BadgeText์ ๊ฐ์ ๊ฒ์ด ์์ด์ผ ํฉ๋๋ค.
๋ฏธ๋์ ์๊ตฌ ์ฌํญ์ ์ถฉ์กฑํ ์ ์๋ ํ๋ ์์ํฌ๋ฅผ ์๊ฐํ๋ค๋ฉด String ๋๋ ImageSource์ ๊ฐ์ ์ ํ์ผ๋ก ๊ฐ๋ฐ์๋ฅผ ์ ํํด์๋ ์ ๋ฉ๋๋ค. ๊ทธ๋ ๊ฒ ํ๋ฉด ๊ณง ๋ค์๊ณผ ๊ฐ์ ๋ฌธ์ ๊ฐ ๋ฐ์ํฉ๋๋ค. ๋ฐฐ์ง ๋ชจ์๋ฆฌ๋ฅผ ๋ฅ๊ธ๊ฒ ๋ง๋ค๊ธฐ, ๋ฐฐ์ง๋ฅผ ํฌ๊ฒ, ์๊ฒ, ๊ทธ๋ฆผ์, ์์ด์ฝ ์ผ์ชฝ, ์, ์๋, ์ค๋ฅธ์ชฝ, ์์ด์ฝ ์, ์์ด์ฝ ๋ค, ์ ๋๋ฉ์ด์ ... ๋ฑ๋ฑ. ๊ทธ๋ฆฌ๊ณ ์ฌ๋๋ค์ ์ฝ๊ฒ ์ฌ์ฉ์ ์ ์ํ ์ ์๋ค๋ ์ข์ ๊ฐ์ ๋๋ ๊ฒ์ ๋๋ค. ์ด ๊ธ์ ์ฐ๋ฉด์ ์ ๋ ํ์ฌ X์ถ์ ์ค์ฌ์ผ๋ก ๋ ๋ฒ ํ์ ํ๋ ์๋ฆผ ๋ฐฐ์ง๋ฅผ ๋ง๋ค๊ณ ์์ต๋๋ค. ์ปค์คํฐ๋ง์ด์ง์ด ์ผ๋ง๋ ์ด์ํ์ง ๋ณผ๊น์?