Настройка левой и правой кнопок UISegmentedControl
Я пытаюсь настроить следующий сегментированный элемент управления, используя левое изображение для первой кнопки и правое изображение для второй кнопки. Как бы я сделал это с помощью UIAppearance?
Я хочу изменить следующее segmentedControl:
к чему-то похожему как ниже:
Причина, по которой я хочу использовать пользовательское изображение, заключается в том, что я могу изменить углы кнопок. Если вы посмотрите на синий сегментированный элемент управления, он более квадратный (у моего изображения есть собственные углы).
Я думал о чем-то вроде этого, но бесполезно:
<code>UIImage *leftImage = [[UIImage imageNamed:@"leftControl.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 15, 0, 15)]; UIImage *rightImage = [[UIImage imageNamed:@"rightControl.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 15, 0, 15)]; [[UISegmentedControl appearance] setBackgroundImage:leftImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault ]; [[UISegmentedControl appearance] setBackgroundImage:rightImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault]; </code>
Ответы на вопрос(3)
выбранный сегмент фона (с левой и правой крышками)
А затем используйте следующий код для установки:
/* Unselected background */
UIImage *unselectedBackgroundImage = [[UIImage imageNamed:@"segment_background_unselected"] resizableImageWithCapInsets:UIEdgeInsetsMake(10, 10, 10, 10)];
[[UISegmentedControl appearance] setBackgroundImage:unselectedBackgroundImage
forState:UIControlStateNormal
barMetrics:UIBarMetricsDefault];
/* Selected background */
UIImage *selectedBackgroundImage = [[UIImage imageNamed:@"segment_background_selected"] resizableImageWithCapInsets:UIEdgeInsetsMake(10, 10, 10, 10)];
[[UISegmentedControl appearance] setBackgroundImage:selectedBackgroundImage
forState:UIControlStateSelected
barMetrics:UIBarMetricsDefault];
/* Image between two unselected segments */
UIImage *bothUnselectedImage = [[UIImage imageNamed:@"segment_middle_unselected"] resizableImageWithCapInsets:UIEdgeInsetsMake(15, 0, 15, 0)];
[[UISegmentedControl appearance] setDividerImage:bothUnselectedImage
forLeftSegmentState:UIControlStateNormal
rightSegmentState:UIControlStateNormal
barMetrics:UIBarMetricsDefault];
/* Image between segment selected on the left and unselected on the right */
UIImage *leftSelectedImage = [[UIImage imageNamed:@"segment_middle_left_selected"] resizableImageWithCapInsets:UIEdgeInsetsMake(15, 0, 15, 0)];
[[UISegmentedControl appearance] setDividerImage:leftSelectedImage
forLeftSegmentState:UIControlStateSelected
rightSegmentState:UIControlStateNormal
barMetrics:UIBarMetricsDefault];
/* Image between segment selected on the right and unselected on the left */
UIImage *rightSelectedImage = [[UIImage imageNamed:@"segment_middle_right_selected"] resizableImageWithCapInsets:UIEdgeInsetsMake(15, 0, 15, 0)];
[[UISegmentedControl appearance] setDividerImage:rightSelectedImage
forLeftSegmentState:UIControlStateNormal
rightSegmentState:UIControlStateSelected
barMetrics:UIBarMetricsDefault];
Обратите внимание, что вам нужно отрегулировать размер колпачка растягиваемых изображений в соответствии с вашими изображениями.
image.png image, а затем ОС позаботится о том, чтобы заменить его на[email protected] если необходимоresizableImageWithCapInsets: метод по сути справиться с этим для нас?и инструментов; он продолжал показывать эти фантомные линии на элементах управления, поскольку разделительные изображения были недостаточно широкими.
Так что я сделал свой собственный. Вот все изображения, которые вам понадобятся для XCode, и я также поместил файлы Photoshop для создания сегментированных контрольных изображений, чтобы вы могли изменить стиль:
https: //s3.amazonaws.com/iwasrobbed/stackoverflow/Custom+Segmented+Control.zi
Вставьте это в свой AppDelegate, чтобы он изменил внешний вид, используя прикрепленные изображения, всех сегментированных элементов управления на панели инструментов:
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
[self customizeAppAppearance];
}
- (void)customizeAppAppearance
{
// Toolbar
[[UIToolbar appearance] setBackgroundImage:[[UIImage imageNamed:@"toolbar.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(22, 5, 22, 5)] forToolbarPosition:UIToolbarPositionAny barMetrics:UIBarMetricsDefault];
// Segmented Controls within Toolbars
// Unselected background
UIImage *unselectedBackgroundImage = [[UIImage imageNamed:@"segmentInactive.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(15, 15, 15, 15)];
[[UISegmentedControl appearanceWhenContainedIn:[UIToolbar class], nil] setBackgroundImage:unselectedBackgroundImage
forState:UIControlStateNormal
barMetrics:UIBarMetricsDefault];
// Selected background
UIImage *selectedBackgroundImage = [[UIImage imageNamed:@"segmentActive.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(15, 15, 15, 15)];
[[UISegmentedControl appearanceWhenContainedIn:[UIToolbar class], nil] setBackgroundImage:selectedBackgroundImage
forState:UIControlStateSelected
barMetrics:UIBarMetricsDefault];
// Image between two unselected segments
UIImage *bothUnselectedImage = [[UIImage imageNamed:@"segmentBothInactive.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(15, 10, 15, 10)];
[[UISegmentedControl appearanceWhenContainedIn:[UIToolbar class], nil] setDividerImage:bothUnselectedImage
forLeftSegmentState:UIControlStateNormal
rightSegmentState:UIControlStateNormal
barMetrics:UIBarMetricsDefault];
// Image between segment selected on the left and unselected on the right
UIImage *leftSelectedImage = [[UIImage imageNamed:@"segmentLeftActiveRightInactive.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(15, 0, 15, 0)];
[[UISegmentedControl appearanceWhenContainedIn:[UIToolbar class], nil] setDividerImage:leftSelectedImage
forLeftSegmentState:UIControlStateSelected
rightSegmentState:UIControlStateNormal
barMetrics:UIBarMetricsDefault];
// Image between segment selected on the right and unselected on the left
UIImage *rightSelectedImage = [[UIImage imageNamed:@"segmentRightActiveLeftInactive.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(15, 0, 15, 0)];
[[UISegmentedControl appearanceWhenContainedIn:[UIToolbar class], nil] setDividerImage:rightSelectedImage
forLeftSegmentState:UIControlStateNormal
rightSegmentState:UIControlStateSelected
, barMetrics:UIBarMetricsDefault];
}
а также изображение, которое является просто левым краем кнопки, изображение, которое является соединением между двумя кнопками, и изображение, которое является правым краем. Некоторые из них должны быть сделаны для нескольких государств. Итак, вот ваш список изображений:
левая крышка, выбрано левая крышка не выбрана сегментный фон, выбранный сегментный фон, невыбранный правая шапка, выбрано правая кепка, не выбрано средняя крышка, слева выбрано, справа не выбрано средняя крышка, не выбрано, выбрано справа средняя крышка, оба выбраны средний колпачок, оба не выбраныДля средних заглавных букв их можно вставить так: (текст из документов Apple).
// Image between two unselected segments.
[mySegmentedControl setDividerImage:image1 forLeftSegmentState:UIControlStateNormal
rightSegmentState:UIControlStateNormal barMetrics:barMetrics];
// Image between segment selected on the left and unselected on the right.
[mySegmentedControl setDividerImage:image1 forLeftSegmentState:UIControlStateSelected
rightSegmentState:UIControlStateNormal barMetrics:barMetrics];
// Image between segment selected on the right and unselected on the right.
[mySegmentedControl setDividerImage:image1 forLeftSegmentState:UIControlStateNormal
rightSegmentState:UIControlStateSelected barMetrics:barMetrics];
Если вы используетеUIAppearance, очевидно, вы бы отправили эти сообщения на внешний прокси.