การเพิ่ม 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.