web-dev-qa-db-ja.com

iOSおよびAndroid Cordova / PhoneGapのアイコンの生成

次のconfig.xmlセットアップで新しく作成されたCordovaプロジェクトがあります（ http://docs.phonegap.com/en/Edge/config_ref_images.md.html の手順を使用）。また、2つのプラットフォーム（iOSとAndroid）を追加しました。

cordova run iosまたはcordova run Androidのいずれかを実行すると、プロジェクトにはまだデフォルトのCordovaアイコンがあります。ドキュメントからの私の理解は、Corodvaはicon.pngで提供されたconfig.xmlに基づいてアイコンを自動的に作成することになっているということです。

config.xml：

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.testapp" version="1.1.2" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.Apache.org/ns/1.0">
    <name>SingleApp</name>
  <preference name="DisallowOverscroll" value="true" />
  <preference name="AutoHideSplashScreen" value="false" />
  <preference name="Orientation" value="portrait" />
  <preference name="Fullscreen" value="false" />
  <preference name="target-device" value="handset" />

  <description>
      A sample Apache Cordova application that responds to the deviceready event.
  </description>
  <author email="[email protected]" href="http://cordova.io">
      Apache Cordova Team
  </author>
  <content src="index.html" />
  <access Origin="*" />

  <icon src="icon.png" />

</widget>
androidioscordovaphonegap-pluginscordova-plugins
31
aporat

ImageMagickを使用してCordovaのアイコンを自動生成するスクリプトを作成しました。

https://github.com/AlexDisler/cordova-icon

これを使用するには、「icon.png」ファイルを作成し、プロジェクトのルートフォルダーに配置してから実行します。

cordova-icon

プロジェクトのプラットフォームに必要なすべてのアイコンが生成されます。

また、cordovaプロジェクトのフックとして設定して、追加したicon.pngに基づいてプロジェクトをビルドするたびにアイコンが生成されるようにすることもできます。 （readmeの指示）。

69
Alex

Cordova 3.5.0を使用している場合、ドキュメントを更新しています。古いバージョンでは、プロジェクト内のアイコンを常に手動で置き換える必要がありましたが、最新バージョンのCordovaは正常に機能しています。

http://cordova.Apache.org/docs/en/3.5.0/config_ref_images.md.html#Icons%20and%20Splash%20Screens

ここにあるように https://github.com/phonegap/phonegap-cli/issues/58 これはよくある問題です。したがって、古いバージョンのコルドバを使用している場合は、コマンドnpm update -g cordova

その後、config.xmlを次のように更新する必要があります。

    <icon src="www/res/drawable-xxxhdpi/icon.png" />
    <platform name="Android">
          <icon src="www/res/drawable-ldpi/icon.png" density="ldpi" />
          <icon src="www/res/drawable-mdpi/icon.png" density="mdpi" />
          <icon src="www/res/drawable-hdpi/icon.png" density="hdpi" />
          <icon src="www/res/drawable-xhdpi/icon.png" density="xhdpi" />
    </platform>

    <platform name="ios">
              <!-- iOS 7.0+ -->
              <!-- iPhone / iPod Touch  -->
              <icon src="www/res/ios/icon-60.png" width="60" height="60" />
              <icon src="www/res/ios/[email protected]" width="120" height="120" />
              <!-- iPad -->
              <icon src="www/res/ios/icon-76.png" width="76" height="76" />
              <icon src="www/res/ios/[email protected]" width="152" height="152" />
              <!-- iOS 6.1 -->
              <!-- Spotlight Icon -->
              <icon src="www/res/ios/icon-40.png" width="40" height="40" />
              <icon src="www/res/ios/[email protected]" width="80" height="80" />
              <!-- iPhone / iPod Touch -->
              <icon src="www/res/ios/icon.png" width="57" height="57" />
              <icon src="www/res/ios/[email protected]" width="114" height="114" />
              <!-- iPad -->
              <icon src="www/res/ios/icon-72.png" width="72" height="72" />
              <icon src="www/res/ios/[email protected]" width="144" height="144" />
              <!-- iPhone Spotlight and Settings Icon -->
              <icon src="www/res/ios/icon-small.png" width="29" height="29" />
              <icon src="www/res/ios/[email protected]" width="58" height="58" />
              <!-- iPad Spotlight and Settings Icon -->
              <icon src="www/res/ios/icon-50.png" width="50" height="50" />
              <icon src="www/res/ios/[email protected]" width="100" height="100" />
     </platform>

ご覧のとおり、URIはwwwフォルダーではなく、cordovaプロジェクトのパスに関連しています。

13
Javier Abrego

アイコンのconfig.xml設定は、PhoneGap Buildサービスでのみ機能します。両方のプラットフォームを追加した後、手動で（またはフックを作成できますが、自分で作成していません）アイコンを正しいパスに配置する必要があります。

IOSの場合：

PROJECT_PATH/platforms/ios/PROJECT_NAME/Resources/icons

アンドロイド用：

PROJECT_PATH/platforms/Android/res/drawable

Androidには多くのres/drawable-*フォルダーがあり、アプリに適用されますが、少なくともres/drawableに追加します

次にcordova prepareまたはbuildまたはrunを実行します

8
Dawson Loudon

アイコン生成用の追加ソフトウェアをインストールする場合は、Ionicを使用できます。

以下をせよ：

  1. npm install ionic -g
  2. アイコンやスプラッシュスクリーン用のpng、psd、または.aiファイルを${project_location}/resources
  3. ionic resources

アイコンのみを生成する場合は、そのための便利なキーがあります。

ionic resources --icon

詳細 ここ

7
Aleksandr Kravets

アイコンがあるフォルダーを指定する必要はありませんか？ Cordovaは、アイコンが見つからない場合、デフォルトのアイコンに置き換えます。

次のようなものに置き換えようとしましたか？

<icon src="res/icon.png" />
2
Davi S.

以下を試してください https://www.npmjs.org/package/cordova-gen-icon

例：

$ cordova create hello com.example.hello
Creating a new cordova project with name "HelloCordova" and id "com.example.hello" at location "hello"
$ cd hello
$ cordova platform add ios
Creating ios project...
Preparing ios project
$ cordova-gen-icon 
Generate cordova icons with
project: .
icon   : ./www/img/logo.png
target : 

generate iOS icons
Success generate icon set
0
mrded

<icon src="res/icon.png" />動作しないと言う人のためのちょっとした説明！

この両方のフォルダにicon.pngを配置する必要があります

project_name/res /

そして

project_name/platforms/platform_name/res /

手順：

cordova create hello com.example.hello HelloWorld
cd hello

Icon.pngをproject_name/res/にコピーし、config.xmlを開いて<icon src="res/icon.png" />を配置します

その実行後

cordova platform add Android

Icon.pngを... hello/platforms/Android/res/にコピーします

それから

cordova build Android

そして最後に

adb install  platforms/Android/build/outputs/apk/Android-debug.apk

その後、あなたのアイコンでアプリをデバイス上で見ることができます

0
MTK