Tận dụng lợi thế của Xamarin trong việc phát triển ứng dụng iOS

Khi lập trình ứng dụng iOS, nhiều lập trình viên thường chỉ nghĩ tới ngôn ngữ và IDE do Apple cung cấp như Objective-C, Swift và Xcode. Tuy nhiên, đây không phải là những lựa chọn duy nhất. Bạn vẫn có thể tạo được ứng dụng iOS sử dụng rất nhiều ngôn ngữ và frameworks khác.

Xamarin là một trong số những frameworks phổ biến nhất để phát triển các ứng dụng cross-platform cho iOS, Android, OS X và Windows bằng C# và Visual Studio. Điều đặc biệt là Xamarin cho phép bạn chia sẻ code giữa các ứng dụng iOS và Android.

Bạn đang xem: Tận dụng lợi thế của Xamarin trong việc phát triển ứng dụng iOS

So với các frameworks cross-platform khác, Xamarin nắm giữ một lợi thế lớn. Với Xamarin, project của bạn sẽ complies native code và có thể sử dụng APIs native. Điều này đồng nghĩa với việc ứng dụng Xamarin viết tốt sẽ không có gì khác biệt so với ứng dụng viết bằng Xcode. Bạn có thể tham khảo thêm so sánh giữa Xamarin và Native App Development.

Tuy nhiên, một vấn đề đối với Xamarin là giá cả. Với tốc độ tăng giá đột biến, cho đến hiện tại, Xamarin chỉ hấp dẫn các dự án doanh nghiệp có ngân sách lớn.

Tuy nhiên, gần đây, Microsoft đã mua lại Xamarin và công bố rằng Xamarin sẽ được tích hợp trong tất cả các phiên bản mới của Visual Studio, bao gồm phiên bản miễn phí cho các nhà phát triển cá nhân và các doanh nghiệp nhỏ.

Điều này có nghĩa là bạn có thể sử dụng Xamarin miễn phí! Đây là một tin vui đáng mừng, đúng không?

Ngoài việc tiết kiệm chi phí, Xamarin còn mang lại nhiều lợi ích khác như:

• Khai thác các thư viện và công cụ C# hiện có để phát triển ứng dụng di động.
• Sử dụng lại code giữa các ứng dụng trên nhiều nền tảng khác nhau.
• Chia sẻ code giữa các backends ASP.Net và ứng dụng dành cho người dùng.

Xamarin cũng cung cấp rất nhiều công cụ tùy theo nhu cầu của bạn. Để tối ưu hóa việc sử dụng lại code đa nền tảng, hãy sử dụng Xamarin Forms. Xamarin Forms hoạt động rất tốt với các ứng dụng không cần chức năng riêng cho từng nền tảng hoặc giao diện tùy chỉnh cụ thể.

Nếu ứng dụng của bạn yêu cầu tính năng hoặc thiết kế riêng cho từng nền tảng, hãy sử dụng Xamarin.iOS, Xamarin.Android và các module riêng cho từng nền tảng để có thể tương tác trực tiếp với các APIs và frameworks native. Việc sử dụng các module này sẽ giúp bạn tạo ra các giao diện người dùng tùy chỉnh và vẫn có thể chia sẻ code chung trên nhiều nền tảng.

Trong bài viết này, chúng ta sẽ sử dụng Xamarin.iOS để tạo một ứng dụng iPhone hiển thị thư viện hình ảnh của người dùng. Điều đặc biệt là bạn không cần có kinh nghiệm lập trình iOS hoặc Xamarin, chỉ cần kiến thức căn bản về ngôn ngữ lập trình C#.

Khởi động

Để lập trình một ứng dụng iOS với Xamarin và Visual Studio, lý tưởng nhất là bạn có hai thiết bị: một thiết bị Windows để chạy Visual Studio và viết code cho dự án của bạn, và một thiết bị Mac có Xcode cài sẵn làm build host. Đây phải là một mạng tiếp cận được trong suốt quá trình lập trình và kiểm tra từ máy tính Windows của bạn.

Tốt nhất là hai thiết bị nên ở gần nhau để khi bạn build và chạy trên Windows, iOS Simulator sẽ tải trên Mac.

Lý do bạn cần hai thiết bị là:

