การเพิ่ม UILabel ให้กับ UIToolbar


98

ฉันกำลังพยายามเพิ่มป้ายกำกับในแถบเครื่องมือของฉัน ปุ่มใช้งานได้ดี แต่เมื่อฉันเพิ่มออบเจ็กต์ป้ายกำกับมันขัดข้อง ความคิดใด ๆ ?

UIBarButtonItem *setDateRangeButton = [[UIBarButtonItem alloc] initWithTitle:@"Set date range"
                                                                       style:UIBarButtonItemStyleBordered
                                                                      target:self
                                                                      action:@selector(setDateRangeClicked:)];

UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(5, 5, 20, 20)];
label.text = @"test";

[toolbar setItems:[NSArray arrayWithObjects:setDateRangeButton,label, nil]];

// Add the toolbar as a subview to the navigation controller.
[self.navigationController.view addSubview:toolbar];

// Reload the table view
[self.tableView reloadData];

คำตอบ:


129

ลองดูในเรื่องนี้

[[UIBarButtonItem alloc] initWithCustomView:yourCustomView];

โดยพื้นฐานแล้วทุกรายการต้องเป็น "ปุ่ม" แต่สามารถสร้างอินสแตนซ์ได้ทุกมุมมองที่คุณต้องการ นี่คือตัวอย่างโค้ด หมายเหตุเนื่องจากโดยทั่วไปปุ่มอื่น ๆ จะอยู่บนแถบเครื่องมือตัวเว้นวรรคจะถูกวางไว้ที่ด้านข้างของปุ่มหัวเรื่องแต่ละปุ่ม

NSMutableArray *items = [[self.toolbar items] mutableCopy];

UIBarButtonItem *spacer = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil];
[items addObject:spacer];
[spacer release];

self.titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(0.0 , 11.0f, self.view.frame.size.width, 21.0f)];
[self.titleLabel setFont:[UIFont fontWithName:@"Helvetica-Bold" size:18]];
[self.titleLabel setBackgroundColor:[UIColor clearColor]];
[self.titleLabel setTextColor:[UIColor colorWithRed:157.0/255.0 green:157.0/255.0 blue:157.0/255.0 alpha:1.0]];
[self.titleLabel setText:@"Title"];
[self.titleLabel setTextAlignment:NSTextAlignmentCenter];

UIBarButtonItem *spacer2 = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil];
[items addObject:spacer2];
[spacer2 release];

UIBarButtonItem *title = [[UIBarButtonItem alloc] initWithCustomView:self.titleLabel];
[items addObject:title];
[title release];

[self.toolbar setItems:items animated:YES];
[items release];

10
โปรดทราบว่าหากคุณเลือกไปเส้นทางนี้คุณต้องจัดรูปแบบป้ายกำกับของคุณอย่างเหมาะสม (label.backgroundColor = [UIColor clearColor] ฯลฯ ) คุณยังสามารถเริ่มต้น UIBarButtonItem ให้เป็นสไตล์ธรรมดาซึ่งจะทำให้คุณมีรูปลักษณ์ที่คล้ายกัน
wisequark

ฉันรู้ว่านี่เป็นโพสต์เก่าจริงๆ แต่ฉันมีคำถามเกี่ยวกับคำตอบนี้ เมื่อเสร็จแล้วมีวิธีใดบ้างในการเข้าถึง titleLabel ในภายหลังเพื่อเปลี่ยนแปลงหรือเป็นไปไม่ได้เลยเนื่องจากทุกอย่างได้รับการเผยแพร่แล้ว?
Ryan

Ryan, UILabel อาจยังคงมีอยู่ - มันคือ self.titleLabel ตัวอย่างนี้ต้องการคุณสมบัติที่ประกาศและสังเคราะห์สำหรับ UILabel * titleLabel แต่โค้ดนั้นไม่แสดง หากคุณสามารถเข้าถึงออบเจ็กต์ (อาจเป็น UIViewController) ที่เรียกใช้รหัสนี้คุณสามารถเข้าถึง titleLabel ได้ เช่นคุณสามารถเพิ่มเมธอดบนตัวควบคุมมุมมองส่งชื่อใหม่ที่คุณต้องการแล้วเรียก [self.titleLabel setText: newTitle]
Steve Liddle

