Xamarin - คู่มือฉบับย่อ
Xamarin สร้างขึ้นบน. NET Framework ช่วยให้สามารถสร้างแอพที่ทำงานบนหลายแพลตฟอร์มได้อย่างง่ายดาย ในบทช่วยสอนนี้เราจะอธิบายว่าคุณสามารถใช้ Xamarin เพื่อส่งมอบแอป iOS, Android และ Windows ได้อย่างไร
เริ่มบทช่วยสอนด้วยการอภิปรายเกี่ยวกับวิธีการติดตั้ง Xamarin ในระบบ Windows และ Mac
ความต้องการของระบบ
Windows
คอมพิวเตอร์ที่มี RAM อย่างน้อย 2GB และใช้ Windows 7 ขึ้นไป(แนะนำให้ใช้ Windows 8-10)
Visual Studio 2012 Professional หรือสูงกว่า
Xamarin สำหรับ Visual Studio
Mac
- คอมพิวเตอร์ Mac ที่ใช้ OS X Yosemite (10.10) หรือสูงกว่า
- Xamarin iOS SDK
- Xcode ของ Apple (7+) IDE และ iOS SDK
- Xamarin Studio
การติดตั้งบน Windows
ดาวน์โหลด Xamarin Installer จาก https://www.xamarin.com/download ก่อนเรียกใช้โปรแกรมติดตั้ง Xamarin ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง Android SDK และ Java SDK บนคอมพิวเตอร์ของคุณแล้ว
เรียกใช้โปรแกรมติดตั้งที่ดาวน์โหลดมาเพื่อเริ่มกระบวนการติดตั้ง -
หน้าจอข้อตกลงสิทธิ์การใช้งาน Xamarin จะปรากฏขึ้น คลิกNext ปุ่มเพื่อยอมรับข้อตกลง
โปรแกรมติดตั้งจะค้นหาส่วนประกอบที่ขาดหายไปและแจ้งให้คุณดาวน์โหลดและติดตั้ง
หลังจากการติดตั้ง Xamarin เสร็จสมบูรณ์ให้คลิกที่ไฟล์ Close ปุ่มเพื่อออกและเตรียมพร้อมที่จะเริ่มใช้ Xamarin
การติดตั้งบน Mac
ดาวน์โหลด Xamarin Studio Installer บนระบบ Mac ของคุณ
เรียกใช้โปรแกรมติดตั้ง Xamarin ที่คุณดาวน์โหลดและทำตามขั้นตอนที่ระบุในวิซาร์ดการติดตั้ง
หลังจากการติดตั้งเสร็จสมบูรณ์คุณสามารถเริ่มใช้ Xamarin บนระบบของคุณได้
ในบทนี้เราจะดูวิธีสร้างแอปพลิเคชัน Android ขนาดเล็กโดยใช้ Xamarin
สวัสดี Xamarin! ใบสมัคร
ก่อนอื่นให้เริ่มอินสแตนซ์ใหม่ของ Visual Studio แล้วไปที่ File → New → Project.
ในกล่องโต้ตอบเมนูที่ปรากฏขึ้นให้ไปที่ Templates → Visual C# → Android → Blank App (Android).
ตั้งชื่อที่เหมาะสมสำหรับใบสมัครของคุณ ในกรณีของเราเราตั้งชื่อมัน“helloWorld”และบันทึกไว้ในตำแหน่งเริ่มต้นที่ให้ไว้ จากนั้นคลิกปุ่ม OK สำหรับใหม่“helloXamarin” โครงการที่จะโหลด
บน solution, เปิด Resources → layout → Main.axmlไฟล์. เปลี่ยนจากมุมมองการออกแบบและไปที่ไฟล์Source ไฟล์และพิมพ์โค้ดบรรทัดต่อไปนี้เพื่อสร้างแอปของคุณ
<?xml version = "1.0" encoding = "utf-8"?>
<LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android"
android:orientation = "vertical"
android:background = "#d3d3d3"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent">
<TextView
android:text = "@string/HelloXamarin"
android:textAppearance = "?android:attr/textAppearanceLarge"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:id = "@+id/textView2"
android:textColor = "@android:color/black" />
</LinearLayout>
ในโค้ดด้านบนเราได้สร้าง Android ใหม่ textview. จากนั้นเปิดค่าโฟลเดอร์และดับเบิลคลิกStrings.xmlเพื่อเปิด ที่นี่เราจะจัดเก็บข้อมูลและค่าเกี่ยวกับไฟล์button สร้างขึ้นด้านบน
<?xml version = "1.0" encoding = "utf-8"?>
<resources>
<string name = "HelloXamarin">Hello World, I am Xamarin!</string>
<string name = "ApplicationName">helloWorld</string>
</resources>
เปิด MainActivity.cs ไฟล์และแทนที่โค้ดที่มีอยู่ด้วยโค้ดบรรทัดต่อไปนี้
using System;
using Android.App;
using Android.Content;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Android.OS;
namespace HelloXamarin {
public class MainActivity : Activity {
protected override void OnCreate(Bundle bundle) {
base.OnCreate(bundle);
SetContentView(Resource.Layout.Main);
}
}
}
บันทึกแอปพลิเคชัน สร้างแล้วเรียกใช้เพื่อแสดงแอพที่สร้างขึ้นใน Android Emulator
หากคุณไม่มี Android Emulator ให้ทำตามขั้นตอนที่ระบุในหัวข้อถัดไปเพื่อสร้าง
การตั้งค่า Android Emulator
บนเมนู Visual Studio ของคุณไปที่ Tools → Android → Android Emulator Manager. ในหน้าต่างป๊อปอัปที่ปรากฏขึ้นให้คลิกไฟล์Createปุ่ม. จะแสดงหน้าจอต่อไปนี้
ในหน้าจอด้านบนให้ใส่ไฟล์ AVD nameคุณต้องการ. เลือกdeviceที่เหมาะสมกับจอแสดงผลของคุณเช่นจอแสดงผล Nexus 4” เลือกไฟล์target platform. ขอแนะนำให้ทดสอบบนแพลตฟอร์มเป้าหมายขั้นต่ำเสมอเช่น API 10 Android 2.3 (Gingerbread) เพื่อให้แน่ใจว่าแอปของคุณใช้งานได้กับทุกแพลตฟอร์ม Android
กรอกข้อมูลในฟิลด์ที่เหลือแล้วคลิกปุ่มตกลง โปรแกรมจำลองของคุณพร้อมแล้ว คุณสามารถเลือกได้จากรายการอุปกรณ์เสมือน Android ที่มีอยู่แล้วคลิกStart เพื่อเปิดใช้งาน
การปรับเปลี่ยนแอป HelloXamarin
ในส่วนนี้เราจะแก้ไขโครงการของเราและสร้างปุ่มที่จะแสดงข้อความเมื่อคลิก เปิดmain.axml และเปลี่ยนเป็น source view. หลังจากของเราtextview ที่เราสร้างขึ้นเราจะเพิ่มปุ่มดังที่แสดงด้านล่าง
<Button
android:id = "@+id/MyButton"
android:layout_width = "fill_parent"
android:layout_height = "wrap_content"
android:text = "@string/ButtonClick" />
หลังจากเพิ่มปุ่มแล้วรหัสเต็มของเราจะมีลักษณะดังนี้ -
<?xml version = "1.0" encoding = "utf-8"?>
<LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android"
android:orientation = "vertical"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent">
<TextView
android:text = "@string/HelloXamarin"
android:textAppearance = "?android:attr/textAppearanceLarge"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:id = "@+id/textView2" />
<Button
android:id = "@+id/MyButton"
android:layout_width = "fill_parent"
android:layout_height = "wrap_content"
android:text = "@string/ButtonClick" />
</LinearLayout>
ต่อไปเราจะลงทะเบียนค่าปุ่มของเราในไฟล์ strings.xml ไฟล์.
<string name = "ButtonClick">Click Me!</string>
หลังจากเพิ่มปุ่มของเราในไฟล์ strings.xml เราจะเปิดไฟล์ MainActivity.cs เพื่อเพิ่มการดำเนินการสำหรับปุ่มของเราเมื่อมีการคลิกดังที่แสดงในรหัสต่อไปนี้
using System;
using Android.App;
using Android.Content;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Android.OS;
namespace HelloXamarin {
[Activity(Label = "HelloXamarin", MainLauncher = true, Icon = "@drawable/icon")]
public class MainActivity : Activity {
protected override void OnCreate(Bundle bundle) {
base.OnCreate(bundle);
SetContentView(Resource.Layout.Main);
Button button = FindViewById<Button>(Resource.Id.MyButton);
button.Click += delegate { button.Text = "Hello world I am your first App"; };
}
}
}
จากนั้นสร้างและเรียกใช้แอปพลิเคชันของคุณ
หลังจากคลิกที่ปุ่มคุณจะได้ผลลัพธ์ดังต่อไปนี้ -
แอพ Android ทั้งหมดมีไฟล์ manifest file เรียกกันทั่วไปว่า AndroidManifest.xml. ไฟล์รายการประกอบด้วยทุกอย่างเกี่ยวกับแพลตฟอร์ม Android ที่แอปต้องการเพื่อให้ทำงานได้สำเร็จ
ที่นี่เราได้ระบุฟังก์ชันที่สำคัญบางอย่างของไฟล์รายการ -
มันประกาศ minimum API level ต้องการโดยแอปพลิเคชัน
มันประกาศการอนุญาตที่จำเป็นโดยแอปพลิเคชันเช่นกล้องถ่ายรูปตำแหน่ง ฯลฯ
ให้สิทธิ์ในคุณสมบัติฮาร์ดแวร์และซอฟต์แวร์ที่แอปพลิเคชันใช้หรือต้องการ
มันแสดงรายการไลบรารีที่ต้องเชื่อมโยงแอปพลิเคชัน
ภาพหน้าจอต่อไปนี้แสดงไฟล์ Manifest
Application name - หมายถึงชื่อแอปของคุณ
Package name - เป็นชื่อเฉพาะที่ใช้ระบุแอปของคุณ
Application Icon - เป็นไอคอนที่แสดงบนหน้าจอหลักของ Android สำหรับแอปของคุณ
Version Number - เป็นหมายเลขเดียวที่ใช้เพื่อแสดงเวอร์ชันหนึ่งของแอปของคุณเป็นเวอร์ชันล่าสุดมากกว่าเวอร์ชันอื่น
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
android:versionCode="1" >
Version Name- เป็นสตริงเวอร์ชันที่ใช้งานง่ายสำหรับแอปของคุณซึ่งผู้ใช้จะเห็นในการตั้งค่าแอปของคุณและบน Google PlayStore โค้ดต่อไปนี้แสดงตัวอย่างชื่อเวอร์ชัน
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
android:versionName="1.0.0">
Minimum Android Version - เป็นแพลตฟอร์ม Android เวอร์ชันต่ำสุดที่แอปพลิเคชันของคุณรองรับ
<uses-sdk android:minSdkVersion="16" />
ในตัวอย่างข้างต้นเวอร์ชัน Android ขั้นต่ำของเราคือ API ระดับ 16 ซึ่งโดยทั่วไปเรียกว่า JELLY BEAN.
Target Android Version - เป็นเวอร์ชัน Android ที่แอปของคุณคอมไพล์
เมื่อสร้างโปรเจ็กต์ Android ใหม่จะมีไฟล์บางไฟล์ที่ถูกเพิ่มลงในโปรเจ็กต์โดยค่าเริ่มต้น เราเรียกไฟล์และโฟลเดอร์โปรเจ็กต์เริ่มต้นเหล่านี้ว่าAndroid Resources. ดูภาพหน้าจอต่อไปนี้
ทรัพยากรเริ่มต้นของ Android มีดังต่อไปนี้ -
AndroidManifest.xml file - มีข้อมูลเกี่ยวกับแอปพลิเคชัน Android ของคุณเช่นชื่อแอปพลิเคชันสิทธิ์ ฯลฯ
Resources folder - ทรัพยากรอาจเป็นรูปภาพเลย์เอาต์สตริงและอื่น ๆ ที่สามารถโหลดผ่านระบบทรัพยากรของ Android
Resources/drawable folder - จัดเก็บภาพทั้งหมดที่คุณจะใช้ในแอปพลิเคชันของคุณ
Resources/layout folder - มีไฟล์ XML ของ Android (.axml) ทั้งหมดที่ Android ใช้สร้างอินเทอร์เฟซผู้ใช้
The Resources/values folder- มีไฟล์ XML เพื่อประกาศคู่คีย์ - ค่าสำหรับสตริง (และประเภทอื่น ๆ ) ตลอดทั้งแอปพลิเคชัน นี่คือวิธีการตั้งค่าการแปลหลายภาษาตามปกติบน Android
Resources.designer.cs - ไฟล์นี้สร้างขึ้นโดยอัตโนมัติเมื่อมีการสร้าง Android ที่ฉายและมีตัวระบุเฉพาะที่อ้างอิงทรัพยากร Android
MainActivity.cs file - นี่เป็นกิจกรรมแรกของแอปพลิเคชัน Android ของคุณและจากจุดเริ่มต้นของการกระทำของแอปพลิเคชันหลัก
ไฟล์ทรัพยากรสามารถเข้าถึงได้โดยทางโปรแกรมผ่านไฟล์ unique ID ซึ่งเก็บไว้ในไฟล์ resources.designer.csไฟล์. ID อยู่ภายใต้คลาสที่เรียกว่าResource. ทรัพยากรใด ๆ ที่เพิ่มลงในโครงการจะถูกสร้างขึ้นโดยอัตโนมัติภายในไฟล์resource class.
รหัสต่อไปนี้แสดงวิธีสร้างโครงการ gridview ที่มีรูปภาพเจ็ดภาพ -
namespace HelloGridView {
[System.CodeDom.Compiler.GeneratedCodeAttribute
("Xamarin.Android.Build.Tas ks",
"1.0.0.0")]
public partial class Resource {
static Resource() {
global::Android.Runtime.ResourceIdManager.UpdateIdValues();
}
public static void UpdateIdValues() {}
public partial class Attribute {
static Attribute() {
global::Android.Runtime.ResourceIdManager.UpdateIdValues();
}
private Attribute() {}
}
public partial class Drawable {
// aapt resource value: 0x7f020000
public const int Icon = 2130837504;
// aapt resource value: 0x7f020001
public const int img1 = 2130837505;
// aapt resource value: 0x7f020002
public const int img2 = 2130837506;
// aapt resource value: 0x7f020003
public const int img3 = 2130837507;
// aapt resource value: 0x7f020004
public const int img4 = 2130837508;
// aapt resource value: 0x7f020005
public const int img5 = 2130837509;
// aapt resource value: 0x7f020006
public const int img6 = 2130837510;
// aapt resource value: 0x7f020007
public const int img7 = 2130837511;
static Drawable() {
global::Android.Runtime.ResourceIdManager.UpdateIdValues();
}
private Drawable() {}
}
public partial class Id {
// aapt resource value: 0x7f050000
public const int gridview = 2131034112;
static Id() {
global::Android.Runtime.ResourceIdManager.UpdateIdValues();
}
private Id() {}
}
public partial class Layout {
// aapt resource value: 0x7f030000
public const int Main = 2130903040;
static Layout() {
global::Android.Runtime.ResourceIdManager.UpdateIdValues();
}
private Layout() {}
}
public partial class String {
// aapt resource value: 0x7f040001
public const int ApplicationName = 2130968577;
// aapt resource value: 0x7f040000
public const int Hello = 2130968576;
static String() {
global::Android.Runtime.ResourceIdManager.UpdateIdValues();
}
private String() {}
}
}
}
จากโค้ดด้านบนภาพทั้งเจ็ดถูกอ้างอิงในคลาสที่เรียกว่า drawable. รูปภาพเหล่านี้ถูกเพิ่มโดยทางโปรแกรม หากผู้ใช้เพิ่มรูปภาพอื่นในโปรเจ็กต์ภาพนั้นจะถูกเพิ่มลงในไฟล์drawableชั้นเรียน. gridviewที่อยู่ในโปรเจ็กต์จะถูกเพิ่มและจัดเก็บไว้ในคลาสด้วยตัวมันเอง แต่ละรายการที่มีอยู่ในไฟล์resources folder จะถูกสร้างและจัดเก็บโดยอัตโนมัติในชั้นเรียน
เมื่อผู้ใช้นำทางผ่านแอพ Android เหตุการณ์ต่างๆจะเกิดขึ้น ตัวอย่างเช่นเมื่อผู้ใช้เปิดแอพเช่นแอพ Facebook แอพจะเริ่มและปรากฏให้ผู้ใช้เห็นในเบื้องหน้าonCreate() → onStart() → onResume().
หากกิจกรรมอื่นเริ่มต้นขึ้นเช่นมีโทรศัพท์เข้ามาแอพ Facebook จะไปที่พื้นหลังและสายจะมาที่เบื้องหน้า ตอนนี้เรามีสองกระบวนการที่กำลังทำงานอยู่
onPause() --- > onStop()
เมื่อการโทรสิ้นสุดลงแอพ Facebook จะกลับสู่เบื้องหน้า เรียกว่าสามวิธี
onRestart() --- > onStart() --- > onResume()
มี 7 กระบวนการตลอดอายุการใช้งานในกิจกรรม Android ได้แก่ -
onCreate - เรียกเมื่อสร้างกิจกรรมครั้งแรก
onStart - เรียกเมื่อกิจกรรมเริ่มต้นและผู้ใช้สามารถมองเห็นได้
onResume- เรียกเมื่อกิจกรรมเริ่มโต้ตอบกับผู้ใช้ การป้อนข้อมูลของผู้ใช้จะเกิดขึ้นในขั้นตอนนี้
onPause - เรียกเมื่อกิจกรรมทำงานในพื้นหลัง แต่ยังไม่ถูกฆ่า
onStop - เรียกเมื่อผู้ใช้มองไม่เห็นกิจกรรมอีกต่อไป
onRestart- เรียกว่าหลังจากหยุดกิจกรรมแล้วก่อนจะเริ่มอีกครั้ง โดยปกติจะเรียกเมื่อผู้ใช้กลับไปที่กิจกรรมก่อนหน้านี้ที่ถูกหยุด
onDestroy - นี่คือการโทรครั้งสุดท้ายก่อนที่กิจกรรมจะถูกลบออกจากหน่วยความจำ
ภาพประกอบต่อไปนี้แสดงวงจรชีวิตของกิจกรรม Android -
โดยค่าเริ่มต้นใน Android ไม่มีแอปพลิเคชันใดที่มีสิทธิ์ดำเนินการใด ๆ ที่จะมีผลกระทบต่อผู้ใช้หรือระบบปฏิบัติการ เพื่อให้แอปทำงานได้แอปจะต้องประกาศสิทธิ์ แอปไม่สามารถทำงานได้จนกว่าจะได้รับอนุญาตจากระบบ Android กลไกการอนุญาตนี้จะหยุดไม่ให้แอปพลิเคชันทำตามที่ต้องการโดยไม่ได้รับความยินยอมจากผู้ใช้
สิทธิ์จะถูกบันทึกไว้ใน AndroidManifest.xmlไฟล์. ในการเพิ่มสิทธิ์ให้ดับเบิลคลิกที่คุณสมบัติจากนั้นไปที่ Android ManRequired permissionsจะปรากฏขึ้น ตรวจสอบสิทธิ์ที่เหมาะสมที่คุณต้องการเพิ่ม
Camera - ให้สิทธิ์ในการเข้าถึงกล้องของอุปกรณ์
<uses-permission android:name="android.permission.CAMERA" />
Internet - ให้การเข้าถึงทรัพยากรเครือข่าย
<uses-permission android:name="android.permission.INTERNET" />
ReadContacts - ให้การเข้าถึงเพื่ออ่านรายชื่อบนอุปกรณ์ของคุณ
<uses-permission android:name="android.permission.READ_CONTACTS" />
ReadExternalStorage - ให้การเข้าถึงเพื่ออ่านและจัดเก็บข้อมูลในที่จัดเก็บข้อมูลภายนอก
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
Calendars- อนุญาตให้แอปเข้าถึงปฏิทินบนอุปกรณ์และกิจกรรมของผู้ใช้ การอนุญาตนี้อาจเป็นอันตรายเนื่องจากทำให้แอปสามารถส่งอีเมลถึงแขกโดยที่เจ้าของไม่รับรู้ ไวยากรณ์สำหรับการเพิ่มสิทธิ์นี้มีดังที่แสดงด้านล่าง -
<uses-permission android:name="android.permission-group.CALENADAR" />
SMS- แอพที่ได้รับอนุญาตนี้มีความสามารถในการใช้บริการส่งข้อความของอุปกรณ์ รวมถึงการอ่านเขียนและแก้ไขข้อความ SMS และ MMS ไวยากรณ์ดังที่แสดงด้านล่าง
<uses-permission android:name="android.permission-group.SMS" />
Location - แอปที่ได้รับอนุญาตนี้สามารถเข้าถึงตำแหน่งของอุปกรณ์โดยใช้เครือข่าย GPS
<uses-permission android:name="android.permission-group.LOCATION" />
Bluetooth - แอปที่ได้รับอนุญาตนี้สามารถแลกเปลี่ยนไฟล์ข้อมูลกับอุปกรณ์ที่ใช้ Bluetooth อื่น ๆ แบบไร้สาย
<uses-permission android:name="android.permission.BLUETOOTH" />
TextView
TextView เป็นส่วนประกอบที่สำคัญมากของวิดเจ็ต Android ส่วนใหญ่จะใช้สำหรับการแสดงข้อความบนหน้าจอ Android
ในการสร้างมุมมองข้อความเพียงแค่เปิด main.axml และเพิ่มรหัสต่อไปนี้ระหว่างแท็กโครงร่างเชิงเส้น
<TextView
android:text = "Hello I am a text View"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:id = "@+id/textview1" />
ปุ่ม
ปุ่มคือตัวควบคุมที่ใช้เพื่อทริกเกอร์เหตุการณ์เมื่อมีการคลิก ภายใต้Main.axml พิมพ์รหัสต่อไปนี้เพื่อสร้างปุ่ม
<Button
android:id = "@+id/MyButton"
android:layout_width = "fill_parent"
android:layout_height = "wrap_content"
android:text = "@string/Hello" />
เปิด Resources\Values\Strings.xml และพิมพ์โค้ดบรรทัดต่อไปนี้ระหว่างแท็ก <resources>
<string name="Hello">Click Me!</string>
โค้ดด้านบนแสดงมูลค่าของปุ่มที่เราสร้างขึ้น ต่อไปเราจะเปิดMainActivity.csและสร้างการดำเนินการที่จะดำเนินการเมื่อคลิกปุ่ม พิมพ์รหัสต่อไปนี้ภายใต้base.OnCreate (มัด) วิธีการ
Button button = FindViewById<Button>(Resource.Id.MyButton);
button.Click += delegate { button.Text = "You clicked me"; };
โค้ดด้านบนแสดง“ คุณคลิกฉัน” เมื่อผู้ใช้คลิกที่ปุ่ม
FindViewById<< -->วิธีนี้จะค้นหา ID ของข้อมูลพร็อพเพอร์ตี้ที่ระบุ มันค้นหา id ในไฟล์เลย์เอาต์. maxml
ช่องทำเครื่องหมาย
ช่องทำเครื่องหมายถูกใช้เมื่อต้องการเลือกมากกว่าหนึ่งตัวเลือกจากกลุ่มตัวเลือก ในตัวอย่างนี้เราจะสร้างช่องทำเครื่องหมายที่เลือกไว้จะแสดงข้อความว่าได้รับการตรวจสอบแล้วมิฉะนั้นจะแสดงว่าไม่เลือก
เริ่มต้นด้วยการเปิด Main.axml ไฟล์ในโครงการของเราและพิมพ์โค้ดบรรทัดต่อไปนี้เพื่อสร้างช่องทำเครื่องหมาย
<?xml version = "1.0" encoding = "utf-8"?>
<LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android"
android:orientation = "vertical"
android:background = "#d3d3d3"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent">
<CheckBox
android:text = "CheckBox"
android:padding = "25dp"
android:layout_width = "300dp"
android:layout_height = "wrap_content"
android:id = "@+id/checkBox1"
android:textColor = "@android:color/black"
android:background = "@android:color/holo_blue_dark" />
</LinearLayout>
จากนั้นไปที่ MainActivity.cs เพื่อเพิ่มรหัสการทำงาน
CheckBox checkMe = FindViewById<CheckBox>(Resource.Id.checkBox1);
checkMe.CheckedChange += (object sender, CompoundButton.CheckedChangeEventArgs e) => {
CheckBox check = (CheckBox)sender;
if(check.Checked) {
check.Text = "Checkbox has been checked";
} else {
check.Text = "Checkbox has not been checked";
}
};
จากรหัสด้านบนเราจะพบช่องทำเครื่องหมายโดยใช้ findViewById. ต่อไปเราจะสร้างวิธีการจัดการสำหรับช่องทำเครื่องหมายของเราและในตัวจัดการของเราเราสร้างคำสั่ง if else ซึ่งจะแสดงข้อความขึ้นอยู่กับผลลัพธ์ที่เลือก
CompoundButton.CheckedChangeEventArgs →วิธีนี้ทำให้เหตุการณ์เริ่มทำงานเมื่อสถานะช่องทำเครื่องหมายเปลี่ยนไป
แถบความคืบหน้า
แถบความคืบหน้าคือส่วนควบคุมที่ใช้เพื่อแสดงความคืบหน้าของการดำเนินการ หากต้องการเพิ่มแถบความคืบหน้าให้เพิ่มบรรทัดรหัสต่อไปนี้ในMain.axml ไฟล์.
<ProgressBar
style="?android:attr/progressBarStyleHorizontal"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:id = "@+id/progressBar1" />
จากนั้นไปที่ MainActivity.cs และตั้งค่าของแถบความคืบหน้า
ProgressBar pb = FindViewById<ProgressBar>(Resource.Id.progressBar1);
pb.Progress = 35;
ในโค้ดด้านบนเราได้สร้างแถบความคืบหน้าด้วยค่า 35
ปุ่มวิทยุ
นี่คือวิดเจ็ต Android ที่ช่วยให้บุคคลสามารถเลือกหนึ่งจากชุดตัวเลือก ในส่วนนี้เราจะสร้างกลุ่มวิทยุที่มีรายชื่อรถซึ่งจะดึงปุ่มตัวเลือกที่เลือกไว้
ขั้นแรกเราเพิ่มกลุ่มวิทยุและไฟล์ textview ดังแสดงในรหัสต่อไปนี้ -
<?xml version = "1.0" encoding = "utf-8"?>
<LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android"
android:orientation = "vertical"
android:background = "@android:color/darker_gray"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent">
<TextView
android:text = "What is your favourite Car"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:id = "@+id/textView1"
android:textColor = "@android:color/black" />
<RadioGroup
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:id = "@+id/radioGroup1"
android:backgroundTint = "#a52a2aff"
android:background = "@android:color/holo_green_dark">
<RadioButton
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = "Ferrari"
android:id = "@+id/radioFerrari" />
<RadioButton
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = "Mercedes"
android:id = "@+id/radioMercedes" />
<RadioButton
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = "Lamborghini"
android:id = "@+id/radioLamborghini" />
<RadioButton
android:text = "Audi"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:id = "@+id/radioAudi" />
</RadioGroup>
</LinearLayout>
ในการดำเนินการเมื่อคลิกปุ่มตัวเลือกเราจะเพิ่มกิจกรรม ไปที่MainActivity.cs และสร้างตัวจัดการเหตุการณ์ใหม่ดังที่แสดงด้านล่าง
private void onClickRadioButton(object sender, EventArgs e) {
RadioButton cars = (RadioButton)sender;
Toast.MakeText(this, cars.Text, ToastLength.Short).Show
();
}
Toast.MakeText() →นี่เป็นวิธีการดูที่ใช้เพื่อแสดงข้อความ / เอาต์พุตในป๊อปอัปขนาดเล็ก ที่ด้านล่างของไฟล์OnCreate() วิธีการหลังจากนั้น SetContentView()เพิ่มรหัสต่อไปนี้ สิ่งนี้จะจับปุ่มตัวเลือกแต่ละปุ่มและเพิ่มลงในตัวจัดการเหตุการณ์ที่เราสร้างขึ้น
RadioButton radio_Ferrari = FindViewById<RadioButton>
(Resource.Id.radioFerrari);
RadioButton radio_Mercedes = FindViewById<RadioButton>
(Resource.Id.radioMercedes);
RadioButton radio_Lambo = FindViewById<RadioButton>
(Resource.Id.radioLamborghini);
RadioButton radio_Audi = FindViewById<RadioButton>
(Resource.Id.radioAudi);
radio_Ferrari.Click += onClickRadioButton;
radio_Mercedes.Click += onClickRadioButton;
radio_Lambo.Click += onClickRadioButton;
radio_Audi.Click += onClickRadioButton;
ตอนนี้เรียกใช้แอปพลิเคชันของคุณ ควรแสดงหน้าจอต่อไปนี้เป็นผลลัพธ์ -
สลับปุ่ม
ปุ่มสลับใช้เพื่อสลับระหว่างสองสถานะเช่นสามารถสลับระหว่างเปิดและปิดได้ เปิดResources\layout\Main.axml และเพิ่มบรรทัดของโค้ดต่อไปนี้เพื่อสร้างปุ่มสลับ
<?xml version = "1.0" encoding = "utf-8"?>
<LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android"
android:orientation = "vertical"
android:background = "#d3d3d3"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent">
<ToggleButton
android:id = "@+id/togglebutton"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:textOn = "Torch ON"
android:textOff = "Torch OFF"
android:textColor = "@android:color/black" />
</LinearLayout>
เราสามารถเพิ่มการดำเนินการในแถบสลับเมื่อมีการคลิก เปิดMainActivity.cs และเพิ่มบรรทัดของโค้ดต่อไปนี้หลังไฟล์ OnCreate() คลาสวิธีการ
ToggleButton togglebutton = FindViewById<ToggleButton> (Resource.Id.togglebutton);
togglebutton.Click += (o, e) => {
if (togglebutton.Checked)
Toast.MakeText(this, "Torch is ON", ToastLength.Short).Show ();
else
Toast.MakeText(this, "Torch is OFF",
ToastLength.Short).Show();
};
ตอนนี้เมื่อคุณเรียกใช้แอพควรแสดงผลลัพธ์ต่อไปนี้ -
แถบการให้คะแนน
แถบการให้คะแนนคือองค์ประกอบรูปแบบที่ประกอบด้วยดาวซึ่งผู้ใช้แอปสามารถใช้เพื่อให้คะแนนสิ่งต่างๆที่คุณให้ไว้ ในไฟล์Main.axml สร้างแถบการจัดอันดับใหม่ด้วย 5 ดาว
<?xml version = "1.0" encoding = "utf-8"?>
<LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android"
android:orientation = "vertical"
android:background = "#d3d3d3"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent">
<RatingBar
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:id = "@+id/ratingBar1"
android:numStars = "5"
android:stepSize = "1.0" />
</LinearLayout>
ในการเรียกใช้แอพควรแสดงผลลัพธ์ต่อไปนี้ -
การเติมข้อความอัตโนมัติ
นี่คือมุมมองข้อความที่แสดงคำแนะนำทั้งหมดในขณะที่ผู้ใช้พิมพ์ เรากำลังจะสร้างมุมมองข้อความเติมข้อความอัตโนมัติที่มีรายชื่อผู้คนและปุ่มซึ่งเมื่อคลิกจะแสดงชื่อที่เลือก
เปิด Main.axml และเขียนรหัสต่อไปนี้
<?xml version = "1.0" encoding = "utf-8"?>
<LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android"
android:orientation = "vertical"
android:layout_width = "fill_parent"
android:background = "#d3d3d3"
android:layout_height = "fill_parent">
<TextView
android:text = "Enter Name"
android:textAppearance = "?android:attr/textAppearanceMedium"
android:layout_width = "fill_parent"
android:layout_height = "wrap_content"
android:id = "@+id/textView1"
android:padding = "5dp"
android:textColor = "@android:color/black" />
<AutoCompleteTextView
android:layout_width = "fill_parent"
android:layout_height = "wrap_content"
android:id = "@+id/autoComplete1"
android:textColor = "@android:color/black" />
<Button
android:text = "Submit"
android:layout_width = "fill_parent"
android:layout_height = "wrap_content"
android:id = "@+id/btn_Submit"
android:background="@android:color/holo_green_dark" />
</LinearLayout>
โค้ดด้านบนสร้าง TextView สำหรับพิมพ์ AutoCompleteTextViewสำหรับแสดงคำแนะนำและปุ่มสำหรับแสดงชื่อที่ป้อนจาก TextView ไปที่MainActivity.cs เพื่อเพิ่มฟังก์ชัน
สร้างวิธีการจัดการเหตุการณ์ใหม่ดังที่แสดงด้านล่าง
protected void ClickedBtnSubmit(object sender, System.EventArgs e){
if (autoComplete1.Text != ""){
Toast.MakeText(this, "The Name Entered ="
+ autoComplete1.Text, ToastLength.Short).Show();
} else {
Toast.MakeText(this, "Enter a Name!", ToastLength.Short).Show();
}
}
ตัวจัดการที่สร้างขึ้นจะตรวจสอบว่าการเติมข้อความอัตโนมัติว่างเปล่า หากไม่ว่างเปล่าก็จะแสดงข้อความเติมข้อความอัตโนมัติที่เลือก พิมพ์รหัสต่อไปนี้ภายในไฟล์OnCreate() ชั้นเรียน.
autoComplete1 = FindViewById<AutoCompleteTextView>(Resource.Id.autoComplete1);
btn_Submit = FindViewById<Button>(Resource.Id.btn_Submit);
var names = new string[] { "John", "Peter", "Jane", "Britney" };
ArrayAdapter adapter = new ArrayAdapter<string>(this,
Android.Resource.Layout.SimpleSpinnerItem, names);
autoComplete1.Adapter = adapter;
btn_Submit.Click += ClickedBtnSubmit;
ArrayAdapter - นี่คือตัวจัดการคอลเลกชันที่อ่านรายการข้อมูลจากคอลเลกชันรายการและส่งคืนเป็นมุมมองหรือแสดงบนหน้าจอ
ตอนนี้เมื่อคุณเรียกใช้แอปพลิเคชันควรแสดงผลลัพธ์ต่อไปนี้
เมนูป๊อปอัป
เมนูป๊อปอัปหมายถึงเมนูที่แนบมากับมุมมอง เรียกอีกอย่างว่าไฟล์shortcut menu. มาดูวิธีเพิ่มเมนูป๊อปอัพลงในแอพ Android
สร้างโครงการใหม่และเรียกมัน popUpMenu App. เปิดMain.axml และสร้างปุ่มที่จะใช้เพื่อแสดงเมนูป๊อปอัป
<?xml version = "1.0" encoding = "utf-8"?>
<LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android"
android:orientation = "vertical"
android:background = "#d3d3d3"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent">
<Button
android:id = "@+id/popupButton"
android:layout_width = "fill_parent"
android:layout_height = "wrap_content"
android:text = "Show popup menu"
android:background = "@android:color/holo_green_dark"
android:textColor = "@android:color/black" />
</LinearLayout>
สร้างโฟลเดอร์ใหม่ภายใต้ไฟล์ Resources โฟลเดอร์และเรียกมัน Menu. ภายในโฟลเดอร์เมนูให้เพิ่มไฟล์ xml ใหม่ที่เรียกว่าpopMenu.xml.
ภายใต้ popMenu.xmlเพิ่มรายการเมนูต่อไปนี้
<?xml version = "1.0" encoding="utf-8"?>
<menu xmlns:android = "http://schemas.android.com/apk/res/android">
<item
android:id = "@+id/file_settings"
android:icon = "@drawable/img_settings"
android:title = "Settings"
android:showAsAction = "ifRoom">
<item
android:id = "@+id/new_game1"
android:icon = "@drawable/imgNew"
android:title = "New File Settings"/>
<item
android:id = "@+id/help"
android:icon = "@drawable/img_help"
android:title = "Help" />
<item
android:id = "@+id/about_app"
android:icon = "@drawable/img_help"
android:title = "About app"/>
</item>
</menu>
หลังจากเพิ่มรายการเมนูแล้วให้ไปที่ mainActivity.cs เพื่อแสดงเมนูป๊อปอัพเมื่อคลิกปุ่ม
protected override void OnCreate(Bundle bundle) {
base.OnCreate(bundle);
SetContentView(Resource.Layout.Main);
Button showPopupMenu = FindViewById<Button>(Resource.Id.popupButton);
showPopupMenu.Click += (s, arg) => {
PopupMenu menu = new PopupMenu(this, showPopupMenu);
menu.Inflate(Resource.Menu.popMenu);
menu.Show();
};
}
ตอนนี้สร้างและเรียกใช้แอปพลิเคชันของคุณ ควรให้ผลลัพธ์ดังต่อไปนี้ -
เมนูตัวเลือก
เมนูตัวเลือกคือชุดของเมนูที่เป็นเมนูหลักของแอพและส่วนใหญ่จะใช้ในการจัดเก็บการตั้งค่าการค้นหาและอื่น ๆ ที่นี่เราจะสร้างเมนูสำหรับการตั้งค่าที่มีสามรายการอยู่ภายในนั่นคือ New File Settings, Help, and About App.
ในการสร้างเมนูตัวเลือกเราต้องสร้างไฟล์เลย์เอาต์ XML ใหม่ในโฟลเดอร์ทรัพยากร ก่อนอื่นเราจะเพิ่มไฟล์ XML ใหม่ คลิกขวาที่ไฟล์Layout folderจากนั้นไปที่ Add → New item → Visual C# → XML File.
เลือกชื่อที่เหมาะสมสำหรับ layout file. ในตัวอย่างของเราเราจะเรียกไฟล์ของเราmyMenu.xml.
ข้างใน myMenu.xmlเราจะสร้างเมนูใหม่และเพิ่มรายการภายใน รหัสต่อไปนี้แสดงวิธีการทำ
<?xml version = "1.0" encoding = "utf-8"?>
<menu xmlns:android = "http://schemas.android.com/apk/res/android">
<item
android:id = "@+id/file_settings"
android:icon = "@drawable/img_settings"
android:title = "Settings"
android:showAsAction = "ifRoom">
<menu>
<item
android:id = "@+id/new_game1"
android:icon = "@drawable/imgNew"
android:title = "New File Settings" />
<item
android:id = "@+id/help"
android:icon = "@drawable/img_help"
android:title = "Help" />
<item
android:id = "@+id/about_app"
android:icon = "@drawable/img_help"
android:title = "About app"/>
</menu>
</item>
</menu>
ต่อไปเราไปที่ MainActivity.cs และสร้างคลาสแทนที่สำหรับ onOptionsMenu().
public override bool OnCreateOptionsMenu(IMenu menu) {
MenuInflater.Inflate(Resource.Menu.myMenu, menu);
return base.OnPrepareOptionsMenu(menu);
}
ต่อไปเราจะสร้างการดำเนินการเพื่อตอบสนองต่อไฟล์ settings menuเมื่อถูกเลือก ในการทำเช่นนี้เราสร้างคลาสการแทนที่อื่นสำหรับOnOptionsItemSelected() เมนู.
public override bool OnOptionsItemSelected(IMenuItem item) {
if (item.ItemId == Resource.Id.file_settings) {
// do something here...
return true;
}
return base.OnOptionsItemSelected(item);
}
รหัสสุดท้ายของเราจะมีลักษณะดังนี้ -
namespace optionsMenuApp {
[Activity(Label = "options Menu", MainLauncher = true, Icon = "@drawable/icon")]
public class MainActivity : Activity {
public override bool OnCreateOptionsMenu(IMenu menu) {
MenuInflater.Inflate(Resource.Menu.myMenu, menu);
return base.OnPrepareOptionsMenu(menu);
}
public override bool OnOptionsItemSelected(IMenuItem item) {
if (item.ItemId == Resource.Id.file_settings) {
// do something here...
return true;
}
return base.OnOptionsItemSelected(item);
}
}
}
ตอนนี้สร้างและเรียกใช้แอปพลิเคชันของคุณ ควรให้ผลลัพธ์ดังต่อไปนี้ -
เค้าโครงเชิงเส้น
ในรูปแบบเชิงเส้นเนื้อหาจะถูกจัดเรียงในแนวนอนหรือแนวตั้ง
เลย์เอาต์เชิงเส้น─แนวนอน
เนื้อหาของเค้าโครงนี้จัดเรียงในแนวนอน สำหรับการสาธิตนี้เราจะสร้างปุ่ม 3 ปุ่มและจัดเรียงในแนวนอนในรูปแบบเชิงเส้น
<?xml version = "1.0" encoding = "utf-8"?>
<LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android"
android:orientation = "horizontal"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent"
android:background = "#d3d3d3"
android:minWidth="25px"
android:minHeight="25px">
<Button
android:id="@+id/MyButton1"
android:layout_width="wrap_content"
android:layout_margin="10dp"
android:layout_height="wrap_content"
android:text="Button 1"
android:background="@android:color/holo_green_dark" />
<Button
android:id="@+id/MyButton2"
android:layout_width="wrap_content"
android:layout_margin="10dp"
android:layout_height="wrap_content"
android:text="Button 2"
android:background="@android:color/holo_green_dark" />
<Button
android:id="@+id/MyButton3"
android:layout_width="wrap_content"
android:layout_margin="10dp"
android:layout_height="wrap_content"
android:text="Button 3"
android:background="@android:color/holo_green_dark" />
</LinearLayout>
ผลลัพธ์ที่ได้จะเป็นดังที่แสดงด้านล่าง -
เลย์เอาต์เชิงเส้น─แนวตั้ง
เค้าโครงประเภทนี้จะวางมุมมองเด็กในลักษณะแนวตั้ง
<?xml version = "1.0" encoding = "utf-8"?>
<LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android"
android:orientation = "vertical"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent"
android:background = "#d3d3d3"
android:minWidth = "25px"
android:minHeight = "25px">
<Button
android:id = "@+id/MyButton1"
android:layout_width = "fill_parent"
android:layout_margin = "10dp"
android:layout_height = "wrap_content"
android:text = "Button 1"
android:background = "@android:color/holo_green_dark" />
<Button
android:id = "@+id/MyButton2"
android:layout_width = "fill_parent"
android:layout_margin = "10dp"
android:layout_height = "wrap_content"
android:text = "Button 2"
android:background = "@android:color/holo_green_dark" />
<Button
android:id = "@+id/MyButton3"
android:layout_width = "fill_parent"
android:layout_margin = "10dp"
android:layout_height = "wrap_content"
android:text="Button 3"
android:background = "@android:color/holo_green_dark" />
</LinearLayout>
ผลลัพธ์ที่ได้มีดังนี้ -
เค้าโครงสัมพัทธ์
ในมุมมองนี้ตำแหน่งของมุมมองลูกจะสัมพันธ์กับมุมมองระดับบนสุดหรือกับมุมมองพี่น้อง ในตัวอย่างต่อไปนี้เราจะสร้าง 3 มุมมอง EditText และปุ่มจากนั้นจัดแนวให้ตรงกัน
สร้างโครงการใหม่และเรียกมัน relative layout app. เปิดmain.axml และเพิ่มรหัสต่อไปนี้
<?xml version = "1.0" encoding = "utf-8"?>
<RelativeLayout xmlns:android = "http://schemas.android.com/apk/res/android"
android:layout_width = "match_parent"
android:layout_height = "match_parent"
android:paddingLeft = "16dp"
android:background = "#d3d3d3"
android:paddingRight = "16dp">
<EditText
android:id = "@+id/name"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:hint = "First Name"
android:textColorHint = "@android:color/background_dark"
android:textColor = "@android:color/background_dark" />
<EditText
android:id = "@+id/lastName"
android:layout_width = "0dp"
android:layout_height = "wrap_content"
android:hint = "Last Name"
android:layout_below = "@id/name"
android:textColorHint = "@android:color/background_dark"
android:textColor = "@android:color/background_dark"
android:layout_alignParentLeft = "true"
android:layout_toLeftOf = "@+id/age" />
<EditText
android:id = "@id/age"
android:layout_width = "80dp"
android:layout_height = "wrap_content"
android:layout_below = "@id/name"
android:hint = "Age"
android:textColorHint = "@android:color/background_dark"
android:textColor = "@android:color/background_dark"
android:layout_alignParentRight = "true" />
<Button
android:layout_width = "85dp"
android:layout_height = "wrap_content"
android:layout_below = "@id/age"
android:layout_alignParentRight = "true"
android:text = "Submit"
android:background = "@android:color/holo_green_dark" />
</RelativeLayout>
พารามิเตอร์ที่สำคัญที่เราใช้ในโค้ดนี้คือ -
android:layout_below - จัดแนวองค์ประกอบมุมมองเด็กด้านล่างระดับบนสุด
android:layout_alignParentLeft - จัดตำแหน่งองค์ประกอบหลักไปทางซ้าย
android:layout_toLeftOf - คุณสมบัตินี้จะจัดแนวองค์ประกอบทางด้านซ้ายขององค์ประกอบอื่น
android:layout_alignParentRight - จัดตำแหน่งพาเรนต์ไปทางขวา
เมื่อคุณสร้างและเรียกใช้แอพตอนนี้มันจะสร้างหน้าจอผลลัพธ์ต่อไปนี้ -
เค้าโครงกรอบ
เค้าโครงเฟรมใช้เพื่อแสดงรายการเดียวเท่านั้น เป็นการยากที่จะจัดเรียงรายการหลายรายการในเค้าโครงนี้โดยไม่ให้ซ้อนทับกัน
เริ่มโครงการใหม่และเรียกมันว่า frameLayoutApp. สร้างเค้าโครงเฟรมใหม่ดังที่แสดงด้านล่าง
<?xml version = "1.0" encoding = "utf-8"?>
<FrameLayout xmlns:android = "http://schemas.android.com/apk/res/android"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent">
<ImageView
android:id = "@+id/ImageView1"
android:scaleType = "matrix"
android:layout_height = "fill_parent"
android:layout_width = "fill_parent"
android:src = "@drawable/img1" />
<TextView
android:layout_width = "fill_parent"
android:layout_height = "wrap_content"
android:textSize = "50dp"
android:textColor = "#000"
android:text = "This is a Lake" />
<TextView
android:gravity = "right"
android:layout_width = "fill_parent"
android:layout_height = "wrap_content"
android:textSize = "50dp"
android:text = "A very Deep Lake"
android:layout_gravity = "bottom"
android:textColor = "#fff" />
</FrameLayout>
โค้ดด้านบนสร้างไฟล์ imageViewซึ่งจะเต็มหน้าจอทั้งหมด มุมมองข้อความสองรายการจากนั้นลอยอยู่เหนือไฟล์imageView.
ตอนนี้สร้างและเรียกใช้แอปพลิเคชันของคุณ มันจะแสดงผลลัพธ์ต่อไปนี้ -
เค้าโครงตาราง
ในเค้าโครงนี้มุมมองจะถูกจัดเรียงเป็น rows และ columns. เรามาดูวิธีการทำงาน
<?xml version = "1.0" encoding = "utf-8"?>
<TableLayout xmlns:android = "http://schemas.android.com/apk/res/android"
android:layout_width = "fill_parent"
android:background = "#d3d3d3"
android:layout_height = "fill_parent"
android:stretchColumns = "1">
<TableRow>
<TextView
android:text = "First Name:"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:textColor = "@android:color/black" />
<EditText
android:width = "100px"
android:layout_width = "fill_parent"
android:layout_height = "30dp"
android:textColor = "@android:color/black" />
</TableRow>
<TableRow>
<TextView
android:text = "Last Name:"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:textColor = "@android:color/black" />
<EditText
android:width = "50px"
android:layout_width = "fill_parent"
android:layout_height = "30dp"
android:textColor = "@android:color/black" />
</TableRow>
<TableRow>
<TextView
android:text = "Residence:"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:textColor = "@android:color/black" />
<EditText
android:width = "100px"
android:layout_width = "fill_parent"
android:layout_height = "30dp"
android:textColor = "@android:color/black" />
</TableRow>
<TableRow>
<TextView
android:text = "Occupation:"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:textColor = "@android:color/black" />
<EditText
android:width = "100px"
android:layout_width = "fill_parent"
android:layout_height = "30dp"
android:textColor = "@android:color/black" />
</TableRow>
<TableRow>
<Button
android:text = "Cancel"
android:layout_width = "wrap_content"
android:layout_margin = "10dp"
android:layout_height = "wrap_content"
android:background = "@android:color/holo_green_dark" />
<Button
android:text = "Submit"
android:width = "100px"
android:layout_margin = "10dp"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:background = "@android:color/holo_green_dark" />
</TableRow>
</TableLayout>
รหัสด้านบนสร้างแบบฟอร์มการป้อนข้อมูลอย่างง่ายที่จัดเรียงโดยใช้ tables และ rows.
เลือกวันที่
นี่คือวิดเจ็ตที่ใช้แสดงวันที่ ในตัวอย่างนี้เราจะสร้างตัวเลือกวันที่ซึ่งจะแสดงวันที่ที่ตั้งไว้ในมุมมองข้อความ
ก่อนอื่นให้สร้างโครงการใหม่และเรียกมันว่า datePickerExample. เปิดMain.axml และสร้างไฟล์ datepicker, textviewและก button.
<?xml version = "1.0" encoding = "utf-8"?>
<LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android"
android:orientation = "vertical"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent">
<DatePicker
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:id = "@+id/datePicker1" />
<TextView
android:text = "Current Date"
android:textAppearance = "?android:attr/textAppearanceLarge"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:id = "@+id/txtShowDate" />
<Button
android:text = "Select Date"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:id = "@+id/btnSetDate" />
</LinearLayout>
จากนั้นไปที่ Mainactivity.cs. ก่อนอื่นเราสร้างอินสแตนซ์ส่วนตัวของมุมมองข้อความภายในไฟล์mainActivity:Activity ชั้นเรียน.
อินสแตนซ์จะถูกใช้เพื่อจัดเก็บวันที่ที่เลือกหรือวันที่เริ่มต้น
private TextView showCurrentDate;
จากนั้นเพิ่มรหัสต่อไปนี้หลัง setContentView() วิธี.
DatePicker pickDate = FindViewById<DatePicker>(Resource.Id.datePicker1);
showCurrentDate = FindViewById<TextView>(Resource.Id.txtShowDate);
setCurrentDate();
Button button = FindViewById<Button>(Resource.Id.btnSetDate);
button.Click += delegate {
showCurrentDate.Text = String.Format("{0}/{1}/{2}",
pickDate.Month, pickDate.DayOfMonth, pickDate.Year);
};
ในโค้ดด้านบนเราได้อ้างอิง datepicker, textview และปุ่มของเราโดยค้นหาจากไฟล์ main.axml ไฟล์โดยใช้ FindViewById ชั้นเรียน.
หลังจากอ้างอิงแล้วเราตั้งค่าเหตุการณ์การคลิกปุ่มซึ่งรับผิดชอบในการส่งวันที่ที่เลือกจากตัวเลือกวันที่ไปยัง textview
ต่อไปเราจะสร้างไฟล์ setCurrentDate()วิธีการแสดงวันที่ปัจจุบันเริ่มต้นให้กับ textview ของเรา รหัสต่อไปนี้อธิบายถึงวิธีการทำ
private void setCurrentDate() {
string TodaysDate = string.Format("{0}",
DateTime.Now.ToString("M/d/yyyy").PadLeft(2, '0'));
showCurrentDate.Text = TodaysDate;
}
DateTime.Now.ToString() คลาสผูกเวลาของวันนี้กับวัตถุสตริง
ตอนนี้สร้างและเรียกใช้แอพ ควรแสดงผลลัพธ์ต่อไปนี้ -
ตัวเลือกเวลา
Time Picker เป็นวิดเจ็ตที่ใช้ในการแสดงเวลาและช่วยให้ผู้ใช้สามารถเลือกและตั้งเวลาได้ เรากำลังจะสร้างแอพตัวเลือกเวลาพื้นฐานที่แสดงเวลาและยังอนุญาตให้ผู้ใช้เปลี่ยนเวลาได้
ไปที่ main.axml และเพิ่มปุ่มใหม่มุมมองข้อความและตัวเลือกเวลาดังที่แสดงในรหัสต่อไปนี้
<?xml version = "1.0" encoding = "utf-8"?>
<LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android"
android:orientation = "vertical"
android:background = "#d3d3d3"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent">
<TimePicker
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:id = "@+id/timePicker1" />
<TextView
android:text = "Time"
android:textAppearance = "?android:attr/textAppearanceLarge"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:id = "@+id/txt_showTime"
android:textColor = "@android:color/black" />
<Button
android:text = "Set Time"
android:layout_width = "200dp"
android:layout_height = "wrap_content"
android:id = "@+id/btnSetTime"
android:textColor = "@android:color/black"
android:background = "@android:color/holo_green_dark" />
</LinearLayout>
ไปที่ MainActivity.cs เพื่อเพิ่มฟังก์ชั่นสำหรับการแสดงวันที่ที่กำหนดบน textview ที่เราสร้างขึ้น
public class MainActivity : Activity {
private TextView showCurrentTime;
protected override void OnCreate(Bundle bundle) {
base.OnCreate(bundle);
SetContentView(Resource.Layout.Main);
TimePicker Tpicker = FindViewById<TimePicker>(Resource.Id.timePicker1);
showCurrentTime = FindViewById<TextView>(Resource.Id.txt_showTime);
setCurrentTime();
Button button = FindViewById<Button>(Resource.Id.btnSetTime);
button.Click += delegate {
showCurrentTime.Text = String.Format("{0}:{1}",
Tpicker.CurrentHour, Tpicker.CurrentMinute);
};
}
private void setCurrentTime() {
string time = string.Format("{0}",
DateTime.Now.ToString("HH:mm").PadLeft(2, '0'));
showCurrentTime.Text = time;
}
}
ในโค้ดด้านบนเราอ้างถึงไฟล์ timepicker,set time ปุ่มและมุมมองข้อความสำหรับแสดงเวลาผ่านไฟล์ FindViewById<>ชั้นเรียน. จากนั้นเราสร้างเหตุการณ์การคลิกสำหรับปุ่มตั้งเวลาซึ่งเมื่อคลิกจะตั้งเวลาเป็นเวลาที่บุคคลเลือก โดยค่าเริ่มต้นจะแสดงเวลาของระบบปัจจุบัน
setCurrentTime() คลาสเมธอดเริ่มต้น txt_showTime textview เพื่อแสดงเวลาปัจจุบัน
ตอนนี้สร้างและเรียกใช้แอปพลิเคชันของคุณ ควรแสดงผลลัพธ์ต่อไปนี้ -
ตัวหมุน
สปินเนอร์เป็นวิดเจ็ตที่ใช้เพื่อเลือกหนึ่งตัวเลือกจากชุด มันเทียบเท่ากับกล่องดรอปดาวน์ / คอมโบ ก่อนอื่นให้สร้างโครงการใหม่และเรียกมันว่าSpinner App Tutorial.
เปิด Main.axml ภายใต้ layout folder และสร้างไฟล์ spinner.
<?xml version = "1.0" encoding = "utf-8"?>
<LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android"
android:orientation = "vertical"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent">
<Spinner
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:id = "@+id/spinner1"
android:prompt = "@string/daysOfWeek" />
</LinearLayout>
เปิด Strings.xml ไฟล์อยู่ภายใต้ values folder และเพิ่มรหัสต่อไปนี้เพื่อสร้างไฟล์ spinner items.
<resources>
<string name = "daysOfWeek">Choose a planet</string>
<string-array name = "days_array">
<item>Sunday</item>
<item>Monday</item>
<item>Tuesday</item>
<item>Wednesday</item>
<item>Thursday</item>
<item>Friday</item>
<item>Saturday</item>
<item>Sunday</item>
</string-array>
</resources>
ถัดไปเปิด MainActivity.cs เพื่อเพิ่มฟังก์ชันสำหรับการแสดงวันที่เลือกในสัปดาห์
protected override void OnCreate(Bundle bundle) {
base.OnCreate(bundle);
// Set our view from the "main" layout resource
SetContentView(Resource.Layout.Main);
Spinner spinnerDays = FindViewById<Spinner>(Resource.Id.spinner1);
spinnerDays.ItemSelected += new EventHandler
<AdapterView.ItemSelectedEventArgs>(SelectedDay);
var adapter = ArrayAdapter.CreateFromResource(this,
Resource.Array.days_array, Android.Resource.Layout.SimpleSpinnerItem);
adapter.SetDropDownViewResource(Android.Resource.Layout.SimpleSpinnerDropD ownItem);
spinnerDays.Adapter = adapter;
}
private void SelectedDay(object sender, AdapterView.ItemSelectedEventArgs e) {
Spinner spinner = (Spinner)sender;
string toast = string.Format("The selected
day is {0}", spinner.GetItemAtPosition(e.Position));
Toast.MakeText(this, toast, ToastLength.Long).Show();
}
ตอนนี้สร้างและเรียกใช้แอปพลิเคชัน ควรแสดงผลลัพธ์ต่อไปนี้ -
ในโค้ดด้านบนเราอ้างอิงสปินเนอร์ที่เราสร้างในไฟล์ main.axml ไฟล์ผ่านไฟล์ FindViewById<>ชั้นเรียน. จากนั้นเราได้สร้างไฟล์arrayAdapter() ซึ่งเราใช้ในการผูกรายการอาร์เรย์ของเราจากไฟล์ strings.xml ชั้นเรียน.
ในที่สุดเราก็สร้างเมธอด SelectedDay() ซึ่งเราใช้เพื่อแสดงวันที่เลือกของสัปดาห์
กล่องโต้ตอบการแจ้งเตือน
ในส่วนนี้เราจะสร้างปุ่มซึ่งเมื่อคลิกแล้วจะแสดงกล่องโต้ตอบการแจ้งเตือน กล่องโต้ตอบประกอบด้วยปุ่มสองปุ่มกล่าวคือDelete และ Cancel ปุ่ม
ก่อนอื่นไปที่ main.axml และสร้างปุ่มใหม่ภายในเค้าโครงเชิงเส้นดังที่แสดงในรหัสต่อไปนี้
<?xml version = "1.0" encoding = "utf-8"?>
<LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android"
android:orientation = "vertical"
android:layout_width = "fill_parent"
android:background = "#d3d3d3"
android:layout_height = "fill_parent">
<Button
android:id="@+id/MyButton"
android:layout_width = "fill_parent"
android:layout_height = "wrap_content"
android:text = "Click to Delete"
android:textColor = "@android:color/background_dark"
android:background = "@android:color/holo_green_dark" />
</LinearLayout>
ถัดไปเปิด MainActivity.cs เพื่อสร้างกล่องโต้ตอบการแจ้งเตือนและเพิ่มฟังก์ชันการทำงาน
protected override void OnCreate(Bundle bundle) {
base.OnCreate(bundle);
SetContentView(Resource.Layout.Main);
Button button = FindViewById<Button>(Resource.Id.MyButton);
button.Click += delegate {
AlertDialog.Builder alertDiag = new AlertDialog.Builder(this);
alertDiag.SetTitle("Confirm delete");
alertDiag.SetMessage("Once deleted the move cannot be undone");
alertDiag.SetPositiveButton("Delete", (senderAlert, args) => {
Toast.MakeText(this, "Deleted", ToastLength.Short).Show();
});
alertDiag.SetNegativeButton("Cancel", (senderAlert, args) => {
alertDiag.Dispose();
});
Dialog diag = alertDiag.Create();
diag.Show();
};
}
เมื่อเสร็จแล้วให้สร้างและเรียกใช้แอปพลิเคชันของคุณเพื่อดูผลลัพธ์
ในโค้ดด้านบนเราได้สร้างกล่องโต้ตอบการแจ้งเตือนที่เรียกว่า alertDiag โดยมีปุ่มสองปุ่มต่อไปนี้ -
setPositiveButton - ประกอบด้วยไฟล์ Delete การทำงานของปุ่มซึ่งเมื่อคลิกแล้วจะแสดงข้อความยืนยัน Deleted.
setNegativeButton - ประกอบด้วยไฟล์ Cancel ซึ่งเมื่อคลิกเพียงแค่ปิดกล่องโต้ตอบการแจ้งเตือน
แกลเลอรีคือมุมมองประเภทหนึ่งที่ใช้เพื่อแสดงรายการในรายการที่เลื่อนได้ในแนวนอน จากนั้นรายการที่เลือกจะแสดงที่กึ่งกลาง ในตัวอย่างนี้คุณจะสร้างแกลเลอรีที่มีรูปภาพที่เลื่อนได้ในแนวนอน รูปภาพเมื่อคลิกจะแสดงตัวเลขสำหรับรูปภาพที่เลือก
ก่อนอื่นให้สร้างโปรเจ็กต์ใหม่และตั้งชื่อให้เช่น Gallery App Tutorial ก่อนเริ่มเขียนโค้ดให้วางภาพ 7 ภาพลงในไฟล์resource /drawable folder. นำทางไปยังmain.axml ภายใต้ resources folder และแกลเลอรีที่อยู่ระหว่างแท็กเค้าโครงเชิงเส้น
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#d3d3d3">
<Gallery
android:id="@+id/gallery"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dp" />
</LinearLayout>
สร้างคลาสใหม่ชื่อ ImageAdapter. คลาสนี้จะใช้ในการผูกรูปภาพเข้ากับแกลเลอรีที่เราสร้างไว้ด้านบน
ขั้นตอนแรกคือการเพิ่มคลาสที่มีบริบท cont ซึ่งเราใช้ในการจัดเก็บฟิลด์
public class ImageAdapter : BaseAdapter {
Context cont;
public ImageAdapter(Context ct) {
cont = ct;
}
}
ต่อไปเราจะนับรายการอาร์เรย์ที่มีรูปภาพของเราและส่งคืนขนาดของมัน
public override int Count {
get {
return imageArraylist.Length;
}
}
ในขั้นตอนต่อไปเราจะได้รับตำแหน่งของรายการ รหัสต่อไปนี้แสดงวิธีการทำ
public override Java.Lang.Object GetItem(int position) {
return null;
}
public override long GetItemId(int position) {
return 0;
}
ในขั้นตอนต่อไปเราจะสร้างไฟล์ imageview สำหรับรายการที่อ้างอิงโดยอะแด็ปเตอร์
public override View GetView(int position,View convertView, ViewGroup parent) {
ImageView img = new ImageView(cont);
img.SetImageResource(imageArraylist[position]);
img.SetScaleType(ImageView.ScaleType.FitXy);
img.LayoutParameters = new Gallery.LayoutParams(200, 100);
return img;
}
ในขั้นตอนสุดท้ายเราสร้างการอ้างอิงถึงรูปภาพที่เราเพิ่มในไฟล์ resources.drawableโฟลเดอร์ ในการทำเช่นนี้เราสร้างอาร์เรย์เพื่อเก็บคอลเลกชันของรูปภาพ รหัสต่อไปนี้อธิบายวิธีการทำ
int[] imageArraylist = {
Resource.Drawable.img1,
Resource.Drawable.img2,
Resource.Drawable.img3,
Resource.Drawable.img4,
Resource.Drawable.img5,
Resource.Drawable.img6,
};
}
ต่อไปเราไปที่ mainActivity.cs และใส่รหัสต่อไปนี้ภายใต้วิธี OnCreate ()
Gallery myGallery = (Gallery)FindViewById<Gallery>(Resource.Id.gallery);
myGallery.Adapter = new ImageAdapter(this);
myGallery.ItemClick += delegate(object sender, AdapterView.ItemClickEventArgs args) {
Toast.MakeText(this,
args.Position.ToString(), ToastLength.Short).Show();
}
สุดท้ายสร้างและเรียกใช้แอปพลิเคชันของคุณเพื่อดูผลลัพธ์
ListViews
Listview คือองค์ประกอบส่วนติดต่อผู้ใช้ที่แสดงรายการของรายการที่เลื่อนได้
การเชื่อมโยงข้อมูลกับมุมมองรายการ
ในตัวอย่างนี้คุณจะสร้าง listView ที่แสดงวันในสัปดาห์ เริ่มต้นด้วยการให้เราสร้างไฟล์ XML ใหม่และตั้งชื่อlistViewTemplate.xml.
ใน listViewTemplate.xmlเราเพิ่มมุมมองข้อความใหม่ตามที่แสดงด้านล่าง
<?xml version = "1.0" encoding = "utf-8" ?>
<TextView xmlns:android = "http://schemas.android.com/apk/res/android"
android:id = "@+id/textItem"
android:textSize ="20sp"
android:layout_width = "fill_parent"
android:layout_height = "wrap_content"/>
จากนั้นไปที่ Main.axml และสร้างมุมมองรายการใหม่ภายใน Linear Layout
<ListView
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/listView1" />
เปิด MainActivity.csและพิมพ์รหัสต่อไปนี้เพื่อผูกข้อมูลกับมุมมองรายการที่เราสร้างขึ้น ต้องเขียนโค้ดไว้ในไฟล์OnCreate() วิธี.
SetContentView(Resource.Layout.Main);
var listView = FindViewById<ListView>(Resource.Id.listView1);
var data = new string[] {
"Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"
};
listView.Adapter = new ArrayAdapter(this, Resource.Layout.ListViewTemplate, data);
Var data = new string[] เพียงแค่ถือรายการของเราเป็นอาร์เรย์
Array Adapter ส่งคืนรายการในคอลเลกชันของเราเป็นมุมมอง ตามค่าเริ่มต้น Array Adapter ใช้ textView เริ่มต้นเพื่อแสดงแต่ละรายการ ในโค้ดด้านบนเราได้สร้าง textview ของเราเองในListViewTemplate.xml และอ้างอิงโดยใช้ตัวสร้างที่แสดงด้านล่าง
ArrayAdapter(this, Resource.Layout.ListViewTemplate, data);
สุดท้ายสร้างและเรียกใช้แอปพลิเคชันของคุณเพื่อดูผลลัพธ์
GridViews
gridView คือกลุ่มมุมมองที่ช่วยให้แอปพลิเคชันจัดเค้าโครงเนื้อหาในรูปแบบสองมิติกริดที่เลื่อนได้
ในการเพิ่ม GridView ให้สร้างโปรเจ็กต์ใหม่และเรียกมัน gridViewApp. ไปที่Main.axml และเพิ่มเส้นตารางตามที่แสดงด้านล่าง
<?xml version = "1.0" encoding="utf-8"?>
<GridView xmlns:android = "http://schemas.android.com/apk/res/android"
android:id = "@+id/gridview"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent"
android:columnWidth = "90dp"
android:numColumns = "auto_fit"
android:verticalSpacing = "10dp"
android:horizontalSpacing = "10dp"
android:stretchMode = "columnWidth"
android:gravity = "center" />
จากนั้นสร้างคลาสใหม่และตั้งชื่อ ImageAdpter.cs. คลาสนี้จะมีคลาสอะแด็ปเตอร์สำหรับไอเท็มทั้งหมดซึ่งจะแสดงในตาราง
ข้างใน ImageAdapterเพิ่มรหัสต่อไปนี้ -
public class ImageAdapter : BaseAdapter {
Context context;
public ImageAdapter(Context ch) {
context = ch;
}
public override int Count {
get {
return cars.Length;
}
}
public override long GetItemId(int position) {
return 0;
}
public override Java.Lang.Object GetItem(int position) {
return null;
}
public override View GetView(int position,
View convertView, ViewGroup parent) {
ImageView imageView;
if (convertView == null) {
imageView = new ImageView(context);
imageView.LayoutParameters = new GridView.LayoutParams(100, 100);
imageView.SetScaleType(ImageView.ScaleType.CenterCrop);
imageView.SetPadding(8, 8, 8, 8);
} else {
imageView = (ImageView)convertView;
}
imageView.SetImageResource(cars[position]);
return imageView;
}
int[] cars = {
Resource.Drawable.img1, Resource.Drawable.img2,
Resource.Drawable.img3, Resource.Drawable.img4,
Resource.Drawable.img5, Resource.Drawable.img6,
};
}
ในโค้ดด้านบนเราได้ผูกภาพรถของเราเข้ากับอะแดปเตอร์ภาพ ถัดไปเปิดMainActivity.cs และเพิ่มรหัสต่อไปนี้หลัง setContentView().
var gridview = FindViewById<GridView>(Resource.Id.gridview);
gridview.Adapter = new ImageAdapter(this);
gridview.ItemClick += delegate(object sender,
AdapterView.ItemClickEventArgs args) {
Toast.MakeText(this,
args.Position.ToString(), ToastLength.Short).Show();
};
โค้ดด้านบนค้นหา gridView ใน main.axml และผูกเข้ากับไฟล์ imageAdapter ชั้นเรียน. Gridview.ItemClick สร้างไฟล์ onClick เหตุการณ์ที่ส่งคืนตำแหน่งของรูปภาพที่เลือกเมื่อผู้ใช้คลิกที่รูปภาพ
ตอนนี้สร้างและเรียกใช้แอปพลิเคชันของคุณเพื่อดูผลลัพธ์
ในบทนี้เราจะสร้างระบบล็อกอินที่ช่วยให้ผู้ใช้สามารถลงทะเบียนได้ จากนั้นเราจะนำผู้ใช้ที่ลงทะเบียนไปที่หน้าจอหลักของแอพของเราเมื่อเข้าสู่ระบบสำเร็จ
ก่อนอื่นให้สร้างโครงการใหม่และเรียกมันว่า Login System. ในโปรเจ็กต์ใหม่ของคุณไปที่main.axml และเพิ่มปุ่มสองปุ่มและแถบความคืบหน้าตามที่แสดงด้านล่าง
<?xml version = "1.0" encoding = "utf-8"?>
<LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android"
android:orientation = "vertical"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent"
android:background = "@android:color/background_light"
android:weightSum = "100"
android:minWidth = "25px"
android:minHeight = "25px">
<TextView
android:text = "Login App"
android:textAppearance = "?android:attr/textAppearanceMedium"
android:layout_width = "match_parent"
android:layout_weight = "20"
android:layout_height = "0dp"
android:textColor = "#368DEB"
android:id = "@+id/txtCreatAccount"
android:gravity = "center"
android:textStyle = "bold"
android:textSize = "25sp" />
<Button
android:text = "Sign In"
android:layout_width = "match_parent"
android:layout_weight = "15"
android:layout_height = "0dp"
android:background = "@drawable/btnSignInStyle"
android:id = "@+id/btnSignIn"
android:layout_marginLeft = "20dp"
android:layout_marginRight = "20dp"
android:textSize = "15sp" />
<Button
android:text = "Sign Up"
android:layout_width = "match_parent"
android:layout_weight = "15"
android:layout_height = "0dp"
android:background = "@drawable/btnSignUpStyle"
android:id = "@+id/btnSignUp"
android:layout_marginLeft = "20dp"
android:layout_marginRight = "20dp"
android:textSize = "15sp" />
<RelativeLayout
android:layout_width = "match_parent"
android:layout_height = "0dp"
android:layout_weight = "50"
android:minWidth = "25px"
android:minHeight = "25px">
<ProgressBar
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:id = "@+id/progressBar1"
android:background = "@drawable/progressBarStyle"
android:layout_centerInParent="true"
android:indeterminate = "true"
xmlns:tools = "
http://schemas.android.com/tools"
tools:visibility = "invisible" />
</RelativeLayout>
</LinearLayout>
หลังจากสร้างอินเทอร์เฟซผู้ใช้แล้วสิ่งสำคัญคือต้องจัดรูปแบบปุ่มเพื่อให้ดูน่าสนใจยิ่งขึ้น ในการดำเนินการนี้ให้สร้างไฟล์ XML ใหม่ภายใต้drawable folder และตั้งชื่อไฟล์เป็น btnSignInStyle.xml.
ในไฟล์ XML ให้เพิ่มโค้ดบรรทัดต่อไปนี้ -
<selector xmlns:android = "http://schemas.android.com/apk/res/android">
<item android:state_pressed = "false">
<layer-list>
<item android:right = "5dp" android:top = "5dp">
<shape>
<corners android:radius = "2dp"/>
<solid android:color = "#D6D6D6"/>
</shape>
</item>
<item android:left = "2dp" android:bottom = "2dp">
<shape>
<corners android:radius = "4dp"/>
<gradient android:angle = "270"
android:endColor = "#486EA9" android:startColor = "#486EA9"/>
<stroke android:width = "1dp" android:color = "#BABABA"/>
<padding android:bottom = "10dp"
android:right = "10dp" android:left = "10dp" android:top = "10dp"/>
</shape>
</item>
</layer-list>
</item>
<item android:state_pressed = "true">
<layer-list>
<item android:right = "5dp" android:top = "5dp">
<shape>
<corners android:radius = "2dp"/>
<solid android:color = "#D6D6D6"/>
</shape>
</item>
<item android:left = "2dp" android:bottom = "2dp">
<shape>
<corners android:radius = "4dp"/>
<gradient android:angle = "270"
android:endColor = "#79C791" android:startColor = "#486EA9"/>
<stroke android:radius = "4dp" android:color = "#BABABA"/>
<padding android:bottom = "10dp"
android:right = "10dp" android:left = "10dp" android:top = "10dp"/>
</shape>
</item>
</layer-list>
</item>
</selector>
รหัสด้านบนจะกำหนดสีของปุ่มเมื่อโหลดและเมื่อคลิกมันยังกำหนดรัศมีขอบของปุ่ม
ต่อไปเราจะสร้าง XML สไตล์ที่คล้ายกันดังที่กล่าวมาข้างต้นสำหรับไฟล์ signupปุ่ม. ในการดำเนินการนี้ให้สร้าง XML อื่นภายใต้drawable โฟลเดอร์และเรียกมัน btnSignUpStyle.xml. มันจะสืบทอดทุกอย่างจากbtnSignInStyle.xml. ความแตกต่างเพียงอย่างเดียวคือการไล่ระดับสีเริ่มต้นและสีสิ้นสุดของปุ่ม
เปลี่ยน startColor และ endColor ใน btnSignUpStyle.xml ถึง
<gradient android:angle="270"
android:endColor="#008000" android:startColor="#008000"/>
ไปที่ layout folderและสร้างไฟล์ AXML ใหม่และเรียกมันว่า registerDailog.axml ไฟล์นี้จะมีรายละเอียดการลงทะเบียนสำหรับผู้ใช้ใหม่ในแอพของเรา หน้านี้จะมีสามEditTextsและปุ่มสำหรับส่งข้อมูล เพิ่มรหัสต่อไปนี้ภายในรหัสโครงร่างเชิงเส้นของคุณ
<EditText
android:layout_width = "match_parent"
android:layout_marginBottom = "10dp"
android:layout_marginTop = "25dp"
android:layout_marginRight = "25dp"
android:layout_marginLeft = "25dp"
android:layout_height = "35dp"
android:paddingLeft = "10dp"
android:id = "@+id/txtUsername"
android:hint = "Username"
android:textColor = "#000" />
<EditText
android:layout_width = "match_parent"
android:layout_height = "35dp"
android:id = "@+id/txtEmail"
android:layout_marginBottom = "10dp"
android:layout_marginTop = "25dp"
android:layout_marginRight = "25dp"
android:layout_marginLeft = "25dp"
android:paddingLeft = "10dp"
android:textColor = "#000"
android:hint = "Email" />
<EditText
android:layout_width = "match_parent"
android:layout_height = "35dp"
android:layout_marginBottom = "10dp"
android:layout_marginTop = "25dp"
android:layout_marginRight = "25dp"
android:layout_marginLeft = "25dp"
android:paddingLeft = "10dp"
android:textColor = "#000"
android:id = "@+id/txtPassword"
android:hint = "Password" />
<Button
android:text = "Sign Up"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:id = "@+id/btnSave"
android:textSize = "20dp"
android:textColor = "#fff"
android:textStyle = "bold"
android:height = "70dp"
android:background = "@drawable/btnSignUpStyle"
android:paddingLeft = "5dp"
android:paddingRight = "5dp"
android:paddingTop = "5dp"
android:paddingBottom = "5dp"
android:layout_marginLeft = "25dp"
android:layout_marginRight = "25dp"
android:layout_centerHorizontal = "true" />
จากนั้นเพิ่มคลาสใหม่ที่เรียกว่า signUpDialog.cs. คลาสนี้จะมีรหัสที่จำเป็นในการสร้างกล่องโต้ตอบ ตัวอย่างต่อไปนี้แสดงรหัส
public class OnSignUpEvent:EventArgs {
private string myUserName;
private string myEmail;
private string myPassword;
public string UserName {
get {
return myUserName;
}
set{
myUserName = value;
}
}
public string Email {
get {
return myEmail;
}
set {
myEmail = value;
}
}
public string Password {
get {
return myPassword;
}
set {
myPassword = value;
}
}
public OnSignUpEvent(string username, string
email, string password):base() {
UserName = username;
Email = email;
Password = password;
}
class SignUpDialog:DialogFragment {
private EditText txtUsername;
private EditText txtEmail;
private EditText txtPassword;
private Button btnSaveSignUp;
public event EventHandler<OnSignUpEvent> onSignUpComplete;
public override View OnCreateView(LayoutInflater inflater,
ViewGroup container, Bundle savedInstanceState) {
base.OnCreateView(inflater, container, savedInstanceState);
var view = inflater.Inflate(Resource.Layout.registerDialog, container, false);
txtUsername = view.FindViewById<EditText>(Resource.Id.txtUsername);
txtEmail = view.FindViewById<EditText>(Resource.Id.txtEmail);
txtPassword = view.FindViewById<EditText>(Resource.Id.txtPassword);
btnSaveSignUp = view.FindViewById<Button>(Resource.Id.btnSave);
btnSaveSignUp.Click += btnSaveSignUp_Click;
return view;
}
void btnSaveSignUp_Click(object sender, EventArgs e) {
onSignUpComplete.Invoke(this, new OnSignUpEvent(txtUsername.Text,
txtEmail.Text, txtPassword.Text));
this.Dismiss();
}
}
}
ในโค้ดด้านบนเราได้ใช้ไฟล์ get และ setคุณสมบัติ. get วิธีการคืนค่าตัวแปรในขณะที่ setวิธีการกำหนดค่าให้กับตัวแปรที่ส่งคืน นี่คือตัวอย่าง -
public string Color {
get {
return color;
}
set {
color = value;
}
}
ในตัวอย่างก่อนหน้านี้เราได้สร้างเมธอดที่แทนที่มุมมอง ภายในเมธอดเราได้สร้างไฟล์var เรียกว่า view ซึ่งอ้างอิงถึงไฟล์ registerDialog.axml อยู่ในโฟลเดอร์เค้าโครง
จากนั้นไปที่ mainActivity.cs เพื่อสร้างส่วนโต้ตอบ
private Button signUp;
private Button submitNewUser;
private EditText txtUsername;
private EditText txtEmail;
private EditText txtPassword;
protected override void OnCreate(Bundle bundle) {
base.OnCreate(bundle);
SetContentView(Resource.Layout.Main);
signUp = FindViewById<Button>(Resource.Id.btnSignUp);
submitNewUser = FindViewById<Button>(Resource.Id.btnSave);
txtUsername = FindViewById<EditText>(Resource.Id.txtUsername);
txtEmail = FindViewById<EditText>(Resource.Id.txtEmail);
txtPassword = FindViewById<EditText>(Resource.Id.txtPassword);
signUp.Click += (object sender, EventArgs args) => {
FragmentTransaction transFrag = FragmentManager.BeginTransaction();
SignUpDialog diagSignUp = new SignUpDialog();
diagSignUp.Show(transFrag, "Fragment Dialog");
diagSignUp.onSignUpComplete += diagSignUp_onSignUpComplete;
};
}
void diagSignUp_onSignUpComplete(object sender, OnSignUpEvent e) {
StartActivity(typeof(Activity2));
}
โค้ดด้านบนประกอบด้วยเหตุการณ์การคลิกปุ่มซึ่งเมื่อคลิกจะโหลดกล่องโต้ตอบลงชื่อสมัครใช้ ภายในคลิกปุ่มเราได้สร้างไฟล์SignUpDialog คลาสซึ่งโหลดไฟล์ registerDialog.axml ไฟล์.
จากนั้นเราก็นำมาใช้ FragmentTransaction transFrag = FragmentManager.BeginTransaction(); เพื่อแสดงไฟล์ registerDialog หน้าเป็น Android Dialog Fragment
เราจะเพิ่มอีก .axml เรียกว่าไฟล์ home.axml. เค้าโครงนี้จะเป็นหน้าจอเริ่มต้นเมื่อผู้ใช้เข้าสู่ระบบสำเร็จ ภายในเลย์เอาต์นี้เราจะเพิ่ม textview ดังที่แสดงในโค้ดต่อไปนี้
<TextView
android:text = "You have been succesfully registered. Welcome!"
android:textAppearance = "?android:attr/textAppearanceLarge"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:id = "@+id/textView1" />
ต่อไปเราจะสร้างกิจกรรมสุดท้ายที่เรียกว่า Activity2.cs. ในกิจกรรมนี้เราจะพบกับไฟล์home.axml โดยใช้ findViewById.
สุดท้ายสร้างและเรียกใช้แอปของคุณ จะแสดงหน้าจอต่อไปนี้เป็นเอาต์พุต
หลังจากเสร็จสิ้นขั้นตอนการสร้างแอปของคุณสิ่งสำคัญคือต้องใช้แอปนี้บนอุปกรณ์ Android จริงหรืออนุญาตให้ผู้อื่นดาวน์โหลดแอปของคุณและติดตั้งบนอุปกรณ์ของตน
การเปิดตัวแอปของคุณ
ก่อนปล่อยแอปของคุณสิ่งสำคัญคือต้องแปลงเป็นรูปแบบที่ระบบ Android สามารถอ่านได้ รูปแบบประเภทนี้เรียกว่าไฟล์apk file. เพื่อสร้างไฟล์apk file.
เปิดโครงการของคุณ
ไปที่ Build Menu และเลือก Configuration Manager
บน Configuration Manager ให้ตั้งค่า Active Solution Configuration เพื่อเปิดตัวแอพ
จากนั้นคลิกไฟล์ Build Menu อีกครั้งและเลือก Export Android Package(.apk).
เมื่อเสร็จแล้วไฟล์ apk ไฟล์จะถูกเก็บไว้ในโฟลเดอร์โครงการของคุณ /bin/Release.
การเผยแพร่แอปของคุณ
มี 3 วิธีในการเผยแพร่แอป -
เอกสารแนบออนไลน์
มันเกี่ยวข้องกับการอัปโหลดไฟล์ apkไฟล์ออนไลน์เป็นไฟล์แนบ จากนั้นผู้ใช้ที่มีอุปกรณ์ Android จะสามารถดาวน์โหลดและติดตั้งแอปของคุณบนอุปกรณ์ได้โดยตรง
Google PlayStore
PlayStore เป็นตลาดที่ใหญ่ที่สุดสำหรับแอพ Android ในการอัปโหลดแอปของคุณไปยัง PlayStore คุณต้องมีบัญชีผู้พัฒนากับ Google บัญชีผู้พัฒนาสร้างขึ้นเพียงครั้งเดียวและมีค่าใช้จ่าย $ 25 เพื่อรับใบอนุญาต
การติดตั้งด้วยตนเอง
การติดตั้งด้วยตนเองเกี่ยวข้องกับการติดตั้งไฟล์ .apkไฟล์ที่สร้างขึ้นโดยตรงบนอุปกรณ์จริง คัดลอกไฟล์ไปยังหน่วยความจำกายภาพของอุปกรณ์ Android หรือการ์ด SD จากนั้นเรียกใช้ไฟล์จากอุปกรณ์ของคุณ
โดยค่าเริ่มต้น Android จะบล็อกการติดตั้งแอพที่ไม่ได้มาจาก PlayStore ในการติดตั้งแอพของคุณคุณต้องเปิดใช้งานเพื่อยอมรับการติดตั้งแอพจากไฟล์Settings. โดยไปที่Settings บนอุปกรณ์ของคุณมองหา Security จากนั้นเลือก "อนุญาตการติดตั้งแอปจากแหล่งที่ไม่รู้จัก"