• Đối với những bạn chỉ sử dụng Mac, Xamarin sẽ cung cấp IDE cho OS X, nhưng trong bài viết này, chúng ta sẽ chỉ tập trung vào sự hỗ trợ của Visual Studio. Nếu bạn muốn theo dõi đầy đủ, bạn có thể chạy Windows như một thiết bị ảo trên Mac của mình. Công cụ như VMWare Fusion hoặc VirtualBox nguồn mở sẽ rất hữu ích. Nếu sử dụng Windows như một thiết bị ảo, bạn cần đảm bảo rằng Windows có mạng tiếp cận đến Mac. Nhìn chung, nếu bạn có thể ping địa chỉ IP của Mac từ Windows bên trong, thì không vấn đề gì cả.

• Đối với những bạn chỉ sử dụng Windows, tôi khuyến nghị bạn nên mua ngay một chiếc Mac. Tôi sẽ đợi bạn 🙂 Nếu không thì, có các dịch vụ host như MacinCloud hoặc Macminicolo sẽ hỗ trợ truy cập từ xa vào Mac.

Cài đặt Xcode và Xamarin

Để bắt đầu, bạn cần tải và cài đặt Xcode và Xamarin Studio trên máy Mac của bạn.

Tiếp theo, mở package installer và nhấp đôi vào file Install Xamarin.app. Chấp nhận các điều khoản và điều kiện.

Trình cài đặt sẽ tìm các công cụ đã được cài đặt và các phiên bản nền tảng hiện tại. Trình cài đặt sẽ hiển thị một danh sách các môi trường lập trình. Hãy nhớ chọn Xamarin.iOS, sau đó nhấp tiếp tục.

Tiếp theo, bạn sẽ thấy một danh sách xác nhận tổng hợp các mục đã cài đặt. Nhấn tiếp tục để tiếp tục quá trình cài đặt. Bạn sẽ nhận được một tóm tắt và một tùy chọn để khởi chạy Xamarin Studio. Thay vào đó, nhấp vào Quit để hoàn thành quá trình cài đặt.

Cài đặt Visual Studio và Xamarin

Với bài viết này, bạn có thể sử dụng bất kỳ phiên bản nào của Visual Studio, bao gồm phiên bản miễn phí Community Edition. Một số tính năng có thể không có trong Community Edition, nhưng điều đó không làm trở ngại cho việc phát triển các ứng dụng phức tạp.

Máy tính Windows của bạn nên đáp ứng các yêu cầu hệ thống tối thiểu của Visual Studio. Để trải nghiệm lập trình mượt mà, bạn cần ít nhất 3GB RAM.

Nếu bạn chưa cài đặt Visual Studio, hãy tải bộ cài đặt Community Edition bằng cách nhấp vào nút “Download Community 2015” trên trang web của Community Edition.

Chạy trình cài đặt để bắt đầu quá trình cài đặt và chọn tùy chọn cài đặt theo yêu cầu. Trong danh sách các tính năng, mở rộng Cross Platform Mobile Development và chọn C#/.NET.

Chọn tiếp tục và hoàn tất quá trình cài đặt.

Nếu bạn đã cài đặt Visual Studio nhưng không có các công cụ Xamarin, hãy chọn Programs and Features trên máy tính Windows và tìm đến Visual Studio 2015. Chọn nó và nhấp vào “Change” để tiến tới phần cài đặt, sau đó chọn “Modify”.

Xamarin sẽ xuất hiện trong Cross Platform Mobile Development dưới dạng C#/.NET. Chọn “Update” để cài đặt.

Tạo App

Mở Visual Studio và chọn File -> New Project. Sau khi Visual C# mở rộng iOS, chọn iPhone và chọn template Single View App. Template này tạo một ứng dụng với view controller đơn giản để quản lý view trong một ứng dụng iOS.

Đối với “Name” và “Solution Name”, nhập ImageLocation. Chọn một địa điểm cho máy tính của bạn để phát triển ứng dụng và nhấp OK để tạo project.

Xem thêm : 2 App treo máy kiếm tiền cực kì uy tín

Visual Studio sẽ khuyến khích bạn biến Mac thành Xamarin build host:

1. Trên Mac, mở System Preferences và chọn Sharing.
2. Bật Remote Login.
3. Thay đổi Allow access to Only these users và thêm 1 người dùng có quyền access Xamarin và Xcode trên Mac.
4. Loại bỏ các hướng dẫn và trở lại máy tính Windows.

Trở lại Visual Studio, bạn sẽ được hỏi xem có nên chọn Mac làm build host hay không. Chọn thiết bị Mac và nhấp Connect. Nhập tên người dùng và mật khẩu, sau đó nhấp Login.

Bạn có thể xác nhận rằng bạn đã kết nối bằng cách kiểm tra thanh toolbar.

Chọn iPhone Simulator trong dropdown của Solution Platform – nó sẽ tự động chọn một simulater từ build host. Bạn cũng có thể thay đổi simulator bằng cách nhấp vào mũi tên nhỏ gần với simulator hiện tại.

Build và chạy bằng cách nhấp vào mũi tên Debug xanh hoặc phím tắt F5.

Ứng dụng sẽ được compile và execute, nhưng bạn không thể nhìn thấy nó hiển thị trên Mac build host. Đây là lý do tại sao bạn nên có hai thiết bị gần nhau 🙂

Để dừng ứng dụng, nhấp vào nút dừng màu đỏ (phím tắt Shift + F5).

Tạo Collection View

Ứng dụng sẽ hiển thị các thumbnail của hình ảnh của người dùng trong một Collection View – đây là một iOS control để hiển thị nhiều items dạng lưới.

Để chỉnh sửa storyboard của ứng dụng (bao gồm các “scenes” cho ứng dụng), mở Main.storyboard trong Solution Explorer.

Mở Toolbox và gõ “collection” vào hộp văn bản để lọc danh sách các items. Trong phần Data Views, kéo Collection View từ Toolbox vào giữa màn hình trống.

Chọn Collection View, bạn sẽ thấy các hình tròn ở mỗi phía của màn hình. Nếu bạn thấy các hình vuông ở mỗi phía, nhấp lần nữa để chuyển sang hình tròn.

Nhấp và kéo mỗi vòng tròn vào góc của view cho đến khi các dòng xanh xuất hiện. Góc đó chụp lấy nơi này khi bạn thả chuột.

Bây giờ, bạn sẽ thiết lập Auto Layout Constraints cho Collection View để đảm bảo việc resize view khi thiết bị quay. Trong thanh toolbar ở đầu storyboard, nhấp vào biểu tượng cộng xanh bên cạnh nhãn CONSTRAINTS. Cách này sẽ tự động thêm constraints cho Collection View.

Constraints đã được tạo ra sẽ chuẩn nhưng bạn cần chỉnh sửa một số điểm. Trong cửa sổ Properties, chuyển sang tab Layout và cuốn xuống phần Constraints.

Hai constraints xác định từ các góc là chuẩn xác, nhưng độ dài và rộng của constraints thì không. Xóa constraints Width và Height bằng cách nhấp vào biểu tượng X ở mỗi constraints.

Lưu ý rằng Collection Views thay đổi màu sắc để chỉ ra rằng constraints cần được chỉnh sửa.

Nhấp vào Collection View để chọn. Nếu bạn thấy các vòng tròn trước đó, nhấp lần nữa để thay đổi các biểu tượng thành hình chữ T màu xanh lá cây. Kéo và thả chữ T vào góc trên của Collection View và thả để tạo một constraint tương quan với phần trên của view.

Cuối cùng, kéo và thả chữ T vào bên trái của Collection View cho đến khi bạn thấy một hàng chấm xanh. Thả để tạo một constraint gắn với góc trái của view.

Lúc này, constraints của bạn sẽ trông như sau:

Configure Collection View Cell

Bạn có thể thấy hình vuông đã được định dạng trong Collection View, trong đó vòng tròn màu đỏ chứa một dấu chấm hỏi. Đây là một Collection View Cell đại diện cho một item đơn trong Collection View.

Để cấu hình kích thước của Cell này trong Collection View, chọn Collection View và cuộn lên phần trên của tab Layout. Dưới Cell Size, đặt Width và Height thành 100.

Tiếp theo, nhấp vào vòng tròn màu đỏ trên Collection View Cell. Một cửa sổ pop-up sẽ thông báo rằng bạn chưa đặt chuẩn sử dụng lại Cell Identifier, do đó hãy chọn Cell và chuyển sang tab Widget. Cuộn xuống phần Collection Reusable View và chọn ImageCellIdentifier cho Identifier. Tín hiệu lỗi sẽ biến mất.

Tiếp tục cuộn xuống phần Interaction. Đặt Background Color bằng cách chọn Predefined và màu blue.

Màn hình sẽ trông như sau:

Cuộn lên phần trên của section Widget và đặt Class thành PhotoCollectionImageCell.

Visual Studio sẽ tự động tạo một class có tên này, kế thừa từ UICollectionViewCell và tạo PhotoCollectionImageCell.cs cho bạn.

Tạo Collection View Data Source

Bạn sẽ tạo bổ sung 1 class để hoạt động như UICollectionViewDataSource, cung cấp dữ liệu cho Collection View.

Xem thêm : Ứng Dụng Phần Mềm Quản Lý Bán Hàng Trên Điện Thoại Di Động

Nhấp chuột phải vào ImageLocation trong Solution Explorer. Chọn Add -> Class, đặt tên class thành PhotoCollectionDataSource.cs và nhấp Add.

Mở PhotoCollectionDataSource.cs đã được thêm và thêm đoạn sau vào phần trên của file:

using System;
using System.Collections.Generic;
using System.Linq;
using Foundation;
using UIKit;

namespace ImageLocation
{
    public class PhotoCollectionDataSource : UICollectionViewDataSource
    {
        PHFetchResult imageFetchResult;
        PHImageManager imageManager;

        public PhotoCollectionDataSource()
        {
            // Get the fetch result for all photos, sorted by descending creation date
            imageFetchResult = PHAsset.FetchAssets(PHAssetMediaType.Image, null);
            imageManager = new PHImageManager();
        }

