使用Xamarin开发手机聊天程序 -- 基础篇(大量图文讲解 step by step,附源码下载)

如果是.NET开发人员,想学习手机应用开发(Android和iOS),Xamarin 无疑是最好的选择,编写一次,即可发布到Android和iOS平台,真是利器中的利器啊!而且,Xamarin已经被微软收购并被大力推广,.NET开发人员将时间投资在Xamarin上,以应对移动开发的热潮,应该是值得的。

好了,废话不多说,就开始吧。本系列文章将详细介绍如何使用Xamarin开发出一个简单的即时通信IM聊天系统(文末有源码下载,可先睹为快),本文作为第一篇基础篇,将着重介绍Xamarin Android和Xamarin iOS环境的搭建,包括安装、设置、模拟器、部署、运行调试等。本系列后面的文章将详细介绍手机聊天系统结构原理和具体代码实现。

一.搭建环境

1. 安装 Xamarin。

VS2017已经集成了Xamarin,只要在安装的时候,将“使用.NET的移动开发”选项勾选上,即可。

2.设置Xamarin Android。

(1)启动VS 2017之后,打开菜单 工具->选项->Xamarin->Android设置,在设置面板上做如下设置:

(2)使用 Genymotion作为安卓模拟器。

3.设置Xamarin iOS。

(1)在我的MacBook笔记本上安装 Visual Studio for Mac。

(2)在MacBook的系统偏好设置 中找到“共享”选项,打开“共享”界面如下。 开启远程管理和远程登录。

(3)在PC端VS “工具” 选择卡中依次选择 IOS ->Xamarin.Mac代理,点击左下方的“Add Server”按钮,输入对应远程Macbook机器的IP,并进行登录。

(4)登录成功后,界面上会显示如下链接的图标表示远程成功。

(5)连接成功后,在VS中就可以进行调试MAC机器上的模拟器或者真机了。

(6)在PC端VS中,打开菜单 工具->选项->Xamarin->iOS设置,在设置面板上做如下设置:

  

二. 新建Xamarin.Forms项目、编译

  Xamarin.Forms 是Xamarin提供的一个套件,用于跨移动平台的Form应用开发,所以,如果是使用Xamarin开发App,那么,Xamarin.Forms 将是很好的选择。

1.新建一个Cross-Platform跨平台项目,选择Cross Platform App(Xamarin)。

    

2.项目新建成功后,会在解决方案管理器中,生成三个项目。

   

   XamarinDemo 项目是可移植的类库,App的绝大部分逻辑和UI都是在其中完成。

   XamarinDemo.Droid 项目对应了安卓版本,XamarinDemo.iOS 项目对应了iOS版本,它们都引用了 ESFramework.XamarinDemo 项目。

   对于一般简单的应用而言,只需要在XamarinDemo中编写代码就可以了,XamarinDemo.Droid 和 XamarinDemo.iOS中的代码只需要做少量修改。  

3.编译 XamarinDemo.Droid 项目

在解决方案管理器中选中 XamarinDemo.Droid 项目,右键->属性,打开设置面板。

  

  在项目属性面板中,要选择编译所使用的安卓SDK的版本号,我选择的是最新6.0。

4.编译 XamarinDemo.iOS 项目

在解决方案管理器中选中 XamarinDemo.iOS项目,右键->属性,打开设置面板。

在项目属性面板中,选择编译所支持的CPU体系结构,由于现在是使用iOS模拟器,所以选择x86_64。

如果是使用真机调试,则应该选择 ARMv7+ARMv7s+ARM64。

三.部署、调试

  编译成功后,就可以尝试部署到虚拟机,并运行调试了。

1. 安卓版本

(1)启动安卓虚拟机。

 运行上述的Genymotion。  

选择6.0的虚拟机,点击Start按钮运行起来。

(2)部署

  在VS上的工具栏,选择刚才启动的虚拟机实例Genymotion Custom Phone - 6.0.0,点击调试按钮(绿色的三角形),即可开始部署、运行的流程。(注意,要选择Debug模式)

  

(3)调试

  部署运行成功后,模拟器就会显示demo App 的UI界面:

    

  此时,可以在源码中加入断点开始调试程序了。

2.iOS版本

(1)启动虚拟机

(2)在VS上的工具栏,选择iPhone 6 Plus iOS 11.2,点击调试按钮(绿色的三角形),即可开始部署、运行的流程。

(3)调试

  部署运行成功后,模拟器就会显示如下Demo的登录界面:

四.源码下载

  虽然还未正式开始介绍聊天程序的代码实现,但是还是先将demo的源码分享给大家,基于以上介绍的内容,大家已经可以将demo运行起来看效果了。并且,源码中除了Xamarin移动端外,还包含了聊天服务端和PC客户端以及WebSocket客户端,而且,Xamarin移动端和PC客户端以及Web端之间都可以相互聊天哦!

  下面是手机端运行的效果图:

              

(1)源码:服务端+PC客户端 (基于VS 2010)

