Hướng dẫn sử dụng sideBar

Hôm nay chúng ta sẽ tìm hiểu cách sử dụng sideBar thanh menu Trượt ra như ứng dụng faceBook. SideBar giúp các ứng dụng trình bày một cách linh hoạt hơn dễ sử dụng hơn.Các ứng dụng thực tế sử dụng sideBar rất phổ biến như facebook , zing mp3…

Mục tiêu :

1, Giúp các bạn tạo một sideBar đơn giản!

2, Trình bày dữ liệu đơn giản trong sideBar.

Cơ bản mình sẽ giúp các bạn thiết kế app như sau:

Screen Shot 2016-05-09 at 14.32.52

Tạo một SideBar đơn giản!

Thiết kế giao diện người dùng!

Khởi tạo proJect mới và đặt tên:

Screen Shot 2016-05-09 at 10.41.46

Vào mainStoryboard!

kéo vào 2 viewcontroller!Tô màu background để phân biện!

màu da cam thể hiện mà hình đầu tiên hiển thị khi chúng ta chạy ứng dụng!

màn hình thứ 2 màu xanh hiển thị sideBar!

Screen Shot 2016-05-09 at 10.51.41

 

Để chế biến được sideBar chúng ta sử dụng thư viện cung cấp!

link tải:

https://github.com/John-Lluch/SWRevealViewController/archive/master.zip

 

chúng ta kéo 2 file “SWRevealViewController ” vào !!!

Screen Shot 2016-05-09 at 10.51.33

 

tạo mới 2 class để quản lý 2 view chúng ta vừa tạo ra:

Screen Shot 2016-05-09 at 11.06.31 Screen Shot 2016-05-09 at 11.06.53

 

kết nối class với viewcontroller!

Kết nối viewcontroller màu trắng với chính thư viện  “SWRevealViewController”  quản lý.

Kết nối viewcontroller màu da cam với chính thư viện  “frontViewontroller” quản lý.

Kết nối viewcontroller màu xanh với chính thư viện  “rearViewController” quản lý.

Tạo liên kết giữa các viewontroller.

Kéo từ SWRevealViewController đến từng view và lựa chọn reveal View controller set controller.

 

Screen Shot 2016-05-09 at 11.13.57

 

Đặt identifine cho từng liên kết :

Do ta muốn  màn hình màu da cam hiển thị đầu tiên nên ta đặt identifile cho liên kết này là:

Screen Shot 2016-05-09 at 11.17.42

Do ta muốn  màn hình màu xanh hiển thị sideBar nên ta đặt identifile cho liên kết này là:

Screen Shot 2016-05-09 at 11.17.58

 

ok như thế chúng ta đã thiết kế một sidebar đơn giản tiếp theo thêm mã nguồn!

Chúng ta vào file frontViewController!

 

#import "SWRevealViewController.h"

ViewDidLoad thêm đoạn mã sau:

[self.view addGestureRecognizer:self.revealViewController.panGestureRecognizer];

tại mà hình đầu tiên hiển thị ta gọi đến phương pháp vuốt màn hình gọi đến sideBar!

Biên dịch và chạy thử ta được kết quả như sau:

kéo nhẹ chuột sang!

 

Screen Shot 2016-05-09 at 11.26.51

Thêm một nút khi nhấn chuyển sang SideBar!

chọn frontViewcontroller! Kết nối Navigation cho nó:Screen Shot 2016-05-09 at 11.27.43

 

kéo vào nút bar button item:

kéo vào ! đổi style cho nó!

Screen Shot 2016-05-09 at 11.30.34

thư viện  SWRevealViewController hỗ trợ property tạo nút khi ấn chuyển sang sideBar!

tạo property cho bar button item:kéo sang class quản lý và đặt tên:

@property (weak, nonatomic) IBOutlet UIBarButtonItem *menu;

ok như thế chúng ta đã tạo xong nút nhấn lựa chọn chuyển qua lại sideBar!

thêm đoạn mã sau vào ViewDidload!

[self.menu setTarget:self.revealViewController];
    [self.menu setAction:@selector(revealToggle:)];

biên dịch chạy thử:

Screen Shot 2016-05-09 at 11.40.10

 

như thế chúng ta đã tạo một sideBả chuyển qua lại!

thanh SideBar cũng là một Viewcontroller bình thường nên chúng ta sẽ thiết kế tuỳ biến theo ý thích của mình!

có thể thêm tableView để trình bày menu các chủ đề ….  !!!

Thêm Menu trong Màn hình SideBar!

Đoạn này mình sẽ làm nhanh! chúng ta đã tìm hiểu khi sử dụng tableView!

Vào màn hình rearViewcontroller thiết kế giao diện:

Kéo vào table View và kéo TableViewcell như lúc ta tạo bảng bình thường!

thêm vào label và image ! Sau khi chỉnh sửa nó sẽ trông gần giống thế này!

Screen Shot 2016-05-09 at 14.07.10

 

 

kéo vào một ảnh!

ảnh tải tại đây!

DevPro-việt-nam1

 

 

Screen Shot 2016-05-09 at 14.12.21

 

Kết nối ảnh với imageView! và đặt tên cho label!

Screen Shot 2016-05-09 at 14.14.19

 

!!!

 

Screen Shot 2016-05-09 at 14.15.41

 

chọn số lượng cell cần thiết kế! ở đây tôi chỉ chọn 4 cell !!!
Screen Shot 2016-05-09 at 14.13.44

 

sau khi chọn xong và đặt lại tên kết quả giao diện nó sẽ thế này:

Screen Shot 2016-05-09 at 14.17.55

 

Để phân biệt các protoType cells ta đặt Identifine cho chúng!

Screen Shot 2016-05-09 at 14.19.57ở đây mình sẽ đặt là “dp” “dp1″ dp2″ ,”dp3”;tương ứng với mỗi  protoType cells.

Kết nối delegate cho table View !!!Screen Shot 2016-05-09 at 14.24.04

 

ok!!! chúng ta chuyển sang mã nguồn !!!

file rearViewController.h đăng ký delegate

@interface rearViewController : UIViewController<UITableViewDelegate,UITableViewDataSource>

Trong rearViewController.m : ta cần tạo một mảng lưu lại các Identifine chúng ta vừa tạo ra !!! để tableView sẽ gọi đến cell nào thông qua identifine!!!

@implementation rearViewController{
    NSArray *ident;
}

 

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    ident=@[@"dp",@"dp1",@"dp2",@"dp3"];
}

Thêm 2 phương thức bắt buộc của tableView vào!!!

khuôn mẫu tableView và data đưa vào!!!

Ở đây chúng ta đã load ảnh tĩnh với label tĩnh nên chung ta chỉ cần return cell!…

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    return [ident count];
}
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    NSString *identifine=ident[indexPath.row];
    UITableViewCell *cell=[tableView dequeueReusableCellWithIdentifier:identifine forIndexPath:indexPath];
    return cell;
}

Như vậy chúng ta biên dịch và chạy thử sẽ được kết quả như sau:

Screen Shot 2016-05-09 at 14.32.52

 

Có gì trong phần tiếp theo !!! Mình sẽ giúp các bạn đọc Json!!!!

  • 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 *