C#使用Xamarin開發可移植移動應用(1.入門與Xamarin.Forms頁面),附源碼

前言

系列目錄

C#使用Xamarin開發可移植移動應用目錄

什么是Xamarin?

Xamarin始創於2011年，旨在使移動開發變得難以置信地迅捷和簡單。

Xamarin的產品簡化了針對多種平台的應用開發，包括iOS、Android、Windows Phone和Mac App。

Xamarin由許多著名的開源社區開發者創立和參與，而且也是Mono項目的主導者——C#與·NET框架的開源、跨平台實現。

(以上摘自百度百科)

那么什么是Xamarin.Forms?

(意思就是可移植的UI)

本系列介紹了Xamarin.Forms開發的基礎知識，涵蓋了多平台和多屏應用的構建。

Xamarin.Forms是一個允許開發人員快速創建跨平台UI界面的框架。

它為iOS，Android，Windows或Windows Phone上的原生UI呈現給用戶的界面提供了自己的抽象。

這意味着你的應用程序可以共享大部分用戶界面代碼.

Xamarin.Forms允許快速創建應用程序，隨着時間的推移，應用程序可以演變為復雜的應用程序。

由於Xamarin.Forms應用程序是原生應用程序，因此它沒有其他的使用限制。

使用Xamarin.Forms編寫的應用程序能夠利用原生平台的任何API或功能.

例如（但不限於）iOS上的CoreMotion，PassKit和StoreKit; NFC和Android上的Google Play服務;

在Xamarin.Forms中創建UI界面有兩種技術。

第一種技術是用C＃源碼創建UI。

第二種技術是使用可擴展應用程序標記語言（XAML），這是一種用於描述用戶界面的聲明式標記語言。有關XAML的更多信息，請參閱XAML基礎知識。

為什么要學習Xamarin.Forms?

在移動應用發展迅速的今天,我們的APP必須要兼容多個平台,且APP的構建,主要還是構建界面(業務邏輯一般放在服務去處理)

當然,WebApp可以解決這個問題.

但是不排除我們會需要用原生的APP,然而原生的APP開發,主流平台就少不了iOS、Android、Windows10 Phone(..嗯..這個,算主流吧?好歹還活着 - -,)

每個平台我們都需要構建一次我們的界面,很繁瑣,且知識點太多,學習入門會很難.所以Xamarin.Forms應運而生,一次編寫,多平台編譯.

 

今天的學習內容?

今天主要學習Xamarin.Forms中提供的各類頁面,如圖:

效果如下:

 

正文

1.創建跨平台的可移植項目

   首先我們先新建一個項目,具體如圖:

  

第二步我們選擇如下:

注意:這里一定要選擇可移植的類庫(PCL),因為共享項目新建頁面的時候有點問題,所以不推薦

點擊OK,我們就可以得到如下幾個程序集

我們可以看到,第一個是可移植的,這里就是我們要編寫代碼的地方,

下面2個,一個安卓,一個IOS,如果你使用調試安卓,就設置他為啟動項.

如果你想調試IOS,那么你就設置下面的為啟動項.(需要Mac)

因為我們編寫的是跨平台的項目,所以,我們一般不需要編寫下面2個程序集(當然,有些特殊情況是需要的).

項目創建完成,我們就可以編寫我們的代碼了.

 

1.ContentPage(內容頁)

 

進入我們的項目我們會發現已經幫我們創建好了一些必須會使用到的頁面如圖:

每個xaml下面都對應着一個cs文件,是不是和我們的windowForm很相似呢~

App.xaml中的代碼,我們先不管,他類似於windowForm中的Program.cs,是幫我們啟動項目用的.

我們先進入MainPage.xaml中,會發現他繼承了我們本節要講的ContentPage.

所以,其實已經很明顯了,它就是最基礎的頁面,類似於安卓開發的Activity,

我們所開發基礎界面,都需要繼承它.

它只是一個內容容器,並不具體的呈現任何東西,需要配合各類控件才能展現畫面.

我們進入到xaml中,在<ContentPage>標簽下編寫代碼:

    <StackLayout>
        <Button Text="打開CarouselPage" Clicked="Button_Clicked"></Button>
        <Button Text="打開MasterDetailPage" Clicked="Button_Clicked_1"></Button>
        <Button Text="打開TabbedPageTest" Clicked="Button_Clicked_2"></Button>
    </StackLayout>

效果如圖:

 

 

 

2.CarouselPage(滑動頁)

 這個頁面主要是滑動效果,他里面可以放置多個內容頁.

效果如圖:

xaml代碼如下:

<CarouselPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="DemoApp.CarouselPage.CarouselPageTest">
    <ContentPage>
        <StackLayout>
            <Label Text="Red" />
            <BoxView Color="Red" VerticalOptions="FillAndExpand" />
        </StackLayout>
    </ContentPage>
    <ContentPage>
        <StackLayout>
            <Label Text="Green" />
            <BoxView Color="Green" VerticalOptions="FillAndExpand" />
        </StackLayout>
    </ContentPage>
    <ContentPage>
        <StackLayout>
            <Label Text="Blue" />
            <BoxView Color="Blue" VerticalOptions="FillAndExpand" />
        </StackLayout>
    </ContentPage>
</CarouselPage>

解釋一下,上面的xaml代碼,我們放置了3個內容頁,第一個為紅色填充,第二個為綠填充,第三個為藍填充.

我們在來看看后台代碼:

 public partial class CarouselPageTest :Xamarin.Forms.CarouselPage
    {
        public CarouselPageTest()
        {
            
            InitializeComponent();
        }
    }

我們只是繼承了一下Xamarin.Forms.CarouselPage,就很簡單的可以實現一個多頁面的滑動

我們回到MainPage,編寫Button_Clicked事件如下:

        private void Button_Clicked(object sender, EventArgs e)
        {
            Navigation.PushModalAsync(new CarouselPage.CarouselPageTest());
        }

這樣,就能跳轉到我們的滑動頁了

 

3.MasterDetailPage(主次頁面)

手機QQ大家一定都用過,當你點擊頭像的時候,就會彈出部分次頁面,主頁面則會隱藏.

效果如圖:

這是一個很有用的基礎頁面,我們在很多APP中應該都見過.

我們看看來如何使用它.

我們直接新建項.如圖選擇:

點擊添加,會添加4個文件,如圖:

我們一個個來講解.

首先,第一個MasterDetailPageTest.是整個頁面的主入口(注意,這里說的是入口)

只有它繼承了Xamarin.Forms.MasterDetailPage,

我們看看他的xaml,如圖:

會發現他包含了2個屬性,一個是Master(你的主頁面) 一個Detail(你的次頁面)

其他的標簽,我們先不談,后面會講.

然后我們在來看看MasterDetailPageTestMaster與MasterDetailPageTestDetail,會發現,他們都繼承的是ContentPage

所以,其實他們只是單純的內容頁而已~

這樣,我們就完成了一個基礎的MasterDetailPage.

同樣我么回到MainPage,編寫Button_Clicked1事件如下:

 private void Button_Clicked_1(object sender, EventArgs e)
        {
            Navigation.PushModalAsync(new MasterDetailPage.MasterDetailPageTest());
        }

 

 

 

4.TabbedPage(Tab頁面)

 也是我們很常見的,tab標簽頁面效果如下:

 

同樣,我們先來創建這個TabbedPage.如圖:

然后,我們進入它的xaml標簽中,添加內容如下:

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="DemoApp.TabbedPage.TabbedPageTest">
  <!--Pages can be added as references or inline-->
    <ContentPage Title="標簽1">
        <Label Text="標簽1內容"></Label>
    </ContentPage>

    <ContentPage Title="標簽2" >
        <Label Text="標簽2內容"></Label>
    </ContentPage>
    <ContentPage Title="標簽3" >
        <Label Text="標簽3內容"></Label>
    </ContentPage>
</TabbedPage>

同樣,大家可以看到,這里面就是三個ContentPage.

這樣,就會自動生成標簽頁了.

這里有個需要注意的地方.TabbedPage所生成的頁面,IOS和安卓會有所區別,如下:

IOS的標簽會在下面,安卓的根據谷歌給出APP應用程序建議,會在上面...

國內很多App在這點上並沒有遵循谷歌給的意見,都會統一放在下面. (在后續的章節里會講,如何重寫它,讓安卓的也統一在下面).

 

 

 

寫在最后

前面我寫過一個系列是關於Xamarin.Android的,導致很多朋友都以為,Xamarin只能開發安卓  - -,我很方..

地址如下:

C#開發移動應用系列(4.調用系統應用,以及第三方應用(調用與被調用))

說一下為什么先寫Xamarin.Android,因為你要開發移動APP,對於一些移動開發概念的了解是必須的,並不是說..你會了C# .NET..就可以了..

所以先用Xamarin.Android入門...這樣才能更快,更好的理解可移植的Xamarin.Form.

本系列源碼地址:https://github.com/l2999019/DemoApp

不出意外..以后的內容,都會直接更新在這個項目里