是时候开始用C#快速开发移动应用了

从2015年接触Xamarin到至今已经2个年头，我对Xamarin的技能没有长进多少，但它却已经足够成熟到在跨平台移动开发工具中占有一席之地。在扫了一些资料之后，突然发现国外有很多移动端的应用已经是用Xamarin开发，Telerik还有专门的团队来开发Xamarin UI 库，这再次激发起了我的兴趣！吓得我赶紧找了个视频做了个demo， 下面就一起来体验一下用C# 开发一个Material Deisgn风格的Android应用的乐趣吧。

先来看一下我们开发出来的应用是个什么样子？一个酷炫的tab view 和 list

下面是一个左侧菜单

这是一个Collapsing Tool Bar的实现效果

最后还有一个bottom sheet

　　

整个例子中好玩的地方非常多，我们分为UI和C#代码两块来看。因为在整个UI层几乎是和原生Android开发一模一样，所以如果原来做过Android开发又懂C#，那用Xamarin来开发安卓程序几乎是没有什么学习成本 。那么对于没有Android开发经验的C#同学来说，学习Android的UI绘制则是必不可少的部份。

 

UI层的开发

• Layout 与 Widget

• Material Design 和 Android Support Library 

• AppbarLayout + TabLayout

• DrawerLayout + NavigationView 

• CollapsingLayout + NestedView + CardView

• ListView 与 RecyclerView 

C#代码完成的那些事

• 控件与事件绑定

• Activity 之间数据传递

• 多线程

Layout与Widget

Android的页面视图由XML来声明，而所有页面的这些UI组件都由一个布局（Layout）来组织。Android最早一共提供了6种基本布局。

• Linear Layout

• Relative Layout

• Table Layout

• Grid View

• Tab Layout

• List View

Widget则是一些其它的UI组件

• Date Picker

• Time Picker

• Form Elements(Button, TextView, CheckBox, RadioButton, Toggle Button, Rating Bar)

• Spinner

• Auto Complete

• Gallery

• WebView

• Tool Bar

• View Pager

• 等...

 

我们将会在后续的文章来详细再介绍这些Layout 和 Widgets的使用，今天我们的主角不是他们。而是Google基本Material Design 为android 开发的一套Design Support Library。

 

Material Design 和 Design Support Library

关于Material Deisgn已经有一份非常详细的中文文档http://design.1sters.com/，Google在2014年推出的全新的设计语言，这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。Google遵循MD设计风格重构了自己的几个主要APP并发布了安卓的DesignSupportLibrary来让大家更好地开发基于这种设计风格的APP。

我们的Demo中用到的组件包括：

• AppBarLayout + Tab Layout 实现 图1中的Tab视图

• Drawer Layout + Navigation View 实现图3中的左侧菜单

• CoordinatorLayout

• CollapsingToolbar Layout + NestedScrollView (图2中的页面往下滚图片缩小直到消失的效果实现 ）

• Recycler View （ListView的加强版，适合数据量大的List展示）

由于后面的三个CoordinatorLayout、CollapsingToolbar以及RecyclerView相对来说会有些复杂，所有我们后面会留专门的篇幅来讲，感兴趣的同学可以自己先研究起来或者关注后面的博客~

AppBarLayout + Tab Layout 

TabLayout可以说是一个非常好用的视图，你几乎在每一个主流的APP里面都可以看到。我们用Support Library实现起来就非常的方便，下面是这几个组件的结构，ViewPager与AppBarLayout同级。

　　

这里不太想给大家展示太多关于UI层的代码，如果感兴趣的同学可以直接到我的GitHub里面去下载。我们主要看一下C#如何在ViewPager里面放视图同时与TabLayout关联起来。只需要3步：

1. 找到tab和view控件

2. 通过TabAdapter给ViewPager设置视图

3. 将ViewPager绑定到tab

var tabs = FindViewById<TabLayout>(Resource.Id.tabs);
var viewPager = FindViewById<ViewPager>(Resource.Id.viewpager);

SetUpViewPager(viewPager);
tabs.SetupWithViewPager(viewPager);

SetUpViewPager方法如下：

private void SetUpViewPager(ViewPager viewPager)
{    var adapter = new TabAdapter(SupportFragmentManager);
    adapter.AddFragment(new Fragment1(), "Fragment 1");
    adapter.AddFragment(new Fragment2(), "Fragment 2");
    adapter.AddFragment(new Fragment3(),