Làm cách nào để tạo UIButton lớn, màu đỏ với SDK iPhone?

Question

Sử dụng SDK iPhone, tôi sẽ làm cách nào để tạo nút "xóa" màu đỏ tương tự như nút được sử dụng khi xóa danh bạ trên iPhone?

Answer 1

Trước tiên, bạn bắt đầu với một hình ảnh căng ra:

alt text http://grab.by/4lP

Sau đó, bạn thực hiện một nút với hình ảnh kéo dài như nền và áp dụng văn bản.

UIButton *sampleButton = [UIButton buttonWithType:UIButtonTypeCustom]; 
[sampleButton setFrame:CGRectMake(kLeftMargin, 10, self.view.bounds.size.width - kLeftMargin - kRightMargin, 52)]; 
[sampleButton setTitle:@"Button Title" forState:UIControlStateNormal]; 
[sampleButton setFont:[UIFont boldSystemFontOfSize:20]]; 
[sampleButton setBackgroundImage:[[UIImage imageNamed:@"redButton.png"] stretchableImageWithLeftCapWidth:10.0 topCapHeight:0.0] forState:UIControlStateNormal]; 
[sampleButton addTarget:self action:@selector(buttonPressed) forControlEvents:UIControlEventTouchUpInside]; 
[self.view addSubview:sampleButton]; 

Rõ ràng, bạn sẽ cần phải điều chỉnh kích thước khung hình và kích thước cho phù hợp với ứng dụng của mình, cũng như mục tiêu, công cụ chọn và tiêu đề.

Answer 2

Bạn có thể tạo một phần riêng biệt trong chế độ xem bảng được nhóm của bạn, chỉ cho phần đó một hàng và đặt hình nền của ô đó thành hình ảnh màu đỏ. Tuy nhiên, bạn sẽ phải tự tạo lại hình ảnh đó.

Answer 3

Có lẽ cách đơn giản nhất để làm là chụp this iPhone GUI Photoshop file có chứa nhiều phần tử giao diện người dùng trong các lớp PSD, sau đó thay đổi màu của nút lớn trong Photoshop và lưu dưới dạng PNG.

Một ưu điểm của việc làm theo cách này là bạn cũng có thể tạo phiên bản cho nút được chọn và/hoặc trạng thái đánh dấu và gán hình ảnh cho UIButton chuẩn.

Answer 4

Tôi đã làm điều này thời gian gần đây cũng có, và tạo nút này cho nó (and some Monotouch example code cho bất kỳ monotouchers):

alt text http://www.yetanotherchris.me/storage/downloads/uiglassbutton-template.png

Nó còn ít của một côn mà hoạt động tốt hơn trên nền bất kỳ, nhưng doesn' t khớp chính xác với iPhone UIGlassButton.

Answer 5

Tôi nghĩ rằng những cái tốt hơn (và họ nhìn tốt trên võng mạc trưng bày quá):

.png tạo ra từ rất thoải mái tập .psd này: http://www.teehanlax.com/blog/2010/08/12/iphone-4-gui-psd-retina-display/

Và sau đó sử dụng nó làm hình ảnh có thể phân chia cho nền của UIButton:

 
UIImage* greenButton = [UIImage imageNamed:@"UIButton_green.png"]; 
UIImage *newImage = [greenButton stretchableImageWithLeftCapWidth:greenButton.size.width/2 topCapHeight:greenButton.size.height/2]; 
[callButton setBackgroundImage:newImage forState:UIControlStateNormal]; 

Answer 6

Để làm cho nó dễ dàng bất kỳ màu nào tôi tạo dựng hình của riêng tôi cho UIButton cho phép bạn thiết lập một màu tùy chỉnh.

Đối với những người quan tâm, nó có thể được tìm thấy trên github tại

https://github.com/appsinyourpants/Pants-Framework/blob/master/Classes/Views/PFTintedButton.m

Answer 7

Tôi đã thêm một số hình ảnh nút có sẵn một cách tự do theo giấy phép MIT vào trang web của tôi, mà phù hợp chặt chẽ hơn nữa các nút kính iOS. (Nhưng diễn đàn này sẽ không cho phép tôi đăng hình ảnh b/c Tôi mới)

Để tải chúng và cho mẫu mã, xem:

http://www.geneticmistakes.com/articles/1000/stretchable-dynamic-images-for-buttons

Answer 8

Tôi cũng đã thực hiện một số nút. ..võng mạc và các phiên bản không-võng mạc

Nếu bạn muốn sử dụng chúng trong một di chỉ cần sử dụng đoạn mã sau vào cellForRowAtIndexPath:

UIButton *sampleButton = [UIButton buttonWithType:UIButtonTypeCustom]; 
[sampleButton setFrame:[cell.contentView frame]]; 
[sampleButton setFrame:CGRectMake(0, 0, cell.bounds.size.width-20, 44)]; 
[sampleButton setBackgroundImage:[UIImage imageNamed:@"button_red.png"] forState:UIControlStateNormal]; 
[cell addSubview:sampleButton]; 