7
คุณไม่ต้องการเพิ่มตัวเว้นวรรคที่สองหลังจากรายการแถบปุ่มหัวเรื่องหรือไม่?
len

121

สำหรับผู้ที่ใช้ Interface Builder ในการจัดวางรูปแบบของคุณคุณUIToolBarสามารถทำได้โดยใช้ Interface Builder เพียงอย่างเดียว

หากต้องการเพิ่มUILabelไปยังUIToolBarคุณต้องเพิ่มทั่วไปUIViewวัตถุของคุณUIToolBarใน IB โดยการลากใหม่วัตถุมากกว่าของคุณUIView โดยอัตโนมัติจะสร้างที่จะเริ่มต้นได้ด้วยของคุณเอง ถัดไปเพิ่มไปและแก้ไขภาพกราฟิกให้ตรงกับสไตล์ที่คุณต้องการ จากนั้นคุณสามารถตั้งค่าตัวเว้นระยะคงที่และ / หรือตัวแปรตามต้องการเพื่อวางตำแหน่งของคุณให้เหมาะสมUIToolBarIBUIBarButtonItemUIViewUILabelUIViewUILabelUILabel

คุณต้องตั้งค่าพื้นหลังของทั้งสองUILabelและUIViewถึงclearColorเพื่อUIToolBarให้แสดงผ่านได้อย่างถูกต้องภายใต้UILabel.


2
เคล็ดลับที่ดีไม่รู้ว่าคุณสามารถทำได้ใน Interface Builder ขอบคุณมาก.
Rafael Bugajewski

มีวิธีเพิ่ม UIButton ด้วยอิมเมจที่กำหนดเองโดยใช้วิธีนั้นหรือไม่? ฉันสามารถเพิ่ม UIButton ได้ แต่รูปภาพไม่ปรากฏขึ้น
cannyboy

4
ดูเหมือนจะไม่สามารถใช้งานได้ เมื่อฉันลาก UIView ไปบนแถบเครื่องมือมันจะถูกวางไว้ในตัวควบคุมมุมมองไม่ใช่บนแถบเครื่องมือ นอกจากนี้เราทำสิ่งนี้ในตัวควบคุมการนำทางหรือในตัวควบคุมมุมมองหรือไม่
guptron

1
ดูเหมือนจะไม่ได้ผล ถ้ามันใช้งานได้เมื่อนานมาแล้วไม่ใช่อีกต่อไปใน XCode 6 ...
Frédéric Adda

1
คุณควรอัปเดตคำตอบของคุณเพื่อชี้ให้เห็นว่าสิ่งนี้ใช้ได้กับแถบเครื่องมือที่เพิ่มลงในตัวควบคุมมุมมองด้วยตนเองเท่านั้น มันใช้ไม่ได้กับแถบเครื่องมือที่เพิ่มให้คุณ
James Bush

33

ฉันพบว่าคำตอบของ answerBot มีประโยชน์มาก แต่ฉันคิดว่าฉันพบวิธีที่ง่ายกว่านั้นใน Interface Builder:

  • สร้าง UIBarButtonItem และเพิ่มลงใน Toolbar ของคุณใน Interface Builder

ป้อนคำอธิบายภาพที่นี่

  • ยกเลิกการเลือก "เปิดใช้งาน" สำหรับ BarButtonItem นี้

ป้อนคำอธิบายภาพที่นี่

  • เสียบ BarButtonItem นี้กับคุณสมบัติในคลาสของคุณ (นี่คือใน Swift แต่จะคล้ายกันมากใน Obj-C):

    @IBOutlet private weak var lastUpdateButton: UIBarButtonItem! // Dummy barButtonItem whose customView is lastUpdateLabel
    
  • เพิ่มคุณสมบัติอื่นสำหรับ Label เอง:

    private var lastUpdateLabel = UILabel(frame: CGRectZero)
    
  • ใน viewDidLoad เพิ่มรหัสต่อไปนี้เพื่อตั้งค่าคุณสมบัติของป้ายชื่อของคุณและเพิ่มเป็น customView ของ BarButtonItem ของคุณ

    // Dummy button containing the date of last update
    lastUpdateLabel.sizeToFit()
    lastUpdateLabel.backgroundColor = UIColor.clearColor()
    lastUpdateLabel.textAlignment = .Center
    lastUpdateButton.customView = lastUpdateLabel
    
  • ในการอัปเดตUILabelข้อความ:

    lastUpdateLabel.text = "Updated: 9/12/14, 2:53"
    lastUpdateLabel.sizeToFit() 
    

