iOS Programming - Views(视图 - 基本绘制,变换,平移,旋转,反转,倾斜)

1. Views

A view (an object whose class is UIView or a subclass of UIView) knows how to draw itself into a rectangular area of the interface.

Your app has a visible interface thanks to views.

(eg: you can drag an interface widget, such as a UIButton, into a view in the nib editor;

when the app runs, the button appears, and works properly.

You can also manipulate views in powerful ways, in real time. Your code can do some or all of the

view’s drawing of itself)

A view is also a responder (UIView is a subclass of UIResponder).

This means that a view is subject to user interactions, such as taps and swipes.

A view can have subviews;

If a view is removed from the interface, its subviews are removed;

if a view is hidden (made invisible), its subviews are hidden;

if a view is moved, its subviews move with it; and other changes in a view are likewise

shared with its subviews.

A view may come from a nib, or you can create it in code.

On balance, neither approach is to be preferred over the other; it depends on your needs and inclinations and on the

overall architecture of your app.

 

2. The Window

The top of the view hierarchy is the app’s window.

It is an instance of UIWindow (or your own subclass), which is a UIView subclass.

Your app should have exactly one main window.  It is created at launch time and is never destroyed or replaced.

It occupies the entire screen and forms the background, and is the ultimate superview of, all your other visible views.

The window must fill the device’s screen.

This is done by setting the window’s frame to the screen’s bounds as the window is instantiated.

Objective-C:

UIWindow* w = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

Swift(iOS8):

let w = UIWindow(frame: UIScreen.mainScreen().bounds)

Swift(iOS9):

// it’s sufficient to instantiate UIWindow with no frame
let w = UIWindow()

You will typically not put any view content manually and directly inside your main window.
Instead, you’ll obtain a view controller and assign it to the main window’s root ViewController property.

This causes the view controller’s main view (its view) to be made the one and only immediate subview of

your main window, which is the main window’s root view.

All other views in your main window will be subviews of the root view. Thus,

the root view is the highest object in the view hierarchy that the user will usually see.

Your app’s interface is not visible until the window, which contains it, is made the app’s
key window. This is done by calling the UIWindow instance method makeKeyAndVisible.

 

When addSubview: is called, the view is placed last among its superview’s subviews;
thus it is drawn last, meaning that it appears frontmost.

(最后绘制的,出现在最前面)

 

// it is legal to cycle through it and remove each subview one at a time
for (UIView* v in view.subviews)
    [v removeFromSuperview];

 

3. Visibility and Opacity(可见性与不透明度)

A view can be made invisible by setting its hidden property to YES, and visible again
by setting it to NO.

A view can be assigned a background color through its backgroundColor property. A
color is a UIColor;

A view whose background color is nil (the default) has a transparent background.

A view can be made partially or completely transparent through its alpha property: 1.0
means opaque, 0.0 means transparent, and a value may be anywhere between them,
inclusive.
This affects subviews: if a superview has an alpha of 0.5, none of its subviews
can have an apparent opacity of more than 0.5, because whatever alpha value they have
will be drawn relative to 0.5.
A view that is completely transparent (or very close to it) is like a view whose hidden is
YES: it is invisible, along with its subviews, and cannot (normally) be touched.

eg:

if a view displays an image and has a background color and its alpha is less than 1, the background color
will seep through the image (背景色将渗入图像).

 

4. Frame

A view’s frame property, a CGRect, is the position of its rectangle within its superview.
By default, the superview’s coordinate system will have the origin at its top left,
with the x-coordinate growing positively rightward and the y-coordinate growing positively downward.
(等同于Cocos2d-x中的UI坐标系,原点在左上角)

Setting a view’s frame to a different CGRect value repositions the view, or resizes it, or both.

例: 画3个部分重叠的视图 

Objective-C:

UIView* v1 = [[UIView alloc] initWithFrame:CGRectMake(113, 111, 132, 194)];
v1.backgroundColor = [UIColor colorWithRed:1 green:.4 blue:1 alpha:1];
UIView* v2 = [[UIView alloc] initWithFrame:CGRectMake(41, 56, 132, 194)];
v2.backgroundColor = [UIColor colorWithRed:.5 green:1 blue:0 alpha:1];
UIView* v3 = [[UIView alloc] initWithFrame:CGRectMake(43, 197, 160, 230)];
v3.backgroundColor = [UIColor colorWithRed:1 green:0 blue:0 alpha:1];
[mainview addSubview: v1];
[v1 addSubview: v2];
[mainview addSubview: v3];

Swift:

let v1 = UIView(frame:CGRectMake(113, 111, 132, 194))
v1.backgroundColor = UIColor(red: 1, green: 0.4, blue: 1, alpha: 1)
let v2 = UIView(frame:CGRectMake(41, 56, 132, 194))
v2.backgroundColor = UIColor(red: 0.5, green: 1, blue: 0, alpha: 1)
let v3 = UIView(frame:CGRectMake(43, 197, 160, 230))
v3.backgroundColor = UIColor(red: 1, green: 0, blue: 0, alpha: 1)
mainview.addSubview(v1)
v1.addSubview(v2)
mainview.addSubview(v3)

效果:

 

5. Bounds and Center(边框和中心)

CGRectInset函数,画出视图边框

例1: 画一个带有粗边框的视图

UIView* v1 = [[UIView alloc] initWithFrame:CGRectMake(113, 111, 132, 194)];
v1.backgroundColor = [UIColor colorWithRed:1 green:.4 blue:1 alpha:1];
UIView* v2 = [[UIView alloc] initWithFrame:CGRectInset(v1.bounds, 10, 10)];
v2.backgroundColor = [UIColor colorWithRed:.5 green:1 blue:0 alpha:1];
[mainview addSubview: v1];
[v1 addSubview: v2];

效果:

 

例2: 移动超视图(spuerview)的原点导致子视图(subview)位置发生变化

       (本例中子视图向左上移动)

UIView* v1 = [[UIView alloc] initWithFrame:CGRectMake(113, 111, 132, 194)];
v1.backgroundColor = [UIColor colorWithRed:1 green:.4 blue:1 alpha:1];
UIView* v2 = [[UIView alloc] initWithFrame:CGRectInset(v1.bounds, 10, 10)];
v2.backgroundColor = [UIColor colorWithRed:.5 green:1 blue:0 alpha:1];
[mainview addSubview: v1]
[v1 addSubview: v2];
CGRect r = v1.bounds;
r.origin.x += 10;
r.origin.y += 10;
v1.bounds = r;

效果:

 

6. Transform(变换)

旋转(rotation), 缩放(scaling), 平移(translation)

例1: 视图顺时针旋转45度角

UIView* v1 = [[UIView alloc] initWithFrame:CGRectMake(113, 111, 132, 194)];
v1.backgroundColor = [UIColor colorWithRed:1 green:.4 blue:1 alpha:1];
UIView* v2 = [[UIView alloc] initWithFrame:CGRectInset(v1.bounds, 10, 10)];
v2.backgroundColor = [UIColor colorWithRed:.5 green:1 blue:0 alpha:1];
[mainview addSubview: v1];
[v1 addSubview: v2];
v1.transform = CGAffineTransformMakeRotation(45 * M_PI/180.0);

效果:

 

 

 

例2: 缩放变换

v1.transform = CGAffineTransformMakeScale(1.8, 1);

效果:

 

例3: 子视图先平移后旋转

UIView* v1 = [[UIView alloc] initWithFrame:CGRectMake(20, 111, 132, 194)];
v1.backgroundColor = [UIColor colorWithRed:1 green:.4 blue:1 alpha:1];
UIView* v2 = [[UIView alloc] initWithFrame:v1.bounds];
v2.backgroundColor = [UIColor colorWithRed:.5 green:1 blue:0 alpha:1];
[mainview addSubview: v1];
[v1 addSubview: v2];
v2.transform = CGAffineTransformMakeTranslation(100, 0);
v2.transform = CGAffineTransformRotate(v2.transform, 45 * M_PI/180.0);

效果:

 

例4: 子视图先旋转后平移

v2.transform = CGAffineTransformMakeRotation(45 * M_PI/180.0);
v2.transform = CGAffineTransformTranslate(v2.transform, 100, 0);

效果:

 

 

 例5: 旋转平移后再反转(删除旋转)

CGAffineTransformConcat - 合并两个变换动作

CGAffineTransform r = CGAffineTransformMakeRotation(45 * M_PI/180.0);
CGAffineTransform t = CGAffineTransformMakeTranslation(100, 0);
v2.transform = CGAffineTransformConcat(t,r);
v2.transform =
CGAffineTransformConcat(CGAffineTransformInvert(r), v2.transform);

效果:

 

例6: 倾斜

v1.transform = CGAffineTransformMake(1, 0, -0.2, 1, 0, 0);

效果:

 

 

 

 

 

时间: 2024-09-25 12:26:41

iOS Programming - Views(视图 - 基本绘制,变换,平移,旋转,反转,倾斜)的相关文章

《Swift iOS应用开发实战》——2.4 理解iOS 8的视图和窗口

