Tạo nút mũi tên trái (như kiểu quay lại kiểu UINavestionBar của Hồi giáo) trên UIToolbar


290

Tôi muốn tạo một nút "mũi tên trái" ở phía sau UIToolbar.

Theo như tôi có thể nói, cách duy nhất để có được một trong số này là để lại UINavigationControllerở cài đặt mặc định và nó sử dụng một cho mục thanh bên trái. Nhưng không có cách nào tôi có thể tìm thấy để tạo một cái như một UIBarButtonItem, vì vậy tôi không thể tạo một cái theo tiêu chuẩn UIToolbar, mặc dù chúng rất giống với UINavigationBars.

Tôi có thể tự tạo nó bằng hình ảnh nút, nhưng tôi không thể tìm thấy hình ảnh nguồn ở bất cứ đâu. Chúng có các cạnh kênh alpha, do đó, sàng lọc và cắt sẽ không thu được kết quả rất linh hoạt.

Có ý tưởng nào ngoài màn hình cho mọi kích cỡ và bảng màu tôi định sử dụng không?

Cập nhật: VUI LÒNG DỪNG né tránh câu hỏi và đề nghị rằng tôi không nên hỏi điều này và nên sử dụng UINavigationBar. Ứng dụng của tôi là Instapaper Pro. Nó chỉ hiển thị một thanh công cụ phía dưới (để tiết kiệm không gian và tối đa hóa vùng nội dung có thể đọc được) và tôi muốn đặt nút Quay lại hình mũi tên trái ở phía dưới.

Nói với tôi rằng tôi không cần phải làm điều này không phải là một câu trả lời và chắc chắn không xứng đáng nhận được tiền thưởng.



Câu trả lời:


130

Tôi đã sử dụng psd sau mà tôi bắt nguồn từ http://www.teehanlax.com/blog/?p=447

http://www.chrisandtennille.com/pictures/backbutton ..

Sau đó tôi vừa tạo một UIView tùy chỉnh mà tôi sử dụng trong thuộc tính customView của mục thanh công cụ.

Hoạt động tốt cho tôi.


Chỉnh sửa: Như PrairieHippo đã chỉ ra , maralbjo nhận thấy rằng bằng cách sử dụng đoạn mã sau, mã đơn giản đã thực hiện thủ thuật (yêu cầu hình ảnh tùy chỉnh trong gói) nên được kết hợp với câu trả lời này. Vì vậy, đây là mã bổ sung:

// Creates a back button instead of default behaviour (displaying title of previous screen)
UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"back_arrow.png"]
                                                               style:UIBarButtonItemStyleBordered
                                                              target:self
                                                              action:@selector(backAction)];

tipsDetailViewController.navigationItem.leftBarButtonItem = backButton;
[backButton release];

1
PSD tôi đã tải lên là cho một thanh công cụ màu đen. Tôi đã không thử nhiều với những cái màu xanh vì ứng dụng của tôi không sử dụng cái đó. Nhưng từ những gì tôi biết, thanh công cụ sẽ không tô màu lại khi cần thiết. chris.
PyjamaSam

1
Bạn không cần bất kỳ công cụ đặc biệt nào để tô màu lại, tôi đã thực hiện bằng tùy chọn 'Điều chỉnh màu' của Mac Preview.
Sushant

1
Giải pháp này có thể được đánh vần một chút?
cannyboy

4
Psd này chỉ hữu ích cho tỷ lệ màn hình 1.0f. Trên màn hình võng mạc, nó sẽ trông khủng khiếp.
Daniel Wood

3
Không sử dụng hình ảnh cho việc này, chỉ cần thực hiện đúng cách (xem câu trả lời cho stackoverflow.com/questions/4260238 ).
ingh.am

45

Phương pháp Unicode

