初心者向けandroidアプリの作り方Layout編

作り方1回目はLinearLayoutの基本を紹介します。

xmlで画面を用意する場合はLinearLayoutだけ
覚えておけば問題ないと言っても過言では無いと思い込んでいます。
(実際に使っている物もあまり見たこと無いです。)

最初は抵抗があると思いますが、xmlを手書きするのをクセにした方が楽になります。


本編スタート


画像を見ての通り、ボタンが横に並んでいます。

で、xmlの内容は以下


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal" >

    <Button android:text="TEST1"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content" />
	
    <Button android:text="TEST2"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content" />
		
    <Button android:text="TEST3"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content" />
		
</LinearLayout>


細かい解説です。
LinearLayoutタグで囲みます。

LinearLayoutにandroid:layout_widthとandroid:layout_heightと
android:orientationが指定されています。

widthとheightには"fill_parent"が指定されています。
これは親要素の全体を使う指定です。
今回はLinearLayoutが一番親なので画面全体となります。

親要素が画面の半分の時なら画面半分を使う事になります。

次にorientationは縦に並べるか横に並べるかの違いです。


以下が縦に並べた場合です。



で、xmlはこちら
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <Button android:text="TEST1"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content" />
	
	<Button android:text="TEST2"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content" />
		
    <Button android:text="TEST3"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content" />
		
</LinearLayout>


orientationの指定が「horizontal」から「vertical」変わりました。

最小限覚えるべきはこのくらいです。


最後に応用編として組み合わせたパターンです。



xmlは以下
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

	<LinearLayout 
		android:layout_width="fill_parent"
		android:layout_height="wrap_content">
       <Button android:text="TEST1"
	    	android:layout_width="wrap_content"
	    	android:layout_height="wrap_content" />
	
    	<Button android:text="TEST2"
	    	android:layout_width="wrap_content"
	    	android:layout_height="wrap_content" />
		
        <Button android:text="TEST3"
	    	android:layout_width="wrap_content"
	    	android:layout_height="wrap_content" />
	</LinearLayout>

	<LinearLayout 
		android:layout_width="fill_parent"
		android:layout_height="wrap_content">
		
		<Button android:text="TEST4"
	    	android:layout_width="wrap_content"
	    	android:layout_height="wrap_content" />

    	<Button android:text="TEST5"
	    	android:layout_width="wrap_content"
	    	android:layout_height="wrap_content" />

        <Button android:text="TEST6"
	    	android:layout_width="wrap_content"
	    	android:layout_height="wrap_content" />
	</LinearLayout>
	
</LinearLayout>


縦に並べる指定のLinearLayoutに横に並べるLinearLayoutを入れて、
横に並べるLinearLayoutにボタンが3個ずつ入ってます。


こんな事を組み合わせる事で、画面が完成していきます。






フラッシュ暗算のアプリ




https://play.google.com/store/apps/details?id=atm.game.anzan
フラッシュ暗算のアプリを作りました。

表示時間や桁数、足し算だけでなく掛け算など、
自由な設定が可能です。


こちらも手軽に出来る脳トレ(計算力トレーニング)にオススメです。

ルール
画面に表示される数字を計算していき、
正解を当てるゲームです。
正解する度に表示される数字の数が増えていきます。