Настройка левой и правой кнопок UISegmentedControl

Я пытаюсь настроить следующий сегментированный элемент управления, используя левое изображение для первой кнопки и правое изображение для второй кнопки. Как бы я сделал это с помощью UIAppearance?

Я хочу изменить следующее segmentedControl:

enter image description here

к чему-то похожему как ниже:

enter image description here

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

Я думал о чем-то вроде этого, но бесполезно:

<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>
 iwasrobbed29 мая 2013 г., 18:24
Я связал несколько изображений (включая файлы Photoshop) и код здесь: Stackoverflow.com / а / 16819218/308315

Ответы на вопрос(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];

Обратите внимание, что вам нужно отрегулировать размер колпачка растягиваемых изображений в соответствии с вашими изображениями.

 iwasrobbed29 мая 2013 г., 16:24
@ avelis Как всегда, вы указываете название стандартаimage.png image, а затем ОС позаботится о том, чтобы заменить его на[email protected] если необходимо
 BoomTownTech25 февр. 2013 г., 20:33
Да, спасибо, изображения сэкономили много времени и исследований, очень ценили
 avelis03 апр. 2013 г., 00:23
Учитывая изображения, описанные выше, вам нужно предоставить HD-эквивалент (т. Е. @ 2x.png) илиresizableImageWithCapInsets: метод по сути справиться с этим для нас?
 ArtFeel30 нояб. 2012 г., 14:06
Твои примеры изображений сэкономят мне много времени, спасибо!
 Maurizio03 апр. 2013 г., 02:02
@ avelis да, вы должны предоставить как 1x, так и 2x изображения.

и инструментов; он продолжал показывать эти фантомные линии на элементах управления, поскольку разделительные изображения были недостаточно широкими.

Так что я сделал свой собственный. Вот все изображения, которые вам понадобятся для 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, очевидно, вы бы отправили эти сообщения на внешний прокси.

 Thom22 авг. 2012 г., 11:03
Каково точное соответствие между списком изображений выше и вызовами для установки фоновых / разделительных изображений прокси-элемента управления / внешнего вида?

Ваш ответ на вопрос