Tôi nghĩ sẽ dễ dàng hơn nhiều khi chỉ sử dụng một ký tự unicode để hoàn thành công việc. Bạn có thể xem qua các mũi tên bằng cách googling hoặc Tam giác Unicode hoặc Mũi tên Unicode . Bắt đầu với iOS6 Apple đã thay đổi nhân vật thành một nhân vật biểu tượng cảm xúc có viền. Để vô hiệu hóa đường viền, tôi thêm Bộ chọn Biến đổi Unicode 0xFE0E .

NSString *backArrowString = @"\U000025C0\U0000FE0E"; //BLACK LEFT-POINTING TRIANGLE PLUS VARIATION SELECTOR

UIBarButtonItem *backBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:backArrowString style:UIBarButtonItemStylePlain target:nil action:nil];
self.navigationItem.leftButtonItem = backBarButtonItem;

Khối mã chỉ dành cho bản demo. Nó sẽ hoạt động trong bất kỳ nút nào chấp nhận NSString.

Để biết danh sách đầy đủ các ký tự tìm kiếm Google cho ký tự Unicode và những gì bạn muốn. Đây là mục nhập cho Tam giác đen bên trái .

Kết quả

Kết quả


37

CẢNH BÁO: Có báo cáo rằng điều này sẽ không hoạt động trên iOS 6. Điều này có thể chỉ hoạt động trên các phiên bản cũ hơn của HĐH. Rõ ràng ít nhất một nhà phát triển đã từ chối ứng dụng của họ vì sử dụng thủ thuật này (xem các bình luận). Sử dụng có nguy cơ của riêng bạn. Sử dụng một hình ảnh (xem câu trả lời ở trên) có thể là một giải pháp an toàn hơn.

Điều này có thể được thực hiện mà không cần thêm vào các tệp hình ảnh của riêng bạn bằng cách sử dụng nút sekr1t loại 101 để có được hình dạng chính xác. Đối với tôi, mánh khóe đã tìm ra rằng tôi có thể sử dụng initWithCustomViewđể tạo ra BarButtonItem. Cá nhân tôi cần điều này cho một thanh điều hướng động chứ không phải là một toolbar, nhưng tôi đã thử nó với một thanh công cụ và mã gần giống nhau:

// create button
UIButton* backButton = [UIButton buttonWithType:101]; // left-pointing shape!
[backButton addTarget:self action:@selector(backAction) forControlEvents:UIControlEventTouchUpInside];
[backButton setTitle:@"Back" forState:UIControlStateNormal];

// create button item -- possible because UIButton subclasses UIView!
UIBarButtonItem* backItem = [[UIBarButtonItem alloc] initWithCustomView:backButton];

// add to toolbar, or to a navbar (you should only have one of these!)
[toolbar setItems:[NSArray arrayWithObject:backItem]];
navItem.leftBarButtonItem = backItem;

Nếu bạn đang làm điều này trên thanh công cụ, bạn sẽ phải điều chỉnh cách bạn đặt các mục, nhưng điều đó phụ thuộc vào phần còn lại của mã của bạn và tôi để đó làm bài tập cho người đọc. : P Mẫu này làm việc cho tôi (biên dịch & chạy).

Blah blah, đọc HIG, không sử dụng các tính năng không có giấy tờ, và tất cả những thứ đó. Chỉ có sáu loại nút được hỗ trợ và đây không phải là một trong số các loại nút.


1
loại nút 101 dường như không cho tôi hình trái trỏ ... chỉ là hình chữ nhật.
elsurudo

10
Đừng làm điều này - Ứng dụng của bạn sẽ bị từ chối. Bình chọn câu trả lời này xuống.
thefaj

4
Tôi có khuynh hướng nghĩ rằng anh ta không chắc chắn; anh ta nói "không sử dụng API không có giấy tờ" nhưng không nói rõ ứng dụng của anh ta đã bị từ chối. Và đó không phải là một API không có giấy tờ - đó là một giá trị không có giấy tờ. Nếu bất cứ ai đã từ chối ứng dụng của họ, xin vui lòng gửi. Tôi đã tiếp tục nhận được các ứng dụng được phê duyệt với giá trị này.
AndrewS

