web-dev-qa-db-ja.com

iOSで大きな赤いUIButtonを作成するにはどうすればよいですか？

IOSを使用して、iPhoneで連絡先を削除するときに使用するボタンに似た赤い「削除」ボタンを作成するにはどうすればよいですか？

iosobjective-cuitableviewuibutton
52
igul222

まず、伸縮可能な画像から始めます。

代替テキスト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];

明らかに、アプリ、ターゲット、セレクター、タイトルに合わせて、フレームの原点とサイズを調整する必要があります。

85
coneybeare

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

Cellで使用したい場合は、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

62
Staeff

私はそれらのものが優れていると思います（そして 彼らは網膜ディスプレイできれいに見える あまりにも）：

alt textalt text

この非常に素晴らしい.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];
22
yonel

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

この方法で行う利点の1つは、選択したボタンのバージョンを作成したり、状態を強調表示したり、画像を標準のUIButtonに割り当てたりできることです。

2
Ramin

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

0
Tim

画像を使用しないが、連絡先の「削除」ボタンと同じ外観を提供するソリューションに貢献したいと思います。以下の例では、ストーリーボードで設計されたgrouped、静的セルのUITableViewを想定しています。セクションの1つにセルが1つだけになるようにします。そのセルは「削除」ボタンになります。セルの背景色を赤にします（例：赤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として濃い色の別のビューを設定します。

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

削除セルのセクション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];
     */

}
0
Brabbeldas