Giả lập ứng dụng IOS trên Windows (Part 1)

 

Overview

Năm 2007, Apple ra đời chiếc điện thoại iPhone với hệ điều hành iOS. Từ đó tới nay, nhà nhà dùng iPhone, người người xài ứng dụng iOS. Các ứng dụng trên iOS cũng ra đời cùng với sự lớn mạnh của cộng đồng lập trình viên iOS. Chiếc máy tính chạy Windows đã dần bị thay thế bởi những chiếc tablet, smartphone nhỏ gọn nhưng có cấu hình khủng không thua gì máy tính.

Trước tình hình đó, Microsoft cho ra đời chiếc Touch Screen và Windows 10, cho phép user có thể dùng chuột và tay để thao tác với Windows, đem đến những trải nghiệm mới cho người dùng

Câu hỏi đặt ra: Liệu có thể biến chiếc touch screen của bạn thành 1 chiếc iPhone, tablet. Bạn có thể vừa dùng chuột, vừa dùng tay để thao tác với những ứng dụng Windows nhưng lại hoạt động y hệt như iOS ???

Ý tưởng trên đã giúp tôi phát triển một bộ thư viện nhỏ cho phép các lập trình viên Windows có thể tạo ra những ứng dụng có giao diện giống như iOS của Apple. Thư viện này viết bằng C# dùng framework WPF của Microsoft.

Mặc dù được phát triển ở dạng protoype, nhưng thư viện đã cung cấp những API cho phép developer có thể tạo ra những hiệu ứng cơ bản như iOS cho ứng dụng Windows của  mình

iOS behavior

Nếu quan sát kĩ hoạt động của iOS thì bạn sẽ thấy các hiệu ứng trên iOS rất phức tạp 

1. iOS sử dụng những icon như trên để đại diện cho các ứng dụng iOS, khi user touch và giữ icon này. Icon sẽ tự động phóng to lên một cách từ từ
2. Touch vào icon để mở ứng dụng
3. Sau khi thả tay, thì icon lại bé lại và toàn bộ icon còn lại sẽ rung lắc với tâm rung là ngẫu nhiên

4. User vuốt mạnh tay lên màn hình, thì toàn bộ màn hình trượt đi theo quán tính
5. User có thể thay đổi vị trị icon bằng cách kéo thả icon, các icon còn lại tự động dịch chuyển theo hướng trái phải, lên xuống
6. Xuất hiện biểu tượng dấu x trên icon cho phép xóa icon
7. ..

Và còn rất nhiếu hiệu ứng khác nữa, nếu chịu khó vọc sẽ thấy

Đây là những hiệu ứng rất đặc biệt và tạo ra trải nghiệm người dùng tuyệt vời trên iOS.

Thiết kế

Thiết kế một bộ thư viện có chức năng như trên đỏi hỏi những xử lý thuật toán khá phức tạp, vì trên Windows touch screen, bạn không chỉ dùng tay mà còn dùng chuột để xử lý (iOS chỉ dùng tay). 

Các hiệu ứng trên đã được hỗ trợ bởi bộ iOS SDK của Apple, tuy nhiên đối với Windows, bạn phải thiết kế hoàn toàn từ đầu đến cuối

Tuy nhiên, sau một thời gian mày mò nghiên cứu, tôi đã tìm được phương án xử lý

Tạo ra một WPF User Control. 

User Control là một GUI components (giống như các GUI cơ bản như TextBox, Image…) do developer phát triển để tạo ra GUI components riêng biệt cho từng ứng dụng. Bạn có thể lưu những User Control này dưới dạng thư viện liên kết động (DLL) để các ứng dụng khác sử dụng

Trong thư viện này, tôi thiết kế 1 user control đặc biệt có behavior y hệt như icon của iOS.

User control này bao gôm 2 phần:

• Phần GUI được viết bằng ngôn ngữ XAML để tạo giao diện
• Phần Logic để viết bằng C# để xử lý event

XAML là ngôn ngữ do Microsoft phát triển để tạo giao diện cho các ứng dụng WPF, nó cũng tương tự như MXML của Abobe, XML của Android…

1. Phần GUI

Sử dụng thuộc tính RenderTransform và Animation của WPF để tạo ra hiệu ứng phóng to từ từ giống iOS

Thuộc tính RenderTransform

WPF RenderTransform cho phép thay đổi kích thước của 1 GUI components. Bạn có thể thay đổi thuộc tính theo chiều X, chiều Y với các tỉ lệ khác nhau, 

Như vậy bạn có thể làm GUI component zoom to hay nhỏ, zoom từ một tọa độ nào đó bằng cách dùng WPF RenderTransform 

Thuộc tính DoubleAnimation

WPF DoubleAnimation là hiệu ứng hoạt hình của WPF, giúp developer có thể tạo ra hiệu ứng transform với tốc độ khác nhau.

Khi kết hợp 2 thuộc tính trên, bạn sẽ tạo ra được hiệu ứng phóng to thu nhỏ icon giống như của iOS

Thuộc tính Image

Thuộc tính này cho phép developer có thế add hình ảnh cho icon theo ý muốn, chỉ cần truyền đường dẫn tới ảnh cẩn hiển thị là tạo ra hình ảnh

Thuộc tính Hover

Thuộc tính thay đổi độ sáng khi move chuột over icon, cho phép thay đổi độ sáng của icon và chuyển chuột từ mũi tên sang bàn tay

Thuộc tính Text

Là thuộc tính hiển thị label giống như tên ứng dụng trên iOS

Kết quả có được

Các icon zoom to lên và rung với tọa độ khác nhau

Kéo thả các icon như iOS (dùng tay hoặc chuột đều OK)

2. Phần Logic

Phần tiếp theo của bài viết sẽ trình bày thuật toán để tạo ra hiệu ứng kéo thả và dịch chuyển của các icon

Sourc code https://github.com/giaosucan/slide-menu-ios