1
@thefaj Tôi đã gửi một ứng dụng có mã này trong đó và nó đã được phê duyệt.
Aaron

1
Đây là phong cách mã hóa rất kém. Bạn thật may mắn, nhưng bạn chỉ nên sử dụng API được ghi lại (không phải số ma thuật / số chưa được công bố).
thefaj

36

nhập mô tả hình ảnh ở đây

Trước hết bạn phải tìm một hình ảnh của nút quay lại. Tôi đã sử dụng một ứng dụng hay có tên Extractor trích xuất tất cả đồ họa từ iPhone. Trong iOS7, tôi đã tìm cách lấy lại hình ảnh được gọi UINavigationBarBackIndicatorDefaultvà nó có màu đen, vì tôi cần một tông màu đỏ, tôi thay đổi màu thành màu đỏ bằng Gimp.

BIÊN TẬP:

Như đã được btate đề cập trong bình luận của mình, không cần phải thay đổi màu sắc với trình chỉnh sửa hình ảnh. Các mã sau đây nên thực hiện thủ thuật:

imageView.tint = [UIColor redColor];
imageView.image = [[UIImage imageNamed:@"UINavigationBarBackIndicatorDefault"] imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];

Sau đó, tôi đã tạo một chế độ xem chứa hình ảnh Xem với mũi tên đó, nhãn có văn bản tùy chỉnh và ở trên cùng của chế độ xem Tôi có một nút có hành động. Sau đó, tôi đã thêm một hình ảnh động đơn giản (mờ dần và dịch).

Đoạn mã sau mô phỏng hành vi của nút quay lại bao gồm cả hình ảnh động.

-(void)viewWillAppear:(BOOL)animated{
        UIImageView *imageView=[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"UINavigationBarBackIndicatorDefault"]];
        [imageView setTintColor:[UIColor redColor]];
        UILabel *label=[[UILabel alloc] init];
        [label setTextColor:[UIColor redColor]];
        [label setText:@"Blog"];
        [label sizeToFit];

        int space=6;
        label.frame=CGRectMake(imageView.frame.origin.x+imageView.frame.size.width+space, label.frame.origin.y, label.frame.size.width, label.frame.size.height);
        UIView *view=[[UIView alloc] initWithFrame:CGRectMake(0, 0, label.frame.size.width+imageView.frame.size.width+space, imageView.frame.size.height)];

        view.bounds=CGRectMake(view.bounds.origin.x+8, view.bounds.origin.y-1, view.bounds.size.width, view.bounds.size.height);
        [view addSubview:imageView];
        [view addSubview:label];

        UIButton *button=[[UIButton alloc] initWithFrame:view.frame];
        [button addTarget:self action:@selector(handleBack:) forControlEvents:UIControlEventTouchUpInside];
        [view addSubview:button];

        [UIView animateWithDuration:0.33 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
            label.alpha = 0.0;
            CGRect orig=label.frame;
            label.frame=CGRectMake(label.frame.origin.x+25, label.frame.origin.y, label.frame.size.width, label.frame.size.height);
            label.alpha = 1.0;
            label.frame=orig;
        } completion:nil];

        UIBarButtonItem *backButton =[[UIBarButtonItem alloc] initWithCustomView:view];
}

- (void) handleBack:(id)sender{
}

BIÊN TẬP:

Thay vì thêm nút, theo tôi cách tiếp cận tốt hơn là sử dụng bộ nhận dạng cử chỉ.

UITapGestureRecognizer* tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleBack:)];
[view addGestureRecognizer:tap];
[view setUserInteractionEnabled:YES];

1
Xin chào Alex, Cảm ơn giải pháp. Một vấn đề tôi gặp phải với giải pháp đã triển khai này là: Khu vực nhấn ít có nghĩa là khi tôi nhấp vào mũi tên, tay cầmBack không nhận được cuộc gọi nhưng khi tôi nhấp vào văn bản xử lý cuộc gọi Nhận lại cuộc gọi. Xin đề nghị về điều này. Cảm ơn bạn
Yogesh Lolusare