Answer 9

Tôi muốn đóng góp một giải pháp không sử dụng hình ảnh nhưng mang lại giao diện giống như nút 'xóa' trong Danh sách liên hệ. Trong ví dụ dưới đây, tôi sẽ sử dụng giả định một UITableView với được nhóm, các ô tĩnh, được thiết kế trong bảng phân cảnh. Làm cho một trong các phần chỉ có một ô duy nhất. Ô đó sẽ là nút 'xóa'. Đặt cho ô có màu nền đỏ (ví dụ: Màu đỏ 221, Màu xanh lá cây 0, Màu xanh da trời 2)

Điều chúng ta sẽ làm là thêm hai GradientLayer vào ô. Việc đầu tiên sẽ bao gồm nửa trên của tế bào. Thứ hai sẽ bao gồm nửa dưới.

Thêm QuartzCore đến tập tin thực thi của bạn:

#import <QuartzCore/QuartzCore.h> 

Bắt đầu với việc một lối thoát để tế bào này:

@property (strong, nonatomic) IBOutlet UITableViewCell *cellDelete; 

Tạo một phương pháp trong đó các tế bào sẽ được định dạng:

- (void)formatCellDelete 
{ 
    // Top Gradient // 
    CAGradientLayer *gradientTop = [CAGradientLayer layer]; 

    // Make a frame for the layer based on the size of the cells contentView 
    // Make it half the height 
    // The width will be -20 so the gradient will not overflow 
    CGRect frame = CGRectMake(0, 0, _cellDelete.contentView.frame.size.width - 20, _cellDelete.contentView.frame.size.height/2); 
    gradientTop.frame = frame; 

    gradientTop.cornerRadius = 8; 

    UIColor* topColor = [UIColor colorWithWhite:1.0f alpha:0.75f]; 
    UIColor* bottomColor = [UIColor colorWithWhite:1.0f alpha:0.0f]; 
    gradientTop.colors = [NSArray arrayWithObjects:(id)[topColor CGColor], (id)[bottomColor CGColor], nil]; 

    [_cellDelete.contentView.layer setMasksToBounds:YES]; 
    [_cellDelete.contentView.layer insertSublayer:gradientTop atIndex:0]; 



    // Bottom Gradient // 
    CAGradientLayer *gradientBottom = [CAGradientLayer layer]; 

    // Make a frame for the layer based on the size of the cells contentView 
    // Make it half the height 
    // The width will be -20 so the gradient will not overflow 
    frame = CGRectMake(0, 0, _cellDelete.contentView.frame.size.width - 20, _cellDelete.contentView.frame.size.height/2); 
    // And move to bottom 
    frame.origin.y = frame.size.height; 
    gradientBottom.frame = frame; 

    topColor = [UIColor colorWithWhite:0.0f alpha:0.05f]; //0.20 
    bottomColor = [UIColor colorWithWhite:0.0f alpha:0.0f]; 
    gradientBottom.colors = [NSArray arrayWithObjects:(id)[topColor CGColor], (id)[bottomColor CGColor], nil]; 

    [_cellDelete.contentView.layer setMasksToBounds:YES]; 
    [_cellDelete.contentView.layer insertSublayer:gradientBottom atIndex:0]; 


    // Define a selected-backgroundColor so the cell changes color when the user tabs it 
    UIView *bgColorView = [[UIView alloc] init]; 
    [bgColorView setBackgroundColor:[UIColor colorWithRed:(float)(0.502) green:0.0 blue:0.0 alpha:1.000]]; 
    bgColorView.layer.cornerRadius = 10; 
    [_cellDelete setSelectedBackgroundView:bgColorView]; 
} 

Ở trên sẽ cho ô của bạn trông giống như nút 'xóa' trong Danh bạ. Nhưng chúng tôi cũng muốn nó thay đổi màu sắc khi người dùng chạm vào nó. Đây là những gì đoạn mã cuối cùng trong phương thức trên sẽ làm. Nó sẽ thiết lập một chế độ xem khác với màu tối hơn như lựa chọnBackgroundView.

Sau khi nhấn vào ô sẽ vẫn được chọn và sẽ giữ màu tối. Để tự động bỏ chọn các tế bào chúng ta làm như sau:

Bắt đầu với một hằng số trong đó xác định nr phần của tế bào xóa của bạn:

static NSInteger const SECTION_DELETE = 1; 

Bây giờ thực hiện phương pháp (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath (quy định tại UITableViewDelegate):

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath 
{ 

    if(indexPath.section == SECTION_DELETE){ 

     [tableView deselectRowAtIndexPath:indexPath animated:YES]; 
    } 


    // Navigation logic may go here. Create and push another view controller. 
    /* 
     *detailViewController = [[ alloc] initWithNibName:@"" bundle:nil]; 
    // ... 
    // Pass the selected object to the new view controller. 
    [self.navigationController pushViewController:detailViewController animated:YES]; 
    */ 

}