Lập trình iOS trên Cross-PlatForm Framework Xamarin

Khi tạo ứng dụng iOS, lập trình viên thường sử dụng ngôn ngữ Objective-C hoặc Swift cùng với IDE do apple cung cấp. Tuy nhiên nó không phải là lựa chọn duy nhất, bạn có thể tạo các ứng dụng iOS sử dụng nhiều công cụ cũng như ngôn ngữ khác.

Một trong những sự lựa chọn được nhiều người biết đến là Xamarin, nó một framework đa nền tảng, nó cho phép bạn phát phiển ứng dụng iOS, Android, OS X và Windows sử dụng C# và Visual Studio. Lợi ích lớn nhất mà Xamarin đem lại là nó có thể cho phép bạn chia sẻ code giữa iOS và Android app.

Với Xamarin, ứng dụng của bạn biên dịch sang mã native. Có nghĩa là một app Xamarin nên được phân biệt với một app khác được lập trình bằng Xcode.

Nhập môn

Để phát triển một iOS app với Xamarin and Visual Studio, bạn có cần:

1)Một máy cài Windows để chạy Visual Studio.

2)Một máy Mac và cài đặt Xcode để thực hiện một số thao tác như xây dụng một host, để khi lập trình thì nó cho phép truy cập để phát triển và test từ máy cài windows.

Cài đặt Xcode và Xamarin

Đây là link download trên Mac. Sau khi cài Xcode, download Xamarin Studio và cài đặt. Bạn nhớ chọn Xamarin.iOS.

Cài đặt Visual Studio và Xamarin

Bài thường dẫn này sử dụng bất kỳ version nào của Visual Studio, download visual studio và cài đặt. Bạn cần chú ý khi cài đặt ở danh sách các chức năng, phần mở rồng Coss Playform Mobile Development nhớ chọn C#/.NET(Xamarin v4.0.3).

Chọn Next và chờ cho nó cài xong. Nếu đã cài đặt xong Visual Studio nhưng chưa có Xamarin, vào Programs and Features/ Change/Modify.

Chọn C#/.NET(Xamarin v4.0.3)  ở dưới Cross Playform Mobile Development là chọn nó rồi sau đó ấn Update để bắt đầu cài đặt.

Tạo ứng dụng

Mở Visual Studio và chọn File\New\Project, chú ý là phần mở rộng chọn iOS/iPhone và chọn Single View App. Nó sẽ tạo một view controller để có thể viết các đoạn mã.

Với Name và Solution Name, đặt tên ImageLocation. Chọn một đường dẫn trên máy của bạn để lưu app và chọn OK.

Visual Studio sẽ thông báo cho bạn để chuẩn bị cho việc Xamarin cài đặt host:

1. Bât Mac, mở System Preferences và chọn Sharing.
2. Bật Remote Login.
3. Thay đổi Allow access thành Only these users.
4. Sau đó tắt đi và quay lại Windows.

Quay lại với Visual Studio, bạn sẽ được yêu cầu chọn Mac như host. Chọn máy Mac của bạn sau đó ấn Connect. Điền tài khoản và mật khẩu sau đó click Login.

Để chắc chắn bạn cho thể xem trên thanh toolbar, iPhoneSimulator mặc định được chọn nhưng bạn cũng có thể thay đổi thiết bị giả lập.

Ấn vào nút xanh như dưới đây để chạy.

Ứng dụng sẽ chạy nhưng bạn sẽ không thấy nó chạy trên Windows đấy cũng là lý do tại sao phải sử dụng 2 thiết bị. Trong đó Mac đóng vai trò như là host máy windows sẽ kết nối đến nếu bạn thấy similator chạy và hiển thị lên như sau thì đã thành công rồi đó.

Tạo Collection View

Ví dụ này sẽ hiển thị các ảnh để người dùng có thể chọn vậy chúng ta sẽ sử dụng Collection View, nó là một đối tượng của iOS để hiển thị nhiều đối tượng dưới dạng lưới.

Để chỉnh sửa storyboard(nó chưa các màn hình của app), open Main.storyboard ở Solution Explorer.

Mở Toolbox và gõ collection vào đó để tìm kiếm danh sách của đối tượng. Ở dưới Data Views, kéo Collection View từ toolbox vào giữa của view như sau:

Chọn collection view, khi chọn đúng thì bạn sẽ thấy cái đường viền của đối tượng.

Tiếp theo chúng ta layout cho collection view để khi thay đổi kich cớ màn hình thì nó cũng sẽ tự động thay đổi. Ở phía trên có thanh toolbar bạn ấn vào cái dấu cộng màu xanh để có thể tự động tạo ràng buộc cho đối tượng.

Thông thường thì các ràng buộc thường đúng, nhưng bạn cần chỉnh sử lại một chút. Ở cửa xổ các thuộc tính, đổi sang mục Layout và kéo xuống dưới đến mục Constraints.

Ở đây có 2 contraints ở trên cùng là xác định toạ độ X, Y là đúng nhưng 2 contraints về Width và Height thì chưa chuẩn. Để xoá thì ấn vào nút X.

Chú ý: Bạn sẽ thấy quanh đối tượng collectionview có viền màu cam. Đây chỉ là một thông báo cần phải sửa.

Chọn collectionview, nếu bạn thấy các vòng tròn như trước đấy, ấn lại vào nó để thay đổi các icons để thành T shapes màu xanh, tiếp theo các bạn tạo ràng buộc top, left,… để có thể có rành buộc về width, height bài này có nhiều cách. Sau khi hoàn thành phần constraint thì nó sẽ như sau, nếu bàn nào đã biết về lập trình iOS thì phần này cũng không khác nhiều khi làm trên Xcode.

Làm việc với CollectionView Cell

Để cấu hình kích thước cho cell, properties/Collection View Size ở đây các bạn có thể thay đổi chiều dài và cao bài này tôi để 100, 100.

Tiếp theo, chọn vòng tròn đỏ ở collection view, một pop-up sẽ thông báo bạn chưa gán định danh cho cell, bạn chọn vào cell và đặt identifier cho nó như sau.

Để thay đôi màu nền thì kéo xuống dưới và chọn màu muốn thay đổi.

Sau khi thay đổi thì nó sẽ như sau:

Ở bên mục Widget bạn kéo lên trên và gán class là PhotoCollectionImageCell

Visual Studio sẽ tự động tạo một class với tên đó và được kết thừa từ UICollectionviewCell, và tạo PhotoCollectionImageCell.cs.

Tạo dữ liệu cho CollectionView

Bạn cần tạo bằng tay class được kế thừa từ UICollectionViewDataSource để cung cấp dữ liệu cho collection view.

Ấn chuột phải vào ImageLocation ở Solution Explorer -> Add\Class đặt tên là: PhotoCollectionDataSource.cs và ấn Add.

Mở file vừa tạo và thêm đoạn mã sau:

using UIKit;

Cho phép sử dụng framework UIKit

Định nghĩa lại class như sau:

public class PhotoCollectionDataSource : UICollectionViewDataSource
{
}

Hãy nhớ cái định danh bạn đặt cho cell ở trên vì dưới đây phải sử dụng để nó để có thể tạo cell. Thêm các đoạn mã sau:

private static readonly string photoCellIdentifier = "ImageCellIdentifier";

Lớp UIColectionViewDataSource chứa 2 phương thức phải khai báo đó là:

public override UICollectionViewCell GetCell(UICollectionView collectionView, 
    NSIndexPath indexPath)
{
    var imageCell = collectionView.DequeueReusableCell(photoCellIdentifier, indexPath)
       as PhotoCollectionImageCell;
 
    return imageCell;
}
 
public override nint GetItemsCount(UICollectionView collectionView, nint section)
{
    return 7;
}

GetCell() cũng giống như cellforrowAtIndexPath bên obj-c, swift.

Tương tư như các phương thực khác cũng có thể suy ra như trên.

Tiếp theo bạn cần tạo ãnh xạ từ ViewController đến CollectionView(cũng tương tự như Xcode). Chọn Main.storyboard -> Widget điền tên collectionView vào phần định danh

Visuak Studio sẽ tự động một biến đại diện cho ViewController

Chú ý: Bạn sẽ không thấy biết đó cở ViewController.cs. Để thấy biến này, ấn vào bện trái của thánh điều hướng để có thể thấy ViewController.designer.cs. Nó chứa biến collectionView(visual studio tự động tạo ra).