Hãy thử sử dụng UITapGestureRecognizer tôi đã chỉnh sửa câu hỏi
Alexey

Có lẽ bạn cũng có thể cố gắng tăng kích thước của chế độ xem.
Alexey

2
Màu đen trên nút này làm cho nó trở thành một mẫu. Bạn không cần phải sử dụng gimp để thay đổi nó. Chỉ cần sử dụng imageView.tint = [UIColor redColor]chế độ hiển thị màu và mẫu trên hình ảnh. imageView.image = [yourImage imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
hút thuốc

18

Tôi không chắc liệu điều này có hoạt động không, nhưng bạn có thể thử tạo một UINavigationControllercài đặt mặc định để tạo nút, tìm nút trong phân cấp chế độ xem phụ của bộ điều khiển điều hướng, gọi removeFromSuperviewnó, hủy bộ điều khiển điều hướng và sau đó thêm nút như một khung nhìn của thanh công cụ của bạn. Bạn cũng có thể cần retainvà nút trước khi gọi removeFromSuperview(và sau đó là nút releasenày dưới dạng xem dưới dạng thanh công cụ của bạn) để tránh bị tắt trong quá trình này.


14

Để tạo một UIButton bằng một mũi tên khá gần (Tôi không phải là nhà thiết kế;) cho mũi tên quay lại của hệ thống iOS 7:

Tiêu chuẩn:

Mũi tên quay lại hệ thống tiêu chuẩn

Apple SD Gothic Neo

Apple SD Gothic Neo <nhân vật

Trong Xcode:

  • Tập trung vào trường giá trị tiêu đề của nút (hoặc bất kỳ chế độ xem / điều khiển nào khác có nội dung văn bản)
  • Mở Chỉnh sửa -> Ký tự đặc biệt
  • Chọn nhóm Dấu ngoặc đơn và nhấp đúp vào ký tự '<'
  • Thay đổi phông chữ thành: Apple SD Gothic Neo, Thường xuyên với kích thước mong muốn (ví dụ 20)
  • Thay đổi màu sắc theo ý muốn

Câu trả lời của Ref @ staticVoidMan cho mũi tên Back-like trên iOS 7


8

mũi tên lùi

Nếu bạn không muốn làm phiền với các tệp hình ảnh, hình dạng mũi tên có thể được vẽ trong một lớp con UIView với mã sau đây:

- (void)drawRect:(CGRect)rect {
    float width = rect.size.width;
    float height = rect.size.height;
    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextBeginPath(context);
    CGContextMoveToPoint(context, width * 5.0/6.0, height * 0.0/10.0);
    CGContextAddLineToPoint(context, width * 0.0/6.0, height * 5.0/10.0);
    CGContextAddLineToPoint(context, width * 5.0/6.0, height * 10.0/10.0);
    CGContextAddLineToPoint(context, width * 6.0/6.0, height * 9.0/10.0);
    CGContextAddLineToPoint(context, width * 2.0/6.0, height * 5.0/10.0);
    CGContextAddLineToPoint(context, width * 6.0/6.0, height * 1.0/10.0);
    CGContextClosePath(context);

    CGContextSetFillColorWithColor(context, [UIColor blackColor].CGColor);
    CGContextFillPath(context);
}

trong đó chế độ xem mũi tên tỷ lệ thuận với chiều rộng 6.0 và chiều cao 10.0


7
    self.navigationItem.leftBarButtonItem = self.navigationItem.backBarButtonItem;

Làm việc cho tôi. Tôi đã sử dụng điều này khi tôi có nhiều tab hơn sau đó có thể vừa trên thanh tab và trình điều khiển chế độ xem được đẩy từ "Khác" vượt qua bên tráiBarButtonItem trong viewDidLoad của nó.


4

Bạn có thể tìm thấy hình ảnh nguồn bằng cách trích xuất chúng từ Other.artwork trong UIKit $ {SDKROOT} / System / L Library / Frameworks / UIKit.framework / Other.artwork. Cộng đồng modding có một số công cụ để trích xuất chúng, ở đây . Khi bạn trích xuất hình ảnh, bạn có thể viết một số mã để tô màu lại khi cần thiết và đặt nó làm hình ảnh nút. Cho dù bạn có thực sự có thể vận chuyển một thứ như vậy hay không (vì bạn đang nhúng tác phẩm nghệ thuật có nguồn gốc) có thể hơi rắc rối, vì vậy có lẽ bạn muốn nói chuyện với một luật sư.


4

Thư viện Three20 có một cách để làm điều này:

  UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithTitle: @"Title" style:UIBarButtonItemStylePlain 
                                                                target:self action:@selector(foo)];

  UIColor* darkBlue = RGBCOLOR(109, 132, 162);

  TTShapeStyle* style = [TTShapeStyle styleWithShape:[TTRoundedLeftArrowShape shapeWithRadius:4.5] next:
    [TTShadowStyle styleWithColor:RGBCOLOR(255,255,255) blur:1 offset:CGSizeMake(0, 1) next:
    [TTReflectiveFillStyle styleWithColor:darkBlue next:
    [TTBevelBorderStyle styleWithHighlight:[darkBlue shadow]
                                     shadow:[darkBlue multiplyHue:1 saturation:0.5 value:0.5]
                                      width:1 lightSource:270 next:
    [TTInsetStyle styleWithInset:UIEdgeInsetsMake(0, -1, 0, -1) next:
    [TTBevelBorderStyle styleWithHighlight:nil shadow:RGBACOLOR(0,0,0,0.15)
                                        width:1 lightSource:270 next:nil]]]]]];

  TTView* view = [[[TTView alloc] initWithFrame:CGRectMake(0, 0, 80, 35)] autorelease];
  view.backgroundColor = [UIColor clearColor];
  view.style = style;
  backButton.customView = view;


  self.navigationItem.leftBarButtonItem = backButton;

Bạn có thể đăng một ảnh chụp màn hình của kết quả cuối cùng?
jm.

1
Trông nó thật kinh khủng. Không bao giờ có nút mũi tên trái trở lại để nhìn khá bên phải. Tôi đã từ bỏ và sử dụng một nút quay lại thích hợp với hoa tiêu Three20.
Mũi tên Andrew

4

Tôi thấy rằng bằng cách sử dụng như sau, mã đơn giản đã thực hiện thủ thuật (yêu cầu hình ảnh tùy chỉnh trong gói):

// Creates a back button instead of default behaviour (displaying title of previous screen)
    UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"back_arrow.png"]
                                                                   style:UIBarButtonItemStyleBordered
                                                                  target:self
                                                                  action:@selector(backAction)];

    tipsDetailViewController.navigationItem.leftBarButtonItem = backButton;
    [backButton release];

2
Đối với bất kỳ ai đến trang này, hãy kết hợp câu trả lời này với câu trả lời của @ PyjamaSam.
PrairieHippo

@PrairiHippo: Đã được thực hiện ngay bây giờ. Có lẽ nên được chỉnh sửa ở nơi đầu tiên. Lý tưởng -1 cho việc không làm điều đó ở nơi đầu tiên để lại công việc cho người khác.
hakre

4

Đây là những gì tôi đã làm sau khi tìm kiếm thông qua tất cả các giải pháp và những giải pháp khác. Nó sử dụng một png có thể kéo dài được trích xuất từ ​​hình ảnh chứng khoán UIKit. Bằng cách này bạn có thể đặt văn bản thành bất cứ điều gì bạn nói dối

// Generate the background images
UIImage *stretchableBackButton = [[UIImage imageNamed:@"UINavigationBarDefaultBack.png"] stretchableImageWithLeftCapWidth:14 topCapHeight:0];
UIImage *stretchableBackButtonPressed = [[UIImage imageNamed:@"UINavigationBarDefaultBackPressed.png"] stretchableImageWithLeftCapWidth:13 topCapHeight:0];
// Setup the UIButton
UIButton *backButton = [UIButton buttonWithType:UIButtonTypeCustom];
[backButton setBackgroundImage:stretchableBackButton forState:UIControlStateNormal];
[backButton setBackgroundImage:stretchableBackButtonPressed forState:UIControlStateSelected];
NSString *buttonTitle = NSLocalizedString(@"Back", @"Back");
[backButton setTitle:buttonTitle forState:UIControlStateNormal];
[backButton setTitle:buttonTitle forState:UIControlStateSelected];
backButton.titleEdgeInsets = UIEdgeInsetsMake(0, 5, 2, 1); // Tweak the text position
NSInteger width = ([backButton.titleLabel.text sizeWithFont:backButton.titleLabel.font].width + backButton.titleEdgeInsets.right +backButton.titleEdgeInsets.left);
[backButton setFrame:CGRectMake(0, 0, width, 29)];
backButton.titleLabel.font = [UIFont boldSystemFontOfSize:13.0f];
[backButton addTarget:self action:@selector(yourSelector:) forControlEvents:UIControlEventTouchDown];
// Now add the button as a custom UIBarButtonItem
UIBarButtonItem *backButtonItem = [[[UIBarButtonItem alloc] initWithCustomView:backButton] autorelease];
self.navigationItem.leftBarButtonItem = backButtonItem;

2
Nên sử dụng UIControlStateHighlighted không UIControlStateSelected nếu không hình ảnh sẽ hoán đổi khi chạm vào nút.
Jim

4

Thật dễ dàng với Trình tạo giao diện trong Xcode 5.x

Kết quả

  • sử dụng Thanh công cụThanh nút Mục từ thư viện Đối tượng

    Các thành phần

  • trong nút của Trình kiểm tra thuộc tính chỉnh sửa Phần hình ảnh với hình ảnh nút quay lại của bạn

    Thanh tra thuộc tính

Làm xong!


2

Tôi đã cố gắng làm điều tương tự, nhưng tôi muốn nút quay lại nằm trong thanh điều hướng. (Tôi thực sự cần một nút quay lại, điều đó sẽ làm được nhiều hơn là chỉ quay lại, vì vậy tôi phải sử dụng thuộc tính leftBarButtonItem). Tôi đã thử những gì AndrewS đề xuất, nhưng trong thanh điều hướng, nó sẽ không giống như vậy, vì UIButton là loại được đúc thành UIBarButtonItem.

Nhưng tôi tìm thấy một cách để làm việc này. Tôi thực sự chỉ cần đặt một UIView dưới UIButton và đặt customView cho UIBarButtonItem. Đây là mã, nếu ai đó cần nó:

// initialize button and button view
UIButton *backButton = [UIButton buttonWithType:101];
UIView *backButtonView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, backButton.frame.size.width, backButton.frame.size.height)];

[backButton addTarget:self action:@selector(backButtonTouched:) forControlEvents:UIControlEventTouchUpInside];
[backButton setTitle:@"Back" forState:UIControlStateNormal];
[backButtonView addSubview:backButton];

// set buttonview as custom view for bar button item
UIBarButtonItem *backButtonItem = [[UIBarButtonItem alloc] initWithCustomView:backButtonView];
self.navigationItem.leftBarButtonItem = backButtonItem;

// push item to navigationbar items
[self.navigationController.navigationBar setItems:[NSArray arrayWithObject:backButtonItem]];

1

Để tạo một hình ảnh cho UIToolbar, hãy tạo một png trong photoshop và WHERE EVER có màu nào nó đặt nó thành màu trắng và ở đó alpha = 0 thì nó để yên.

