Xamarin.Forms学习历程(二)

841 查看

哈哈哈~~我最近在写的Xamarin.Forms工程终于到了收尾阶段了,主体功能都实现了,修复一些小Bug以及添加些小功能就算完成了,太高兴了,心里满满的成就感,特别是安卓端界面完整呈现的时候。今天讲点知识点,搭建一个小程序。

认识Xamarin.forms的工程结构

我们先撇开安卓和iOS,先来了解公共部分。我们继续看我们上期写的HelloWorld程序


Snip20160811_28.png

先看这一块,项目刚开始时就存在这些文件,我们来逐一看一下这些文件都是干嘛用的,以及里面放些什么文件。
估计有人会问我,为什么我的是中文版,其实我可以告诉你我也不知道,具体地说我的是中英文混合版,


Snip20160811_29.png

不闲扯了,还是回到刚才所说的,

  • 引用:这个我目前还没用到过,具体内容我不清楚,等我弄明白再回来补上吧(todo)
  • 包:这个是导入一些库,就像iOS工程里有时候需要导入一些framework一样。
  • Properties:这个我也不清楚(todo)
  • App.xaml:这个文件比较重要,是程序的入口,和iOS 里 AppDelegate这个文件的功能有些类似,所以定义初始界面就在这里面。
  • HelloWorldPage:这个文件和Xcode生成Single APP是生成的启动界面一样,默认第一个界面,删除不影响的。这里我们点开前面的小三角会发现这里面其实有两个文件:HelloWordPage.xamlHelloWordPage.xaml.cs,这里我说明一下,HelloWordPage.xaml相当于view,不涉及业务逻辑,只处理一些控件的显示和所要展示内容数据的绑定,相当于iOS里面的View。而HelloWordPage.xaml.cs里面正常情况下是写业务逻辑的,它和iOS里的ViewController很像,所以在这里面其实也是可以写界面的。不过代码规范正常情况下是不允许这么做的,但特殊情况可以理解。这两个文件是相关联的,绑定在一起。前段时间我把几个文件导入到其他工程,结果他们的关系就不存在了,我目前还不知道怎么让独立的两个文件绑定在一起。
  • packages:这个是包文件版本文件,工程内所有导入的包信息都可以在这里面看到,所以上传至git时不需要把包都上传,只需要把这个文件导入就可以了。
    好了,说了这么多我们来练一下手,按照自己的理解写个小小的应用程序。

优化版HelloWorld

创建文件


Snip20160811_30.png

Snip20160811_31.png

看到这个界面可能你会觉得无从下手,不要慌,我们先和他们握个手,认识一下

  • Forms ContentPage: 这里有个诀窍,看到Page,咱们就可以把它看成ViewController,这样就好理解了,Forms ContentPage就是创建一个Forms ContentPage.cs文件,也就是用纯C#代码写界面。
  • Forms ContentPage Xaml:一般情况用这个,他会创建一个ContentPage.xaml文件和ContentPage.xaml.cs文件,
  • Forms ContentView:这个是生成用纯C#代码在定义View的文件
  • Forms ContentView Xaml:这个和之前的类似,不用说你也应该能猜到。

Snip20160811_32.png

这里我们新建一个MyHelloWorld文件,让我们在里面写点东西


Snip20160811_33.png


我把里面的代码贴出来吧

<?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="HelloWorld.MyHelloWorld">    
<ContentPage.Content>        
    <StackLayout  VerticalOptions = "FillAndExpand"
                    HorizontalOptions = "FillAndExpand">            
              <Label Text = "Hello My World!"                    
                     TextColor ="Red"                
                      FontSize = "25"
                    VerticalOptions = "CenterAndExpand"                    
                    HorizontalOptions = "CenterAndExpand"/>        
  </StackLayout>    
</ContentPage.Content>
</ContentPage>

然后我们在APP文件配置一下


Snip20160811_34.png


这样运行就可以了


Snip20160811_35.png

这里我只是做个演示,代码我就不详细讲解了,后期我会逐渐深入的整理。

结语

进度有点慢,一个星期才一篇,这是我深入理解后的结果。不过还是希望大神们能给点指点,Xamarin的路还很遥远。文章中一些见解是我个人理解,如有错误之处,还请给予指正,谢谢。