ผลลัพธ์ :

ป้อนคำอธิบายภาพที่นี่

คุณต้องโทรlastUpdateLabel.sizetoFit()ทุกครั้งที่อัปเดตข้อความป้ายกำกับ


1
ฉันสร้าง UIBarButtonItem แบบเดียวกับคุณเปิดใช้งานทิ้งไว้และวางป้ายกำกับโดยใช้รหัสต่อไปนี้: UILabel* label = [[UILabel alloc] init]; label.text = @"Hello"; label.font = [UIFont systemFontOfSize:16]; [label sizeToFit]; self.barItem.customView = label;
Brett Donald

6

สิ่งหนึ่งที่ฉันใช้เคล็ดลับนี้คือการสร้างตัวอย่างไฟล์ UIActivityIndicatorViewด้านบนของUIToolBarสิ่งที่เป็นไปไม่ได้ ตัวอย่างเช่นที่นี่ฉันมีUIToolBarด้วย 2 UIBarButtonItem, a FlexibleSpaceBarButtonItemแล้วก็อีกUIBarButtonItemอัน ฉันต้องการแทรกUIActivityIndicatorViewลงในUIToolBarระหว่างช่องว่างที่ยืดหยุ่นและปุ่มสุดท้าย (ขวามือ) ดังนั้นในของRootViewControllerฉันฉันทำสิ่งต่อไปนี้

- (void)viewDidLoad {
[super viewDidLoad];// Add an invisible UIActivityViewIndicator to the toolbar
UIToolbar *toolbar = (UIToolbar *)[self.view viewWithTag:767];
NSArray *items = [toolbar items];

activityIndicator = [[UIActivityIndicatorView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 20.0f, 20.0f)];
[activityIndicator setActivityIndicatorViewStyle:UIActivityIndicatorViewStyleWhite];    

NSArray *newItems = [NSArray arrayWithObjects:[items objectAtIndex:0],[items objectAtIndex:1],[items objectAtIndex:2],
                     [[UIBarButtonItem alloc] initWithCustomView:activityIndicator], [items objectAtIndex:3],nil];
[toolbar setItems:newItems];}

