ios - 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

また、いくつかのボタンを作成しました...網膜と非網膜のバージョン

それらをセルで使用する場合は、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 3

それらの方が優れていると思います（Retinaディスプレイでもきれいに見えます）：

この非常に素晴らしい .psd ファイルから生成された .png : http://www.teehanlax.com/blog/2010/08/12/iphone-4-gui-psd-retina-display/

そして、あなたの背景の伸縮可能な画像としてそれを使用します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

おそらく最も簡単な方法は、PSD レイヤーに多くの UI 要素を含むこの iPhone GUI Photoshop ファイルを取得し、Photoshop で大きなボタンの色合いを変更して PNG として保存することです。

この方法の利点の 1 つは、選択されたボタンやハイライト状態のバージョンを作成し、画像を標準の UIButton に割り当てることもできることです。

Answer 5

グループ化されたテーブル ビューに別のセクションを作成し、そのセクションに 1 行のみを指定して、そのセルの背景画像を赤のグラデーション画像に設定できます。ただし、そのイメージを自分で再作成する必要があります。

Answer 6

画像を使用しないが、連絡先の「削除」ボタンと同じ外観を与えるソリューションに貢献したいと思います。以下の例では、ストーリーボードで設計された、グループ化された静的セルを持つ UITableView を想定して使用します。セクションの 1 つにセルが 1 つだけあるようにします。そのセルは「削除」ボタンになります。セルの背景色を赤にする (fe 赤 221、緑 0、青 2)

セルに 2 つの GradientLayers を追加します。最初はセルの上半分をカバーします。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 として、より暗い色の別のビューを設定します。

タップした後、セルは選択されたままになり、暗い色が維持されます。セルの選択を自動的に解除するには、次のようにします。

削除セルのセクション番号を定義する定数から始めます。

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

}