初心者向けAndroidStudio、パート2:アプリの探索とコーディング

更新日:2020年1月。

この初心者向けAndroidStudio入門のパート1では、開発環境にAndroid Studioをセットアップし、ユーザーインターフェースについて理解しました。次に、パート2で、最初のアプリをコーディングします。

アニメーション化されたモバイルアプリは、GoogleのAndroidロボットキャラクターとキャラクターをアニメーション化するためのボタンを表示する単一のアクティビティで構成されています。ボタンをクリックすると、キャラクターの色が緑から赤、青、そして緑に徐々に変化します。アプリは特に便利ではありませんが、アプリを作成すると、AndroidStudioの使用に慣れることができます。パート3では、AndroidデバイスエミュレーターとKindleFireタブレットを使用してアプリをビルドして実行します。

このシリーズは、この記事の執筆時点で現在の安定版リリースであるAndroid Studio3.2.1用に更新されていることに注意してください。

AndroidStudioのプロジェクトウィンドウとエディターウィンドウ

パート1の最後にAndroidStudioのメインウィンドウを紹介しました。このウィンドウは、アプリのリソースファイルを識別するプロジェクトウィンドウや、コードを記述してモバイルアプリのリソースを指定するさまざまなエディターウィンドウなど、いくつかの領域に分かれています。 AndroidStudioで。プロジェクトウィンドウとエディタウィンドウを図1に示します。

ジェフ・フリーゼン

プロジェクトウィンドウでは、アプリのソースファイルの名前であるW2Aが強調表示されW2A.javaます(.javaファイル拡張子は表示されていません)。W2Aに対応するのは、プロジェクトウィンドウでW2Aをダブルクリックすると表示されるエディタウィンドウです。エディタウィンドウには、ファイルの現在の内容(この場合はアプリのメインアクティビティの骨格Javaソースコード)が表示されます。

各エディターウィンドウはタブに関連付けられています。たとえば、W2AのエディタウィンドウはW2A.javaタブに関連付けられています。main.xml(アプリのメインアクティビティのデフォルトのXMLベースのレイアウト)として識別される2番目のタブも表示されます。ウィンドウのタブをクリックすると、あるエディタウィンドウから別のエディタウィンドウに移動します。

ダウンロードコードを取得するAndroidサンプルアプリのソースコードをダウンロードします:W2A.java。JavaWorld用にJeffFriesenによって作成されました。

Androidサンプルアプリ

サンプルアプリ(W2A.java)は、Androidロボットのキャラクターとボタンを表示するメインアクティビティで構成されています。ユーザーがボタンを押すと、ロボットは一連の色でアニメーション化します。このセクションでは、アクティビティのソースコードとリソースについて説明します。

Androidサンプルアプリを探索してコーディングする

アクティビティのソースコードはW2A.java、リスト1に示すファイルに格納されています。

リスト1。 W2A.java

 package ca.javajeff.w2a; import android.app.Activity; import android.graphics.drawable.AnimationDrawable; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.ImageView; public class W2A extends Activity { AnimationDrawable androidAnimation; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); ImageView androidImage = (ImageView) findViewById(R.id.android); androidImage.setBackgroundResource(R.drawable.android_animate); androidAnimation = (AnimationDrawable) androidImage.getBackground(); final Button btnAnimate = (Button) findViewById(R.id.animate); View.OnClickListener ocl; ocl = new View.OnClickListener() { @Override public void onClick(View v) { androidAnimation.stop(); androidAnimation.start(); } }; btnAnimate.setOnClickListener(ocl); } } 

このW2A.javaファイルは、クラスを格納するパッケージ()に名前を付けるpackageステートメントで始まります。この後に、さまざまなAndroidAPIタイプの一連のインポートステートメントが続きます。次に、コードはを拡張するクラスを記述します。ca.javajeff.w2aW2AW2Aandroid.app.Activity

W2A最初にandroidAnimation、タイプのインスタンスフィールドを宣言しますandroid.graphics.drawable.AnimationDrawable。タイプのオブジェクトはAnimationDrawable、フレームごとのアニメーションを記述します。このアニメーションでは、現在のドローアブルがアニメーションシーケンス内の次のドローアブルに置き換えられます。

ドローアブルとは何ですか?

描画可能で、そのようなイメージとして、描くことができるものです。ドローアブルの一般的な抽象化であるAnimationDrawable抽象android.graphics.drawable.Drawableクラスを間接的に拡張します。

onCreate()メソッド

アプリのすべての作業は、W2AのオーバーライドonCreate(Bundle)メソッドで行われます。他のメソッドは必要ありません。これにより、このアプリをシンプルに保つことができます。

onCreate(Bundle) 最初に同じ名前のスーパークラスメソッドを呼び出します。このルールは、すべてのオーバーライドするアクティビティメソッドが従う必要があります。

次に、このメソッドが実行setContentView(R.layout.main)され、アプリのユーザーインターフェイスが確立されます。R.layout.main別のファイルにあるアプリケーションリソースの識別子(ID)です。このIDは次のように解釈します。

  • Rアプリのビルド時に生成されるクラスの名前です。このクラスの名前はR、そのコンテンツがレイアウト、画像、文字列、色など、さまざまな種類のアプリケーションリソースを識別するために付けられました。
  • layout内にネストされているクラスの名前ですR。このクラスにIDが格納されているアプリケーションリソースは、特定のレイアウトリソースを記述します。各種類のアプリケーションリソースは、同様の方法で名前が付けられたネストされたクラスに関連付けられています。たとえば、string文字列リソースを識別します。
  • mainint内で宣言されたベースの定数の名前ですlayout。このリソースIDは、メインのレイアウトリソースを識別します。具体的にmainmain.xml、メインアクティビティのレイアウト情報を格納するファイルを指します。mainあるW2Aのはレイアウトのみリソース。