Mở ViewController.cs ở tab Solution Explorer và thêm các trường sau:

private PhotoCollectionDataSource photoDataSource;

Cuối cùng thêm các đoạn mã sau vào ViewDidLoad()

photoDataSource = new PhotoCollectionDataSource();
collectionView.DataSource = photoDataSource;

Đoạn mã trên để tạo một biến có kiểu PhotoCollectionDataSource rồi sau đó gán biến đó cho DataSource của collectionView.

Bằng cách này photoDataSource sẽ cung cấp dữ liệu cho coleltionView.

Chạy xem thì bạn sẽ thấy nó hiển thị 7 hình vuông màu xanh.

Hiển thị các ảnh

Tiếp theo chúng ta sẽ sẽ hiển thị các ảnh lên CollectionView. Để bắt đầu bạn thêm một view để hiển thị một ảnh trên collection view. Ở mục Widget, kéo xuống và thay đổi màu nền thành mặc định.

Mở Toolbox, tìm Image View sau đó kéo một Image View lên collection view Cell. 

Tối tượng image view sẽ khởi tạo to hơn cell, để chỉnh lại nó thì chọn nó, Properties\ Layout ở đây các bạn có thể chỉnh size cho nó.

Chuyển sang mục Widget ở phần identity đặt tên cellImageView. Visual Studio sẽ tự động tạo một trường tên cellImageView cho bạn.

Kéo lên phần View và thay đổi Mode thành Aspect Fill(giống như Xcode).

Để đảm bảo tính bảo mật thì tôi đã khai báo các trường không cho public để các classes khác không thể truy cập. Vậy chúng ta sẽ cần tạo hàm getter và setter.

Mở PhotoCollectionImageCell.cs và thêm phương thức sau:

public void SetImage(UIImage image)
{
    cellImageView.Image = image;
}

Tiếp theo chúng ta sẽ cập nhật các đoạn mã trong PhotoCollectionDataSource.cs:

using Photos;

Trường imageFetchResult sẽ chưa một danh sách các ảnh, bạn sẽ lấy các photos này qua đối tượng imageManager.

Mục tiêu của chúng ta đó la lấy dữ liệu sau đó cho vào phương thưc GetCell để nó hiển thị lên, vậy các bạn thêm các đoạn mã sau đây:

public PhotoCollectionDataSource()
{
    imageFetchResult = PHAsset.FetchAssets(PHAssetMediaType.Image, null);
    imageManager = new PHImageManager();
}

Hàm khởi tạo này lây ra danh sách tất cả các ảnh ở assets và gán vào imageFetchResult.

Tiếp theo tôi sử dụng Dispose đối tượng imageManager khi kết thúc việc thêm và thêm nó vào hàm destructor.

~PhotoCollectionDataSource()
{
    imageManager.Dispose();
}

Với 2 hàm GetItemsCount và GetCell thì sẽ trả về số lượng photos và ô cell.

public override nint GetItemsCount(UICollectionView collectionView, nint section)
{
    return imageFetchResult.Count;
}

public override UICollectionViewCell GetCell(UICollectionView collectionView, 
    NSIndexPath indexPath)
{
    var imageCell = collectionView.DequeueReusableCell(photoCellIdentifier, indexPath) 
        as PhotoCollectionImageCell;
 
    // 1
    var imageAsset = imageFetchResult[indexPath.Item] as PHAsset;
 
    // 2
    imageManager.RequestImageForAsset(imageAsset, 
        new CoreGraphics.CGSize(100.0, 100.0), PHImageContentMode.AspectFill,
        new PHImageRequestOptions(),
         // 3
         (UIImage image, NSDictionary info) =>
        {
           // 4
           imageCell.SetImage(image);
        });
 
    return imageCell;
}

Giải thích các phần trong hàm trên:

1. Indexpath chứa một tham chiều đến item trong collection view. Để từ đó có thể hiển thị dữ liệu đúng vào ô với index đó.
2. Sử dụng imageManager để lấy ra các ảnh của asset.
3. Nếu bạn đã lập trình obj-c hoặc swift thì việc sử dụng các Api kèm theo block để xác định xem lúc nào method đấy hoàn tất thì cũng giống nhau thôi và RequestImageForAsset là một phương thức khi toàn thành thì sẽ trả về một block.
4. Cối cùng lấy ảnh và gán cho cell thôi.

