サーチ…
構文
// Objective-C
[UIView new] //ビューオブジェクトの割り当てと初期化を取得する
[[UIView alloc] initWithFrame：（CGRectを渡す）] //フレームで割り当てられ初期化されたビューを取得する
[[UIView alloc] init] //ビューオブジェクトを取得して初期化する
// Swift
UIView（）// CGRect.zeroフレームでUIViewインスタンスを作成します。
UIView（frame：CGRect）//フレームを指定するUIViewインスタンスを作成します。
UIView.addSubview（UIView）//別のUIViewインスタンスをサブビューとして追加する
UIView.hidden //ビューの可視性を取得または設定する
UIView.alpha //ビューの不透明度を取得または設定する
UIView.setNeedsLayout（）//ビューにレイアウトを強制的に更新させる
備考
UIViewクラスは、画面上の矩形領域と、その領域内のコンテンツを管理するためのインタフェースを定義します。実行時に、ビュー・オブジェクトは、その領域内の任意のコンテンツのレンダリングを処理し、そのコンテンツとの対話も処理します。
UIViewを作成する
目標-C
CGRect myFrame = CGRectMake(0, 0, 320, 35)
UIView *view = [[UIView alloc] initWithFrame:myFrame];
//Alternative way of defining the frame
UIView *view = [[UIView alloc] init];
CGRect myFrame = view.frame;
myFrame.size.width = 320;
myFrame.size.height = 35;
myFrame.origin.x = 0;
myFrame.origin.y = 0;
view.frame = myFrame;
迅速
let myFrame = CGRect(x: 0, y: 0, width: 320, height: 35)
let view = UIView(frame: myFrame)
ビューを丸くする
丸みのあるUIViewを作成するには、ビューのlayer cornerRadiusを指定します。
これは、 UIImageViewなど、 UIViewから継承するすべてのクラスにも適用されUIImageView 。
プログラム的に
スウィフトコード
someImageView.layoutIfNeeded()
someImageView.clipsToBounds = true
someImageView.layer.cornerRadius = 10
Objective-Cコード
[someImageView layoutIfNeeded];
someImageView.clipsToBounds = YES;
someImageView.layer.cornerRadius = 10;
例
//Swift code
topImageView.layoutIfNeeded()
bottomImageView.layoutIfNeeded()
topImageView.clipsToBounds = true
topImageView.layer.cornerRadius = 10
bottomImageView.clipsToBounds = true
bottomImageView.layer.cornerRadius = bottomImageView.frame.width / 2
//Objective-C code
[topImageView layoutIfNeeded]
[bottomImageView layoutIfNeeded];
topImageView.clipsToBounds = YES;
topImageView.layer.cornerRadius = 10;
bottomImageView.clipsToBounds = YES;
bottomImageView.cornerRadius = CGRectGetWidth(bottomImageView.frame) / 2;
結果は、指定されたコーナー半径を使用した丸みを帯びたビューエフェクトを示しています。
注意
これを行うには、QuartzCoreフレームワークを含める必要があります。
#import <QuartzCore/QuartzCore.h>
ストーリーボードの設定
ストーリーボードの対応するプロパティを設定することによって、 non-programmaticallyはなく、丸みを帯びたビューエフェクトを実現することもできます。
ストーリーボードではlayerプロパティは公開されないため、 cornerRadius属性は「ユーザー定義のランタイムアトリビュート」セクションで変更するcornerRadiusます。
スウィフトエクステンション
この便利な拡張機能を使用すると、幅と高さが同じであれば丸みのあるビューを適用できます。
extension UIView {
@discardableResult
public func setAsCircle() -> Self {
self.clipsToBounds = true
let frameSize = self.frame.size
self.layer.cornerRadius = min(frameSize.width, frameSize.height) / 2.0
return self
}
}
それを使用するには：
yourView.setAsCircle()
スナップショットを撮る
次のようにUIViewからスナップショットを取ることができます：
迅速
let snapshot = view.snapshotView(afterScreenUpdates: true)
目標-C
UIView *snapshot = [view snapshotViewAfterScreenUpdates: YES];
IBInspectableとIBDesignableの使用
最近のXcodeリリースで最もクールな新機能の1つ（または2つ）は、 IBInspectableプロパティとIBDesignable UIViewです。これらはアプリケーションの機能とは関係なく、Xcodeの開発者エクスペリエンスに影響を与えます。目標は、iOSアプリケーションを実行せずに、カスタムビューを視覚的に検査できるようにすることです。したがって、 UIViewから継承するCustomViewという名前のカスタムビューがあるとします。このカスタムビューでは、指定された色のテキスト文字列が表示されます。テキストを表示しないこともできます。我々は3つのプロパティが必要です：
var textColor: UIColor = UIColor.blackColor()
var text: String?
var showText: Bool = true
次に、クラス内のdrawRect関数をオーバーライドすることができます。
if showText {
if let text = text {
let s = NSString(string: text)
s.drawInRect(rect,
withAttributes: [
NSForegroundColorAttributeName: textColor,
NSFontAttributeName: UIFont(name: "Helvetica Neue", size: 18)!
])
}
}
textプロパティが設定されていると仮定すると、アプリケーションの実行時にビューの左上隅に文字列が描画されます。問題は、アプリケーションを実行しないと見た目がわからないことです。これはIBInspectableとIBDesignableが入っているIBInspectableですIBInspectableでは、組み込みのコントロールと同様に、Xcodeのビューのプロパティ値を視覚的に設定することができます。 IBDesignableは、ストーリーボードに視覚的なプレビューを表示します。クラスの外観は次のとおりです。
@IBDesignable
class CustomView: UIView {
@IBInspectable var textColor: UIColor = UIColor.blackColor()
@IBInspectable var text: String?
@IBInspectable var showText: Bool = true
override func drawRect(rect: CGRect) {
// ...
}
}
または目標C：
IB_DESIGNABLE
@interface CustomView: UIView
@property (nonatomic, strong) IBInspectable UIColor* textColor;
@property (nonatomic, strong) IBInspectable NSString* text;
@property (nonatomic, assign) IBInspectable BOOL showText;
@end
@implementation CustomView
- (instancetype)init {
if(self = [super init]) {
self.textColor = [UIColor blackColor];
self.showText = YES;
}
return self;
}
- (void)drawRect:(CGRect)rect {
//...
}
@end
次のスクリーンショットは、Xcodeで何が起こるかを示しています。最初のものは、改訂されたクラスを追加した後に起こることです。 3つのプロパティに3つの新しいUI要素があることに注意してください。 Text Colorはカラーピッカーを表示し、 Textは入力ボックスになり、 Show TextはOffとOnオプションをそれぞれfalseとtrueます。
次に、カラーピッカーを使用してテキストの色を赤に変更した後です。また、 drawRect関数で表示されるようにテキストが提供されています。 Interface Builderのビューも更新されていることに注意してください。
最後に、プロパティインスペクタでShow TextをOffに設定すると、Interface Builderのテキスト表示が消えます。
私たちは丸い作成する必要がある場合しかし、我々は、すべての状況を思い付くUIViewあなたに複数のビューで、 Storyboard宣言の.Instead IBDesignableのすべてのビューにStoryboardを作成し、その優れたExtensionのUIView 、ちょうどあなたのすべてのために作成されたユーザインタフェース取得UIViewストーリーボードで作成したすべてのUIViewで、設定可能なボーダー半径を設定して、丸みを帯びたビューを作成することができます。
extension UIView {
@IBInspectable var cornerRadius:CGFloat {
set {
layer.cornerRadius = newValue
clipsToBounds = newValue > 0
}
get {
return layer.cornerRadius
}
}
}
UIViewをアニメーション化する
let view = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
view.backgroundColor = UIColor.orange
self.view.addSubview(view)
UIView.animate(withDuration: 0.75, delay: 0.5, options: .curveEaseIn, animations: {
//This will cause view to go from (0,0) to
// (self.view.frame.origin.x,self.view.frame.origin.y)
view.frame.origin.x = self.view.frame.origin.x
view.frame.origin.y = self.view.frame.origin.y
}) { (finished) in
view.backgroundColor = UIColor.blueColor()
}
サイズとフレーム属性のUIView拡張
ビューの原点のx座標を取得する場合は、次のように記述する必要があります。
view.frame.origin.x
幅については、次のように書く必要があります。
view.frame.size.width
しかし、単純な拡張をUIViewに追加すると、次のようにすべての属性を非常に簡単に取得できます。
view.x
view.y
view.width
view.height
また、次のような属性の設定にも役立ちます。
view.x = 10
view.y = 10
view.width = 100
view.height = 200
単純な拡張は次のようになります。
extension UIView {
var x: CGFloat {
get {
return self.frame.origin.x
}
set {
self.frame = CGRect(x: newValue, y: self.frame.origin.y, width: self.frame.size.width, height: self.frame.size.height)
}
}
var y: CGFloat {
get {
return self.frame.origin.y
}
set {
self.frame = CGRect(x: self.frame.origin.x, y: newValue, width: self.frame.size.width, height: self.frame.size.height)
}
}
var width: CGFloat {
get {
return self.frame.size.width
}
set {
self.frame = CGRect(x: self.frame.origin.x, y: self.frame.origin.y, width: newValue, height: self.frame.size.height)
}
}
var height: CGFloat {
get {
return self.frame.height
}
set {
self.frame = CGRect(x: self.frame.origin.x, y: self.frame.origin.y, width: self.frame.size.width, height: newValue)
}
}
}
このクラスファイルをプロジェクトに追加する必要があり、プロジェクト全体で使用できるようになります。
他のUIViewとの間でUIViewの挿入と削除をプログラムで管理する
あなたが持っていると仮定parentView新しい挿入したいsubViewプログラム的に（例えば、挿入したいときUIImageViewへUIViewControllerのビュー）を使用すると、以下のようにそれを行うことができるよりも、。
目標-C
[parentView addSubview:subView];
迅速
parentView.addSubview(subView)
次のコードを使用して、既にsubView2である別のsubView2の下にサブビューを追加することもできます。
目標-C
[parentView insertSubview:subView belowSubview:subView2];
迅速
parentView.insertSubview(subView, belowSubview: subView2)
これをsubView2上に挿入する場合は、次のようにします。
目標-C
[parentView insertSubview:subView aboveSubview:subView2];
迅速
parentView.insertSubview(subView, aboveSubview: subView2)
あなたのコードのどこかにある特定のsubViewを前面に持ってくる必要があるsubViewは、他のすべてのparentViewのサブビューの上で、次のようにすることができます：
目標-C
[parentView bringSubviewToFront:subView];
迅速
parentView.bringSubviewToFront(subView)
最後に、 subViewからparentViewを削除する場合は、次のようにします。
目標-C
[subView removeFromSuperview];
迅速
subView.removeFromSuperview()
Autolayoutを使用してUIViewを作成する
UIView *view = [[UIView alloc] init];
[self.view addSubview:view];
//Use the function if you want to use height as constraint
[self addView:view onParentView:self.view withHeight:200.f];
//Use this function if you want to add view with respect to parent and should resize with it
[self addFullResizeConstraintForSubview:view addedOnParentView:self.view];
関数
自動レイアウト制約を使用して固定高さのビューを追加する機能
-(void)addView:(UIView*)subView onParentView:(UIView*)parentView withHeight:(CGFloat)height{
subView.translatesAutoresizingMaskIntoConstraints = NO;
NSLayoutConstraint *trailing =[NSLayoutConstraint
constraintWithItem:subView
attribute:NSLayoutAttributeTrailing
relatedBy:NSLayoutRelationEqual
toItem:parent
attribute:NSLayoutAttributeTrailing
multiplier:1.0
constant:10.f];
NSLayoutConstraint *top = [NSLayoutConstraint
constraintWithItem:subView
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:parent
attribute:NSLayoutAttributeTop
multiplier:1.0
constant:10.f];
NSLayoutConstraint *leading = [NSLayoutConstraint
constraintWithItem:subView
attribute:NSLayoutAttributeLeading
relatedBy:NSLayoutRelationEqual
toItem:parent
attribute:NSLayoutAttributeLeading
multiplier:1.0
constant:10.f];
[parent addConstraint:trailing];
[parent addConstraint:top];
[parent addConstraint:leading];
NSLayoutConstraint *heightConstraint =[NSLayoutConstraint
constraintWithItem:subView
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:0
multiplier:0.0
constant:height];
[subView addConstraint:heightConstraint];
}
関数は、作成されたUIViewのフルサイズ変更制約を追加します。
-(void)addFullResizeConstraintForSubview:(UIView*)subView addedOnParentView:(UIView*)parentView{
subView.translatesAutoresizingMaskIntoConstraints = NO;
NSLayoutConstraint *trailing =[NSLayoutConstraint
constraintWithItem:subView
attribute:NSLayoutAttributeTrailing
relatedBy:NSLayoutRelationEqual
toItem:parent
attribute:NSLayoutAttributeTrailing
multiplier:1.0
constant:10.f];
NSLayoutConstraint *top = [NSLayoutConstraint
constraintWithItem:subView
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:parent
attribute:NSLayoutAttributeTop
multiplier:1.0
constant:10.f];
NSLayoutConstraint *leading = [NSLayoutConstraint
constraintWithItem:subView
attribute:NSLayoutAttributeLeading
relatedBy:NSLayoutRelationEqual
toItem:parent
attribute:NSLayoutAttributeLeading
multiplier:1.0
constant:10.f];
NSLayoutConstraint *bottom =[NSLayoutConstraint
constraintWithItem:subView
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:parent
attribute:NSLayoutAttributeBottom
multiplier:1.0
constant:0.f];
[parent addConstraint:trailing];
[parent addConstraint:top];
[parent addConstraint:leading];
[parent addConstraint:bottom];
}
本質的なコンテンツサイズの活用
UIViewサブクラスを作成するとき、組み込みのコンテンツサイズは、ハードコードされた高さと幅の制約を設定するのを避けるのに役立ちます
どのようにクラスがこれを利用できるかについての基本的な垣間見ること
class ImageView: UIView {
var image: UIImage {
didSet {
invalidateIntrinsicContentSize()
}
}
// omitting initializers
// convenience init(image: UIImage)
override func intrinsicContentSize() -> CGSize {
return CGSize(width: image.size.width, height: image.size.height)
}
}
本質的に1つのサイズのみを提供する場合は、無視する値として値UIViewNoIntrinsicMetricを指定できます。
override func intrinsicContentSize() -> CGSize {
return CGSize(width: UIViewNoIntrinsicMetric, height: image.size.width)
}
AutoLayoutおよびInterface Builderで使用する利点
このImageView（またはUIImageView）を使用して、水平アラインメントをスーパービュー中心Xに設定し、垂直アライメントをスーパービュー中心Yに設定できます。
インタフェースビルダは、この時点で次の警告を表示してあなたに文句を言うでしょう：
これは、 Placeholder Intrinsic Sizeが入っている場所です。
サイズインスペクタパネルに入り、Intrinsic Sizeドロップダウンまで、この値をDefaultからPlaceholderに切り替えることができます。
以前の警告が取り除かれ、このサイズを使用して、インタフェースビルダーに配置された動的なサイズのビューを持つことができます。
ビューを振る
extension UIView {
func shake() {
let animation = CAKeyframeAnimation(keyPath: "transform.translation.x")
animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
animation.duration = 0.6
animation.values = [-10.0, 10.0, -7.0, 7.0, -5.0, 5.0, 0.0 ]
layer.add(animation, forKey: "shake")
}
}
この関数を使用して、特定のビューを少し振って注意を引くことができます。