Дизайним интерфейс в приложениях iPhone

Categories: Apple, iPad, iPhone, Mac OS X on Feb.17, 2009

На сегодняшний день всем хочется красивости и примочек, iPhone приложения не исключения! Вот реализовал по своему. Может кому покажется не так. Если у вас есть другие, более оптимальные варианты реализации, буду рад выслушать.

Вот что из этого получилось: iphone design application dev

Объект first выдвигается и задвигается с левой стороны, а second с правой стороны, плюс можно перемещать за любое место этого объекта. Эти свойства добавляют юзабилити интерфейсу.

Плюсы:
1. Красиво
2. Динамическое изменение размера без потери качества.

Минусы:
1. Когда центр попадает не на четкие координаты шрифты могут искажаться и разъезжаться картинки. Если окошко не динамическое лучше использовать статическую картинку.

Реализовал с помощью 9 картинок, 4 уголков, 4 боковых, и фона. Всего 1 небольшой класс в котором производятся автоматические расчеты и выставление рисунков от заданных размеров при инициализации или с помощью метода setFrame.

Выкладываю source примера, разрешаю изменять код, использовать в своих целях, но прошу оставить авторство кода. И при копировании статьи оставлять линк на источник. Закидываю без комментариев, чтоб сами разобрались ;)
Beautiful Window
please comment this post

Код автоматических расчетов для View:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

[topLeft setFrame:CGRectMake(
0
, 0
, topLeft.image.size.width
, topLeft.image.size.height
)];

[self addSubview:topLeft];

[topRight setFrame:CGRectMake(
frame.size.width-topRight.image.size.width
, 0
, topRight.image.size.width
, topRight.image.size.height
)];
[self addSubview:topRight];

[top setFrame:CGRectMake(
topLeft.image.size.width
, 0
, frame.size.width-topRight.image.size.width-topLeft.image.size.width
, top.image.size.height
)];
[self addSubview:top];

[bottomLeft setFrame:CGRectMake(
0
, frame.size.height-bottomLeft.image.size.height
, bottomLeft.image.size.width
, bottomLeft.image.size.height
)];
[self addSubview:bottomLeft];

[bottomRight setFrame:CGRectMake(
frame.size.width-bottomRight.image.size.width
, frame.size.height-bottomRight.image.size.height
, bottomRight.image.size.width
, bottomRight.image.size.height
)];
[self addSubview:bottomRight];

[bottom setFrame:CGRectMake(
bottomLeft.frame.size.width
, frame.size.height-bottom.image.size.height
, frame.size.width-bottomRight.frame.size.width-bottomLeft.frame.size.width
, bottom.image.size.height
)];
[self addSubview:bottom];

[left setFrame:CGRectMake(
0
, topLeft.frame.size.height
, left.image.size.width
, frame.size.height-topLeft.frame.size.height-bottomLeft.frame.size.height
)];
[self addSubview:left];

[right setFrame:CGRectMake(
frame.size.width-right.image.size.width
, topRight.frame.size.height
, right.image.size.width
, frame.size.height-topRight.frame.size.height-bottomRight.frame.size.height
)];
[self addSubview:right];

[background setFrame:CGRectMake(
left.frame.size.width
, topRight.frame.size.height
, frame.size.width-left.frame.size.width-right.frame.size.width
, frame.size.height-topRight.frame.size.height-bottomRight.frame.size.height
)];
[self addSubview:background];

Есть вариант и попроще

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

+ (UIImage*)greenBubble
{
if (sGreenBubble == nil) {
UIImage *i = [UIImage imageNamed:@"Balloon_1.png"];
sGreenBubble = [[i stretchableImageWithLeftCapWidth:15 topCapHeight:13] retain];
}
return sGreenBubble;
}

+ (UIImage*)grayBubble
{
if (sGrayBubble == nil) {
UIImage *i = [UIImage imageNamed:@"Balloon_2.png"];
sGrayBubble = [[i stretchableImageWithLeftCapWidth:21 topCapHeight:13] retain];
}
return sGrayBubble;
}

Вот результат