Phát triển ứng dụng IOS trên Windows (Part 2)

Phát triển ứng dụng IOS trên Windows (Part 2)

Image result for ios app on windows 10

Trong bài viết trước, tôi đã giới thiệu về ý tưởng phát triển bộ thư viện cho phép developer có thể phát triển ứng dụng có giao diện giống iOS trên Windows 8.
Phần tiếp theo của bài viết sẽ trình bày thuật toán để tạo ra các behavior giống iOS trên Window 8

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.
Slide menu
Đ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

  1. 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
  2. Các icon được dịch chuyển một cách từ từ
  3. 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
  4. 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
Drag and Drop

Ý 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.