รหัสนี้รั่วไหลหน่วยความจำที่จัดสรรสำหรับ UIBarButtonItem ด้วยมุมมองตัวบ่งชี้กิจกรรมที่กำหนดเอง (นอกจากนี้ยังมีการรั่วไหลของหน่วยความจำที่แสดงถึงกิจกรรม แต่ฉันคิดว่าของถูกปล่อยออกมาด้านล่างท้ายของส่วนรหัสได้.
erikprice

3

รายละเอียด

  • Xcode 10.2.1 (10E1001), Swift 5

ตัวอย่างฉบับเต็ม

import UIKit

class ViewController: UIViewController {

    private weak var toolBar: UIToolbar?

    override func viewDidLoad() {
        super.viewDidLoad()

        var bounds =  UIScreen.main.bounds
        let bottomBarWithHeight = CGFloat(44)
        bounds.origin.y = bounds.height - bottomBarWithHeight
        bounds.size.height = bottomBarWithHeight
        let toolBar = UIToolbar(frame: bounds)
        view.addSubview(toolBar)

        var buttons = [UIBarButtonItem]()
        buttons.append(UIBarButtonItem(barButtonSystemItem: .add, target: self, action: #selector(ViewController.action)))
        buttons.append(UIBarButtonItem(barButtonSystemItem: .camera, target: self, action: #selector(ViewController.action)))
        buttons.append(UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil))
        buttons.append(UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil))
        buttons.append(ToolBarTitleItem(text: "\(NSDate())", font: .systemFont(ofSize: 12), color: .lightGray))
        buttons.append(UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil))
        buttons.append(UIBarButtonItem(barButtonSystemItem: .cancel, target: self, action:  #selector(ViewController.action)))
        toolBar.items = buttons

        self.toolBar = toolBar
    }
    @objc func action() { print("action") }
}

class ToolBarTitleItem: UIBarButtonItem {

    init(text: String, font: UIFont, color: UIColor) {
        let label =  UILabel(frame: UIScreen.main.bounds)
        label.text = text
        label.sizeToFit()
        label.font = font
        label.textColor = color
        label.textAlignment = .center
        super.init()
        customView = label
    }
    required init?(coder aDecoder: NSCoder) { super.init(coder: aDecoder) }
}

ผลลัพธ์

ป้อนคำอธิบายภาพที่นี่


ฉันชอบสิ่งนี้ แต่ถ้าฉันมี TableView มันจะเลื่อนด้วยแถบนี้ ฉันจะแก้ไขได้อย่างไร
Maksim Kniazev

สวัสดี Maxim ฉันไม่เข้าใจปัญหาของคุณ โปรดอธิบายผลลัพธ์ที่คุณต้องการได้รับ
Vasily Bodnarchuk

ตกลงฉันใช้ UITableViewController และถ้าฉันตั้งค่า view.addSubview (toolBar!) และเลื่อน tableview ของฉันแถบจะเลื่อนด้วย tableView ฉันต้องการให้มีตำแหน่งด้านล่างคงที่
Maksim Kniazev

ฉันคิดว่าคุณควรใช้ UIViewController กับ UITableView (แทน UITableViewController) เป็นมุมมองย่อย
Vasily Bodnarchuk

โอเคสปาสิโบ ฉันจะลอง
Maksim Kniazev

2

คล้ายกับ Matt RI ที่ใช้ตัวสร้างอินเทอร์เฟซ แต่ฉันต้องการให้มี 1 อันUIWebViewข้างในแทนเพื่อที่ฉันจะได้มีบางข้อความเป็นตัวหนาและข้อความอื่น ๆ ไม่ได้ (เช่นแอพเมล) ดังนั้น

  1. เพิ่มมุมมองเว็บแทน
  2. ยกเลิกการเลือกทึบแสง
  3. ตรวจสอบให้แน่ใจว่าพื้นหลังเป็นสีที่ชัดเจน
  4. ขอทุกอย่างด้วย IBOutlet
  5. ใช้ด้านล่างhtmlเพื่อให้มีพื้นหลังโปร่งใสเพื่อให้แถบเครื่องมือส่องผ่าน

รหัส:

NSString *path = [[NSBundle mainBundle] bundlePath];
NSURL *baseURL = [NSURL fileURLWithPath:path];
NSString *html = [NSString stringWithFormat:@"<html><head><style>body{font-size:11px;text-align:center;background-color:transparent;color:#fff;font-family:helvetica;vertical-align:middle;</style> </head><body><b>Updated</b> 10/11/12 <b>11:09</b> AM</body></html>"];
[myWebView loadHTMLString:html baseURL:baseURL];

1

หากคุณต้องการเพิ่มมุมมองในมุมมองแถบเครื่องมือคุณสามารถลองสิ่งนี้:

[self.navigationController.tabBarController.view addSubview:yourView];

1

ลองสิ่งนี้:

UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(140 , 0, 50, 250)];
[label setBackgroundColor:[UIColor clearColor]];
label.text = @"TEXT";
UIView *view = (UIView *) label;
[self.barItem setCustomView:view];

หมายเหตุ: self.barItemเป็นUIBarButtonItemเพิ่มจากห้องสมุดวัตถุและวางอยู่ระหว่างสองช่องว่างที่มีความยืดหยุ่น

อีกวิธีหนึ่งคือการลบ[self.barItem setCustom:view]บรรทัดและเปลี่ยนพารามิเตอร์ของlabel(ความกว้าง) เพื่อให้เต็มแถบเครื่องมือทั้งหมดและตั้งค่าการจัดตำแหน่งเป็นตรงกลางและแบบอักษรด้วยตัวเองในโค้ด

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.