Animation and NSAutolayout ios 7, 8

Chào các bạn, hnay mình sẽ viết bài viết hướng dẫn cho các mem mới, những người chưa sử dụng NSAutolayout. Với những bạn làm qua rồi thì sẽ cảm thấy nó rất dễ dàng, nhưng với những người mới dùng đến nó lần đầu thì rất là bỡ ngỡ và khó sử dụng. Chính mình cũng là 1 con gà và rất ức chế với cái autolayout này. Sau 1 thời gian tìm hiểu và sự chỉ dẫn của các anh em bạn bè mình cũng đã có 1 chút kinh nghiệm và xin chia sẻ cùng anh em, ai có ý kiến đóng góp, giải pháp gì xin để lại comment để mọi người cùng tham khảo. Đầu tiên, chúng ta tạo project mang tên AutolayoutExample

Tiếp theo mình sẽ tạo View làm header app, mình không muốn dùng navigation bar vì mình thích custom hơn, muốn làm gì tuỳ ý, ko muốn bó buộc. nhiều anh em không thích điều này nhưng mình lại thích thế Việc bạn cần làm là mở file storyboard ra và thiết kế giao diện. Sẽ cần 1 view làm header và 2 button 2 bên + 1 label ở giữa. Sau khi thiết kế xong bạn sẽ có giao diện như hình sau : Tiếp theo bạn click vào button để chia đôi màn hình giao diện và code

Bạn sẽ nhìn thấy thanh phía trên có button Automatic hoặc Manual. Bạn hãy click vào thanh menu đó, nó sẽ xổ ra giao diện như sau:

Bạn hãy chọn Preview để có thể xem giao diện. Đây là tính năng mới và rất hay của xcode 6 này. Với tính năng mới này, bạn có thể nhìn trực tiếp với các giao diện khác nhau như iPhone 4, 5, 6 hay 6Plus. và ios 7,8

Bạn vào project chọn Deployment Target là 7.0 để có thể xem thêm giao diện với ios 7

Sau đó bạn có thể chọn giao diện như sau:

Giờ là lúc quan trọng nhất của việc thiết kế giao diện, bắt đầu thôi nào

Nếu cứ để vậy mà chạy thì giao diện sẽ hiển thị như phần bên phải hình trên, chỉ có cái button bên trái mà thôi. giờ là lúc ta thiết kế cho nó xuất hiện 2 button 2 bên label title sẽ phải ở giữa và cái menu view luôn nằm giữa màn hình Bạn chọn view header và kick vào biểu tượng và làm như sau và ấn add constrain:

Sau khi làm như vậy thì view Header sẽ luôn nằm trên cùng và co giãn theo size màn hình. Tương tự bạn cũng click vào button 2 và thực hiện như sau:

Thực hiện tương tự với button 1, nhưng là neo theo bên phải nhé Thực hiện việc tương tự với title label

Bạn sẽ nhìn thấy out ngay bên phía bên phải như hình trên, rất tiện lợi và dễ hiểu.

Mục tiêu của tôi khi viết ra bài này không phải chỉ đơn giản là như thế này, vì điều đơn giản như vậy các bài viết bằng tiếng anh, các bài viết có sẵn không hề nói rõ. Bạn thử ấn Run và xem kết quả trên ios 7 , và kết quả là như này đây.

Thực sự với bạn là xấu như con gấu vậy, tôi đã search rất nhiều và thấy bài viết nói rằng margin của ios là (8, 8, 8, 8). Trong khi đó của ios 8 là (16, 16, 16, 16, 16). Vậy mấu chốt ở đây là set lại cái margin cho nó như ios7. Đó là suy nghĩ của tôi và tôi đã đâm đầu vô đó mà ko có kết quả. vậy giải pháp ở đây là gì, sao ios 7 8 lại chuối đến vậy. Cuối cùng tôi đã phát hiện ra 1 điều mà các bài viết hướng dẫn đã nói mà ko để ý, có thể trình độ tiếng a của tôi ko đc tốt hoặc tính bất cẩn trong tôi. Nhưng khi phát hiện ra thì tôi thấy mình thật là ngu ngốc . Bạn hãy chọn header view và làm như sau.

Mấu chốt ở đây là thuộc tính “contrain to margin” chỉ có trên ios 8 mà ios 7 chưa hề có, bạn chỉ cần bỏ tick và làm lại từ đầu như hướng dẫn trên là ok. Bạn “Run” lại 1 lần nữa trên ios 7 và tận hưởng thành quả của bạn. Còn 1 vấn đề đau đầu nữa là animation chuyển động dùng autolayout như thế nào, thực sự khj không dùng autolayout thì tôi thấy nó quá đơn giản, nhưng vấn đề này lại làm tôi đau đầu 1 lẫn nữa. Thôi ko lòng vòng nói cách giải quyết luôn cho nóng, ở đây bạn cần phải set contrain lại cho nó. Ở đây khi click vào button 1 thì header view sẽ về vị trí (0,0) và click vào button 2 header sẽ di chuyển đến vị trí (0,100); Đầu tiên bạn cần tìm đến cái contrains thiết lập khoảng cách với view cha của nó và kéo vào đặt tên sử dụng cho dễ.

Sau đó bạn viết 2 method cho 2 button như sau:

Và đây là đoạn code mình vừa viết phía trên

• (IBAction)button1Action:(id)sender { [UIView animateWithDuration:0.5 animations:^{ _topSpaceConstraint.constant = 0; [self.view layoutIfNeeded]; } completion:nil]; }

• (IBAction)button2Action:(id)sender { [UIView animateWithDuration:0.5 animations:^{ _topSpaceConstraint.constant = 100; [self.view layoutIfNeeded]; } completion:nil]; } Ấn “Run” và tận hưởng kết quả Chúc bạn may mắn trong lần code sau link : www.mediafire.com/download/icp7bg28v23sbk0/AutolayoutExample.zip