Xcode как установить иконку приложения
Я много узнал о написании кода Objective-C и проектировании в Интерфейсном Разработчике, и я хотел установить значки для моих простых программ.
Я добавил один и тот же JPG во все поля размеров в Icon Composer и получил ICNS, но не мог понять, как добавить его в проект.
Так как Xcode 4.4 Icon Composer больше не является рекомендуемым способом создания значков и больше не входит в стандартную установку Xcode . В связи с введением компьютеров Mac с дисплеем Retina, теперь рекомендуется предоставлять версии с высоким разрешением для всех графика, включая значки приложений.
Чтобы дать вашему приложению значок под Xcode> 4.4, сделайте следующее:
Создайте папку [IconName] .iconset в Finder
В этой папке разместите свой значок в виде png-файлов. Вам понадобится значок в формате Размером 16px, 32px, 64px (только сетчатка), 128px, 256px, 512px и 1024px (только сетчатка)
Эти значки должны быть названы с помощью шаблона icon_16x16.jpg, Icon_32x32.jpg, icon_128x128.jpg и т.д.
перетащите эту папку [IconName] .iconset в Xcode (при необходимости скопируйте)
в файле info.plist установите значение «CFBundleIconFile» («Файл значка как ключ») в [IconName], но без расширения .iconset
Аннотации:
- (в настоящее время) не требуется предоставлять значки @ 2x
- это будет (обычно) также работать, если вы не предоставите каждый файл значка
- папка iconset не должна содержать файл icon_64x64.jpg. значок 64px предназначен только для Retina-версии icon_32x32
Update: В итоге ваша папка .iconset содержит следующие 10 элементов:
Официальное руководство:
Дополнительная информация:
Чтобы преобразовать папку iconset в файл icns, выполните в терминале следующую команду:
где [IconName] следует заменить на префикс папки с иконками. Теперь у вас есть файл с именем [IconName] .icns. В Xcode 4.4, в Сводке цели, щелкните правой кнопкой мыши вопросительный знак для значка, затем выберите файл icns. Затем вы должны увидеть, как вопросительный знак заменяется значком.
Следуйте этим шагам , чтобы добавить значок приложения в ваш проект. Это значок, который будет отображаться в MacOS на панели документов и на панели alt-tab.
- Создать иконку .icns файл ресурсов
- Поместите его в папку "resources/macos"
- Добавьте его в группу ресурсов в проекте xcode
- Отредактируйте файл Info.plist и измените строку значения «CFBundleIconFile» на «icon»
Также инструмент img2icns может пригодиться для преобразования изображений в значок.
Начиная с Xcode 7 (не уверен, когда это было впервые представлено), вы можете использовать файл Assets.xcassets для значков приложений. Этот файл включен по умолчанию для новых проектов.
- Перейдите к настройкам цели и убедитесь, что в Общие, Значки приложенийИсточник установлено значение AppIcon.
- Добавьте все 10 значков PNG в изображение AppIcon вашего Assets.xcassets. , если вы запустили приложение раньше, в противном случае оно будет продолжать отображать значок по умолчанию.
- Запустите приложение; теперь он должен показывать ваш значок в Dock, Application Switcher и везде, где он должен появиться.
Шаги, чтобы добавить значок приложения в ваш проект какао.
- Найдите «Icon Composer» в центре внимания.
- Перетащите значок (имя должно быть похоже на imagename.icns) в соответствующих полях.
- Выберите один ящик и сохраните его.
- Перетащите сохраненное изображение в папку «Ресурсы» вашего приложения.
- Выберите цель -> щелкните правой кнопкой мыши по названию проекта -> выберите GetInfo.
- В свойствах введите имя «Icon File».
- Теперь очистите Build и запустите ваше приложение.
Используйте автоматический инструмент (например, IconFly) для создания правильного ICNS или набора иконок со всеми необходимыми размерами.
Затем перетащите созданный ICNS или набор иконок в Xcode.
в файле info.plist установите значение «CFBundleIconFile» на [IconName]
Xcode 8.2.1
Конвертировать .jpg . Icns через IconMaker
Добавьте файл AwesomeApp.icns в ту же папку, что и info.plist
Перетащите файл AwesomeApp.icns в xcode в той же папке, что и info.plist
В info.plist установите значок: AwesomeApp.icns
Шаг 1: Получить имя файла значка из info.plist и поместить папку icns (файл значка) в папку SourceCode/resources
Шаг 2: То же самое относится и к xcode, вы должны скопировать все изображения из xcode, используя copyallframeworks или copyall file resource в вашем xcode, и снова собрать приложение.
Как настроить изображения, чтобы я мог архивировать и проверять свое приложение? Теперь экран выглядит так:
Итак, первый говорит 29pt , но потом также говорит 2x . Так я могу поставить 29x29 изображение или 58x58 изображение? И куда мне положить все остальные? (Я знаю , что есть больше , чем размеры 29 , 40 и 60 ).
В любом случае, я попытался перетащить 29x29 png в первый слот, a 40x40 во второй и a 60x60 на третий и четвертый. Когда я пошел в Product->Archive , я получаю
выберите приложение и нажмите инспектор атрибутов, он также показывает требуемые размеры 29x29 для 1x и 58x58 для 2x и т. д. Почему мы не можем просто сделать это в самом XCode? Никаких специальных приложений или веб-сайтов. Только одно большое изображение, это было бы слишком просто, не так ли? Вот как я это делаю в Unity Его больше не используют в iOS 13. Его не рекомендуется./ Пользователи / kendon / Документы / Приложения для iPhone / Инструмент продаж / Инструмент продаж / Images.xcassets: в наборе значков приложений с именем «AppIcon» не было подходящего содержимого.
Обновление: если вы не любите изменять размер иконок один за другим, посмотрите ответ Шмуди . Это намного проще.
Нажмите Assets.xcassets в навигаторе проекта, а затем выберите AppIcon .
Это даст вам пустой набор значков приложения.
Теперь просто перетащите изображение нужного размера (в формате .jpg) из Finder на каждый пробел в наборе приложений. Иконка приложения должна быть настроена сейчас.
Изображение в самом верху показывает размеры пикселей для каждого размера точки, который требуется в iOS 9. Однако, даже если я не получу обновленный ответ для будущих версий iOS, вы все равно сможете определить правильные размеры пикселей, используя метод ниже.
Посмотрите, сколько точек (pt) каждого пробела в пустом наборе изображений. Если изображение 1x, то пиксели совпадают с точками. Для 2x удвоить очки и 3x утроить очки. Так, например, в первом примере выше (29pt 2x) вам понадобится изображение размером 58x58 пикселей.
Вы можете начать с изображения размером 1024x1024 пикселя, а затем уменьшить его до нужных размеров. Вы можете сделать это самостоятельно или есть сайты и скрипты для получения нужных размеров. Выполните поиск по запросу «генератор значков приложения ios» или что-то подобное.
Я не думаю, что имена имеют значение, если вы правильно выбрали размеры, но общее соглашение об именах таково:
Хотя вы можете использовать изображение для экрана запуска, попробуйте использовать файл раскадровки на экране запуска. Это будет удобно изменять размер для каждого размера и ориентации. Посмотрите этот SO-ответ или следующую документацию для помощи в этом.
Как настроить изображения, чтобы я мог архивировать и проверять свое приложение? Теперь экран выглядит следующим образом:
Итак, первый говорит 29pt , но затем он также говорит 2x . Я помещаю изображение 29x29 или изображение 58x58 ? И где я поместил все остальные? (Я знаю, что есть больше размеров, чем 29 , 40 и 60 ).
Во всяком случае, я попытался перетащить a 29x29 png на первый слот, a 40x40 на второй и 60x60 на третий и четвертый. Когда я пошел в Product->Archive , я получаю
Обновление: Если вы не любите изменять размеры иконок один за другим, посмотрите ответ шмуди. Это намного проще.
Размеры иконок
Как установить значок приложения
Нажмите Assets.xcassets в навигаторе проекта, а затем выберите AppIcon.
Это даст вам пустой набор значков приложения.
Теперь просто перетащите изображение нужного размера (в формате .jpg) из Finder на каждый пробел в наборе приложений. Теперь значок приложения должен быть настроен.
Как создавать изображения нужного размера
Изображение в самом верху показывает размеры пикселей для каждого размера точки, который требуется в iOS 9. Однако, даже если я не получу обновленный ответ для будущих версий iOS, вы все равно сможете определить правильные размеры пикселей, используя метод ниже.
Я не думаю, что имена имеют значение, если вы правильно выбрали размеры, но общее соглашение об именах таково:
Запустить изображение
Хотя вы можете использовать изображение для экрана запуска, попробуйте использовать файл раскадровки на экране запуска. Это будет удобно изменять размер для каждого размера и ориентации. Посмотрите этот SO-ответ или следующую документацию для помощи в этом.
Полезная документация
Xcode изображения в этом посте были созданы с Xcode 7.
Недавно я обнаружил это приложение под названием Icon Set Creator в App Store, которое бесплатно, без рекламы, обновляется при новых изменениях, прямо вперед и прекрасно работает для всех возможных размеров значков в OSX, iOS и WatchOS:
Создатель набора иконок:
В XCode:
Чтобы сэкономить немного времени:
1) Вы можете пометить изображения значков вашего приложения в поисковике и сразу перетащить их в каталог активов, перетащив их в один из пустых слотов набора изображений значков приложения. Когда вы удерживаете перетаскивание над слотом, некоторые другие слоты выглядят выделенными, и когда вы уроните их, все они будут заполнены сразу. Обратите внимание, что это работает в XCode 8 (я не пробовал XCode 7), но в бета-версии XCode 9 пока нет.
Я использую инструмент Prepo для создания всех правильных размеров изображения. Вы просто загружаете приложение в свой файл изображения, и он будет выплевывать каждый необходимый файл с соответствующим именем.
Как только вы сделаете это, вы можете перетащить соответствующие файлы или просто указать на экспортированную папку Prepo.
Я нашел приложение под названием Iconizer. Вы можете найти репозиторий на github. Iconizer может создавать значки приложений для OS X, iPad, iPhone, CarPlay и Apple Watch, используя только одно изображение.
После этого просто замените (удалите и импортируйте) свой AppIcon в Assets.xcassets
Согласно обновленной версии (Xcode 8.3.3), я увидел, что для всех полей наборов AppIcon требуется разрешение ниже.
Он поставляется с hdpi, xhdpi, xxhdpi и т.д.
Надеюсь, что это поможет другим.
Не занимаясь никогда ранее нативной разработкой под мобильные платформы, и в этот раз решил пойти "легким путем" — освоить React Native. Наибольшей трудностью стало добавление иконки приложения(AppIcon) и экрана загрузки (Launch Screen). О чем и хочу рассказать в данной статье тем, кто осваивает React Native.
На момент написания статьи актуальная версия React Native 41.0, XCode 8.2 (эти данные указаны по той причине, что в более поздних версиях может что-то измениться и данный мануал не будет применим).
Создаем React Native приложение
Добавление AppIcon
На iOS
Идем в папку с iOS-частью приложения
и открываем там файл XCode-проекта habr.xcodeproj.
Далее, щелкаем по следующим кнопкам:
В поле 4 добавляем иконки путем перетаскивания их в пустые ячейки. Под ячейками указан размер иконки(в pt).
Получается примерно так:
Важно: картинка иконки должна быть квадратная и, в идеале, их должно быть несколько версий разного размера(под каждую ячейку — свой размер). Если не охота возиться с созданием иконок разного размера — добавьте одну, размером 120x120px, в ячейку для iPhone 7-10:
Если добавить иконки не правильного размера, то получите ошибку "Images.xcassets: The app icon set named “AppIcon” did not have any applicable content."
Полезно знать: иконки для ios удобнее всего создавать в программе Sketch(доступна только под OS X), поскольку в ней есть шаблоны нужных размеров, которые затем можно экспортировать в png-формат (File → Export. ):
Запускаем сборку ios-версии из корневой папки проекта:
(hit: для "сворачивания" приложения в эмуляторе нужно дважды нажать Cmd+Shift+H)
На Android
Из папки проекта идем в папку с Android-частью приложения, в место хранения ресурсов:
и видим здесь папки:
Заходим в каждую из них и в каждой видим файл ic_launcher.jpg. Заменяем каждый файл на свой, с таким же именем и такого же размера (в px).
Запускаем сборку Android-версии из корневой папки проекта:
С иконками закончили, переходим к экрану загрузки.
Добавление LaunchScreen
На iOS
Существует по крайней мере 2 способа добавить LaunchScreen на iOS. Опишу тот, который сработал у меня.
Первым делом, идем снова в XCode, по тому же маршруту, который показан на самом первом изображении в этой статье, но вместо папки Images.xcassets, выбираем файл LaunchScreen.xib.
При этом XCode спросит, для какой версии какого устройства отобразить содержимое данного файла. Выбираем любой iPhone.
Далее, щелкаем по кнопкам под номером 3 и 4 на данном скриншоте:
Затем перетаскиваем элемент 5 (Image View) на рабочее поле 6. Имеющиеся в рабочем поле 6 элементы (текстовые надписи) можно удалить.
Следующим шагом добавляем в наш проект нужное нам файл с изображением(для начинающих маководов — контекстное меню вызывается прикосновением к тачпаду двумя пальцами одновременно).
Далее, щелкаем по элементу UIImageView в рабочей зоне и настраиваем его свойства:
В меню под номером 1 (на скриншоте) выбираем добавленную в предыдущем шаге картинку(если выпадающий список пуст, то щелкните в левой панели(там где выбирали файл LaunchScreen.xib по любому другому файлу, а затем снова вернитесь к файлу LaunchScreen.xib — файл появится в выпадающем списке. Это мелкий баг XCode).
В меню под номером 2 выберите "Aspect Fit", чтобы картинка масштабировалась пропорционально, независимо от размера экрана устройства, на котором будет запущено приложение.
Чтобы картинка располагалась строго по центру, щелкните самой картинке(на рабочей области) и нажмите на кнопку 1, как показано на следующем скриншоте:
В каждом из четырех полей "Add new constrains" установите значение 0.
Запускаем сборку ios-версии из корневой папки проекта:
На Android
Из папки проекта идем в папку с Android-частью приложения, в место хранения ресурсов:
Добавляем здесь папку drawable. Создаем в ней файл splash_screen.xml такого содержания
Этот файл описывает новый "ресурс" приложения, и путь к внешним файлам ресурса(в нашем случае — к файлу с изображением для стартового экрана).
эта часть кода указывает расположение ресурса на экране. А эта:
путь к файлу ресурса, относительно папки res.
Создает фоновую подложку к экрану загрузки, а строка
указывает цвет фона. Значение цвета фона берется из файла colors.xml, который пока не существует и который вам нужно создать и расположить по адресу:
Содержимое файла может быть таким:
Здесь каждая строчка вроде
содержит цветовую константу. Задать цветовое значение фона напрямую(в файле splash_screen.xml) мне не удалось, поэтому добавил такой файл, как советовалось в одной из инструкций в Сети.
Далее, в папку drawable добавляем файл ic_launcher.jpg, представляющий собой изображение на стартовом экране.
Затем идем в папку
и редактируем файл styles.xml так, чтобы он выглядел следующим образом
Этим действием мы добавляем новую "тему оформления" для "активности"(activity).
"Активность"(Activity) в Android-приложениях представляет собой "экран" или "страницу". По умолчанию в React Native есть лишь одна "активность", мы же добавляем ещё одну.
Для этого переходим в папку с java-кодом:
(путь после /java/ в вашем проекте будет другим) и делаем следующее:
- переименовываем MainActivity.java в MainActivity2.java
- редактируем файл MainActivity2.java — меняем название класса в 6 строке с "MainActivity" на "MainActivity2":
Создаем файл MainActivity.java, в который пишем такой код:
Смысл перечисленных выше 3-х шагов прост: мы меняем стартовый загрузочный экран("активность") на наш экран("активность) SplashScreen.
(В этом абзаце вы могли заметить, что LaunchScreen переименовался в SplashScreen. В Android-разработке(и не только) принято называть загрузочный экран SplashScreen'ом.)
Теперь осталось зарегистрировать нашу "активность" в файле-манифесте Android-приложения, чтобы она была доступна для вызова в коде.
Открываем файл AndroidManifest.xml, который находится по адресу
(относительно корневой директории проекта)
И приводим его к такому виду:
В итоге, в файле AndroidManifest.xml мы имеем 2 активности, причем в одной из них указано, что именно она — та, с которой начнется запуск Android-приложения. Это делается добавлением таких параметров:
в тело "активности".
С приготовлениями закончено. Запускаем билд android-версии из корневой папки проекта:
Читайте также: