Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone



Clound SSD Virtual Server

iOS/iPhone Tab Bar (UITabBar) and Tab Bar Item (UITabBarItem) - (Objective-C , iPhone)

iOS/iPhone Tab Bar (UITabBar) and Tab Bar Item (UITabBarItem) - (Objective-C , iPhone) ขอต่อีกซะบทความสำหรับการใช้งาน Tab Bar (UITabBar) และการสร้าง Item ภายใน Tab Bar ด้วย Tab Bar Item (UITabBarItem) โดยในตัวอย่างก่อนหน้านี้เราได้สร้าง Tab Bar ผ่าน Storyboard ซึ่งจะแบ่งแยกแต่ล่ะ Tab เป็นแต่ล่ะ View แต่ในตัวอย่างนี้เราจะสร้างทุกอย่างให้อยู่ภายใน View เดียวกัน และการอ่านตำแหน่งต่าง ๆ ของ Item บน Tab Bar ที่ได้จากการคลิกเลือกของผู้ใช้

iOS/iPhone Tab Bar (UITabBar) and  Tab Bar Item (UITabBarItem)

iOS/iPhone Tab Bar (UITabBar) and Tab Bar Item (UITabBarItem)


ขั้นตอนการสร้างนั้น ขั้นแรกจะต้องสร้าง Tab Bar (UITabBar) บนหน้าจอ Design ของ View จากนั้นค่อยทำการลาก Tab Bar Item (UITabBarItem) ไปสร้างตาม Item ต่าง ๆ ที่ต้องการ และในแต่ล่ะ Item เราจะกำหนด tag ของแต่ล่ะ Item ซึ่งเมื่อคลิกที่ Tab Bar ในแต่ล่ะ Item ก็จะได้ตำแหน่งต่าง ๆ ตาม tag ที่ได้กำหนดไว้ในขั้นตอนแรก

iOS/iPhone Tab Bar (UITabBar) and  Tab Bar Item (UITabBarItem)

เริ่มต้นด้วยการสร้าง Application บน Xcode แบบง่าย ๆ ด้วย Single View Application

iOS/iPhone Tab Bar (UITabBar) and  Tab Bar Item (UITabBarItem)

ในอตัวอย่างนี้เราจะไม่ใช้ Storyboard แต่จะสร้าง Tab Bar และ Item ทั้งหมดบน View เดียวกัน

iOS/iPhone Tab Bar (UITabBar) and  Tab Bar Item (UITabBarItem)

หน้าจอ View หลัก ตอนนี้ยังเป็นหน้าจอ Design ว่าง ๆ

iOS/iPhone Tab Bar (UITabBar) and  Tab Bar Item (UITabBarItem)

ในตัวอย่างนี้เราจะใช้ Object ที่มีชื่อว่า Tab Bar (UITabBar) และ Tab Bar Item (UITabBarItem) ซึ่งจะอยู่ติดกัน

iOS/iPhone Tab Bar (UITabBar) and  Tab Bar Item (UITabBarItem)

ลาก Tab Bar ไปไว้ในหน้าจอของ View ซึ่งจะเห็นว่าตอนนี้มี Tab Bar Item อยู่ 2 ตัว ที่เป็นค่า Default

iOS/iPhone Tab Bar (UITabBar) and  Tab Bar Item (UITabBarItem)

ให้เราทำการลาก Tab Bar Item ไปวางไว้บน Tab Bar ตามจำนวนที่ต้องการ

iOS/iPhone Tab Bar (UITabBar) and  Tab Bar Item (UITabBarItem)

ตอนนี้ได้เพิ่มเข้ามา 3 ตัว รวมแล้วเป็น 5








iOS/iPhone Tab Bar (UITabBar) and  Tab Bar Item (UITabBarItem)

การปรับแต่ง Tab Bar Item สามารถคลิกที่ Item นั้น ๆ แล้วกำหนด Inspector ต่าง ๆ ได้เช่น Identifier ซึ่งจะมีรูปแบบมาให้อยู่หลายรายการ หรืออาจจะเป็นข้อความ หรือรูปภาพต่าง ๆ ก็ได้เช่นเดียวกัน

iOS/iPhone Tab Bar (UITabBar) and  Tab Bar Item (UITabBarItem)

เป็นรูปแบบที่อยู่ใน Xcode ที่เราคุ้น ๆ บน App ของ iPhone ต่าง ๆ

iOS/iPhone Tab Bar (UITabBar) and  Tab Bar Item (UITabBarItem)

กำหนด tag ของ Item ด้วย โดย tag นี้จะใช้อ้างอิง Item เวลาทำการคลิก ควรจะใส่เป็น 1,2,3... ตามตำแหน่งของ Item

iOS/iPhone Tab Bar (UITabBar) and  Tab Bar Item (UITabBarItem)

ลองปรับแต่ง Item ที่สอง ซึ่งจะมีการกำหยด tag เช่นเดียวกัน

iOS/iPhone Tab Bar (UITabBar) and  Tab Bar Item (UITabBarItem)

ตอนนี้ปรับแต่งครบทุกตัวเรียบร้อยแล้ว

iOS/iPhone Tab Bar (UITabBar) and  Tab Bar Item (UITabBarItem)

สร้าง Label ขึ้นมา 1 ตัว

iOS/iPhone Tab Bar (UITabBar) and  Tab Bar Item (UITabBarItem)

ใน Class ของ .h ให้ทำการเชื่อม IBOutlet ของ Label ให้เรียบร้อย

iOS/iPhone Tab Bar (UITabBar) and  Tab Bar Item (UITabBarItem)

คลิกขวาที่ Tab Bar จะมีกล่องสีดำ ๆ ดังรูป

