hướng dẫn sử dụng Tab Bar Viewcontroller và mở webView imageView MapKit

Tab Bar rất phổ biến trong ứng dụng ios .Ngay trên Ứng dụng Appstore tab bar sử dụng để phân ra các chủ đề . Quan điểm trang trí tabbar rất tiện lợi cho người sử dụng.

Trong hướng dẫn này mình sẽ làm rõ vấn đề sau:

1 -Làm thế nào để tạo tabBar điều khiển.

2- Mở một trang Web lên WebView trong tabbar.

3- Mở image trên ImageView trong tabbar.

4- Mở mapKit trên mapView trong tabbar.

Screen Shot 2016-04-29 at 09.57.29Screen Shot 2016-04-29 at 17.18.45 Screen Shot 2016-04-29 at 09.57.52

Chúng ta bắt đầu nào!

Làm thế nào để tạo tabBar điều khiển:

khởi tạo project mới đặt tên!

Screen Shot 2016-04-29 at 09.04.21

 

 

– vào mainStory board:

click vào viewcontroller chọn editor ->embed in để kết nối trong đây có kết nối navigation và tab bar Controller.Bài này chúng ta làm việc với tabbar .chọn kết nối

tab bar Controller.

Screen Shot 2016-04-29 at 09.08.27

sau khi kết nối nó trông  như thế này!

 

Screen Shot 2016-04-29 at 10.08.45

Như vậy chúng ta đã kết nối tabbar cho viewcontroller.

Tuy nhiên để thêm một tab nữa  ta làm như thế nào?

Để thêm một tab nữa ta làm như sau!

Ta kéo thêm 2 viewcontroller mới!

Screen Shot 2016-04-29 at 10.11.37

 

Để kết nối 2 view chúng ta vừa tạo ra giữ Ctrl vào Tab Bar Viewcontroller kéo vào từng view để thêm kết nối!lưu ý chúng ta phải chọn đúng Relationship Segue  chọn view controllers.

Screen Shot 2016-04-29 at 09.11.20tương tự với 2 viewcontroller !!! để tuỳ chỉnh các type:

chọn tab cần thay đổi!chọn system item để lựa chọn chúng ta cũng có thể thêm image từ ngoài vào! Lưu ý ảnh image chỉ dùng ảnh đen trắng vì dùng ảnh mầu nó cũng chuyển về đen trắng!

Screen Shot 2016-04-29 at 10.17.21 Screen Shot 2016-04-29 at 10.17.29

 

ok sau khi chỉnh sửa và làm theo các bước trên chúng ta sẽ trông như thế này!

Screen Shot 2016-04-29 at 10.21.41

 

ok như thế chúng ta đã kết nối được nhiều viewController sử dụng các tab.

Mở một trang Web lên WebView trong tabbar:

kéo webView vào trong tab Search!để thực hiện mở web Site!

Screen Shot 2016-04-29 at 10.24.44

 

tạo class quản lý search!

Screen Shot 2016-04-29 at 10.26.28Kết nối class với view!

Screen Shot 2016-04-29 at 10.27.32

 

Tạo property để load request!kéo webview vào webviewController.

Screen Shot 2016-04-29 at 10.29.02

@property (weak, nonatomic) IBOutlet UIWebView *webView;

trong Viewdidload

- (void)viewDidLoad {
    [super viewDidLoad];
    NSString *strUrl=@"https://www.google.com.vn/";
    NSURL *url=[[NSURL alloc]initWithString:strUrl];
    NSURLRequest *request=[NSURLRequest requestWithURL:url];
    [self.webView loadRequest:request];
}

strUrl lấy url web-sau đó chuyển nó thành url-  Chuyển url thành request để có thể gửi được – sau đó ta gửi request, load requset và đưa kết quả vào web view để đọc!

Biên dịch ta được kết quả !

Screen Shot 2016-04-29 at 09.57.29

 

Tuy nhiên có rất nhiều trang web sử dụng htpp .mặc định của web view xcode mới là https cho nên không thể mở được web để có thể mở được ta thêm cấu hình htpp trong infor!

Screen Shot 2016-04-29 at 09.30.40

app transport security settings

ok!

 

Mở image trên ImageView trong tabbar.

trong tab feature!

kéo image vào!

Screen Shot 2016-04-29 at 10.46.35

 

tạo class quản lý featured!

 

 

 

Screen Shot 2016-04-29 at 10.48.43

 

Kết nối class quản lý với View!

Screen Shot 2016-04-29 at 10.51.30

Tạo property để set image!

@property (weak, nonatomic) IBOutlet UIImageView *imageView;

 

link ảnh:

https://www.google.com/search?q=devproSplash&espv=2&biw=1721&bih=918&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiEzv3V-bLMAhUliKYKHXXADMYQ_AUIBygC

kéo ảnh vào source code!

Screen Shot 2016-04-29 at 10.56.49

chúng ta muốn cho load ngay khi khởi động!

set image cho ảnh gọi đến tên ảnh cần xét !

- (void)viewDidLoad {
    [super viewDidLoad];
    self.imageView.image=[UIImage imageNamed:@"devproSplash.png"];
}

chạy thử và đến tab featured!kết quả là:

Screen Shot 2016-04-29 at 17.18.45

 

Mở mapKit trên mapView trong tabbar.

trong hướng dẫn này mình đang hướng dẫn dùng tab bar nên sẽ không đi sâu mapkit: tìm đường đi,định vị … mà chỉ giúp các bạn mở mộtmapkit như thế nào . mình sẽ hướng dẫn cụ thể sử dụng mapkit trong những bài tiếp theo! :)ok!

trong tab more:

kéo map kit vào!

Screen Shot 2016-04-29 at 11.01.22tạo class quản lý mapkit đặt tên “mapViewController”.

kết nối class quản lý tương tự như trên!

Ở đây mình chỉ mở mapkit nên chúng ta làm như sau:click vào tabbar build phasesphase!nhấn vào nút + vào tìm kiếm mapkit sau đó add là ok!

 

Screen Shot 2016-04-29 at 11.03.43Screen Shot 2016-04-29 at 11.03.30Screen Shot 2016-04-29 at 11.04.21

 

biên dịch thử chúng ta đã mửo được mapKit:

Screen Shot 2016-04-29 at 09.57.52

 

như vậy mình đã hướng dẫn cho các bạn các tạo tabbar như thể nào và mở mapKit, set image,Load một trang web!

Có gì trong phần tiếp theo!

Bài Tiếp theo mình sẽ giúp các bạn đi sâu vào webkit định vị, tìm đường đi, tính vận tốc gia tốc và quãng đường đi được!!! …

thanks all!!! 🙂

 

full mã nguồn:

http://www.mediafire.com/download/gw99qvi26xk7815/tabBar.zip
  • 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 *