Chạy ứng dụng xem kêt quả, bạn sẽ thấy nó yêu cầu quyền truy cập ở lần đầu tiên chạy app.

Sau khi bạn ấn OK thì nó không hiện lên gì cả. Đừng buồn tiếp theo chúng ta sẽ giải quyết vấn đề đó.

Đăng ký khi cho phép truy cập vào Photos

Đầu tiên, bạn thêm phương thức vào class PhotoCollectionDataSource. Để có thể re-query khi ảnh thay đổi.

public void ReloadPhotos()
{
    imageFetchResult = PHAsset.FetchAssets(PHAssetMediaType.Image, null);
}

Tiếp theo mở ViewController.cs và thêm:

using Photos;

Sau đó thêm đoạn mã sau vào ViewDidLoad()

// 1
PHPhotoLibrary.SharedPhotoLibrary.RegisterChangeObserver((changeObserver) =>
{
    //2
    InvokeOnMainThread(() =>
    {
        // 3
        photoDataSource.ReloadPhotos();
        collectionView.ReloadData();
    });
});

Giải thích:

1. Đăng ký một delegate để khi thư viện ảnh của thiết bị thay đổi thì nó sẽ thực hiện khối lệnh ở trong.
2. InvokeOnMainThread() cũng giống như mainqueue thì để chắc chắn việc cập giao diện sử dụng thread 1.
3. Gọi đến phương thức ReloadPhoto để reload  các photos từ data source và colelctionview.

Cuối cùng chỉ còn trường hợp khi người dùng không cho phép truy cập vào photos.

Thêm đoạn mã sau vào ViewDidLoad()

Đoạn mã trên kiểm tra trạng thái hiện tại nếu là NotDetermined thì bật lại hộp thoại để cho người dùng chọn.  

Vậy bây giờ các bạn có thể chạy ứng dụng để xem ứng dụng đơn giản này đã chạy chưa.

Bạn đang muốn tìm kiếm 1 công việc với mức thu nhập cao.
✅ Hoặc là bạn đang muốn chuyển đổi công việc mà chưa biết theo học ngành nghề gì cho tốt.
✅ Giới thiệu với bạn Chương trình đào tạo nhân sự dài hạn trong 12 tháng với những điều đặc biệt mà chỉ có tại IMIC và đây cũng chính là sự lựa chọn phù hợp nhất dành cho bạn:
👉 Thứ nhất: Học viên được đào tạo bài bản kỹ năng, kiến thức chuyên môn lý thuyết, thực hành, thực chiến nhiều dự án và chia sẻ những kinh nghiệm thực tế từ Chuyên gia có nhiều năm kinh nghiệm dự án cũng như tâm huyết truyền nghề.
👉 Thứ hai: Được ký hợp đồng cam kết chất lượng đào tạo cũng như mức lương sau tốt nghiệp và đi làm tại các đối tác tuyển dụng của IMIC. Trả lại học phí nếu không đúng những gì đã ký kết.
👉 Thứ ba: Cam kết hỗ trợ giới thiệu công việc sang đối tác tuyển dụng trong vòng 10 năm liên tục.
👉 Thứ tư: Được hỗ trợ tài chính với mức lãi suất 0 đồng qua ngân hàng VIB Bank.
👉  Có 4 Chương trình đào tạo nhân sự dài hạn dành cho bạn lựa chọn theo học. Gồm có:
1)  Data Scientist full-stack
2)  Embedded System & IoT development full-stack
3)  Game development full-stack
4)  Web development full-stack 
✅ Cảm ơn bạn đã dành thời gian lắng nghe những chia sẻ của mình. Và tuyệt vời hơn nữa nếu IMIC được góp phần vào sự thành công của bạn. 
✅ Hãy liên hệ ngay với Phòng tư vấn tuyển sinh để được hỗ trợ về thủ tục nhập học.
✅ Chúc bạn luôn có nhiều sức khỏe và thành công!