Androidスタイルのアプリを作成する

多くの場合、非常に人気のあるAndroidアプリケーションのインターフェースでさえ、何らかの方法で設計されており、ほとんどの開発者はユーザーインターフェースガイドラインについても聞いたことがないようです。 ただし、推奨事項に従うことはそれほど難しくなく、開発時間を節約することもあります。 これが実際にそうであることを示すために、少し高度な「Hello World」を例として使用して、アプリケーションインターフェイスを設計するいくつかの重要な要素を検討することをお勧めします。

この記事は、初心者のAndroid開発者を対象としています。 ソースコードは、最後のリンクからダウンロードできます。説明は次のとおりです。





事前準備



1. AdvancedHelloWorldアプリケーションを作成します。 OSの特定のバージョンの特定の機能を使用しないプログラムの場合、BuildTarget-Android 1.6およびMin SDK Version-3をインストールすることを好みます。この場合、画面密度によるリソースの分離は機能します(hdpi、mdpi、ldpi)。 1.5は脇に立ちません。

画像

2. res / layout / main.xmlで、「Say hello」というボタンを1つ作成します。

3.素晴らしいAndroid Asset Studioプロジェクトを使用して、素敵なアイコンを作成します。

4.ボタンをクリックするためのハンドラとして、「Hello World」というフレーズを含むToastメッセージを表示するコードを記述します。



Android Asset Studioについて


価値を過大評価するのが難しいオープンソースのオンラインプロジェクト。 アプリケーションアイコン(ランチャーアイコン)、メニューアイコン、ブックマーク、アラートをすばやく作成できます。 動作するように、彼はChrome 6を要求し、他のブラウザではいくつかの要素が動作しない 記事の最後にリンクします。



リソースノート


私の意見では、最も合理的な選択は、mdpiに適合した解像度で、hdpiデバイス用に別のグラフィックスセットを使用し、他のすべてに別のグラフィックスセットを使用することです。 はい、ldpiに適応する機能は使用していませんが、これらのデバイスは比較的少数であり、すべてのグラフィックデザインが既に落ち着いたときに「軽食」に完全に適応させることができます。 いずれの場合でも、Android 1.5のサポートを宣言したため、描画可能なフォルダーにはすべてのグラフィック要素が使用されるはずです。 残りはオプションです。



ポップアップメニュー





ご想像のとおり、メニューはxmlファイルに記述されています。 メインウィンドウ用にそのようなファイルを1つ作成しましょう。res\ menu \ main_menu.xml



<?xml version="1.0" encoding="utf-8"?>

<menu xmlns:android="http://schemas.android.com/apk/res/android">

<item android:id="@+id/menu_preferences"

android:icon="@drawable/ic_menu_preferences"

android:title="@string/menu_preferences" />

<item android:id="@+id/menu_theme"

android:icon="@drawable/ic_menu_theme"

android:title="@string/menu_theme" />

<item android:id="@+id/menu_close"

android:icon="@drawable/ic_menu_close_clear_cancel"

android:title="@string/menu_close" />

</menu>











2つのポイント:

メニュー項目の数が6を超える場合、6番目以降の項目が追加メニューに結合されます。 サンプルは標準ブラウザで表示できます。

メニューはネストできますが、1レベル以下です。 サブメニューを説明するために、 メニュータグが「展開」される要素の子として追加されます





メニューを作成するとき、最初にすることは標準セットのアイコンを探すことです。 それらはすべてインストールされたSDKにあります-android-sdk-windows \ platform \ android-1.6 \ data \ res \ drawable \ ic_menu _ *。Png

設定を選択してアイコンを終了することは難しくありませんが、説明のために、メニュー項目「テーマ」を追加しました。これにより、背景が黒から白に切り替わり、戻ることができます。 コンピュータグラフィックスの非常に基本的なスキルを持っていても、この点でテンプレートを描くことは難しくありません。 例:

画像

同じAndroid Asset Studioを使用すると、かなり良いアイコンが表示されます:

画像



メニュー項目の実際の作成は、onCreateOptionsMenuで行われます。

@Override

public boolean onCreateOptionsMenu(Menu menu) {

MenuInflater inflater = getMenuInflater();

inflater.inflate(R.menu.main_menu, menu);

return true;

}









