画面の作り方
Activityのユーザーインターフェースの作り方を説明します。特にGUIデザイナ(XML)を使った画面レイアウトとソースコード上の画面レイアウト方法の2パターンの解説は入門書やドキュメントではあまり解説されていませんので、GUIデザイナでの配置とソースコード上での画面配置の方法をそれぞれ解説します。Androidのインストール方法やHellowWorldの作成、Intent、Serviceの初歩的な解説については『初めてのAndroid』や入門サイトを参考にしてください。
■AndroidSDKリファレンス（サイト）
http://developer.android.com/reference/packages.html
ActivityとViewについて
AndroidでのActivityとはアプリケーションにおける1つの画面です。この1画面を表すActivityにViewと呼ばれるコンポーネントを付けて画面を作っていきます。
ソース例
public class ActivityTest extends Activity{
Button selectButton;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
selectButton = (Button) findViewById(R.id.nextSelectButton);
}
}
簡単な画面を作る
ソースコードで画面を作る
では、早速以下の画面の作成に取り掛かりましょう。テキスト入力用のView(EditText)とボタン用のView(Button)があるだけの簡単な画面です。
public class ActivityViewTest extends Activity {
LinearLayout liLayout;
EditText editText;
Button button;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
liLayout = new LinearLayout(this);
editText = new EditText(this);
button = new Button(this);
liLayout.addView(editText);
liLayout.addView(button);
setContentView(liLayout);
}
}
解説
EditTextとButtonのインスタンスを作成しLinearLayoutにaddしています。LinearLayoutとはViewを配置する為のViewです。LinearLayoutに何も設定しない場合はこのように水平方向にViewが設定されます。
liLayout.setOrientation(LinearLayout.VERTICAL);を記述すると縦方向にViewが設定されます。
GUIデザイナを使って画面を作る
GUIデザイナを使って画面を作る場合、まずはres/layout/main.xmlをクリックしAndroid Layout Editorでmain.xmlを開きます。
これがAndroidでGUIを使い画面を作るツールです。
既存のTextViewの削除
①アウトラインをクリックするとでてくるTextViewにフォーカスを当てた状態で②-をクリックしてください。そうするとTextViewを削除していいか確認ダイアログが表示されるので「はい」を押下します。
EditTextの挿入
Buttonの挿入
main.xmlへのコンポーネントの配置は以上で完了です。次は作成したmain.xmlをソースコード上に紐付ける作業です。Androidではｘｍｌや画像などのリソース情報とソースコードを紐付ける為にR.javaというクラスが自動生成されます。このR.javaにres内に配置した参照を渡す変数が自動的に書かれます。 main.xmlを参照する変数はR.layout.mainです。
public class ActivityViewTest extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}
GUIデザイナで配置したViewにソースコード上からアクセスする
GUIデザイナで配置したViewにソースコード上からアクセスする為には自動的に生成されたR.java内のIDを引数にActivity()#findViewById()を行います。具体的なソースは以下のようになります。
public class ActivityViewTest extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
EditText editText = (EditText) findViewById(R.id.EditText01);
button = (Button) findViewById(R.id.Button01);
}
}
パラメータを設定する
Androidでは細かな画面のレイアウトを実現する為にmarginやpadding、レイアウト方向、右寄せ、左寄せ、中央寄せなどのパラメータを設定できます。そのパラメータの設定方法を解説します。
マージンを設定する
マージンをソースコードで設定する
public class ActivityViewTest extends Activity {
LinearLayout liLayout;
EditText editText;
Button button;
// 幅、または高さいっぱいに広げる
static final int WC = LinearLayout.LayoutParams.WRAP_CONTENT;
// ジャストのサイズにする
static final int FP = LinearLayout.LayoutParams.FILL_PARENT;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
liLayout = new LinearLayout(this);
editText = new EditText(this);
button = new Button(this);
LinearLayout.LayoutParams layoutParams =
new LinearLayout.LayoutParams(WC, WC);
layoutParams.setMargins(10, 10, 10, 10);
button.setLayoutParams(layoutParams);
liLayout.addView(editText);
liLayout.addView(button);
setContentView(liLayout);
}
View自体には直接マージンを設定できるメソッド等はありません。Viewにマージンを設定する場合は、LinearLayout.LayoutParamsクラスのインスタンスを作り、LayoutParamsにマージンを設定してViewにセットします。
マージンをGUIデザイナで設定する
まずはマージンを設定View①を選択します。次に下部のプロパティータブ②を選択し、下の方にあるマージン③を設定します。これでボタンにマージンが設定されます。
揃えを設定する
ソースコード上で右揃えにする
ソースコード上で右揃えにする為にはLinearLAyout#setGravity()を使います。LayoutParamsにもgravityという項目がありますが、こちらでは右揃えされないので注意が必要です。
liLayout = new LinearLayout(this);
editText = new EditText(this);
button = new Button(this);
LinearLayout.LayoutParams layoutParams = new
LinearLayout.LayoutParams(FP, FP);
liLayout.setGravity(Gravity.RIGHT);
liLayout.setLayoutParams(layoutParams);
liLayout.addView(editText);
liLayout.addView(button);
GUIデザイナ上で右揃えにする
GUIデザイナ上で右揃えにする為にはLinearLayoutのプロパティのGravityをrightに設定します。
右揃え＋縦方向に中央揃えにする
ソースコード上で右揃え＋縦方向に中央揃えにする
liLayout.setGravity(Gravity.RIGHT | Gravity.CENTER_VERTICAL);
GUIデザイナ上で右揃＋縦方向に中央揃えにする
GUIデザイナ上で右揃えにする為にはLinearLayoutのプロパティのGravityにrightとcenter_verticalを設定します。
方向を設定する
ソースコードで方向を設定する
liLayout.setOrientation(LinearLayout.VERTICAL);
GUIデザイナ上で方向を設定する
GUIデザイナ上で方向を設定する為にはLinearLayoutのプロパティのOrientationにverticalを設定します。
パディングを設定する
ソースコードでパディングを設定する
liLayout.setPadding(10, 10, 10, 10);
GUIデザイナ上でパディングを設定する
GUIデザイナ上で方向を設定する為にはLinearLayoutのプロパティのPaddingに10pxを設定します。
幅と高さを設定する
ソースコードで高さと幅を設定する
editText.setWidth(80); editText.setHeight(80); button.setWidth(80); button.setHeight(80);
