1 / 40

レイアウトの基礎

レイアウトの基礎. 2012/04/27. ０．目次. プロジェクトの作り方 アプリの実行 ソースの解説 レイアウト. １．プロジェクトの作り方. ファイル -> 新規 ->Android プロジェクトと選択します. １－１．プロジェクト名の指定. 適当なプロジェクト名を指定して ” 次へ ” を押します（図では HelloAndroid ）. １－２． SDK の指定. SDK のバージョンを指定します。ここでは 2.3.3 にチェックを入れ ” 次へ ” を押します. １－３．アプリの設定.

rhona
Download Presentation

レイアウトの基礎

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. レイアウトの基礎 2012/04/27

  2. ０．目次 • プロジェクトの作り方 • アプリの実行 • ソースの解説 • レイアウト

  3. １．プロジェクトの作り方 • ファイル->新規->Androidプロジェクトと選択します

  4. １－１．プロジェクト名の指定 • 適当なプロジェクト名を指定して”次へ”を押します（図ではHelloAndroid）

  5. １－２．SDKの指定 • SDKのバージョンを指定します。ここでは2.3.3にチェックを入れ”次へ”を押します

  6. １－３．アプリの設定 • パッケージ名は、普通は所属する団体のドメインを入れますが何でもいいです • アクティビティー名がデフォルトのJavaファイル名になります • MinimumSDKでは、このアプ リを実行できるAPIレベルの 下限を指定できます (前のスライドを参照)

  7. １－３．アプリの設定 • 完了を押すとプロジェクトができています

  8. ２．アプリの実行(初回設定) • プロジェクトフォルダを右クリック->実行->実行の構成を選びAndroidアプリケーションをクリックしてから左上のアイコンをクリックします

  9. ２－１．実行構成の作成 • 下のような画面になることを確認して参照を押します

  10. ２－２．実行するプロジェクトの指定 • さっき作ったプロジェクトを選びOKを押します

  11. ２－３．実行構成の設定 • プロジェクトの欄に表示されたら、わかりやすいように名前の欄も同じ名前を入力します

  12. ２－４．AVDの指定 • ターゲットタブを開き、前回作ったAVDにチェックを入れ実行を押します

  13. ２－５．実行 • エミュレーターが起動し、それからアプリが実行されます • 何度も言いますが、エミュレーターの起動には非常に時間がかかるので、不用意に閉じたりしないようにしましょう

  14. ２－６．実行状態のチェック • エミュレーターは起動したが、アプリが動かない等の状態になった場合はコンソールで状態を見てみましょう

  15. ２－６．実行状態のチェック • コンソールのウィンドウが出ていない場合は ウィンドウ->ビューの表示->コンソール で出せます

  16. ３．ソースの解説 • 作ったアプリがどのように動いていたのかを見てみましょう

  17. ３－１．プロジェクトの構成 Activity継承クラス。メインプログラム main.xmlやstrings.xmlに定義した要素を識別するIDを保存するクラス。 デバイスの解像度毎に画像ファイル格納する場所 レイアウトに関するxmlファイルを格納する場所 各種の値を設定するxmlファイルを格納する場所 androidアプリの実行に必要な情報を設定 コードの難読化設定ファイル ターゲットのバージョン設定ファイル

  18. ３－２．Src/HelloAndroidActivity.java package jp.ac.hosei.k.cis; import android.app.Activity; import android.os.Bundle; public class HelloAndroidActivity extends Activity { /* アクティビティが起動された時に実行するメソッド */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // 画面に表示するViewの設定をするメソッド setContentView(R.layout.main); } } ※setContentViewに渡しているR.layout.mainはres/layout/main.xmlを指している。

  19. ３－３．gen/R.java /* AUTO-GENERATED FILE. DO NOT MODIFY.*/ package jp.ac.hosei.k.cis; public final class R { public static final class attr { } public static final class drawable { public static final intic_launcher=0x7f020000; } public static final class layout { public static final int main=0x7f030000; } public static final class string { public static final intapp_name=0x7f040001; public static final int hello=0x7f040000; } } 画像ファイルやレイアウトの設定にIDを割り振り、srcフォルダ内のjavaファイルで呼び出せるようにしてくれるjavaファイル コメントにあるようにIDを自動で生成してくれるため開発者が弄る必要はない

  20. ３－４．res/layout/main.xml レイアウトの設定ファイル <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" /> </LinearLayout> 縦横共に画面いっぱいに レイアウトを適用 縦方向に並べる

  21. ３－５．res/values/string.xml Valuesフォルダ内のファイルはデータの各種値を設定していくもので、string.xmlは特に文字列に関する値を設定する <resources> <string name="hello">Hello World, HelloAndroidActivity!</string> <string name="app_name">HelloAndroid</string> </resources>

  22. ３－６．AndroidManifest.xml <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="jp.ac.hosei.k.cis" android:versionCode="1" android:versionName="1.0" > <uses-sdkandroid:minSdkVersion="10" /> <application android:icon="@drawable/ic_launcher" android:label="@string/app_name" > <activity android:name=".HelloAndroidActivity" android:label="@string/app_name" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest>

  23. ４．Javaによるレイアウト androidアプリでは、Javaでプログラムを書いてxmlでレイアウトや文字などを設定しないといけない？ xmlを使わずにJavaだけでもレイアウトを決められます 新しくShowTextというプロジェクトを作ってみましょう

  24. ４－１．ShowTextActivity.java public class ShowTextActivity extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // レイアウトを設定するオブジェクトの作成 LinearLayoutll = new LinearLayout(this); // レイアウトの指定 setContentView(ll); // 文字を表示するオブジェクトの作成 TextViewtv = new TextView(this); // 文字列の指定 tv.setText("ようこそアンドロイドへ"); // レイアウトに追加 ll.addView(tv); } }

  25. ４－２．アプリの実行 • 一度設定をしたので、プロジェクトを選択して▷ボタンを押すと実行できます

  26. ４－２．アプリの実行 • うまくいくと→のようになります Waiting for HOME ('android.process.acore') to be launched... で止まって動かない人は、エミュレーターを起動したまま、再度実行してみましょう

  27. ４－３．ソースの解説 public class ShowTextActivity extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // レイアウトを設定するオブジェクトの作成 LinearLayoutll = new LinearLayout(this); // レイアウトの指定 setContentView(ll); // 文字を表示するオブジェクトの作成 TextViewtv = new TextView(this); // 文字列の指定 tv.setText("ようこそアンドロイドへ"); // レイアウトに追加 ll.addView(tv); } } アクティビティ レイアウト ビュー

  28. ４－４．アクティビティとは • アクティビティは簡単に言うと”画面”です。 • アクティビティには以下のようなメソッドが用意され、アプリを管理しています

  29. ４－５．レイアウトの指定 プログラム中の // レイアウトを設定するオブジェクトの作成 LinearLayoutll = new LinearLayout(this); // レイアウトの指定 setContentView(ll); の部分は文字通りレイアウトの指定をしています。レイアウトは、配置位置やサイズを管理するためのもので、androidアプリケーションで非常に重要なものです LinearLayoutとは、レイアウトクラスの一つでビュー（部品）を一直線に並べます。 ※他にも様々なレイアウトクラスがあります

  30. ４－６．ビューの指定 プログラム中の // 文字を表示するオブジェクトの作成 TextViewtv = new TextView(this); // 文字列の指定 tv.setText("ようこそアンドロイドへ"); // レイアウトに追加 ll.addView(tv); の部分はビューという画面に表示する部品の設定をしています。 中でもTextViewは文字列のビューを扱うクラスで、setText()で文字列を指定します。 ※他にも様々なビュークラスがあります ※ビューは作成しても最後にレイアウトに追加しないと表示されません

  31. ４－６．レイアウトとビュー アクティビティ レイアウト ビュー ビュー ※複数のレイアウトを組み合わせて複雑なレイアウトを作成することも可能

  32. 練習１ • ShowTextActivityを書き加えて、もう一つ文字列を表示してみましょう • ヒント： • 文字列を表示するには • テキストビューの作成 • 文字列の指定 • レイアウトに追加 • の３つのステップが必要

  33. 練習２ 練習１で作ったプログラムに以下の赤文字の部分を書き加えて実行してみましょう // レイアウトを設定するオブジェクトの作成 LinearLayoutll = new LinearLayout(this); ll.setOrientation(LinearLayout.VERTICAL); // レイアウトの指定 setContentView(ll);

  34. ５．様々なレイアウト • 先程紹介したLinearLayoutの他に様々なレイアウトがあります • TableLayout • RelativeLayout • FrameLayout

  35. TableLayout @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); TableLayouttl = new TableLayout(this); setContentView(tl); TableRow tr1 = new TableRow(this); TableRow tr2 = new TableRow(this); TextView tv1 = new TextView(this); TextView tv2 = new TextView(this); TextView tv3= new TextView(this); TextView tv4 = new TextView(this); tv1.setText("one"); tv2.setText("two"); tv3.setText("three"); tv4.setText("four"); tr1.addView(tv1); tr1.addView(tv2); tl.addView(tr1); tr2.addView(tv3); tr2.addView(tv4); tl.addView(tr2); } } 実行結果

  36. 詳しく知りたい時は… • ネットで調べるか、android-sdk\docsにあるindex.htmlを開きReferenceのタブを開くとクラス一覧の解説があります（ただし英語）

  37. ボタン • ボタンも、テキストビューと同じように生成できます Button b = new Button(this); b.setText(“ボタンに表示する文字列”); li.addView(b); ボタン イベントの登録をしていないので押しても何も起きません

  38. 課題 • 下の図のような表示するアプリを作ってみましょう

  39. 補足：XMLによるレイアウト • 今日のスライドにあったように、JavaでAndroidアプリのレイアウトを設定可能 なぜxmlでも設定できるようになっているのか エンジニアとデザイナーの共同開発

  40. 補足：XMLによるレイアウト • エンジニア プログラミングは出来るが、デザインの設計は得意ではない 機能をJavaで書く • デザイナー デザインの設計は出来るが、プログラミングがよくわからない xmlでデザインを指定したり画像を提供したり

More Related