        public override UICollectionViewCell GetCell(UICollectionView collectionView, NSIndexPath indexPath)
        {
            var cell = (PhotoCollectionImageCell)collectionView.DequeueReusableCell(ImageCollectionViewController.ImageCellIdentifier, indexPath);

            // Get the asset for this cell
            var item = imageFetchResult[indexPath.Item];
            var asset = (PHAsset)item;

            // Request an image for the asset from the PHCachingImageManager.
            imageManager.RequestImageForAsset(asset, cell.ImageView.Bounds.Size, PHImageContentMode.AspectFill, null, (image, info) =>
            {
                // Set the cell's thumbnail image if it's still showing the same asset.
                if (asset == cell.Asset)
                {
                    cell.ImageView.Image = image;
                }
            });

            return cell;
        }

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

Sau đó, thêm 2 fields sau vào PhotoCollectionDataSource:

PHFetchResult imageFetchResult;
PHImageManager imageManager;

imageFetchResult sẽ lưu trữ một danh sách đã được sắp xếp các entity hình ảnh và bạn sẽ có danh sách các photo từ imageManager.

Ngay trên phương thức GetCell(), thêm constructor này:

public PhotoCollectionDataSource()
{
    // Get the fetch result for all photos, sorted by descending creation date
    imageFetchResult = PHAsset.FetchAssets(PHAssetMediaType.Image, null);
    imageManager = new PHImageManager();
}

Constructor này lấy danh sách các hình ảnh trong ứng dụng Photos và lưu trữ kết quả trong field imageFetchResult. Sau đó nó sẽ đặt imageManager, từ đó ứng dụng sẽ truy vấn nhiều thông tin hơn cho mỗi hình ảnh.

Để giải phóng đối tượng imageManager khi class kết thúc, thêm destructor sau vào dưới constructor:

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

Để phương thức GetItemsCount và GetCell sử dụng các nguồn này và trả lại hình ảnh thay vì cell rỗng, thay đổi GetItemsCount như sau:

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

Sau đó thay thế GetCell bằng đoạn sau:

public override UICollectionViewCell GetCell(UICollectionView collectionView, NSIndexPath indexPath)
{
    var cell = (PhotoCollectionImageCell)collectionView.DequeueReusableCell(ImageCollectionViewController.ImageCellIdentifier, indexPath);

    // Get the asset for this cell
    var item = imageFetchResult[indexPath.Item];
    var asset = (PHAsset)item;

    // Request an image for the asset from the PHCachingImageManager.
    imageManager.RequestImageForAsset(asset, cell.ImageView.Bounds.Size, PHImageContentMode.AspectFill, null, (image, info) =>
    {
        // Set the cell's thumbnail image if it's still showing the same asset.
        if (asset == cell.Asset)
        {
            cell.ImageView.Image = image;
        }
    });

    return cell;
}

Các bước trên sẽ có ý nghĩa như sau:

1. indexPath là một tham chiếu đến đối tượng trong Collection View để trả về. Thuộc tính Item là một index đơn giản. Đây là nơi bạn lấy asset ở index này và chuyển sang PHAsset.

2. Bạn sử dụng imageManager để yêu cầu hình ảnh cho asset ở trên với kích thước và chế độ nội dung mong muốn.

3. Rất nhiều phương thức trong framework iOS sử dụng execution đã bị hoãn cho các request tốn thời gian hoàn thiện, như RequestImageForAsset chẳng hạn, và sẽ lấy một delegate để gọi trong quá trình hoàn thành. Khi request hoàn thành, delegate sẽ được gọi với hình ảnh và thông tin về nó.

4. Cuối cùng, hình ảnh được đặt trong cell.

Build và chạy ứng dụng. Bạn sẽ thấy một thông báo yêu cầu quyền truy cập.

iOS cân nhắc quyền truy cập vào hình ảnh của người dùng để tránh thông tin nhạy cảm và nhắc nhở người dùng về quyền truy cập. Tuy nhiên, ứng dụng cũng phải đăng ký để được thông báo khi người dùng chấp nhận quyền truy cập này.

Đăng ký để thực hiện các thay đổi về truy cập hình ảnh

Đầu tiên, thêm một phương thức vào lớp PhotoCollectionDataSource để thông báo về việc truy vấn các thay đổi hình ảnh. Thêm đoạn sau vào cuối lớp:

public void RegisterChangeObserver(PHPhotoLibraryChangeObserver observer)
{
    PHPhotoLibrary.SharedPhotoLibrary.RegisterChangeObserver(observer);
}

Tiếp theo, mở ViewController.cs và thêm phần sau vào đầu file:

using Photos;

Sau đó thêm code này ở cuối phương thức ViewDidLoad():

PHPhotoLibrary.RequestAuthorization(status =>
{
    if (status == PHAuthorizationStatus.Authorized)
    {
        InvokeOnMainThread(() =>
        {
            var photoDataSource = new PhotoCollectionDataSource();
            var layout = new UICollectionViewFlowLayout();
            var collectionView = new UICollectionView(View.Bounds, layout);
            collectionView.RegisterClassForCell(typeof(PhotoCollectionImageCell), ImageCollectionViewController.ImageCellIdentifier);
            collectionView.DataSource = photoDataSource;

            View.AddSubview(collectionView);
        });
    }
});

Đây là kết quả:

1. Ứng dụng đăng ký một delegate trong thư viện hình ảnh chia sẻ để bạn có thể gọi nó bất kỳ lúc nào khi thư viện hình ảnh thay đổi.

2. InvokeOnMainThread() đảm bảo rằng các thay đổi về giao diện luôn được xử lý trên luồng chính; ngược lại có thể dẫn đến sự cố.

3. Bạn có thể gọi photoDataSource.ReloadPhotos() để tải lại các hình ảnh và collectionView.ReloadData() để yêu cầu collection view vẽ lại.

Cuối cùng, bạn sẽ xử lý trường hợp ban đầu – nơi ứng dụng vẫn chưa được truy cập vào hình ảnh – và yêu cầu quyền truy cập.

Trong ViewDidLoad(), thêm code sau trước khi thiết lập photoDataSource:

PHPhotoLibrary.RequestAuthorization(status =>
{
    if (status == PHAuthorizationStatus.NotDetermined)
    {
        PHPhotoLibrary.RequestAuthorization(_ => return);
    }
});

Build và chạy ứng dụng. Nó yêu cầu quyền truy cập vào hình ảnh, và sau khi nhấp OK, ứng dụng sẽ hiển thị Collection View với các thumbnails của tất cả các hình ảnh trong thiết bị!

Nguồn: raywenderlich

Nguồn: https://laptrinhc.edu.vn
Danh mục: App