是时候开始用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步:
找到tab和view控件
通过TabAdapter给ViewPager设置视图
将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必备,也是只要几行代码就可以了。
在NavigationView的使用上,有两个属性需要注意一下。一个左侧菜单分为两部份:headerLayout和menu。
<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来配合一起完成这个菜单视图。
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,这个事情也许值得一试。
相关文章:
C#使用Xamarin开发可移植移动应用(1.入门与Xamarin.Forms页面),附源码
.NET Standard@Xamarin.Forms
C#使用Xamarin开发可移植移动应用(2.Xamarin.Forms布局,本篇很长,注意)附源码
C#使用Xamarin开发可移植移动应用(3.Xamarin.Views控件)附源码
C#使用Xamarin开发可移植移动应用(4.进阶篇MVVM双向绑定和命令绑定)附源码
C#使用Xamarin开发可移植移动应用(5.进阶篇显示弹出窗口与通讯中心)附源码
C#使用Xamarin开发可移植移动应用进阶篇(6.使用渲染器针对单个平台自定义控件),附源码
C#使用Xamarin开发可移植移动应用进阶篇(7.使用布局渲染器,修改默认布局),附源码
C#使用Xamarin开发可移植移动应用进阶篇(8.打包生成安卓APK并精简大小),附源码
C#使用Xamarin开发可移植移动应用进阶篇(9.混淆代码,防止反编译)
原文地址:http://www.cnblogs.com/jesse2013/p/start-to-develop-with-xamarin.html
.NET社区新闻,深度好文,微信中搜索dotNET跨平台或扫描二维码关注
是时候开始用C#快速开发移动应用了相关推荐
- java 对比两个表的字段的差异_Joolun小程序商城 2.2.2版本上线了——Java微信快速开发平台...
Joolun是一款基于spring-boot的微信快速开发平台,目前拥有公众号基础版和小程序商城版两个版本.Joolun采用目前流行的前后端分离技术所写,是一款高效.易用的java微信开发框架平台,二 ...
- jeecgboot前端开发_一款基于代码生成器的Java快速开发平台【jeecg-boot】
原标题:一款基于代码生成器的Java快速开发平台[jeecg-boot] 今天给大家介绍一个后台脚手架框架:jeecg-boot 来看看官方怎么介绍的. 一款基于代码生成器的Java快速开发平台!全新 ...
- 【转】 Android快速开发系列 10个常用工具类 -- 不错
原文网址:http://blog.csdn.net/lmj623565791/article/details/38965311 转载请标明出处:http://blog.csdn.net/lmj6235 ...
- 快速开发一个PHP扩展
快速开发一个PHP扩展 作者:heiyeluren 时间:2008-12-5 博客:http://blog.csdn.net/heiyeshuwu 本文通过非常快速的方式讲解了如何制作一个PHP 5. ...
- 快速 开发平台 架构_快速介绍清洁架构
快速 开发平台 架构 by Daniel Deutsch 由Daniel Deutsch 快速介绍清洁架构 (A quick introduction to clean architecture) I ...
- 度量快速开发平台端口映射的介绍
度量快速开发平台在客户中部署的时候,可能会想内网与外网用户同时使用.一般情况下,服务端都是部署在内网的,那外网用户要访问,就可能用到端口映射的功能.端口映射基本都是在路由器上进行. 下面就是几个常用的 ...
- 利用UltimateAndroid框架进行快速开发
UltimateAndroid是一套集成了许多现有优秀的Android开源类库并将之组合成一个整体的Android快速开发框架.框架目前主要包含的功能有View Injection,ORM,异步网络请 ...
- Spring Boot + Security + MyBatis + Thymeleaf + Activiti 快速开发平台项目
项目介绍 Spring Boot + Security + MyBatis + Thymeleaf + Activiti 快速开发平台 基于 Layui 的后台管理系统模板,扩展 Layui 原生 U ...
- java项目_JNPF快速开发平台-简单快速高效开发java项目
◆JNPF快速开发平台 JNPF快速开发平台采用前后端分离技术.采用B/S架构开发,形成一站式开发多端(APP+PC)使用. 使用JNPF开发平台可以简单.快速.高效的构建各种类型java项目. ◆J ...
- 深度学习框架PyTorch快速开发与实战
深度学习框架PyTorch快速开发与实战 邢梦来,王硕,孙洋洋 著 ISBN:9787121345647 包装:平装 开本:16开 用纸:胶版纸 正文语种:中文 出版社:电子工业出版社 出版时间:20 ...
最新文章
- 剑指offer_第13题_调整数组顺序使奇数位于偶数前面
- is_uploaded_file函数引发的问题
- JVM内存结构|本地方法栈和堆
- NET问答: 如何让 HttpClient 支持 Http 2.0 协议?
- Azure Virtual Network, 虚拟网络
- Maven详解及实例
- 有关DataVisualization类组件的研究——Silverlight学习笔记[43]
- webpack4.0各个击破(4)—— Javascript splitChunk
- (88)FPGA面试题-使用Verilog HDL编写二进制转格雷码
- 8.4. Socket 方式
- PHP关闭$_ENV后获取服务器参数的办法
- Pycharm乱码解决大全
- spring+mybatis 事务管理,配置都正确,但是回滚不了
- Atitit. 。Jna技术与 解决 java.lang.Error: Invalid memory access
- python无限锁屏_【python】定时锁屏,保护身体
- vue与nodejs
- 快递e栈控制台版实现心得
- python开发工程师是干嘛的-python工程师是做什么的
- 【哈工大SCIR笔记】机器阅读理解简述
- 英语学习——学英语的心态(2)
热门文章
- 游戏上线... 记录下...
- 2011年Android手机用户购买行为研究报告
- session、cookie、隐藏域、url参数传递四种会话及跟踪方式
- 网络工程师必须懂的十五大专业术语!
- .NET 开源免费图表组件库,Winform,WPF 通用
- Win11代言人官宣
- 试用GitHub Copilot一周后,我给你的建议是:不要使用它
- 如何查看 .NET Core 3.1 源代码
- 为啥 .NET 自带的 JsonSerializer 无法序列化 Field ?
- 如何运用并行编程Parallel提升任务执行效率