iOS와 함께 크고 빨간 Uibutton을 어떻게 만들 수 있습니까?

Question

iOS를 사용하면 iPhone에서 연락처를 삭제할 때 사용 된 것과 유사한 빨간색 "삭제"버튼을 만드는 방법은 무엇입니까?

Answer 1

먼저 스트레칭 이미지로 시작합니다.

대체 텍스트 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];

분명히, 대상, 선택기 및 제목뿐만 아니라 앱과 일치하도록 프레임 원점과 크기를 조정해야합니다.

Answer 2

나는 또한 몇 가지 버튼을 만들었습니다 ... retina 및 non-retina 버전

셀에서 사용하려면 CellforyAtIndexPath에서 다음 코드를 사용하십시오.

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 3

나는 그 사람들이 더 낫다고 생각합니다 (그리고 그들은 망막 디스플레이에서 잘 보입니다 도) :

.png이 아주 좋은 .psd 파일에서 생성되었습니다. http://www.teehanlax.com/blog/2010/08/12/iphone-4-gui-psd-retina-display/

그런 다음 그것을 당신의 배경을위한 strechable 이미지로 사용하십시오. 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 4

아마도 가장 간단한 방법은 잡아 당기는 것입니다. 이 iPhone Gui Photoshop 파일 여기에는 PSD 레이어에 많은 UI 요소가 포함되어 있으며 Photoshop의 큰 버튼의 색조를 변경하고 PNG로 저장합니다.

이런 방식으로 수행하는 한 가지 장점은 버튼을 선택한 버전을 만들거나 상태를 강조 표시하고 이미지를 표준 UIBIRTTON에 할당 할 수 있다는 것입니다.

Answer 5

그룹화 된 테이블보기에서 별도의 섹션을 만들고 해당 섹션에 한 행만 제공 한 다음 해당 셀의 배경 이미지를 빨간색 구배 이미지로 설정할 수 있습니다. 그래도 그 이미지를 스스로 재현해야합니다.

Answer 6

이미지를 사용하지 않지만 연락처에서 '삭제'버튼과 동일한 모양을 제공하는 솔루션을 제공하고 싶습니다. 아래 예에서는 uitableview를 사용하여 사용합니다. 그룹화, 스토리 보드로 설계된 정적 셀. 섹션 중 하나에 단일 셀만이 있습니다. 그 셀은 '삭제'버튼이됩니다. 셀에게 빨간색 배경색을 제공합니다 (Fe Red 221, Green 0, Blue 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];
}

위의 내용은 연락처에서 '삭제'버튼처럼 유리 모양을 제공합니다. 그러나 우리는 또한 사용자가 탭할 때 색상을 변경하기를 원합니다. 이것이 위의 방법의 마지막 코드가 할 일입니다. 선택한 BackgroundView와 같이 어두운 색상으로 다른보기를 설정합니다.

셀을 두드린 후에는 선택된 상태를 유지하고 어두운 색을 유지합니다. 셀을 자동으로 선택 해제하려면 다음을 수행합니다.

삭제 셀의 섹션 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];
     */

}