iOS/iPhone Tab Bar (UITabBar) and  Tab Bar Item (UITabBarItem)

ให้ทำการเชื่อม delegate ของ Tab Bar กับ File's Owner หลังจากนั้นก็จะเป็นการเขียน Code ในส่วนของ Class ที่เป็น .m เพื่ออ่านตำแหน่งของ Item ที่ได้คลิก

iOS/iPhone Tab Bar (UITabBar) and  Tab Bar Item (UITabBarItem)








- (void)tabBar:(UITabBar *)tabBar didSelectItem:(UITabBarItem *)item;
{
    
    switch (item.tag) {
        case 1:
            lblResult.text =@"Tab Bar Item 1 selected.";
            break;
        case 2:
            lblResult.text =@"Tab Bar Item 2 selected.";
            break;
        case 3:
            lblResult.text =@"Tab Bar Item 3 selected.";
            break;
        case 4:
            lblResult.text =@"Tab Bar Item 4 selected.";
            break;
        case 5:
            lblResult.text =@"Tab Bar Item 5 selected.";
            break;
        default:
            break;
    }
}


Screenshot

iOS/iPhone Tab Bar (UITabBar) and  Tab Bar Item (UITabBarItem)

หน้าจอแรกของ App

iOS/iPhone Tab Bar (UITabBar) and  Tab Bar Item (UITabBarItem)

เมื่อคลิกที่ Item ที่ หนึ่ง

iOS/iPhone Tab Bar (UITabBar) and  Tab Bar Item (UITabBarItem)

เมื่อคลิกที่ Item ที่ สี่

Code ทั้งหมดของ .h และ .m ในภาษา Objective-C

ViewController.h
//
//  ViewController.h
//  tabBarApp
//
//  Created by Weerachai on 11/17/55 BE.
//  Copyright (c) 2555 Weerachai. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController
{
    IBOutlet UILabel *lblResult;
    
}

@end


ViewController.m
//
//  ViewController.m
//  tabBarApp
//
//  Created by Weerachai on 11/17/55 BE.
//  Copyright (c) 2555 Weerachai. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
}

- (void)tabBar:(UITabBar *)tabBar didSelectItem:(UITabBarItem *)item;
{
    
    switch (item.tag) {
        case 1:
            lblResult.text =@"Tab Bar Item 1 selected.";
            break;
        case 2:
            lblResult.text =@"Tab Bar Item 2 selected.";
            break;
        case 3:
            lblResult.text =@"Tab Bar Item 3 selected.";
            break;
        case 4:
            lblResult.text =@"Tab Bar Item 4 selected.";
            break;
        case 5:
            lblResult.text =@"Tab Bar Item 5 selected.";
            break;
        default:
            break;
    }
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (void)dealloc {
    [lblResult release];
    [super dealloc];
}
@end


ในกรณีที่ต้องการแยก Tab Bar กับ View แต่ล่ะตัว สามารถอ่านได้ที่บทความนี้



.

   
Share


ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน Source Code 2.0 ของทีมงานไทยครีเอท


ลองใช้ค้นหาข้อมูล


   


Bookmark.   
       
  By : ThaiCreate.Com Team (บทความเป็นลิขสิทธิ์ของเว็บไทยครีเอทห้ามนำเผยแพร่ ณ เว็บไซต์อื่น ๆ)
  Score Rating :  
  Create/Update Date : 2012-11-20 09:58:22 / 2017-03-26 09:11:30
  Download : Download  iOS/iPhone Tab Bar (UITabBar) and  Tab Bar Item (UITabBarItem) - (Objective-C , iPhone)
 Sponsored Links / Related

 
iOS/iPhone Tab Bar / Tab Bar Item (UITabBarController) and Multiple View (iPhone, iPad)
Rating :

 
iOS/iPhone Toolbar (UIToolbar) / Fixed and Flexible Space Bar Button Item
Rating :


ThaiCreate.Com Forum


Comunity Forum Free Web Script
Jobs Freelance Free Uploads
Free Web Hosting Free Tools

สอน PHP ผ่าน Youtube ฟรี
สอน Android การเขียนโปรแกรม Android
สอน Windows Phone การเขียนโปรแกรม Windows Phone 7 และ 8
สอน iOS การเขียนโปรแกรม iPhone, iPad
สอน Java การเขียนโปรแกรม ภาษา Java
สอน Java GUI การเขียนโปรแกรม ภาษา Java GUI
สอน JSP การเขียนโปรแกรม ภาษา Java
สอน jQuery การเขียนโปรแกรม ภาษา jQuery
สอน .Net การเขียนโปรแกรม ภาษา .Net
Free Tutorial
สอน Google Maps Api
สอน Windows Service
สอน Entity Framework
สอน Android
สอน Java เขียน Java
Java GUI Swing
สอน JSP (Web App)
iOS (iPhone,iPad)
Windows Phone
Windows Azure
Windows Store
Laravel Framework
Yii PHP Framework
สอน jQuery
สอน jQuery กับ Ajax
สอน PHP OOP (Vdo)
Ajax Tutorials
SQL Tutorials
สอน SQL (Part 2)
JavaScript Tutorial
Javascript Tips
VBScript Tutorial
VBScript Validation
Microsoft Access
MySQL Tutorials
-- Stored Procedure
MariaDB Database
SQL Server Tutorial
SQL Server 2005
SQL Server 2008
SQL Server 2012
-- Stored Procedure
Oracle Database
-- Stored Procedure
SVN (Subversion)
แนวทางการทำ SEO
ปรับแต่งเว็บให้โหลดเร็ว


Hit Link
   







Load balance : Server 04
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่