مشخصات مقاله
-
1046
-
0.0
-
1504
-
0
-
0
ساخت LogView
کلیه حقوق مادی و معنوی این مقاله متعلق به آموزشگاه تحلیل داده می باشد و هر گونه استفاده غیر قانونی از آن پیگرد قانونی دارد.
ساخت LogView
در این مقاله به شما آموزش خواهم داد چطور یک با استفاده از Font Awesome یک رابط کاربری برای LoginView ایجاد کنیم، چطور LoginViewModel را ایجاد کنیم و در آخر چطور انتقال بین صفحات مختلف را کنترل کنیم.
ساخت UI با استفاده از Font Awesome
Font Awesome شامل آیکونی هایی است که می توان آن ها را بوسیله یک برچسب نمایش داد. به این ترتیب خواهید توانست از این فونت ها برای نمایش آیکون ها در برنامه استفاده کنید. برای مثال از آیکون های Microsoft، Google و Facebook به جای استفاده از تصاویر استفاده خواهیم کرد.
پروژه ENEI.SessionsApp را باز کنید و یک صفحه XAML در پوشه Views اضافه کنید:
نتیجه یک صفحه به شکل زیر خواهد بود:
<?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="ENEI.SessionsApp.Views.LoginView">
<Label Text="{Binding MainText}" VerticalOptions="Center" HorizontalOptions="Center" />
</ContentPage>
حالا می توانید رابط کاربری را تعریف کنید. اما قبل از آن باید در هر پلتفرم یکسری کارهای اضافی انجام دهید تا مطمئن شوید هنگام اجرای برنامه، فونت مورد نظر بر روی صفحه نمایش، ظاهر خواهد شد.
در حالت کلی به موارد زیر نیاز خواهید داشت:
در ENEI.SessionsApp.iOS
فایل FontAwesome.ttf را به پوشه Resources اضافه کنید:
تغییرات لازم را در Info.plist انجام دهید و فونت را در آن include کنید. در Visual Studio یا Xamarin Studio می توانید فایل XML را به شکل زیر ویرایش کنید:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
…
<key>UIAppFonts</key>
<array>
<string>FontAwesome.ttf</string>
</array>
</dict>
</plist>
در Xamarin Studio به شکل زیر فونت را اضافه می کنیم:
Android
فایل FontAwesome.ttf را به پوشه Assets اضافه می کنیم:
یک Render برای CustomLabel ایجاد کنید:
[assembly: ExportRenderer(typeof(CustomLabel), typeof(CustomLabelRenderer))]
namespace ENEI.SessionsApp.Droid.Renders {
public class CustomLabelRenderer: LabelRenderer {
protected override void OnElementChanged(ElementChangedEventArgs < Label > e) {
base.OnElementChanged(e);
var label = (TextView) Control;
Typeface font = Typeface.CreateFromAsset(Forms.Context.Assets, "FontAwesome.ttf");
label.Typeface = font;
}
}
}
در ENEI.SessionsApp.WinPhone یا ENEI.SessionsApp.WinRT:
فایل FontAwesome.ttf را به پوشه Assets/Fonts اضافه کنید:
FontAwesome.ttf را به عنوان Content و Copy Always تنظیم کنید.
در ENEI.SessionsApp
یک کلاس به نام CustomLabel ایجاد کنید و برای هر پلتفرم یک FontFamily تعریف کنید.
public class CustomLabel: Label {
public CustomLabel() {
FontFamily = Device.OnPlatform(
iOS: "FontAwesome",
Android: null,
WinPhone: @
"\Assets\Fonts\FontAwesome.ttf#FontAwesome");
if (Device.OS == TargetPlatform.Windows) {
FontFamily = @
"\Assets\Fonts\FontAwesome.ttf#FontAwesome";
}
}
} حالا می توانید UI مربوط به LoginView را ایجاد کنید. این صفحه به شکل زیر خواهد بود:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:controls="clr-namespace:ENEI.SessionsApp.Controls;assembly=ENEI.SessionsApp"
x:Class="ENEI.SessionsApp.Views.LoginView"
Title="Authentication" BackgroundColor="White" x:Name="ContentPage"
Icon="ic_action_users.png">
<Grid BackgroundColor="White">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- Title - Only for WP-->
<StackLayout Grid.Row="0" Orientation="Horizontal" Padding="20,10,0,0">
<StackLayout.IsVisible>
<OnPlatform Android="false" WinPhone="true" iOS="false"
x:TypeArguments="x:Boolean" />
</StackLayout.IsVisible>
<Image WidthRequest="48"
HeightRequest="38"
Source="Images/ic_action_users.png"/>
<Label FontSize="Medium" FontAttributes="Bold"
TextColor="Black">
<OnPlatform Android="" WinPhone="Authentication"
iOS="" x:TypeArguments="x:String" />
</Label>
</StackLayout>
<StackLayout Spacing="20" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" Grid.Row="1">
<!—login by social network will be here -->
</StackLayout>
</Grid>
</ContentPage>
سپس می توانید گزینه های login از طریق Faceboock، Google یا Microsoft را به شکل زیر تعریف کنید:
<StackLayout WidthRequest="300" HeightRequest="60" Orientation="Horizontal" BackgroundColor="#3b5998" HorizontalOptions="Center" Spacing="20">
<controls:CustomLabel FontSize="Small"
HorizontalOptions="CenterAndExpand"
Text="ï‚š"
TextColor="White"
VerticalOptions="CenterAndExpand" />
<Label FontAttributes="Bold"
FontSize="Small"
HorizontalOptions="StartAndExpand"
Text="Facebook"
TextColor="White"
VerticalOptions="CenterAndExpand" />
</StackLayout>
<StackLayout WidthRequest="300" HeightRequest="60" Orientation="Horizontal" BackgroundColor="#dd4b39" HorizontalOptions="Center" Spacing="20">
<controls:CustomLabel FontSize="Small"
HorizontalOptions="CenterAndExpand"
Text=""
TextColor="White"
VerticalOptions="CenterAndExpand" />
<Label FontAttributes="Bold"
FontSize="Small"
HorizontalOptions="StartAndExpand"
Text="Google"
TextColor="White"
VerticalOptions="CenterAndExpand" />
</StackLayout>
Microsoft
<StackLayout WidthRequest="300" HeightRequest="60" Orientation="Horizontal" BackgroundColor="#219dfd" HorizontalOptions="Center" Spacing="20">
<controls:CustomLabel FontSize="Small"
HorizontalOptions="CenterAndExpand"
Text="ï…º"
TextColor="White"
VerticalOptions="CenterAndExpand" />
<Label FontAttributes="Bold"
FontSize="Small"
HorizontalOptions="StartAndExpand"
Text="Microsoft"
TextColor="White"
VerticalOptions="CenterAndExpand" />
</StackLayout>
وقتی برنامه را اجرا کنید، نتیجه به شکل زیر خواهد بود:
ساخت LoginViewModel
تا اینجا رابط کاربری LoginView ایجاد شده است و حالا نوبت به LoginViewModel رسیده است که یک Action برای هر گزینه از LoginView خواهد داشت.
پروژه ENEI.SessionsApp را باز کرده و LoginViewModel را به پوشه ViewModels اضافه کنید:
سپس به شکل زیر LoginCommnad را ایجاد می کنیم:
public class LoginViewModel
{
public LoginViewModel()
{
LoginCommand = new Command(DoLogin);
}
private void DoLogin(object param)
{
var option = param.ToString();
switch (option)
{
case "facebook":
//connect with facebook api
break;
case "goolge":
//connect with google api
break;
case "microsoft":
//connect with microsoft api
break;
}
}
public ICommand LoginCommand
{
get;
set;
}
}
تا اینجا شما فقط ICommand را ایجاد کرده اید که در تمام گزینه ها ی LoginView مورد استفاده قرار می گیرد. به همین دلیل لازم است یک CommandParameter به نام گزینه ارسال کنید.
جهت اتصال UI به LoginViewModel باید آن را تعریف کرده و آن را به BindingContext متصل کنید:
public partial class LoginView : ContentPage
{
public LoginView()
{
InitializeComponent();
BindingContext = new LoginViewModel();
}
}
سپس باید StackLayout، ریشه هر گزینه را به شکل زیر تغییر دهید:
<StackLayout WidthRequest="300" HeightRequest="60" Orientation="Horizontal" BackgroundColor="#3b5998" HorizontalOptions="Center" Spacing="20">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer CommandParameter="facebook"
Command="{Binding LoginCommand}"/>
</StackLayout.GestureRecognizers>
<controls:CustomLabel FontSize="Small"
HorizontalOptions="CenterAndExpand"
Text="ï‚š"
TextColor="White"
VerticalOptions="CenterAndExpand" />
<Label FontAttributes="Bold"
FontSize="Small"
HorizontalOptions="StartAndExpand"
Text="Facebook"
TextColor="White"
VerticalOptions="CenterAndExpand" />
</StackLayout>
برای سایر گزینه ها هم این پیاده سازی را باید انجام دهید.
هنگام اجرای برنامه باید متد DoLogin را فراخوانی کنید:
کنترل جابجایی (Navigation)
تا به اینجا شما هیچ احراز هویتی ندارید. اما می توانید جریان کاملی برای برنامه ایجاد کنید.برای این کار باید انتقال بین صفحات مختلف را تعیین کنید که هدف اصلی این مرحله است.
برای شروع یک NavMessage ایجاد کنید:
public class NavMessage
{
public string Page
{
get;
set;
}
public object Param
{
get;
set;
}
}
سپس در کلاس App برای انتقال بین صفحات می توانید از MessaginCenter استفاده کنید:
public App()
{
InitializeComponent();
MainPage = new NavigationPage(new LoginView()) {
BarBackgroundColor = Color.White,
BarTextColor = Color.Black,
BackgroundColor = Color.White,
};
MessagingCenter.Subscribe < NavMessage > (this, "Navigation", navMessage = > {
switch (navMessage.Page) {
case "login":
MainPage = new LoginView();
break;
case "sessions":
MainPage = new NavigationPage(new SessionsView()) {
BarBackgroundColor = Color.White,
BarTextColor = Color.Black,
BackgroundColor = Color.White,
};
break;
case "details":
MainPage.Navigation.PushAsync(new SessionDetailsView(navMessage.Param as Session), true);
break;
}
});
}
راه های مختلفی برای کنترل navigation وجود دارد که می تواند براساس نیاز های برنامه تعیین شود.
در LoginViewModel باید متد DoLogin را به شکل زیر تغییر دهید:
private void DoLogin(object param)
{
var option = param.ToString();
switch (option)
{
case "facebook":
//connect with facebook api
break;
case "goolge":
//connect with google api
break;
case "microsoft":
//connect with microsoft api
break;
}
MessagingCenter.Send(new NavMessage
{
Page = "sessions"
}, "Navigation");
}
تا این لحظه احراز هویت مهم نبود.اما در این مرحله به آن خواهیم پرداخت.
در SessionsViewModel متد SeeSessionDetails را به شکل زیر تغییر دهید:
private void SeeSessionDetails(object param)
{
var session = param as Session;
if (session != null)
{
MessagingCenter.Send(new NavMessage
{
Page = "details",
Param = session
}, "Navigation");
}
}
و navigation را از SessionsView، حذف کنید. نتیجه این کار به شکل زیر خواهد بود:
public SessionsView()
{
InitializeComponent();
}
اگر برنامه را اجرا کنید، برنامه باید با LoginView آغاز شود و پس از آن SessionsView و SessionDetailsView را مشاهده خواهید کرد.