SDK thực sự đặt đường viền xung quanh biểu tượng bạn đã tạo và biến nó thành màu trắng mà bạn không phải làm gì cả.

Hãy xem, đây là những gì tôi đã tạo trong Photoshop cho nút chuyển tiếp của mình (rõ ràng là trao đổi nó xung quanh cho nút quay lại):

http://twitpic.com/1oanv

và đây là những gì nó xuất hiện trong Interface Builder

http://twitpic.com/1oaoa


1

Giải pháp KHÔNG sử dụng png. Dựa trên câu trả lời SO này: Thêm mũi tên nhỏ vào bên phải của một ô trong Ô Bảng TableView

Chỉ cần lật UITableViewCell theo chiều ngang!

UIButton *btnBack = [[UIButton alloc] initWithFrame:CGRectMake(0, 5, 70, 20)];

// Add the disclosure
CGRect frm;
UITableViewCell *disclosure = [[UITableViewCell alloc] init];
disclosure.transform = CGAffineTransformScale(CGAffineTransformIdentity, -1, 1);
frm = self.btnBack.bounds;
disclosure.frame = CGRectMake(frm.origin.x, frm.origin.y, frm.size.width-25, frm.size.height);
disclosure.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
disclosure.userInteractionEnabled = NO;
[self.btnBack addSubview:disclosure];

// Add the label
UILabel *lbl = [[UILabel alloc] init];
frm = CGRectOffset(self.btnBack.bounds, 15, 0);
lbl.frame = frm;
lbl.textAlignment = NSTextAlignmentCenter;
lbl.text = @"BACK";
[self addSubview:lbl];

1

Swift 5.2 Xcode 11.4

Hiện tại chevron.left của Apple Symbol cho phép một giải pháp thanh lịch hơn để tạo một nút tùy chỉnh. Tôi đã phù hợp với kích thước và khoảng cách càng gần càng tốt.

nhập mô tả hình ảnh ở đây

import UIKit

class CustomBackButton: UIBarButtonItem {

    convenience init(target: Any, selector: Selector) {

        // Create UIButton
        let button = UIButton(frame: .zero)

        // Customise Title
        button.setTitle("Back", for: .normal)
        button.setTitleColor(.systemBlue, for: .normal)
        button.titleLabel?.font = UIFont.systemFont(ofSize: 17)

        // Customise Image
        let config = UIImage.SymbolConfiguration(pointSize: 19.0, weight: .semibold, scale: .large)
        let image = UIImage(systemName: "chevron.left", withConfiguration: config)
        button.setImage(image, for: .normal)

        // Add Target
        button.addTarget(target, action: selector, for: .touchUpInside)

        // Customise Spacing to match system Back button
        button.imageEdgeInsets = UIEdgeInsets(top: 0.0, left: -18.0, bottom: 0.0, right: 0.0)
        button.titleEdgeInsets = UIEdgeInsets(top: 0.0, left: -12.0, bottom: 0.0, right: 0.0)

        self.init(customView: button)
    }
}

Điều này có thể được thực hiện như là một UIToolbarItemhoặcUINavigationItem