処理をクリックします-onOptionsItemSelectedで:



@Override

public boolean onOptionsItemSelected(MenuItem item) {

switch (item.getItemId()) {

case R.id.menu_preferences:

...

default:

return super.onOptionsItemSelected(item);

}

}









設定ウィンドウの設計



そして再び、xmlの主な作業。 res \ xmlにsettings.xmlを作成します。



<?xml version="1.0" encoding="utf-8"?>

<PreferenceScreen

xmlns:android="http://schemas.android.com/apk/res/android">

<PreferenceCategory

android:title="@string/settings_general">

<CheckBoxPreference

android:key="center_message"

android:title="@string/center_message"

android:summary="@string/center_message_summary"

android:persistent="true"

android:defaultValue="true"/>

<EditTextPreference

android:key="text_message"

android:title="@string/text_message"

android:summary="@string/text_message_summary"

android:defaultValue="@string/hello_world"

android:persistent="true"/>

</PreferenceCategory>

</PreferenceScreen>









サポートされる設定のセットはそれほど広くはありませんが、基本的なニーズをカバーします。 「永続的」フラグを設定することで、保存/ロードをエンコードする必要さえありません。 SharedPreferencesから目的の値を読み取るだけです。



SharedPreferences settings = PreferenceManager.getDefaultSharedPreferences(context);

boolean bCenter = settings.getBoolean("center_message", true);








追加の楽しい瞬間として、マークされた「先行」要素の場合にのみ特定のアイテムを「含める」ことができる依存関係(android:依存関係)、およびアプリケーション内の別々のウィンドウのように見えるネストされたセットの簡単な作業を挙げることができます。

設定ウィンドウの場合、独自のPreferenceActivity下位クラスが作成され、そのコンストラクターでxmlプロトタイプが読み込まれます。

addPreferencesFromResource(R.xml.settings);







PreferenceActivityのスタイル設定は困難です。 もちろん、AndroidManifest.xmlの対応するタグにandroid:theme = "@ android:style / Theme.Light"を追加できますが、ネストされた設定には混乱が生じます。 Stackoverflowでのこの問題の説明は、一般的な場合、すべてを黒の背景にそのままにしておく方が良いという考えに帰着します。



9パッチグラフィックスを使用する





9パッチは、解像度と画面サイズに関係なく、Androidアプリケーションでグラフィックを作成できる標準的な方法です。 実際、これは、単一ペインのユーティリティフレームを持つ通常のPNG画像です。 このフレームで正しく動作するために、SDKには特別なdraw9patchユーティリティが含まれています。 上部と左にある1ピクセルの太い黒い線は、画像を拡大したときに複製される領域を示します。 右下の線は「作業領域」を定義します。 たとえば、通常のボタンの場合、これはテキストの場所です。

つまり、9patchの機能を説明するのは非常に難しいため、特に9patch領域を編集するときはプレビューウィンドウで結果をすぐに確認できるため、実験して見てみる方が良いでしょう。 エディターの標準ボタンの背景は次のとおりです。

画像

トレーニングのために、AdvancedHelloWorldのボタンを非標準にし、通常のボタン、押された状態、フォーカスされているボタンの3つの9パッチイメージを準備します。 かなり退屈な職業ですが、大きなチャンスを開きます。

重要なポイント:すべての9patchイメージには拡張子.9.pngが必要です。そうでない場合、アプリケーションは9patchのルールに従ってイメージをスケーリングできることを認識しません。 もう1つの制限があります。リソースフォルダーには、同じ名前と拡張子.pngおよび.9.pngを持つ2つのファイルを同時に存在させることはできません(たとえば、実際には同じリソース名-ボタンがあるため、button.pngとbutton.9.pngは競合します) 。



便利なリンク



GooglecodeのAndroid Asset Studio: http ://android-ui-utils.googlecode.com/hg/asset-studio/dist/index.html

サブメニューを作成するための公式ドキュメント: http : //developer.android.com/guide/topics/ui/menus.html#submenu

設定タイプの完全なリストを含む例: http : //www.kaloer.com/android-preferences

スタイリング設定の問題: http : //stackoverflow.com/questions/2615528/preferenceactivity-and-theme-not-applying



ソースコード



All Articles