iOS SDK-CoreAnimation、美しいボタンのプログラミング

多くの場合、モバイルユーザーインターフェイスでコントロールをすばやく作成する必要に直面しました。 標準のUIButtonボタンを検討してください。 基本的な制御は要求の厳しい顧客には適さず、多くの場合、標準ソリューションはボタンのステータスビットマップをプルします。 それが引き伸ばされた画像であろうと完全に切り取られたボタンであろうと、このソリューションはユーザーインターフェースの追加の時間のかかる設計を必要とします。 基本的なUIButtonよりも広い視覚機能を備えたユニバーサルコントロールがあると便利です。





最も論理的なものはUIButtonを拡張しているようです。

UIButtonから継承した独自のクラスを作成します（プロジェクトにQuartzCore.frameworkを含めることを忘れないでください）。これにより、iOS vizulkaとの共存が非常に簡単になります。



@class CAGradientLayer;



@interface CustomButton : UIButton {

@private

UIColor* _gradientStartColor;

UIColor* _gradientEndColor;



CAGradientLayer* _gradientLayer;

}



@property (nonatomic, retain) UIColor* gradientStartColor;

@property (nonatomic, retain) UIColor* gradientEndColor;



@end









多くの人が推測しているように、CAGradientLayerを使用してボタンのグラデーション背景を描画します。 このクラスは豊富な塗りつぶしオプションを提供します。 それらのごく一部（基本）のみを検討します。



#import "CustomButton.h"

#import <QuartzCore/QuartzCore.h>



@implementation CustomButton



@synthesize gradientStartColor = _gradientStartColor;

@synthesize gradientEndColor = _gradientEndColor;









InterfaceBuilder（以降IB）でコントロールを使用する予定なので、以下のメソッドで初期化を行う必要があります。



-(void)awakeFromNib;

{

_gradientLayer = [[CAGradientLayer alloc] init];

_gradientLayer.bounds = self.bounds;



_gradientLayer.position = CGPointMake(self.bounds.size.width/2, self.bounds.size.height/2);



[self.layer insertSublayer:_gradientLayer atIndex:0];



self.layer.cornerRadius = 5.0f; // ,

self.layer.masksToBounds = YES;

self.layer.borderWidth = 1.0f;



}









グラデーションレイヤー描画



- (void)drawRect:(CGRect)rect;

{

if (_gradientStartColor && _gradientEndColor)

{

[_gradientLayer setColors:

[NSArray arrayWithObjects: (id)[_gradientStartColor CGColor]

, (id)[_gradientEndColor CGColor], nil]];

}



[super drawRect:rect];

}









私たちは何かを忘れましたか？



- (void)dealloc {

[_gradientEndColor release];

[_gradientStartColor release];

[_gradientLayer release];

[super dealloc];

}



@end







これが私たちの小さなクラスマンとzameplmenenyです。インターフェースに挿入してみましょう。



コントローラにクラスタイプのアウトレットタイプを作成します（CustomButton）



@interface GlossyButtonTestViewController : UIViewController {

@private

IBOutlet CustomButton* btn;

}









IBを開き、タイプが「カスタム」のボタンを挿入し、コントローラーのコンセントに関連付けます。

コントローラー実装の本体に、ボタンの背景グラデーションの色値の初期化を追加します。



- (void)viewDidLoad {

[super viewDidLoad];



btn.gradientStartColor = [UIColor whiteColor];

btn.gradientEndColor = [UIColor grayColor];

[self.view addSubview:btn];

}









プロジェクトを集めて見る

ここにボタンがあります







それ自体がボタンであり、自分自身を制限することもできますが、さらに先に進みます。 明らかに十分な輝きがありません。



完了と言われています-ボタンにハイライトを追加します。



インターフェイスに別のレイヤーを挿入し、その初期化をawakeFromNibに追加します



_glossyLayer = [[CAGradientLayer alloc] init];

_glossyLayer.bounds = CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height/2);

_glossyLayer.position = CGPointMake(self.bounds.size.width/2, self.bounds.size.height/4);

[self.layer addSublayer:_glossyLayer];









drawRectでは、レイヤーのグラデーションの色の初期化を追加します





[_glossyLayer setColors:

[NSArray arrayWithObjects:

(id)[[UIColor colorWithRed:1.0f green:1.0f blue:1.0f alpha:0.99f] CGColor]

, (id)[[UIColor colorWithRed:1.0f green:1.0f blue:1.0f alpha:0.2f] CGColor], nil]];







そして...実行

以上です。







CoreAnimationレイヤーに遷移トランザクションなどを追加できることを忘れないでください。

私たちのクラスは本質的に有益であり、プロジェクトで完全に使用するには、状態アニメーションでそれを拡張する必要があります。



投稿Marshet15の著者ですが、記事を公開するのに十分なカルマがありません。