Хобрук: Ваш путь к мастерству в программировании

UIButton backgroundImage stretchableImageWithLeftCapWidth: проблема с topCapHeight

У меня есть UIButton с указанной шириной 200. Его свойство autoresizingMask установлено на UIViewAutoresizingFlexibleWidth. UIImage применяется к свойству backgroundImage этой кнопки. Этот UIimage определяется следующим образом:

[[UIImage imageNamed:@"buttonimage.png"] stretchableImageWithLeftCapWidth:10 topCapHeight:0]

buttonimage.png имеет ширину 400 пикселей (в 2 раза больше ширины кнопки из-за разрешения сетчатки) и представляет собой прямоугольник со скругленными углами. В портретном режиме все нормально. Как только пользователь поворачивает устройство и iPhone переходит в ландшафтный режим, UIButton растягивается. Из-за такого поведения левая закругленная граница изображения остается прежней (stretchableImageWithLeftCapWidth:), но правые углы также растягиваются. Есть ли какое-либо свойство, которое я забыл установить, которое гарантирует, что только один указанный пиксель (например, десятый) растягивается, а все остальное сохраняет его размеры?

Заранее спасибо!

Редактировать: если я использую изображение меньшего размера, которое уже растянуто в портретном режиме, обе границы кажутся расширенными.

Решено! Если ваше изображение называется "myImage.png" и это версия для сетчатки, просто назовите его "[email protected]"

iphone objective-c uikit uibutton uiimage
23.04.2011

  • Вы должны предоставить buttonimage.png в размере, отличном от Retina, и вторую версию в размере Retina с именем [email protected]. Возможно, это решит вашу проблему. 23.04.2011
  • Это происходит как на устройствах без сетчатки, так и на устройствах с поддержкой разрешения сетчатки. И если я правильно понимаю, файл [email protected] является единственным, к которому обращаются устройства с разрешением сетчатки, так что это не имеет значения. Поправьте меня если я ошибаюсь. 23.04.2011
  • Правильно. Я попробовал простой пример, и есть забавный эффект, когда я устанавливаю левый колпачок на небольшое значение, например 3 пикселя, эта часть размазывается по всей кнопке, а остальная часть правильно окрашена, выровненная по правой стороне. Так же выглядит и для пейзажа. Мое изображение кнопки имеет размер 50x50, когда я устанавливаю левый колпачок на 21px, что точно после скругленных углов, оно выглядит хорошо даже в альбомной ориентации. Может быть, некоторые попытки и ошибки сделают? 24.04.2011
  • Теперь я добавил версию моей кнопки без сетчатки, и она внезапно заработала. Спасибо. 24.04.2011

Ответы:


1

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

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

Растягиваемые изображения работают следующим образом: вы указываете левый край, растягивается следующий пиксель, а правая сторона изображения с width = (total width - left cap + 1) остается неизменной. Учитывая, что вы устанавливаете левый верхний край на 10, а исходное изображение — 400, вы сообщаете iOS, что правая нерастягиваемая правая сторона вашего изображения — это 400-10-1=389px. То же самое относится и к вертикали. Проверьте, используете ли вы изображения @2x на обычном устройстве без @2x в его имени, или версии 2x не имеют ровно в два раза больше пикселей, или есть ли разница между прописными и строчными буквами. Вы можете узнать это, nпрогнозировав размер загруженного изображения.

Я не знаю, почему правая сторона вашего изображения растянута. Учитывая, что у вас height=0, все изображение может растянуться по вертикали при изменении высоты кнопки, но маловероятно, что это вызовет искажение только правой стороны.

23.04.2011
  • Теперь я добавил версию моей кнопки без сетчатки, и она внезапно заработала. Ты направил меня на правильный путь. 24.04.2011

    • 2

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

    UIButton *button=[[UIButton alloc] initWithFrame:CGRectMake(0, 0, 245, 51)];
