Nâng cao kỹ năng thiết kế giao diện với Custom View

Custom View

Trong quá trình lập trình ứng dụng IOS thì chủ yếu có hai công việc chính đó là thiết kế giao diện và xử lý dữ liệu. Cả hai công việc này để làm tốt được thì đều cần phải được rèn luyện liên tục theo thời gian. Với thiết kế giao diện thì chúng ta có thể sử dụng các View, Controls mặc định trong các framework của Apple. Ngoài ra chúng ta cũng có thể tự tạo ra các Component của riêng mình để tạo sự mới mẻ đối với người dùng, cũng như để thực hiện nhiệm vụ hiển thị các giao diện phức tạp. Các component này sẽ được gọi chung là CustomView .

Khi nào cần tạo Custom View ?

- Trong ứng dụng của bạn có một số UI đẹp mắt và sau đó bạn muốn sử dụng lại nó tại  ứng dụng khác, hoặc đơn giản là sử dụng lại tại các màn hình khác trong chính ứng dụng.

- Khi ViewController hoặc View hiện tại quá phức tạp, cần phải tách nhỏ ra thành các CustomView con để dễ quản lý hơn. 

Các bước xây dựng Custom View 

- Xác định giao diện, nhiệm vụ của View mình muốn Custom 

- Xác định các config dành cho View, ví dụ: tại Controller A thì View có Text màu đỏ nhưng ở Controller B thì View có Text màu đen. Bước này thì có thể thực hiện liên tục trong quá trình Custom View. 

- Xác định các CallBack của View để phản ánh tương tác của người dùng. Ví dụ: Custom Button thì cần có Callback khi người dùng bấm vào Button đó.

- Cuối cùng, thực hiện custom.

Thực hiện Custom Slider

Để bạn làm quen với CustomView thì mình sẽ giới thiệu lại quá trình mình đã CustomView trong dự án thực tế qua ví dụ sau đây.

Mình được giao nhiệm vụ thiết kế màn hình Play video có giao diện như hình bên dưới kèm theo các yêu cầu sau:

- Có button Play/Pause.

- Hiển thị thời gian phát, thời gian còn lại của video.

- Thanh Slider cho phép thay đổi thời gian phát, trong đó thanh Slider có các yêu cầu thêm như sau:

+ Cho phép Tap vào một vị trí và play video tại thời điểm đó

+ Cho phép kéo thả ThumbView để xác định thời điểm play video .

+ Bắt đầu kéo thì phải Pause Video, sau khi nhả tay thì thực hiện Play.

Với những yêu cầu như vậy thì sẽ xác định được là sẽ phải custom một class Slider , vừa thoả mãn các yêu cầu thiết kế, vừa có tái sử dụng sau này.

- Đầu tiên,  xác định các config của Slider bao gồm: màu ThumbView, màu slider bên trái, màu slider bên phải và vị trí của ThumbView

- Tiếp theo, xác định callback của Slider, mình xử dụng Delegate để phản ánh callback.

Bước cuối cùng là triển khai xây dựng CSlider, mình đã viết Demo Tại đây

Tổng Quát

Ngoài việc CustomView bằng Code thì chúng ta cũng có thể tạo giao diện từ file .Xib và thực hiện load vào CustomClass. Hoặc là, sử dụng Coregraphics để Draw.

Xây dựng giao diện ứng dụng không hề đơn giản, mà cần nhiều kinh nghiệm, cũng như khả năng logic tốt. Do đó, chỉ có thể tiến bộ dần dần theo thời gian. Và dần dần bạn sẽ rút ngắn được thời gian phát triển ứng dụng của mình.