(2)源码:Xamarin 移动端(包括Android 和 iOS)    (基于VS 2017)

  最后,在使用Xamarin开发本Demo的过程中,踩过了很多很多的“坑”,对这些坑的解决方案我们也会在本系列的文章中分享出来,如此能为后来者节省一些时间。敬请期待!

  

时间: 2024-10-11 06:14:28

使用Xamarin开发手机聊天程序 -- 基础篇(大量图文讲解 step by step,附源码下载)的相关文章

Xamarin开发手机聊天程序

如果是.NET开发人员,想学习手机应用开发(Android和iOS),Xamarin 无疑是最好的选择,编写一次,即可发布到Android和iOS平台,真是利器中的利器啊!而且,Xamarin已经被微软收购并被大力推广,.NET开发人员将时间投资在Xamarin上,以应对移动开发的热潮,应该是值得的. 好了,废话不多说,就开始吧.本系列文章将详细介绍如何使用Xamarin开发出一个简单的即时通信IM聊天系统(文末有源码下载,可先睹为快),本文作为第一篇基础篇,将着重介绍Xamarin Andro

Web 开发中很实用的10个效果【附源码下载】

在工作中,我们可能会用到各种交互效果.而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成知识整理的习惯是很有必要的.这篇文章给大家推荐10个在 Web 开发中很有用的效果,记得收藏:) 超炫的页面切换动画效果 今天我们想与大家分享一组创意的页面切换熊效果集合.我们已经在示例中罗列了一组动画,可以被应用到页面切换过程中,创造出很有趣的导航效果. 立即下载      在线演示 美!视差滚动在图片滑块中的应用 视差滚动(Parallax Scrolling)已经被广泛应用于网

【转载】Web 开发中很实用的10个效果【附源码下载】

超炫的页面切换动画效果 今天我们想与大家分享一组创意的页面切换熊效果集合.我们已经在示例中罗列了一组动画,可以被应用到页面切换过程中,创造出很有趣的导航效果. 立即下载      在线演示 美!视差滚动在图片滑块中的应用 视差滚动(Parallax Scrolling)已经被广泛应用于网页设计中,这种技术能够让原本平面的网页界面产生动感的立体效果.美女很养眼吧 :) 源码下载      在线演示 网页边栏过渡动画 以细微的过渡动画显示一些隐藏的侧边栏,其余的内容也是.通常侧边栏滑入,把其他内容推

Android UI开发: 横向ListView(HorizontalListView)及一个简单相册的完整实现 (附源码下载)

Android UI开发: 横向ListView(HorizontalListView)及一个简单相册的完整实现 (附源码下载) POSTED ON 2014年6月27日 BY 天边的星星 本文内容: 1.横向ListView的所有实现思路; 2.其中一个最通用的思路HorizontalListView,并基于横向ListView开发一个简单的相册: 3.实现的横向ListView在点击.浏览时item背景会变色,并解决了listview里setSelected造成item的选择状态混乱的问题.

支付宝和微信支付程序-附源码下载

1.同时支持支付宝.微信支付的两种支付模式:刷卡支付 扫码支付:只要把相关支付参数配置到程序里面,就可以正常使用支付:2.可以对接到不同的行业系统里面去,比如餐饮酒店系统,医院系统等需要支付的系统3.开发环境为Visual Studio 2010,无数据库 源码下载点这里 原文地址:https://www.cnblogs.com/starksoft/p/11029393.html

C#使用Xamarin开发可移植移动应用(3.进阶篇MVVM双向绑定和命令绑定)附源码

前言 系列目录 C#使用Xamarin开发可移植移动应用目录 源码地址:https://github.com/l2999019/DemoApp 可以Star一下,随意 - - 说点什么.. 嗯..前面3篇就是基础内容..后面就开始逐渐要加深了,进阶篇开始了. 今天的学习内容? 今天我们讲讲Xamarin中的MVVM双向绑定,嗯..需要有一定的MVVM基础.,具体什么是MVVM - -,请百度,我就不多讲了 效果如下: 正文 1.简单的入门Demo 这个时间的功能很简单,就是一个时间的动态显示.

openlayers4 入门开发系列之前端动态渲染克里金插值 kriging 篇(附源码下载)

前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子,这个也是学习 openlayers4 的好素材. openlayers4 入门开发系列的地图服务基于 Geoserver 发布的,关于 Geoserver 方面操作的博客,可以参考以下几篇文章: geoserver 安装部署步骤 geoserver 发布地图服务 WMS geoserver 发布地

leaflet-webpack 入门开发系列一初探篇(附源码下载)

前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 webpack 配置介绍文档详细的 webpack 文档配置介绍,适合新手查看,我也是边看边学 vscode 安装包下载,我这边用 vscode工具编译开发前端项目,个人觉的这款工具还不错 leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 l

openlayers5-webpack 入门开发系列一初探篇(附源码下载)

前言 openlayers5-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 webpack 配置介绍文档详细的 webpack 文档配置介绍,适合新手查看,我也是边看边学 vscode 安装包下载,我这边用 vscode工具编译开发前端项目,个人觉的这款工具还不错 openlayers5 api文档介绍,详细介绍 openlayers5 每个类的函数以及属性等等 op