AutoLayout trong ios

Trong hướng dẫn này mình sẽ giới thiệu cho các bạn về autoLayout. Di động đang phát triển theo xu hướng tiện ích người dùng, một chiếc điện thoại không chỉ phục vụ lướt web, nghe nhạc… Mà còn tích hợp rất nhiều dịch vụ giải trí, như chơi game, xem film,thế giới số… để theo thoả mãn nhu cầu người dùng, hãng điện thoại  Apple tuỳ biến tăng kích thước màn hình di động,  cũng như nâng cấp cấu hình. Hiện tại hãng cung cấp bốn loại kích thước iphone tuỳ nhu cầu người dùng, iPhone(4,4s) 3.5 inch,iphone (5, 5s ,5se,5c)  4 inch, iphone (6,6s) 4.7  inch, iphone (6s plus) 5.5 inch, và 9.7 inch với ipad, 7.9 với ipad mini .  Để  chỉ thiết kế một màn hình, mà sử dụng tương đối cho tất cả màn hình, Apple đưa ra khái niệm AutoLayout. Trước xcode 6 giao diện iphone tuỳ chỉnh bằng code, tuy nhiên từ bản xcode 6 tới nay, iphone sử dụng AutoLayout để tuỳ chỉnh giao diện. Tôi tin rằng một developer mới sử dụng AutoLayout sẽ không yêu thương AutoLayout, tuy thế khi nắm kỹ được nó, nó lại là một lợi thế tuyệt vời mà Apple dành cho developer IOS. Thực sự nó rất tuyệt vời chỉ cần nắm chắc luật thay đổi nó là bạn có thể sử dụng nó một cách chuẩn xác và nhẹ nhàng.

– Khởi tạo một project mới và đặt tên:Screen Shot 2016-08-01 at 15.24.33

– Luật Autolayout: 

View1.width=View2.width*A+B  or View2.width=View1.width/A-B/A.

Độ rộng của View1 phụ thuộc tương đối vào View2, như thế các View sẽ phụ thuộc tương đối vào nhau!.

Khi ta căn  chỉnh một View nào đó sẽ ảnh hưởng đến các View phụ thuộc Luật vào nó.

– Bật tắt AutoLayout:

Click vào Main.StoryBoard Screen Shot 2016-08-01 at 15.29.12chọn vào biểu tượng giống như trang giấy, tick vào User Auto LayoutScreen Shot 2016-08-01 at 15.29.21

 

Như thế chúng ta đã cho phép sử dụng AutoLayout cho màn hình thiết kế main.StoryBoard.

– Giới thiệu về các thuộc tính(Constraints) AutoLayout:

Auto

 

4 thuộc tính về căn chỉnh ngoài View: nghĩa là khi sử dụng thì kích thước View bị thay đổi, còn khoảng cách bên ngoài View (fix cứng) không bị thay đổi: left or leading căn bên trái, Right or Trailing căn bên phải, Top căn phía trên, Bottom căn phía dưới.

2 thuộc tính fix cứng kích thước View đó là: width và height của View.

– Các lỗi báo hiệu cần lưu ý:

Đối với lỗi màu đỏ như hình vẽ là thiếu luật or sai luật AutoLayout.

Đối với màu vàng là cảnh báo chưa Update Constraints, or Update Frame do ta kéo thả sai với kích thước luật AutoLayout.

Screen Shot 2016-08-01 at 15.51.12 Screen Shot 2016-08-01 at 15.51.37

 

– Giới thiệu về các cách tạo Constraints.

Vào file main.StoryBoard: đổi màu background, kéo vào một UIView:

Screen Shot 2016-08-01 at 16.03.48

kéo vào trông màn hình như sau:

Screen Shot 2016-08-01 at 16.03.06

 

Để tạo constraints:

Cách 1:click vào View cần chỉnh,  chọn vào biểu tượng như trong hình  Screen Shot 2016-08-01 at 16.05.36

 

Ở đây có các thông số width, height, và 4 constraints đó là các đường gạch màu da cam leading, trailing, top, bottom.!

Cách 2: Click vào View cần căn chỉnh, đồng thời giữ Ctrl, kéo thả vào đối tượng sẽ phụ thuộc vào luật AutoLayout.

Ở đây mình kéo vào màn hình ViewController chính: giữ Ctrl kéo vào View.Screen Shot 2016-08-01 at 17.02.41

 

Xuất hiện bảng như sau: 4 thuộc tính đầu mình đã giới thiệu,  center Horizontally in View căn giữa  chiều ngang,center Vertically in View căn giữa theo chiều dọc. Equal Widths so với chiều rộng của ViewController, Equal height so với chiều dài của ViewController.

Screen Shot 2016-08-01 at 16.15.52

– Các quy tắc luật AutoLayout luôn đúng:

+ Chúng ta phải căn chỉnh đủ 2 tiêu chuẩn: kích thước”width”,”height”, toạ độ “x”, “y”.

+ Kinh nghiệm căn chỉnh AutoLayout như sau:

  • Đối với không fix cứng size của View thì, cần tralling, leading, top,bottom.Screen Shot 2016-08-01 at 17.15.04
  • Đối với fix cứng Width và Height, chỉ cần thêm trailing, và top.Screen Shot 2016-08-01 at 17.14.36
  • Đối với fix cứng height của View, thêm leading, trailing, top or bottom.
  • Screen Shot 2016-08-01 at 17.20.49Đối với fix cứng width của View, thêm leading or trailing, top ,bottom.Screen Shot 2016-08-01 at 17.23.17
  • Đối với  sử dụng center Horizontally in View và center Vertically in View căn giữa chiều ngang và chiều dọc, “cần fix width và height” or các cặp sau (“leading, top”, “trailing, bottom”, “leading,bottom”, “trailing,top”).Screen Shot 2016-08-01 at 17.28.14
  • Đối với chỉ sử dụng center Horizontally in View, “cần  fix width và height, và thêm top or bottom” or“top or bottom và leading, trailing  “ .  Screen Shot 2016-08-01 at 17.37.19
  • Đối với chỉ sử dụng center Vertically in View, cần ” fix width và height, vào thêm leading or trailing” or”(leading or trailing và top, bottom)” . Screen Shot 2016-08-01 at 17.54.49
  • Để kiểm tra các constraints click vào View và chọn vào biểu tượng thước như hình vẽ, sẽ hiện tất cả constraints của view đó.
  • Screen Shot 2016-08-01 at 17.54.58

=> Để hiểu rõ các vấn đề sau bạn nên thử từng trường hợp cụ thể! hãy để lại suy nghĩ nghĩ của các bạn để bài viết của mình thêm cụ thể ! thanks all!.

Có gì trong phần tiếp theo: bài tiếp theo mình sẽ giới thiệu cho các bạn cách login Facebook.

Nếu các bạn muốn biết thêm các kỹ thuật khác về ios, các bạn có thể tham khảo thêm các khóa học ios tại đây.

Add a Comment

Your email address will not be published. Required fields are marked *