كيف يمكنني إنشاء، UIButton أحمر كبير مع دائرة الرقابة الداخلية؟

Question

وعن طريق دائرة الرقابة الداخلية، وكيف أذهب حول إنشاء أحمر "حذف" زر مماثلة لتلك المستخدمة عند حذف الاتصالات على اي فون؟

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

واعتقد ان هذه الامور هي أفضل (و التي تبدو جيدة على شاشة شبكية العين أيضا):

وبابوا نيو غينيا ولدت من هذا الملف مديرية الأمن العام لطيفة جدا: <لأ href = "http://www.teehanlax.com/blog/2010/08/12/iphone-4-gui-psd-retina-display/" يختلط = "noreferrer"> 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

ولعل أبسط طريقة للقيام بذلك هو عقبة هذا الملف فون GUI فوتوشوب يحتوي على الكثير من عناصر واجهة المستخدم في طبقات PSD، ثم تغيير لون زر كبير في فوتوشوب وحفظه ك PNG.

وميزة واحدة لفعل ذلك بهذه الطريقة هو أنه يمكنك أيضا إنشاء إصدارات لالزر المحدد و / أو تسليط الضوء على الدولة وتعيين الصور إلى UIButton المعيار.

Answer 5

ويمكنك إنشاء قسم منفصل في عرض جدول مجمعة، وإعطاء هذا القسم صف واحد فقط، ووضع صورة خلفية تلك الخلية في صورة التدرج الحمراء. سيكون لديك لإعادة تلك الصورة بنفسك، وإن كان.

Answer 6

وأود أن تسهم الحل التي لا تستخدم الصور ولكن الذي يعطي نفس الشكل كما على زر 'حذف' في اتصالات. في المثال التالي وسوف تستخدم تولي UITableView مع <قوية> تجميع ، أو خلايا ثابتة، تهدف في القصة المصورة. جعل واحدة من الفروع لها سوى خلية واحدة. وهذه الخلية أن يكون على زر 'حذف'. إعطاء الخلية لون الخلفية الحمراء (f.e. الأحمر 221، أخضر 0، الأزرق 2)

ما سنقوم به هو إضافة اثنين GradientLayers إلى الخلية. أول سوف تغطي النصف العلوي من الخلية. والثانية تغطية النصف السفلي.

إضافة 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];
     */

}