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

妖狐艹你老母 2022-04-16 00:19 157阅读 0赞

**分享一下我老师大神的人工智能教程！零基础，通俗易懂！[http://blog.csdn.net/jiangjunshow][http_blog.csdn.net_jiangjunshow]**

**也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！**

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

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

![0?wx\_fmt=gif&wxfrom=5&wx\_lazy=1][0_wx_fmt_gif_wxfrom_5_wx_lazy_1]

下面是一个左侧菜单

![0?wx\_fmt=gif&wxfrom=5&wx\_lazy=1][0_wx_fmt_gif_wxfrom_5_wx_lazy_1 1]

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

![0?wx\_fmt=gif][0_wx_fmt_gif]

最后还有一个bottom sheet

![0?wx\_fmt=gif][0_wx_fmt_gif 1]

整个例子中好玩的地方非常多，我们分为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同级。

![0?wx\_fmt=png][0_wx_fmt_png]

这里不太想给大家展示太多关于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(), "Fragment 3");    viewPager.Adapter = adapter;}

是不是很简单？

## DrawerLayout + NavigationView ##

图3中的左侧菜单，主流APP必备，也是只要几行代码就可以了。

![0?wx\_fmt=png][0_wx_fmt_png 1]

在NavigationView的使用上，有两个属性需要注意一下。一个左侧菜单分为两部份：headerLayout和menu。

![0?wx\_fmt=png][0_wx_fmt_png 2]

<android.support.design.widget.NavigationView        android:id="@+id/nav_view"        android:layout_height="match_parent"        android:layout_width="325dp"        android:layout_gravity="start"        android:fitsSystemWindows="true"        app:headerLayout="@layout/nav_header"        app:menu="@menu/drawer_view" />

所以我们需要有另外两个文件nav\_header和drawer\_view来配合一起完成这个菜单视图。

![0?wx\_fmt=png][0_wx_fmt_png 3]

nav\_header其实很简单用了一个<ImageView>来显示图片，以及一个<TextView>来显示上面图里面的UserName。我们可以看一下app:menu="@menu/drawer\_view"的drawer\_view是如何构建成菜单项的。

<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android">  <group android:checkableBehavior="single">    <item        android:id="@+id/nav_home"        android:icon="@drawable/ic_dashboard"        android:title="Home" />    <item        android:id="@+id/nav_messages"        android:icon="@drawable/ic_event"        android:title="Messages" />    <item        android:id="@+id/nav_friends"        android:icon="@drawable/ic_headset"        android:title="Friends" />    <item        android:id="@+id/nav_discussion"        android:icon="@drawable/ic_forum"        android:title="Discussion" />  </group>  <item android:title="Sub items">    <menu>      <item          android:icon="@drawable/ic_dashboard"          android:title="Sub item 1" />      <item          android:icon="@drawable/ic_forum"          android:title="Sub item 2" />    </menu>  </item></menu>

实现一个这样的菜单只需要5分钟就搞定了~

## 控件与事件绑定 ##

在VS操纵UI组件是一件非常简单的事。找到这个控件，接下来一切都变得简单，和之前的winform以及webform几乎是没有两样。