Passing R.layout.main to Activity's void setContentView(int layoutResID) method instructs Android to create a user interface screen using the layout information stored in main.xml. Behind the scenes, Android creates the user interface components described in main.xml and positions them on the device screen as specified by main.xml's layout data.

The screen is based on views (abstractions of user interface components) and view groups (views that group related user interface components). Views are instances of classes that subclass the android.view.View class and are analogous to AWT/Swing components. View groups are instances of classes that subclass the abstract android.view.ViewGroup class and are analogous to AWT/Swing containers. Android refers to specific views (such as buttons or spinners) as widgets.

Continuing, onCreate(Bundle) executes ImageView androidImage = (ImageView) findViewById(R.id.android);. This statement first calls View's View findViewById(int id) method to find the android.widget.ImageView element declared in main.xml and identified as android. It instantiates ImageView and initializes it to the values declared in the main.xml file. The statement then saves this object's reference in local variable androidImage.

ImageView and AnimationDrawable

Next, the androidImage.setBackgroundResource(R.drawable.android_animate); statement invokes ImageView's inherited (from View) void setBackgroundResource(int resID) method, setting the view's background to the resource identified by resID. The R.drawable.android_animate argument identifies an XML file named android_animate.xml (presented later), which stores information on the animation, and which is stored in res's drawable subdirectory. The setBackgroundResource() call links the androidImage view to the sequence of images described by android_animate.xml, which will be drawn on this view. The initial image is drawn as a result of this method call.

ImageView lets an app animate a sequence of drawables by calling AnimationDrawable methods. Before the app can do this, it must obtain ImageView's AnimationDrawable. The androidAnimation = (AnimationDrawable) androidImage.getBackground(); assignment statement that follows accomplishes this task by invoking ImageView's inherited (from View) Drawable getBackground() method. This method returns the AnimationDrawable for the given ImageView, which is subsequently assigned to the androidAnimation field. The AnimationDrawable instance is used to start and stop an animation, a process I'll describe shortly.

Finally, onCreate(Bundle) creates the Animate button. It invokes findByViewId(int) to obtain the button information from main.xml, then instantiates the android.widget.Button class.

It then employs the View class's nested onClickListener interface to create a listener object. This object's void onClick(View v) method is invoked whenever the user clicks the button. The listener is registered with its Button object by calling View's void setOnClickListener(AdapterView.OnClickListener listener) method.

To stop, then start the animation, Animate's click listener invokes androidAnimation.stop(); followed by androidAnimation.start();. The stop() method is called before start() to ensure that a subsequent click of the Animate button causes a new animation to begin.

Update and save your code

Before we continue, replace the skeletal code in your W2A.java tab with the code from Listing 1. Save the contents of this window by pressing Ctrl+S, or select Save All from the File menu.

Coding the Android app's main.xml

The app's main activity is associated with an XML-based layout, which is stored in file main.xml, and which is presented in Listing 2.

Listing 2. main.xml

After the XML declaration, Listing 2 declares a LinearLayout element that specifies a layout (a view group that arranges contained views on an Android device's screen in some manner) for arranging contained widgets (including nested layouts) either horizontally or vertically across the screen.

The tag specifies several attributes for controlling this linear layout. These attributes include the following:

  • orientation identifies the linear layout as horizontal or vertical. Contained widgets are laid out horizontally or vertically, and the default orientation is horizontal. "horizontal" and "vertical" are the only legal values that can be assigned to this attribute.
  • layout_width identifies the width of the layout. Legal values include "fill_parent" (to be as wide as the parent) and "wrap_content" (to be wide enough to enclose content). (Note that fill_parent was renamed to match_parent in Android 2.2, but is still supported and widely used.)
  • layout_height identifies the height of the layout. Legal values include "fill_parent" (to be as tall as the parent) and "wrap_content" (to be tall enough to enclose content).
  • gravity identifies how the layout is positioned relative to the screen. For example, "center" specifies that the layout should be centered horizontally and vertically on the screen.
  • background identifies a background image, a gradient, or a solid color. For simplicity, I've hardcoded a hexadecimal color identifier to signify a solid white background (#ffffff). (Colors would normally be stored in colors.xml and referenced from this file.)

The LinearLayout element encapsulates ImageView and Button elements. Each of these elements specifies an id attribute, which identifies the element so that it can be referenced from code. The resource identifier (special syntax that begins with @) assigned to this attribute begins with the @+id prefix. For example, @+id/android identifies the ImageView element as android; this element is referenced from code by specifying R.id.android.

These elements also specify layout_width and layout_height attributes for determining how their content is laid out. Each attribute is assigned wrap_content so that the element will appear at its natural size.

ImageView specifies a layout_marginBottom attribute to identify a space separator between itself and the button that follows vertically. The space is specified as 10 dips, or density-independent pixels. These are virtual pixels that apps can use to express layout dimensions/positions in a screen density-independent way.

Density-independent pixels

密度に依存しないピクセル(DIP)が160 dpiの画面上の1つの物理画素に相当し、ベースライン濃度は、Androidが想定しています。実行時に、Androidは、使用中の画面の実際の密度に基づいて、必要なディップ単位のスケーリングを透過的に処理します。ディップ単位は、次の式を介してスクリーンピクセルに変換されます:ピクセル=ディップ*(密度/ 160)。たとえば、240 dpiの画面では、1dipは1.5物理ピクセルに相当します。さまざまなデバイス画面でユーザーインターフェースが適切に表示されるように、ディップユニットを使用してアプリのユーザーインターフェースを定義することをお勧めします。

新しいレイアウトの選択と保存