2012-01-05 5 views
6

Как реализовать закругленные углы, применяемые ко всему виду, как показано на снимке экрана (обратите внимание, что как панель навигации, так и углы клавиатуры закруглены)?Применение закругленных углов для всего приложения

Я попытался установить cornerRadius = 10 и masksToBounds = YES как для window.layer и window.rootViewController.view.layer, но только вид снизу углы становятся округлым, навигационная панель по-прежнему остается квадратом.

Обновление. Установка cornerRadius к window.layer фактически добавляет закругленные углы к вершине тоже, но эти углы не видны под статусной строкой, если cornerRadius не больше чем 20.

Example

ответ

17

Хорошо, я спросил Эндрю Стоун, разработчик Twittelator Neue, на Twitter, и вот его рецепт, опубликованный с разрешения Эндрю:

Мы g чтобы написать книгу о кодовых трюках в Нойе! Мы перекрываем окно ш изображения, содержащее 4 угла над всем

Мы также обычаем нав бар с растяжимым изображением ж/вершинами закругленных

Так вот как я это сделал в своем собственном проекте:

UIImage *overlayImg = [UIImage imageNamed:@"overlay.png"]; 
CALayer *overlay = [CALayer layer]; 
overlay.frame = CGRectMake(0, 0, overlayImg.size.width, overlayImg.size.height); 
overlay.contents = (id)overlayImg.CGImage; 
overlay.zPosition = 1; 
[self.window.layer addSublayer:overlay]; 

overlay.png - прозрачное полноэкранное изображение с черными углами.

+0

При этом не забудьте добавить '#import к вашему классу и добавить в проект проект рамки QuartzCore. – robhasacamera

+0

Я нашел это в приложении: roundedCornerBL.png [email protected] roundedCornerBR.PNG [email protected] roundedCornerTL.png [email protected] roundedCornerTR.png [email protected] – 3lvis

+0

Может кто-то поделиться накладываемое изображение (ы)? – fvisticot

0

Я сомневаюсь, что окно имеет закругленные углы потому что я не верю, что строка состояния имеет высоту более 20 единиц. Я подозреваю, что окно просто установлено черным фоном (или какой-либо цвет необходим для соответствия строке состояния, а затем еще один вид сверху. Этот вид сверху имеет закругленные углы. Аналогично, любые другие подпункты будут округлены углы, чтобы помочь с этой иллюзией.

+0

Закругленная область находится за статусом, поэтому, если вы скрываете строку состояния, вы увидите это. – Andy

1

Они, вероятно, используя фоновое изображение на панели навигации, которая включает в себя закругленные углы.

+0

Да, я подумал об этом. Но если фон navbar содержит черные углы, отображение его в модальном представлении покажет им движение по экрану снизу во время анимации :) – iHunter

+0

Это правда - вы пробовали png с прозрачным фоном? –

+0

Я не пробовал прозрачную навигационную панель самостоятельно (я решил пойти без закругленных углов), но Эндрю Стоун (Twittelator Neue) сказал мне, что он сделал это так же (помимо наложения с углами поверх всего, см. Мой ответ для получения подробной информации). Спасибо за помощь! – iHunter

1

Ответ iHunter отлично подходит для меня, за исключением случаев, когда я пытаюсь использовать TWTweetComposeViewController, который показывает клавиатуру, но не вид твита. Затем я должен сделать наложение как свойство в AppDelegate.h и до tweetView, удалить наложение. При выполнении твита снова включите наложение.

AppDelegate *delegate = [[UIApplication sharedApplication] delegate]; 
[delegate.overlay removeFromSuperlayer]; 
TWTweetComposeViewController *tweetSheet = [[TWTweetComposeViewController alloc] init]; 
tweetSheet.completionHandler = ^(TWTweetComposeViewControllerResult result) { 
    AppDelegate *delegate = [[UIApplication sharedApplication] delegate]; 
    [delegate.window.layer addSublayer:delegate.overlay]; 
}; 
[self presentModalViewController:tweetSheet animated:YES]; 
Смежные вопросы