Giả lập ứng dụng IOS trên Windows

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
https://i.ytimg.com/vi/2WWn1h12PuQ/maxresdefault.jpg
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
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ừ Touch vào icon để mở ứng dụng 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
http://www.joshbenson.com/wp-content/uploads/2011/10/iPhone-pixel-flicker-06-720x300.jpg?76fc58

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 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 Xuất hiện biểu tượng dấu x trên icon cho phép xóa icon
https://cms-images.idgesg.net/images/article/2015/08/ipad-gestures-drag-icons-into-dock-7-100609944-orig.jpg
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)

Thuật toán kéo thả


Trên iOS, bạn có thể dễ dàng kéo thả các icon đến các vị trí khác nhau trên màn hình, bộ iOS SDK đã hỗ trợ điều đó. Tuy nhiên, đối với Windows, cần phải nghiên cứu thuật toán để tạo ra behavior này
Ý tưởng chính của thuật toán kéo thả là tạo ra một bản copy của icon cần kéo thả, còn icon thực sự vẫn nằm nguyên nhưng bị set trong suốt.
Điều này khiến người dùng có cảm giác icon đang bị “kéo” đi, nhưng thực tế nó vẫn nằm nguyên vị trí
WPF cung cấp 1 framework element gọi là Adorner cho phép developer tạo ra 1 layer nằm đè lên 1 layer có sẵn. Layer này có thể được thiết kế như là 1 bản sao của layer đã có, developer có thể thay đổi kích thước, vị trí của Adorner này tùy ý
Để implement thuật toán trên, tôi sử dụng WPF adorner để tạo ra bản sao của icon, bản sao này được add các thuộc tính như kích thước, vị trị, độ trong suốt
Để cho Adorner trên có thể di chuyển theo chuột, sự kiện OnPreviewMouseMove của WPF sẽ được override
Lấy trạng thái chuột trái được nhấn thì thực hiện xử lý tạo Adorner
Hàm StartDragInProcAdorner sẽ tạo ra 1 bản copy của icon, bản copy này luôn được vẽ theo tọa độ của chuột, còn icon thực sự sẽ được set opacity = 0 để khiến nó invisible.
Như vậy việc icon được render theo tọa độ chuột đã tạo ra hiệu ứng Drag
Ngoài ra, bạn có thể add them những thuộc tính size, opacity cho bản copy ở trên để tạo hình ảnh bóng mờ khi kéo thả.

Thuật toán dịch chuyển

Quan sát trên iOS, khi thả icon đến gần 1 vị trí nào đó, toàn bộ icon còn lại sẽ được dịch chuyển để nhường chỗ cho icon mới được thả xuống
Khi icon được thả vào góc bên phải, toàn bộ icon sẽ được dịch sang trái và ngược lại Các icon được dịch chuyển một cách từ từ Khi 1 icon bị xóa, các icon còn lại tự động dịch chuyển để điền đầy chỗ trống Khi touch point vào chính giữa khoảng trống giữa 2 icon, thì sự dịch chuyển mới xảy ra

Ý tưởng của thuật toán này là sẽ lưu toàn bộ các icon vào 1 StackPanel. StackPanel trong WPF là 1 layout panels. Trong đó các phần tử con được lưu dưới dạng ngăn xếp (Stack). Các phần tử có thể được sắp xếp theo chiều ngang hoặc chiều dọc tùy vào việc set thuộc tính của StackPanel, khi 1 phần tử bị xóa thì các phần tử còn lại sẽ dịch chuyển để fill vào chỗ trống
Tuy nhiên do StackPanel không có hiệu ứng dịch chuyển từ từ (Animation) nên cần phải customize lại UIElement này bằng cách tạo ra 1 UIElement kế thừa
AnimatedStackPanel có đầy đủ thuộc tính của StackPanel nhưng được add thêm thuộc tính Duration và Deceleration để tạo ra tốc độ dịch chuyển của các icon
Việc tạo ra hiệu ứng dịch chuyển sang trái hay phải của các icon được xử lý bằng thuật toán sau:
So sánh index của drag icon (IDX_Source) và destination icon (IDX_Dest) trong StackPanel, nếu. Nếu IDX_Source > IDX_Dest thì là dịch trái nếu không thì dịch phải
Hiệu ứng dịch chuyển sẽ được tạo ra bằng cách remove icon tại vị trị IDX_Source và chèn lại chính icon đấy vào vị trị IDX_Dest. StackPanel sẽ đẩy các icon fill vào chỗ trống kết hợp với hiệu ứng hoạt hình được tạo thêm vào nên tạo cảm giác các icon như đang di chuyển

Kết luận

Ngoài 2 thuật toán cơ bản trên, thư viện có implement nhiều thuật toán khác nữa như tạo rung, scrolling …Nhưng về cơ bản là sử dụng kĩ thuật Animation trong WPF để tạo ra các chuyển động đánh lừa cảm giác của user
Có thể nói WPF là một bước tiến lớn của Microsoft trong việc phát triển giao diện người dùng do tận dụng được nền tảng đồ họa của phần cứng, dần thay thế được ứng dụng bằng WinForm đã trở nên lỗi thời.
Powered by Blogger.