override func viewDidLoad() {
    super.viewDidLoad()

    // UIToolbar Item
    let barBackButton = CustomBackButton(target: self, selector: #selector(backButtonTapped))
    let flexSpace = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
    navigationController?.setToolbarHidden(false, animated: false)
    toolbarItems = [barBackButton, flexSpace]

    // Navigation Item
    let navBackButton = CustomBackButton(target: self, selector: #selector(backButtonTapped))
    navigationItem.leftBarButtonItem = navBackButton
}

@objc func backButtonTapped() {
    print("Back tapped")
}

Nếu bạn muốn lật nút và có mũi tên chỉ vào bên phải:

nhập mô tả hình ảnh ở đây

Sử dụng Biểu tượng Apple có tên "chevron.right"

Thêm mã sau vào CustomBackButtonlớp:

    // Put the image of the right side of the button
    button.transform = CGAffineTransform(scaleX: -1.0, y: 1.0)
    button.titleLabel?.transform = CGAffineTransform(scaleX: -1.0, y: 1.0)
    button.imageView?.transform = CGAffineTransform(scaleX: -1.0, y: 1.0)

0

Nếu bạn muốn tránh tự vẽ, bạn có thể sử dụng lớp không có giấy tờ: UINavlationButton với kiểu 1. Tất nhiên, điều này có thể ngăn ứng dụng của bạn được chấp thuận ... / John


0

Chà, bạn không cần phải có một nút khác nhau cho mọi kích cỡ, bạn có thể sử dụng [UIImage stretchableImageWithLeftCapWidth:topCapHeight:], nhưng điều duy nhất tôi tìm thấy là hình ảnh tùy chỉnh.


0

Tôi đã có một vấn đề tương tự, và đi ra một thư viện PButton . Và mẫu là nút điều hướng trở lại, có thể được sử dụng ở bất cứ đâu giống như nút tùy chỉnh.

Một cái gì đó như thế này: nhập mô tả hình ảnh ở đây


0

Ví dụ trong Swift 3, với nút trước và nút tiếp theo ở trên cùng bên phải.

let prevButtonItem = UIBarButtonItem(title: "\u{25C0}", style: .plain, target: self, action: #selector(prevButtonTapped))
let nextButtonItem = UIBarButtonItem(title: "\u{25B6}", style: .plain, target: self, action: #selector(nextButtonTapped))
self.navigationItem.rightBarButtonItems = [nextButtonItem, prevButtonItem]

0

Nhanh

// create button
    var backButton = UIButton(type: 101)

    // left-pointing shape!
    backButton.addTarget(self, action: #selector(self.backAction), for: .touchUpInside)
    backButton.setTitle("Back", for: .normal)

    // create button item -- possible because UIButton subclasses UIView!
    var backItem = UIBarButtonItem(customView: backButton)

    // add to toolbar, or to a navbar (you should only have one of these!)
    toolbar.items = [backItem]
    navItem.leftBarButtonItem = backItem

-5

Thử cái này. Tôi chắc chắn rằng bạn không cần một hình ảnh nút quay lại để tạo ra một hình ảnh như vậy.

UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithTitle:@"Back"
                                                               style:UIBarButtonItemStyleBordered
                                                              target:self
                                                              action:@selector(yourSelectorGoesHere:)];
self.navigationItem.backBarButtonItem = backButton;

Đó là tất cả những gì bạn phải làm :)


-23

Tại sao anh làm điều này? Nếu bạn muốn một cái gì đó trông giống như một thanh điều hướng, hãy sử dụng UINavestionBar.

Thanh công cụ có phong cách hình ảnh cụ thể liên quan đến chúng. Nguyên tắc giao diện con người cho trạng thái iPhone:

Một thanh công cụ xuất hiện ở cạnh dưới cùng của màn hình và chứa các nút thực hiện các hành động liên quan đến các đối tượng trong chế độ xem hiện tại.

Sau đó, nó đưa ra một số ví dụ trực quan về các biểu tượng gần như vuông không có văn bản. Tôi mong bạn hãy theo dõi HIG về điều này.


8
Tôi biết điều này, cảm ơn bạn. Tuy nhiên, tôi tin rằng mục đích sử dụng của tôi là phù hợp. Bạn có thể hữu ích hơn, giả sử rằng tôi thực sự muốn làm những gì tôi yêu cầu?
Marco

Nếu bạn đặt nó ở trên cùng của màn hình, nó sẽ bị sử dụng sai. So sánh độ dốc và đường viền giữa UINavestionBar và UIToolbar, và bạn sẽ thấy rằng chúng hơi khác nhau. Bạn chắc chắn muốn sử dụng một UINavestionBar ở đầu màn hình.
NilObject

10
Tôi đang đặt nó ở dưới cùng.
Marco
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.