Динамическое изменение цвета кнопки раскрытия сведений в коде

Я знаю, что аналогичные вопросы задавались и раньше, но в большинстве ответов говорится, что нужно создать новое изображение кнопки раскрытия сведений с требуемым цветом (например, Как изменить цвет кнопки раскрытия деталей для ячейки таблицы).

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

Читая вокруг, я думаю, что есть несколько способов сделать это, но я не уверен, какой из них лучше, или как именно это сделать:

  1. Нарисуйте требуемый цветовой круг в коде и наложите на него изображение круглой тени за пределами круга и стрелку вправо (с чистым альфа-каналом для отдыха, чтобы нарисованный цветной круг все еще был виден)

  2. Добавьте изображение тени вокруг круга в UIImageView и, используя в качестве маски, залейте заливкой внутри этого круга тени, затем наложите стрелку.

  3. Добавьте изображение в оттенках серого, замаскируйте его самим собой и наложите требуемый цвет (например, http://coffeeshopped.com/2010/09/iphone-how-to-dynamically-color-a-uiimage), затем наложите на него изображение стрелки.

Каков наилучший способ и есть ли у кого-нибудь код, показывающий, как именно это сделать?


ios colors indicator disclosure detail
person DarkMatter    schedule 22.05.2013    source источник
comment
Я использую вариант 3 в собственном приложении. Работает неплохо.   -  person rmaddy    schedule 22.05.2013
comment
@rmaddy - Есть ли шанс опубликовать изображение кнопки раскрытия деталей в оттенках серого без стрелки (как версии без сетчатки, так и версии с сетчаткой, если возможно)?   -  person DarkMatter    schedule 23.05.2013

Ответы (2)


arrow_upward
2
arrow_downward

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

+ (UIImage *)tintImage:(UIImage *)baseImage withColor:(UIColor *)color mask:(UIImage *)maskImage {
    UIGraphicsBeginImageContextWithOptions(baseImage.size, NO, baseImage.scale);

    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGRect area = CGRectMake(0, 0, baseImage.size.width, baseImage.size.height);

    CGContextScaleCTM(ctx, 1, -1);
    CGContextTranslateCTM(ctx, 0, -area.size.height);

    CGContextSaveGState(ctx);
    if (maskImage) {
        CGContextClipToMask(ctx, area, maskImage.CGImage);
    } else {
        CGContextClipToMask(ctx, area, baseImage.CGImage);
    }

    [color set];
    CGContextFillRect(ctx, area);
    CGContextRestoreGState(ctx);

    CGContextSetBlendMode(ctx, kCGBlendModeOverlay);

    CGContextDrawImage(ctx, area, baseImage.CGImage);

    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();

    UIGraphicsEndImageContext();

    if (!UIEdgeInsetsEqualToEdgeInsets(baseImage.capInsets, UIEdgeInsetsZero)) {
        newImage = [newImage resizableImageWithCapInsets:baseImage.capInsets];
    }

    return newImage;
}

Вот изображение раскрытия деталей в оттенках серого без сетчатки: введите описание изображения здесь

Вот версия Retina: введите описание изображения здесь

Вот маска без сетчатки (в кавычках - она ​​в основном белая): " введите описание изображения здесь "

И маска сетчатки (в кавычках: " введите описание изображения здесь "

person rmaddy    schedule 22.05.2013
comment
Большое спасибо @rmaddy. Ты легенда! Я знаю, что я специально не просил об этом в своем вопросе, но я планировал наложить изображение стрелки, чтобы затем я мог также использовать его для создания аналогичной динамически окрашенной кнопки с галочкой, одной с крестиком и третьей без стрелки / галочки / крестика (т.е. только цветное круглое изображение с белой рамкой). Не думаете ли вы, что у вас есть похожие изображения / маски с галочкой, а также с крестиком и простой? Я просто собираюсь протестировать ваш код и, если все работает должным образом, отмечу это как ответ. - person DarkMatter; 23.05.2013
comment
Хотя ваше решение работает для раскрашивания изображения, есть несколько косметических проблем: 1) Он теряет дугу выделения в верхней половине изображения, поэтому цвет выглядит сплошным. 2) После оттенка часть, где новый цвет встречается с внутренней границей слева, справа и снизу, выглядит не так хорошо, как исходное изображение в оттенках серого. - person DarkMatter; 23.05.2013
comment
Для вопроса (1) выделение теряется не для всех цветов, а только для некоторых. Что касается пункта (2), это могут быть только мои глаза, но он выглядит не так хорошо со всеми цветами. Пометить это как ответ, как будто это не идеально, но на данный момент для меня этого достаточно. Я думаю, что немного лучшее решение, которое сохраняет выделение всеми цветами, - это нарисовать сплошной цвет для круга и использовать наложенные изображения для окружающей границы, выделения и символа (например, шеврон / стрелка, галочка, крест и т. Д. ) - person DarkMatter; 24.05.2013

arrow_upward
0
arrow_downward

Также рассмотрите возможность использования шрифта значка в метке вместо изображения. Что-то вроде глификонов. Затем вы можете установить любой цвет текста, какой захотите. У вас также есть хорошие возможности для масштабирования. Цена заключается в том, что в некоторых случаях у вас нет такого точного контроля, но он должен хорошо работать в вашем случае.

person Wain    schedule 22.05.2013