Как я могу создать большой, красный UIButton с iPhone SDK?


используя iPhone SDK, как я могу создать красную кнопку" Удалить", аналогичную той, которая используется при удалении контактов на iPhone?

9 52

9 ответов:

сначала вы начинаете с растягиваемого изображения:

alt текст http://grab.by/4lP

затем вы делаете кнопку с растянутым изображением в качестве фона и применяете текст.

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];

очевидно, что вам нужно будет настроить происхождение и размер кадра в соответствии с вашим приложением, а также цель, селектор и заголовок.

Я также сделал несколько кнопок...сетчатка и не сетчатка версии

Если вы хотите использовать их в ячейке, просто используйте следующий код в 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];

Green Button Normal

Red Button Normal

Grey Button Normal

Green Button RetinaRed Button RetinaGrey Button Retina

Я думаю, что эти лучше (и они отлично смотрятся на дисплее сетчатки тоже) :

alt textalt text

.png генерируется из этого очень приятно .psd файл:http://www.teehanlax.com/blog/2010/08/12/iphone-4-gui-psd-retina-display/

а затем использовать его в качестве растягиваемого изображения для фона вашего UIButton:

Я добавил Некоторые изображения кнопок, доступные свободно под лицензией MIT на мой сайт, которые более точно соответствуют стеклянным кнопкам iOS. (но этот форум не позволит мне размещать изображения b / c я новичок)

чтобы загрузить их и пример кода, см.:

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

Я сделал это недавно также, и создание этой кнопки для него (и некоторые Monotouch пример кода для любого monotouchers):

alt текст http://www.yetanotherchris.me/storage/downloads/uiglassbutton-template.png

Он имеет меньше скоса, который лучше работает на любом фоне, но не соответствует iPhone UIGlassButton точно.

чтобы облегчить любой цвет, я создал свой собственный рендеринг для UIButton, который позволяет вам установить пользовательский оттенок.

для тех, кто заинтересован, его можно найти на github в

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

вероятно, самый простой способ сделать это-зацепить это iPhone GUI Photoshop файл который содержит множество элементов пользовательского интерфейса в слоях PSD, затем измените оттенок большой кнопки в Photoshop и сохраните ее как PNG.

одним из преимуществ этого способа является то, что вы также можете создавать версии для выбранной кнопки и/или выделять состояние и назначать изображения стандартному UIButton.

вы можете создать отдельный раздел в сгруппированном виде таблицы, дать этому разделу только одну строку и установить фоновое изображение этой ячейки в виде красного градиента. Однако вам придется воссоздать этот образ самостоятельно.

Я хотел бы внести свой вклад в решение, которое не использует изображения, но которое дает тот же вид, что и кнопка "удалить" в контактах. В приведенном ниже примере я буду предполагать UITableView с сгруппированы, статические ячейки, разработанные в раскадровке. Сделайте так, чтобы одна из секций имела только одну ячейку. Эта ячейка будет кнопкой "Удалить". Дайте ячейке красный цвет фона (например, красный 221, зеленый 0, синий 2)

что мы будем делать, это добавить два градиентных слоя в ячейку. Этот сначала покроет верхнюю половину ячейки. Второй покроет нижнюю половину.

добавить QuartzCore в файл реализации:

#import <QuartzCore/QuartzCore.h>

начните с создания выхода в эту ячейку:

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

создайте метод, в котором ячейка будет отформатирована:

- (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];
}

выше даст вашей ячейке стекло-посмотрите, как кнопка "удалить" в контактах. Но мы также хотим, чтобы он менял цвет, когда пользователь нажимает на него. Это то, что последний кусок кода в приведенном выше методе будет делать. Он установит другой вид с более темным цветом, как selectedBackgroundView.

после нажатия ячейка останется выбранной и сохранит свой темный цвет. Чтобы автоматически отменить выбор ячейки, мы делаем следующее:

начните с константы, которая определяет раздел nr вашей ячейки удаления:

static NSInteger const SECTION_DELETE = 1;

теперь использовать тег (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath метод (определенный в 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];
     */

}