button.autoresizingMask=UIViewAutoresizingFlexibleWidth;
[button setBackgroundImage:[[UIImage imageNamed:@"userbubble.png"] stretchableImageWithLeftCapWidth:40 topCapHeight:0] forState:UIControlStateNormal];
[self.view addSubview:button];

    Я предполагаю, что проблема связана с используемым вами png или, возможно, с настройкой «Сжатие файлов PNG» в вашем проекте. Кроме того, поскольку изображение, которое вы используете, очень большое, попробуйте отодвинуть левую крышку дальше, скажем, на 40 или 50 пикселей.

    23.04.2011
  • Это точный код, который я использую. Я только что попробовал это с меньшим изображением и, как ни странно, обе границы немного растянуты. (как в ландшафтном, так и в портретном режиме) 24.04.2011
  • Попробуйте увеличить левую крышку (скажем, 50% изображения), и если все по-прежнему выглядит странно, проверьте параметр «Сжатие файлов PNG» в настройках цели и проекта вашего приложения. Выключите его и посмотрите, будет ли это иметь значение. 24.04.2011
  • Пробовал оба варианта. Все равно никакой разницы. Я загрузил свое изображение кнопки. Может быть, вы заметите разницу между вашим userbubble.png и моим изображением. (ухмылка) 24.04.2011
  • Я добавил вашу кнопку в свой проект xcode, и она отлично работала, поэтому проблема должна быть откуда-то еще. UIButton *button=[[UIButton alloc] initWithFrame:CGRectMake(10, 10, 91, 86)]; [button setBackgroundImage:[[UIImage imageNamed:@"buttonImage.png"] stretchableImageWithLeftCapWidth:40 topCapHeight:0] forState:UIControlStateNormal]; 24.04.2011
  • Вы использовали только кнопку @2x? Странный. Как я добавил выше, теперь я использую версию моей кнопки без сетчатки и @2x, и она работает. Я ценю ваши усилия. Большое спасибо! 24.04.2011
  • Если вы используете UIButton *button=[[UIButton alloc] initWithFrame:CGRectMake(10, 10, 91, 43)];, а высота файла изображения в два раза превышает размер кадра, вам, очевидно, также нужна версия без сетчатки. Хм... 24.04.2011
    • Новые материалы
    Как свинг-трейдеры могут использовать ИИ для больших выигрышей
    По мере того как все больше и больше профессиональных трейдеров и активных розничных трейдеров узнают о возможностях, которые предоставляет искусственный интеллект и машинное обучение для улучшения..
    Как построить любой стол
    Я разработчик программного обеспечения. Я люблю делать вещи и всегда любил. Для меня программирование всегда было способом создавать вещи, используя только компьютер и мое воображение...
    Обзор: Машинное обучение: классификация
    Только что закончил третий курс курса 4 часть специализации по машинному обучению . Как и второй курс, он был посвящен низкоуровневой работе алгоритмов машинного обучения. Что касается..
    Разработка расширений Qlik Sense с qExt
    Использование современных инструментов веб-разработки для разработки крутых расширений Вы когда-нибудь хотели кнопку для установки переменной в приложении Qlik Sense? Когда-нибудь просили..
    React Hooks: основы деструктуризации массива
    Kent C. Dodds написал классный пост о том, как грядущая функция React под названием Hooks работает на капоте. Предстоящий хук React useState основан на деструктурировании массива, давайте..
    Пакеты R, используемые в Tesla
    Добро пожаловать обратно! R — очень популярный язык программирования, используемый множеством компаний, включая Tesla! Итак, давайте взглянем на некоторые пакеты R, которые использует Tesla...
    Сокращение и слияние токенов для эффективных моделей VL: обзор
    Часто в задачах, связанных с компьютерным зрением и НЛП, вычислительно затратная и требующая большого объема памяти обработка становится препятствием для более быстрого логического вывода модели, а..