Android講座5回
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
開始行:
4って書いてあるけどミスで5回だよ!!
最近ホワイトチョコを一日に何枚も食べて将来が心配の匠です。
今回は、layoutを使った画面構成の話をしたいと思います。
LayoutとはXMLを用いてAndroid標準UIを用いて画面を構成する...
XMLだけでは画面のイメージが掴みにくいためEclipseのプラグ...
オブジェクトをドラックで視覚的にデザインできるようになっ...
&ref(1.layout.png,,50%);
別にこの機能を使わなくてもXMLで編集することも可能です。
では、仕様の説明をします。
Layoutでは置けるものには大きく分けて2つあると考え
『アイテム』と『レイヤー』の2つです。
ここで呼ぶアイテムとは『ボタン』『テキスト』『スクロール...
と実際に使用者が見ることのできるオブジェクトです。
もう一つの『レイヤー』は上記の『アイテム』を置くための板...
これは『アイテム』と違って使用者には見ることができないも...
そしてこのレイヤーには『アイテム』だけでなく『レイヤー』...
このレイヤーにはいくつか種類がありそれぞれ特性がことなり...
・LinearLayout
これはオブジェクトを設定した方向に並べていきます。
・FrameLayout
これはオブジェクトをどんどん重ねていきます。
他にもたくさんあるので自分で調べてみてください。
次に、実際に基本的なUIをつかてみましょう。
プロジェクトを作成します。
&ref(2.MakeProject.png,,50%);
作成したプロジェクトの
Res→layout→main.xml
を開きます。
これはプロジェクトを作成すると自動生成されるHelloWorldを...
簡単なLayoutです。
せっかくなのでこれをベースに作って行きます。
まずLinerLayoutの背景色を白に変えてみましょう
変えるためにはまず、画面のLayoutをクリックするかアウトラ...
をクリックして選択します。
そうすると、下のプロパティにたくさんの入力項目が出てきま...
&ref(3.white.png,,50%);
プロパティのリストのBackGroundの項目に#FFFFFFと入力すると
背景は白に変わります。
ここは#RRGGBBか#AARRGGBBか他のXMLから参照で変えることがで...
またOrientationの項目がverticalになっていることを確認して...
これは縦にオブジェクトを並べていくことを示しており他に横...
また、Gravityの項目はどっちの方向から並べていくか設定でき...
例えば、下から並べたい場合Buttomと設定するとそのようにす...
次はTextViewをいじって行きます。これは名前の通り文字を表...
LinearLayoutの時と同じようにTextViewを選択してください。
&ref(4.Text.png,,50%);
そしてTextの項目を「HelloWorld」に。ここは表示する文字列...
TextColorを#FF0000に。ここは文字の色を変えます。
文字が小さいのでTextSizeを48pxに。ここは文字の大きさを変...
下にある『その他』の項目はどのオブジェクトのプロパティに...
配置やサイズの設定ができます。
Layout heightとLayout widthはViewの高さを表し「○○px」のよ...
fill_parent:親要素のサイズまでなるべく大きくなるようにす...
match_parent:fill_parentと同じ。 API レベル8以降は fill_...
wrap_content:コンテントを表示できる程度の大きさ
と文字を打つと特殊な設定になります。
Layout margin〜は上下左右の余白を設定できます。
次は、ちょっと複雑なレイアウトにしていきましょう。
オブジェクトを新たに追加する場合は左のリストからAndroidの...
追加できます。そして以下の画像のようにちょっと頑張って作...
&ref(5.makeLayout.png,,50%);
ここで注目する点は
1. frameLayoutの意味
下にLinearLayoutを2つ重ねるため
2. LinearLayout2のGravityの設定をセンターにする
TextViewが中央に来る(こない場合LinearLayout2の高さが問題...
3. LinearLayout1のOrientationをhorizontalに
オブジェクトを横に並べることができる
出来なかった人は最後にプロジェクトを置くのでそれをみて研...
これで実行すればこの画面がAndroidの画面に表示されると思い...
しかし、チェックボックスにチェックしてもeditTextに文字を...
なのでそのイベントを取得できるようにプログラムを書きまし...
UITestActivity.javaにそのコードを書いて行きます。
自動生成されたままなら
package aokai.app.UITest;
import android.app.Activity;
import android.os.Bundle;
public class UITestActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}
となっているはずです。
このコードを軽く解説すると画面を構成するクラスActivityを...
実行したとき実際に画面が作られたとき呼ばれるonCreateメゾ...
オーバーライドし親のonCreateを呼びsetContentViewで実際に...
表示されるViewを登録します。今までの回では自分でViewを継...
をこの関数に渡すことによりCanvasに書いた物を表示していま...
今回、渡しているのは「R.layout.main」です。
これはいったい何か疑問に思う人は多いと思います。
Androidではresに置いたファイルやあとで詳しく書きますがXML...
Gen→パッケージ…→R.java
にintの定数として自動的に登録されます。この定数はリソース...
複雑な手続きをしなくても簡単にアクセスできるようにするた...
思います。(どうなのかホントはしらないよ〜)
なので基本的にこのファイルは自分ではいじらなくてもよいで...
補足としてファイル名などが自動でRに登録される関係でファイ...
話しを戻して実際にプログラムを追加していきましょう。
今回のプログラムの仕様は、
editTextに入力された状態でかつチェックボックスにチェック...
ボタンを押すと真ん中の文字がその文字列に変わる
という風にします。
はじめに、Layoutで作成したUIをプログラムで触れるようにし...
public class UITestActivity extends Activity {
private CheckBox check;
private EditText edit;
private Button button;
private TextView text;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
check = (CheckBox)findViewById(R.id.checkBox1);
edit= (EditText)findViewById(R.id.editText1);
button= (Button)findViewById(R.id.button1);
text= (TextView)findViewById(R.id.text);
}
}
クラスにフィールドにそれぞれのUIのクラスの変数を定義し
findViewByIdメゾットを使いそれぞれのUIのオブジェクトを取...
このメゾットに渡しているのはLayoutの時と同じように自動に...
しかし、これはファイルのようにファイルを追加したら自動で...
自分で決まった場所に決まった形で書かなければRに登録される...
Check edit buttonはUIのデフォルトで勝手に書かれるので...
TextはそうでないのでIDを登録してみましょう。
Main.xmlにもどってtextviewをクリックしてプロパティのidに
@+id/text
と入力します。こうすることによりRにこのUIのIDが登録できま...
もし暇なら、他のUIのidも見てみましょう。そうするとそれら...
にも入力したような書式で書かれているはずです。
名前が気に食わなかった場合変えてください。
以上のプログラムでUIのオブジェクトが取得できました。
次にUIのイベントを取得し設定し動作を書いて行きます。
この仕様は「ボタンを押す」という動作によって動作します。
この動作を設定には複数方法があります。
プログラム的に書くと
button.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO 自動生成されたメソッド・スタブ
}
});
とButtonクラスがもつボタンの動作のイベントを持つインター...
これはプログラム的でわかりやすいですが、一箇所にプログラ...
見にくいコードになります。
今回は別の方法で書いて行きます。
Main.xmlファイルのボタンUIのプロパティのOn clickという項...
ここに書いた名前がボタンを押した時に実行されるメゾット名...
項目です。ここでは「click」とします
&ref(7.click.png,,50);
そしてソースコードに戻り新たにメゾット
public void メゾット名(View v)
の書式で追加します。するとボタンが押されるとこの関数が呼...
public void click(View v) {
//キーボードを消す
InputMethodManager inputMethodManager =
(InputMethodManager)getSystemService(Context.IN...
inputMethodManager.hideSoftInputFromWindow(v.getWind...
if(check.isChecked()){
text.setText(edit.getText());
}
}
始めにちょっと難しいコードが書いてありますがボタンを押し...
表示されたままで邪魔なので消すおまじないです。
メインのところは
check.isChecked()
でチェックされているか見て
edit.getText()
で入力されている文字を取得し
text.setText();
で文字をセットします。
とてもシンプルですね。
こんな感じに簡単に標準UIを使うことがAndroidではできます。
他にも色々なメゾットやUIがあるので自分で調べて使ってみて...
次回の予定は未定ですがちょっと複雑なUIのListViewの話をや...
|やってみたお|1|
|無理ゲ|2|
|読んだだけ|2|
|次回も期待|1|
|(´・ω:;.:... |1|
終了行:
4って書いてあるけどミスで5回だよ!!
最近ホワイトチョコを一日に何枚も食べて将来が心配の匠です。
今回は、layoutを使った画面構成の話をしたいと思います。
LayoutとはXMLを用いてAndroid標準UIを用いて画面を構成する...
XMLだけでは画面のイメージが掴みにくいためEclipseのプラグ...
オブジェクトをドラックで視覚的にデザインできるようになっ...
&ref(1.layout.png,,50%);
別にこの機能を使わなくてもXMLで編集することも可能です。
では、仕様の説明をします。
Layoutでは置けるものには大きく分けて2つあると考え
『アイテム』と『レイヤー』の2つです。
ここで呼ぶアイテムとは『ボタン』『テキスト』『スクロール...
と実際に使用者が見ることのできるオブジェクトです。
もう一つの『レイヤー』は上記の『アイテム』を置くための板...
これは『アイテム』と違って使用者には見ることができないも...
そしてこのレイヤーには『アイテム』だけでなく『レイヤー』...
このレイヤーにはいくつか種類がありそれぞれ特性がことなり...
・LinearLayout
これはオブジェクトを設定した方向に並べていきます。
・FrameLayout
これはオブジェクトをどんどん重ねていきます。
他にもたくさんあるので自分で調べてみてください。
次に、実際に基本的なUIをつかてみましょう。
プロジェクトを作成します。
&ref(2.MakeProject.png,,50%);
作成したプロジェクトの
Res→layout→main.xml
を開きます。
これはプロジェクトを作成すると自動生成されるHelloWorldを...
簡単なLayoutです。
せっかくなのでこれをベースに作って行きます。
まずLinerLayoutの背景色を白に変えてみましょう
変えるためにはまず、画面のLayoutをクリックするかアウトラ...
をクリックして選択します。
そうすると、下のプロパティにたくさんの入力項目が出てきま...
&ref(3.white.png,,50%);
プロパティのリストのBackGroundの項目に#FFFFFFと入力すると
背景は白に変わります。
ここは#RRGGBBか#AARRGGBBか他のXMLから参照で変えることがで...
またOrientationの項目がverticalになっていることを確認して...
これは縦にオブジェクトを並べていくことを示しており他に横...
また、Gravityの項目はどっちの方向から並べていくか設定でき...
例えば、下から並べたい場合Buttomと設定するとそのようにす...
次はTextViewをいじって行きます。これは名前の通り文字を表...
LinearLayoutの時と同じようにTextViewを選択してください。
&ref(4.Text.png,,50%);
そしてTextの項目を「HelloWorld」に。ここは表示する文字列...
TextColorを#FF0000に。ここは文字の色を変えます。
文字が小さいのでTextSizeを48pxに。ここは文字の大きさを変...
下にある『その他』の項目はどのオブジェクトのプロパティに...
配置やサイズの設定ができます。
Layout heightとLayout widthはViewの高さを表し「○○px」のよ...
fill_parent:親要素のサイズまでなるべく大きくなるようにす...
match_parent:fill_parentと同じ。 API レベル8以降は fill_...
wrap_content:コンテントを表示できる程度の大きさ
と文字を打つと特殊な設定になります。
Layout margin〜は上下左右の余白を設定できます。
次は、ちょっと複雑なレイアウトにしていきましょう。
オブジェクトを新たに追加する場合は左のリストからAndroidの...
追加できます。そして以下の画像のようにちょっと頑張って作...
&ref(5.makeLayout.png,,50%);
ここで注目する点は
1. frameLayoutの意味
下にLinearLayoutを2つ重ねるため
2. LinearLayout2のGravityの設定をセンターにする
TextViewが中央に来る(こない場合LinearLayout2の高さが問題...
3. LinearLayout1のOrientationをhorizontalに
オブジェクトを横に並べることができる
出来なかった人は最後にプロジェクトを置くのでそれをみて研...
これで実行すればこの画面がAndroidの画面に表示されると思い...
しかし、チェックボックスにチェックしてもeditTextに文字を...
なのでそのイベントを取得できるようにプログラムを書きまし...
UITestActivity.javaにそのコードを書いて行きます。
自動生成されたままなら
package aokai.app.UITest;
import android.app.Activity;
import android.os.Bundle;
public class UITestActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}
となっているはずです。
このコードを軽く解説すると画面を構成するクラスActivityを...
実行したとき実際に画面が作られたとき呼ばれるonCreateメゾ...
オーバーライドし親のonCreateを呼びsetContentViewで実際に...
表示されるViewを登録します。今までの回では自分でViewを継...
をこの関数に渡すことによりCanvasに書いた物を表示していま...
今回、渡しているのは「R.layout.main」です。
これはいったい何か疑問に思う人は多いと思います。
Androidではresに置いたファイルやあとで詳しく書きますがXML...
Gen→パッケージ…→R.java
にintの定数として自動的に登録されます。この定数はリソース...
複雑な手続きをしなくても簡単にアクセスできるようにするた...
思います。(どうなのかホントはしらないよ〜)
なので基本的にこのファイルは自分ではいじらなくてもよいで...
補足としてファイル名などが自動でRに登録される関係でファイ...
話しを戻して実際にプログラムを追加していきましょう。
今回のプログラムの仕様は、
editTextに入力された状態でかつチェックボックスにチェック...
ボタンを押すと真ん中の文字がその文字列に変わる
という風にします。
はじめに、Layoutで作成したUIをプログラムで触れるようにし...
public class UITestActivity extends Activity {
private CheckBox check;
private EditText edit;
private Button button;
private TextView text;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
check = (CheckBox)findViewById(R.id.checkBox1);
edit= (EditText)findViewById(R.id.editText1);
button= (Button)findViewById(R.id.button1);
text= (TextView)findViewById(R.id.text);
}
}
クラスにフィールドにそれぞれのUIのクラスの変数を定義し
findViewByIdメゾットを使いそれぞれのUIのオブジェクトを取...
このメゾットに渡しているのはLayoutの時と同じように自動に...
しかし、これはファイルのようにファイルを追加したら自動で...
自分で決まった場所に決まった形で書かなければRに登録される...
Check edit buttonはUIのデフォルトで勝手に書かれるので...
TextはそうでないのでIDを登録してみましょう。
Main.xmlにもどってtextviewをクリックしてプロパティのidに
@+id/text
と入力します。こうすることによりRにこのUIのIDが登録できま...
もし暇なら、他のUIのidも見てみましょう。そうするとそれら...
にも入力したような書式で書かれているはずです。
名前が気に食わなかった場合変えてください。
以上のプログラムでUIのオブジェクトが取得できました。
次にUIのイベントを取得し設定し動作を書いて行きます。
この仕様は「ボタンを押す」という動作によって動作します。
この動作を設定には複数方法があります。
プログラム的に書くと
button.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO 自動生成されたメソッド・スタブ
}
});
とButtonクラスがもつボタンの動作のイベントを持つインター...
これはプログラム的でわかりやすいですが、一箇所にプログラ...
見にくいコードになります。
今回は別の方法で書いて行きます。
Main.xmlファイルのボタンUIのプロパティのOn clickという項...
ここに書いた名前がボタンを押した時に実行されるメゾット名...
項目です。ここでは「click」とします
&ref(7.click.png,,50);
そしてソースコードに戻り新たにメゾット
public void メゾット名(View v)
の書式で追加します。するとボタンが押されるとこの関数が呼...
public void click(View v) {
//キーボードを消す
InputMethodManager inputMethodManager =
(InputMethodManager)getSystemService(Context.IN...
inputMethodManager.hideSoftInputFromWindow(v.getWind...
if(check.isChecked()){
text.setText(edit.getText());
}
}
始めにちょっと難しいコードが書いてありますがボタンを押し...
表示されたままで邪魔なので消すおまじないです。
メインのところは
check.isChecked()
でチェックされているか見て
edit.getText()
で入力されている文字を取得し
text.setText();
で文字をセットします。
とてもシンプルですね。
こんな感じに簡単に標準UIを使うことがAndroidではできます。
他にも色々なメゾットやUIがあるので自分で調べて使ってみて...
次回の予定は未定ですがちょっと複雑なUIのListViewの話をや...
|やってみたお|1|
|無理ゲ|2|
|読んだだけ|2|
|次回も期待|1|
|(´・ω:;.:... |1|
ページ名: