前言
不同於iOS, Xamarin 在Visual Studio中針對Android, 可以直接設計使用者介面. 在本篇教學文章中, 筆者會針對Android的專案目錄結構以及基本控制項進行介紹, 包含TextView, EditView, Toggle/ Switch以及Seekbar控制項.
Android 專案目錄結構
在Visual Studio建立Android 應用程式專案後, 在方案總管中會看到如下圖的目錄結構:
Assets: 放置在Assets資料夾中的檔案, 將會一起被封裝進Android的封裝檔中(建置動作要設定為"AndroidAsset"). 之後便可以透過如下的陳述式來存取Assets的資源。
1 |
public class ReadAsset : Activity |
5 |
protected override void OnCreate (Bundle bundle) { |
7 |
base .OnCreate (bundle); |
9 |
InputStream input = Assets.Open ( "my_asset.txt" );}} |
Resources:包含Drawable, Layout以及Values資料夾. Drawable用來放置圖片. 依照裝置的解析度不同, 還可以新增drawable-hdpi, drawable-mdpi, drawable-ldpi等資料夾來存放不同解析度的檔案. Layout資料夾則是存放使用者介面檔(副檔名為.axml). 而Value資料夾則是可以存放不同型別的XML對應檔, 例如styles.xml, colors.xml… 針對Resources底下的檔案, 建置動作請設定為”AndroidResource”
若您開啟預設的Main.axml, 會看到如同底下的XML描述
- LinearLayout: 主要的頁面框架, 以垂直或水平的方式排列頁面上的物件, 相當於Silverlight 中的stack panel
- @+id/[物件名稱]: 告訴Android parser, 為物件建立一個resource id
- @string/[名稱]: 在String.xml中建立一個字串資源, 後續可供Resource類別存取.
上述的@string則會對應到資料夾Resources\Values\String.xml
- 名稱Hello對應到UI中Button的Text屬性
- 名稱ApplicationName對應到專案屬性中的應用程式名稱
- 名稱Hello2為自行定義的字串資源.
有了以上的基本概念後, 接下來我們來介紹Android的基本控制項。
TextView
1. 開啟Lab03-BasicControls 專案並開啟Layout資料夾下的TextView.axml
2. 從左邊的工具列將TextView拖放到畫面中, 雙擊TextView並編輯文字
3. 接著拖拉一個TextView, 並在右邊的屬性視窗設定textcolor為#2A3748, textsize為24dip
4. 再拖拉一個TextView並輸入文字, 包含一個超連結. 在屬性中將autolink的屬性值改為web.
結果如下:連結文字會自動變成超連結.
5. 最後拖拉一個TextView並輸入文字, 包含超過5位數的數字, 在屬性中將autolink的屬性值改為phone
結果如下: 數字被更改為超連結
6. 開啟TextViewScreen.cs 並在OnCreate 事件中載入Layout中的TextView
SetContentView(Resource.Layout.TextView);
7. 執行專案並檢視及操作有連結的TextView內容.
EditText
1. 開啟Layout資料夾下的EditText.axml
2. 從工具箱中拖拉1個Text(Small)及1個Plain Text物件到畫面上並編輯Text的文字如下:
將屬性中的autoText設為true
3. 拖拉一組Text及Plain Text物件到畫面上並編輯Text的文字如下:
將屬性中的capitalize設為words.
4. 拖拉一組Text及password物件到畫面上並編輯Text的文字如下:
5. 開啟EditTextScreen.cs 並在OnCreate 事件中載入Layout中的TextView
SetContentView(Resource.Layout.EditText);
6. 執行專案, 在第一個欄位輸入錯的單字, 將會出現拚字錯誤及建議視窗.
7. 其他欄位效果如下:
Switch / Toggle button
Switch跟Toggle其實是很相似的控制項, 都是控制開和關的選項, 但顯示的方式有所不同. 我們在同一個練習中使用這2個控制項. (註: Switch控制項是在Android 4.0(API14)後才有, 因此在工具箱中找不到此控制項, 必須在XML中自行輸入. 此外, 您的模擬器也必須是Android 4.0以上才能執行)
1. 開啟SwitchToggle.axml. 在畫面上依序部署1個TextView, 用來顯示訊息, 1個ToggleButton以及1個Switch控制項. 如下圖所示:
Axml的宣告如下, 請微調部份屬性:
03 |
android:orientation = "vertical" |
05 |
android:layout_width = "fill_parent" |
07 |
android:layout_height = "fill_parent" > |
11 |
android:textAppearance = "?android:attr/textAppearanceMedium" |
13 |
android:layout_width = "fill_parent" |
15 |
android:layout_height = "wrap_content" |
17 |
android:id = "@+id/textView1" /> |
21 |
android:layout_width = "fill_parent" |
23 |
android:layout_height = "wrap_content" |
25 |
android:id = "@+id/toggleButton1" |
31 |
android:layout_marginBottom = "6.7dp" /> |
35 |
android:layout_width = "fill_parent" |
37 |
android:layout_height = "wrap_content" |
43 |
android:id = "@+id/Switch1" |
45 |
android:layout_marginRight = "225.3dp" /> |
2. 開啟SwitchToggleScreen.cs. 並撰寫以下程式碼.
03 |
SetContentView(Resource.Layout.SwitchToggle); |
07 |
ToggleButton toggle = FindViewById<ToggleButton>(Resource.Id.toggleButton1); |
09 |
Switch _switch = FindViewById<Switch>(Resource.Id.Switch1); |
11 |
TextView msg = FindViewById<TextView>(Resource.Id.textView1); |
13 |
//處理Toggle Button的Click事件, 並將狀態顯示在TextView |
15 |
toggle.Click+= (sender, e) => { |
19 |
msg.Text = "目前Toggle Button的狀態是\"開\"" ;} |
23 |
msg.Text = "目前Toggle Button的狀態是\"關\"" ;};}; |
25 |
//處理Switch的Click事件, 並將狀態顯示在TextView |
27 |
_switch.Click += (sender, e) => { |
29 |
if (_switch.Checked) { |
31 |
msg.Text = "目前Switch Button的狀態是\"開\"" ;} |
35 |
msg.Text = "目前Switch Button的狀態是\"關\"" ;};}; |
Toggle Button及Switch 控制項的操作幾乎完全相同, 主要就是處理控制項的click事件並判斷目前的開關狀況.
3. 執行專案並檢視執行結果.
Seek Bar
1. 開啟seekBar.axml並從工具箱拖放TextView及SeekBar控制項進螢幕
介面宣告的xml如下:
03 |
android:orientation = "vertical" |
05 |
android:layout_width = "fill_parent" |
07 |
android:layout_height = "fill_parent" > |
11 |
android:textAppearance = "?android:attr/textAppearanceMedium" |
13 |
android:layout_width = "fill_parent" |
15 |
android:layout_height = "wrap_content" |
17 |
android:id = "@+id/textView1" /> |
21 |
android:layout_width = "fill_parent" |
23 |
android:layout_height = "wrap_content" |
25 |
android:id = "@+id/seekBar1" |
27 |
android:layout_marginTop = "48.0dp" /> |
2. 開啟SeekBarScreen.cs並在OnCreate事件中撰寫以下程式碼:
03 |
SetContentView(Resource.Layout.SeekBar); |
07 |
var msg = FindViewById<TextView>(Resource.Id.textView1); |
09 |
var seekbar = FindViewById<SeekBar>(Resource.Id.seekBar1); |
15 |
//處理SeekBar的ProgressChanged事件, 並將目前的大小(進度)透過TextView呈現 |
17 |
seekbar.ProgressChanged += (sender, e) => { |
19 |
msg.Text = string .Format( "目前Seekbar的大小為{0}" , seekbar.Progress.ToString()); |
SeekBar的操作非常的直覺. 您只需要處理SeekBar控制項的ProgressChanged事件即可.
3. 執行專案並檢視執行結果.
結語
Android 的開發方式, 與先前介紹的iOS略有不同. iOS透過Outlet及Action將View及Controller進行連結. 而Android 則是透過Parser, 為頁面上的控制項建立id屬性, 讓Activity可以透過FindViewById方式建立控制項的物件實體, 接下來的處理方式就與iOS或Windows Form在操作控制項的方式類似. 在下一篇教學文章中, 將說明Android應用程式的多頁面處理.
- Visual Studio 跨平台開發實戰(2) - Xamarin.iOS 基本控制項介紹 (转帖)
前言 在上一篇文章中, 我們介紹了Xamarin 以及簡單的HelloWorld範例, 這次我們針對iOS的專案目錄架構以及基本控制項進行說明. 包含UIButton,, UISlider, UISw ...
- Visual Studio 跨平台開發實戰(5) - Xamarin Android 多頁面應用程式開發 (转帖)
前言 大部份的Android 都具有實體或虛擬的Back鍵. 因此在處理多頁面應用程式時, 與先前所介紹的iOS Navigation controller 比較起來會簡單許多. 1. 開啟Visua ...
- Visual Studio 跨平台開發實戰(3) - Xamarin iOS 多頁面應用程式開發 (转帖)
前言 在前一篇教學中, 我們學會如何使用Visual Studio 搭配Xcode 進行iOS基本控制項的操作. 但都是屬於單一畫面的應用程式. 這次我們要來練習如何透過Navigation Cont ...
- Visual Studio 跨平台開發實戰(1) - Hello Xamarin! (转帖)
前言 應用程式發展的腳步, 從來沒有停過. 從早期的Windows 應用程式, 到網路時代的web 應用程式, 再到近幾年相當盛行的行動裝置應用程式(Mobile Application), 身為C# ...
- Visual Studio跨平台开发Xamarin
台湾微软的一系列Visual Studio跨平台开发Xamarin的资料,上面还有视频.具体参看 http://www.microsoft.com/taiwan/newsletter/library/ ...
- RTX的api開發實例
RTX的api開發實例 最近接觸了RTX的接口開發部份,RTX其实有很多玩法,除了可以用自帶的客戶端發消息之外還可以用PHP調用API的方式來做一些事情,下邊整理了一下分享給大家 值得提醒的是这些接口 ...
- Visual Studio跨平台开发实战(5) - Xamarin Android多页面应用程式开发
原文 Visual Studio跨平台开发实战(5) - Xamarin Android多页面应用程式开发 前言 大部份的Android 都具有实体或虚拟的Back键. 因此在处理多页面应用程式时 ...
- Visual Studio跨平台开发实战(4) - Xamarin Android基本控制项介绍
原文 Visual Studio跨平台开发实战(4) - Xamarin Android基本控制项介绍 前言 不同于iOS,Xamarin 在Visual Studio中针对Android,可以直接设 ...
- Visual Studio跨平台开发实战(3) - Xamarin iOS多页面应用程式开发
原文 Visual Studio跨平台开发实战(3) - Xamarin iOS多页面应用程式开发 前言 在前一篇教学中, 我们学会如何使用Visual Studio 搭配Xcode 进行iOS基本控 ...
随机推荐
- WordPress 3.7.1-web截屏插件整合教程-Xproer.ScreenCapture
插件下载(PHP):wordpress 3.7.1, 说明:由于许多插件可能使用相同钩子,导致冲突,所以提供手支方式整合. 1.上传插件目录. 说明:WordPress 3.7.1 使用的是TinyM ...
- 聚合函数 listagg (超出长度限制时xmlagg)
表&数据 ),buy ),price NUMBER); ); ); ); 原来的结果 SELECT * FROM PEOPLEBUY ORDER BY PEOPLE; 想要的结果 SELECT ...
- 深入解析String#intern
转自:https://tech.meituan.com/in_depth_understanding_string_intern.html 深入解析String#intern john_yang ·2 ...
- java中null转换成其它类型
对null进行强转会不会抛错.测试结果是,如果把null强转给对象,是不会抛异常的,因为本身对象是可以为null的.但是如果是基本类型,比如 int i = (Integer)obj的强转,其实内部会 ...
- underscore概况
看的是1.3.3,这个版本的中文源码解释比较多. 函数的中文注释:http://www.css88.com/doc/underscore1.5.2/#difference 源码的中文注释:http:/ ...
- LINQ to Entity里面不能使用DateTime
LINQ中不能直接使用DateTime,否则会报错:‘The specified type member 'Date' is not supported in LINQ to Entities. On ...
- Solr相似度算法一:Lucene TF-IDF 相关性算分公式
Lucene在进行关键词查询的时候,默认用TF-IDF算法来计算关键词和文档的相关性,用这个数据排序 TF:词频,IDF:逆向文档频率,TF-IDF是一种统计方法,或者被称为向量空间模型,名字听起来很 ...
- 目前主流的四大浏览器内核Trident、Gecko、WebKit以及Presto
“浏览器内核”主要指渲染引擎(Rendering Engine),负责解析网页语法(如HTML.JavaScript)并渲染.展示网页.因此,所谓的浏览器内核通常也就是指浏览器所采用的渲染引擎,渲染引 ...
- cesium编程中级(一)添加示例到Sandcastle
cesium编程中级(一)添加示例到Sandcastle 添加示例到Sandcastle在cesium编程入门(七)3D Tiles,模型旋转中提到过,这里是一份完整的说明 创建例子 开启node服务 ...
- MyBatis入门及CRUD
MyBatis是一个ORM的数据操作框架 myBatis的基本配置 首先创建一个普通 java项目,引入响应jar包,然后引入mybatis的xml配置, <?xml version=" ...