2.4 理解iOS 8的视图和窗口 在前面几节的学习中我们已经为Calculator项目创建了用户界面,其中使用了视图.Label和Button控件,接下来我们将详细了解有关视图和窗口的概念.2.4.1 视图概述视图属于可视化对象,多个视图组合起来就组成了iOS应用程序的用户界面.视图本质上反映的是屏幕上的一块特定的矩形区域内所发生的事情,例如,根据用户的交互进行可视化方面的更新.所有视图都是UIKit框架中的UIView类的子类,例如UILabel.UIImageView.UIButton和U

iOS Programming 触摸事件处理详解

iphone/ipad无键盘的设计是为屏幕争取更多的显示空间,大屏幕在观看图片.文字.视频等方面为用户带来了更好的用户体验.而触摸屏幕是iOS设备接受用户输入的主要方式,包括单击.双击.拨动以及多点触摸等,这些操作都会产生触摸事件. 在Cocoa中,代表触摸对象的类是UITouch.当用户触摸屏幕后,就会产生相应的事件,所有相关的UITouch对象都被包装在事件中,被程序交由特定的对象来处理.UITouch对象直接包括触摸的详细信息. UITouch类中包含5个属性: window:触摸产生时所

iOS开发CoreAnimation解读之六——CATransform3D变换的应用

iOS开发CoreAnimation解读之五--CATransform3D变换的应用 一.引言         CATransform3D定义了一个变化矩阵,通过对矩阵参数的设置,我们可以改变layer的一些属性,这个属性的改变,可以产生动画的效果.首先,CATransform3D定义了一个4*4的矩阵,如下: ? 1 2 3 4 5 6 7 struct CATransform3D {   CGFloat m11, m12, m13, m14;   CGFloat m21, m22, m23,

android-实现视图和绘制的尺寸完全一致

问题描述 实现视图和绘制的尺寸完全一致 在自定义View中的onDraw代码如下. 我要画一个对话气泡, 希望实现视图的尺寸和我画的泡泡是完全一样的. protected void onDraw(Canvas canvas) { super.onDraw(canvas); Paint paint = new Paint(); paint.setColor(Color.BLACK); paint.setAntiAlias(true); paint.setStrokeWidth(2); paint.

iOS翻页视图控制器UIPageViewController的应用

iOS翻页视图控制器UIPageViewController的应用 一.引言     UIPageViewController是iOS中少见的动画视图控制器之一,通过它既可以创建类似UIScrollView与UIPageControl结合的滚屏视图,也可以创建类似图书效果的炫酷翻页视图.UIPageViewController类似一个视图容器,其中每个具体的视图由各自的ViewController进行维护管理,UIPageViewController只进行协调与动画布置.下图可以很好的展现出UI

iOS开发系列--视图切换

概述 在iOS开发中视图的切换是很频繁的,独立的视图应用在实际开发过程中并不常见,除非你的应用足够简单.在iOS开发中常用的视图切换有三种,今天我们将一一介绍: UITabBarController UINavigationController 模态窗口 UITabBarController iOS三种视图切换的原理各不相同: UITabBarController:以平行的方式管理视图,各个视图之间往往关系并不大,每个加入到UITabBarController的视图都会进行初始化即使当前不显示在

iOS Programming Recipe 6: Creating a custom UIView using a Nib

iOS Programming Recipe 6: Creating a custom UIView using a Nib JANUARY 7, 2013 BY MIKETT 12 COMMENTS   Creating a custom UIView using a Nib Assumptions You are familiar with creating UIView subclasses, and instantiating UIView's both from a Nib file

弱引用-ios 与xib视图加载相关的内存管理问题

问题描述 ios 与xib视图加载相关的内存管理问题 在通过xib加载视图的时候,我们遵循一个准侧 那就是顶层视图 我们的成员变量要是强引用 若是非顶层视图,而是顶层视图的子视图,为了防止顶层视图被释放以后,字视图还存在而造成的内存泄漏,我们把这字视图的成员变量定义为弱饮用 现在问题是,在ARC模式下,假如我有个视图控制起ViewController,然后有个UIButton子视图 @interface ViewController:UIViewController {weak/strong I

ios开发-iOS开发时,如何在图片上旋转一个角度绘制文字,例如在点(50,80)处,旋转50°画文字

问题描述 iOS开发时,如何在图片上旋转一个角度绘制文字,例如在点(50,80)处,旋转50°画文字 要求不用到 label 现在需要在apple mapkit 中自定义的annotation图片上绘制编号,此图片是个箭头, 可旋转方向.为了让箭头旋转时其上的文字始终竖直.现需要在image上画出旋转一定角度的文字,或者用上下文画一个旋转一定角度的图片也可以,求大神指点 解决方案 NSMutableParagraphStyle *paragraphStyle = [[NSParagraphSty