protected override void OnCreate(Bundle bundle)        {          
       base.OnCreate(bundle);       
         // Set our view from the "main" layout resource            SetContentView(Resource.Layout.Main);         
          var btnSelectDate = FindViewById<Button>(Resource.Id.btnDateSelector);            // 事件绑定匿名函数            btnSelectDate.Click += (o, e) =>            {            
              var dialog = Fragments.DatePickerFragment.NewInstance();                dialog.OnDateSelected += Dialog_OnDateSelected; // 事件绑定另一个方法                dialog.Show(FragmentManager, "tag");            };        }      
    
            private void Dialog_OnDateSelected(DateTime dt)        {        
         var txtDate = FindViewById<TextView>(Resource.Id.txtDate);            txtDate.Text = dt.ToLongDateString();        }

在上面的代码中我们找到了 btnSelectDate的代码，然后绑定了它的Click事件来打开一个选择日期的Dialog。这里的事件处理我们用的是一个匿名方法。

而在这个Dialog的OnDateSelected事件我们则绑定了一个声明方法。注：OnDateSelected这个事件是我们自己声明的，而这个声明方法，相信大家不会觉得陌生。

DatePickerFragment.cs中用委托来声明事件，当然你也可以用传递Action的方式来解决。

public delegate void DateSelectedHandle(DateTime dt);        
    public event DateSelectedHandle OnDateSelected;   
       
         public void OnDateSet(DatePicker view, int year, int monthOfYear, int dayOfMonth)        {         
         var selectedDate = new DateTime(year, monthOfYear + 1, dayO  fMonth);          
         if (OnDateSelected != null)            {                OnDateSelected(selectedDate);            }        }

这就是100%的C\#代码。

## Activity 之间数据传递 ##

Android中Layout与Activity大家可以理解为webform中的.aspx页面与.aspx.cs code behind。 只是在Activity中我们还需要手动通过FindViewById来找到这个UI组件。如果Activity代表了一整个View，那我们来看看在不同的View之间如何传递数据。

var context = view.Context; // CheeseDetailActivity是我们要跳转过去的Activityvar intent = new Intent(context, typeof(CheeseDetailActivity)); // 将数据Put到Extra中即可 EXTRA_NAME为这个数据的keyintent.PutExtra(CheeseDetailActivity.EXTRA_NAME, values[position]);context.StartActivity(intent);

在CheeseDetailActivity中，只需要通过Intent.GetStringExtra(); 来获取即可

string cheeseName = Intent.GetStringExtra(EXTRA_NAME);

## 多线程 ##

其实这里的多线程本不需要被提起，我只是为了向大家展示一下，这种线程处理也是100%C\#来写。毕竟，越小的差异对于我们来说学习成本就越小。只是这里要注意一下，如果在非主线程中要操作UI，则需要调用RunOnUiThread（这名字起的也是好。。）

void signUpDialog_mOnSignUpComplete(object sender, OnSignUpEventArgs e)        {            mProgressBar.Visibility = ViewStates.Visible;            Task.Run(() =>            {                Thread.Sleep(3000);                RunOnUiThread(() => { mProgressBar.Visibility = ViewStates.Invisible; });            });        }

## 小结 ##

在这个盛行全干的时代，我想每个人都应该懂移动端开发。Xamarin为我们提供了一种简单、高效的方式来开发强大的、如原生般体验的APP。结合C\#优雅的语法和宇宙最强大的IDE，这个事情也许值得一试。

![0?wx\_fmt=png][0_wx_fmt_png 4]

*  [C\#使用Xamarin开发可移植移动应用(1.入门与Xamarin.Forms页面),附源码][C_Xamarin_1._Xamarin.Forms]
 *  [.NET Standard@Xamarin.Forms][.NET Standard_Xamarin.Forms]
 *  [C\#使用Xamarin开发可移植移动应用(2.Xamarin.Forms布局,本篇很长,注意)附源码][C_Xamarin_2.Xamarin.Forms]
 *  [C\#使用Xamarin开发可移植移动应用(3.Xamarin.Views控件)附源码][C_Xamarin_3.Xamarin.Views]
 *  [C\#使用Xamarin开发可移植移动应用(4.进阶篇MVVM双向绑定和命令绑定)附源码][C_Xamarin_4._MVVM]
 *  [C\#使用Xamarin开发可移植移动应用(5.进阶篇显示弹出窗口与通讯中心)附源码][C_Xamarin_5.]
 *  [C\#使用Xamarin开发可移植移动应用进阶篇(6.使用渲染器针对单个平台自定义控件),附源码][C_Xamarin_6.]
 *  [C\#使用Xamarin开发可移植移动应用进阶篇(7.使用布局渲染器,修改默认布局),附源码][C_Xamarin_7.]
 *  [C\#使用Xamarin开发可移植移动应用进阶篇(8.打包生成安卓APK并精简大小),附源码][C_Xamarin_8._APK]
 *  [C\#使用Xamarin开发可移植移动应用进阶篇(9.混淆代码,防止反编译)][C_Xamarin_9.]

原文地址：http://www.cnblogs.com/jesse2013/p/start-to-develop-with-xamarin.html

--------------------

**.NET社区新闻，深度好文，微信中搜索dotNET跨平台或扫描二维码关注**

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg]

#### 给我老师的人工智能教程打call！[http://blog.csdn.net/jiangjunshow][http_blog.csdn.net_jiangjunshow] ####

![这里写图片描述][SouthEast]

[http_blog.csdn.net_jiangjunshow]: https://blog.csdn.net/jiangjunshow/article/details/77338485
[0_wx_fmt_gif_wxfrom_5_wx_lazy_1]: https://img-blog.csdnimg.cn/img_convert/914791f6a36c741dee329f9eb978c472.gif;wxfrom=5&wx_lazy=1
[0_wx_fmt_gif_wxfrom_5_wx_lazy_1 1]: https://img-blog.csdnimg.cn/img_convert/0b99c678aad9f0158f56022a0bdcfb54.gif;wxfrom=5&wx_lazy=1
[0_wx_fmt_gif]: /images/20220416/359781784ed8440e9f6ce3196c6092ce.png
[0_wx_fmt_gif 1]: /images/20220416/ba59541641374c9c94e7a4e938e519fe.png
[0_wx_fmt_png]: /images/20220416/34d6727588e8408daed7b9727d5d7216.png
[0_wx_fmt_png 1]: /images/20220416/4b7405305ae547109916f5804b8896c2.png
[0_wx_fmt_png 2]: /images/20220416/70424782803d425a9927a96b896a4075.png
[0_wx_fmt_png 3]: /images/20220416/de58ae229d4a4a4d937972ebfdc6d97a.png
[0_wx_fmt_png 4]: /images/20220416/dc2a326a20114803b816ef3ae647348b.png
[C_Xamarin_1._Xamarin.Forms]: http://mp.weixin.qq.com/s?__biz=MzAwNTMxMzg1MA==&mid=2654068919&idx=3&sn=be98accd5e7c05e5465964dff7a1115c&chksm=80dbc4e2b7ac4df4983abefdc5a027fd59d5c7c4e383b8637dcc361cd42c22e088149fc81bd5&scene=21#wechat_redirect
[.NET Standard_Xamarin.Forms]: http://mp.weixin.qq.com/s?__biz=MzAwNTMxMzg1MA==&mid=2654068921&idx=1&sn=4a0bad2bc83ae5b8aa3bacf34fd037d9&chksm=80dbc4ecb7ac4dfa3d5f48bb3a658a37dfa58450d1f1e994a87dd309fdcc3d72129bfb865eb2&scene=21#wechat_redirect
[C_Xamarin_2.Xamarin.Forms]: http://mp.weixin.qq.com/s?__biz=MzAwNTMxMzg1MA==&mid=2654068924&idx=1&sn=7f5508ed30af3272d81e21533ae2d4a8&chksm=80dbc4e9b7ac4dffe32cb5e47f803ccb5c379c07d516a0a921b9fb891b887dc0032a2167e80c&scene=21#wechat_redirect
[C_Xamarin_3.Xamarin.Views]: http://mp.weixin.qq.com/s?__biz=MzAwNTMxMzg1MA==&mid=2654068932&idx=1&sn=0c0c8a84bb88ac3f7ecb3e5c109c2b9d&chksm=80dbc491b7ac4d873188354becc45c5df9badbae861733771fd8db71348d26cc05fa52d4969a&scene=21#wechat_redirect
[C_Xamarin_4._MVVM]: http://mp.weixin.qq.com/s?__biz=MzAwNTMxMzg1MA==&mid=2654068934&idx=2&sn=e42e864c00cd221c22c54704a81cf52c&chksm=80dbc493b7ac4d85af327cb2b6b591e60a838b8ee67d715fa17a276e05ec2e9d2d874c2c0e40&scene=21#wechat_redirect
[C_Xamarin_5.]: http://mp.weixin.qq.com/s?__biz=MzAwNTMxMzg1MA==&mid=2654068956&idx=4&sn=3c83257552103d7d5ae00be93a180369&chksm=80dbc489b7ac4d9f052c42c07b132b479dd33cc631202099a2f4975b77c61a64ad7ac49ea8e7&scene=21#wechat_redirect
[C_Xamarin_6.]: http://mp.weixin.qq.com/s?__biz=MzAwNTMxMzg1MA==&mid=2654069002&idx=4&sn=60d0ac0b8b78cb70b054d65d7a235a91&chksm=80dbc55fb7ac4c490b4cf433f815b8c062d6cf81162386e925b0526ae1e315875ae963aa72e0&scene=21#wechat_redirect
[C_Xamarin_7.]: http://mp.weixin.qq.com/s?__biz=MzAwNTMxMzg1MA==&mid=2654069012&idx=5&sn=92e3376c6b51edcb21ffbb5cd7c437ca&chksm=80dbc541b7ac4c573bd24684cea9979c0bcddb970a6595be7c836ef78f24da9e67ff21f161b4&scene=21#wechat_redirect
[C_Xamarin_8._APK]: http://mp.weixin.qq.com/s?__biz=MzAwNTMxMzg1MA==&mid=2654069025&idx=4&sn=a5e62f9cf1ef4c6e1aa40b134826d45a&chksm=80dbc574b7ac4c624b08dc20a1ebc9217175c0b5900946fd677e6c52acad9c62c3147473ab30&scene=21#wechat_redirect
[C_Xamarin_9.]: http://mp.weixin.qq.com/s?__biz=MzAwNTMxMzg1MA==&mid=2654069033&idx=4&sn=7ff7f5e9dfdaf61cdedb41445fe6c8da&chksm=80dbc57cb7ac4c6a42ff7afad22ff9b5da63b7cbaf2277053e9990ae4d28b5081163d8b323ce&scene=21#wechat_redirect
[640_wx_fmt_jpeg]: /images/20220416/25e3f13b2cb8415184e8d94027f687fd.png
[SouthEast]: /images/20220416/9dc9fda1d3a541efa2e46eb269f9e267.png