ホームへ戻る

s1.1 環境の準備とレイアウトの設定


 本章では気分転換にお絵かきアプリを作ってみましょう。

本章は4章まで終えている事を前提としていますのでご了承下さい。

さて、新しいプロジェクトを作ります。
名前は「Painter」にしました。
節ごとにプロジェクトは配布していますが、自分で作る方は1章のプロジェクトの作り方を参考にして下さい。

プロジェクトが出来上がったら、「PaintView」という自作クラスを追加します。



↓PaintView.javaの内容

package net.dixq.painter;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.util.AttributeSet;
import android.view.View;

public class PaintView extends View {

        public PaintView(Context context, AttributeSet attrs) {
                super(context, attrs);
        }

        @Override
        protected void onMeasure(int w, int h ){
                super.onMeasure(w,h);
        }
        
        @Override
        protected void onDraw(Canvas c){
                c.drawColor(Color.WHITE);
        }
}


ここで作った PaintView は、layout内のxmlファイルに記載出来ます。
xmlファイルに自作Viewを指定出来るようにするには

1. コンストラクタ( Context, AttributeSet ); を実装すること
2. void onMeasure(int, int); を Override すること

の2点が必要です。

onDrawは特に必要ないですが、真っ黒だとViewがあるのか無いのか分かりにくいので、白で塗りつぶす為に実装しました。

次にレイアウトをしてみましょう。

まず、色を定義するファイルを作ります。



res/values/colors.xml を新規追加して下さい。
(vaules を右クリック>新規>ファイル より)

↓colors.xmlの内容

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="col_red">#e55</color>
    <color name="col_green">#5e5</color>
    <color name="col_blue">#55e</color>
</resources>


色の定義はstring.xmlには出来ないので注意が必要です。
特にlayoutの.xmlのbackgroundの属性にstringで定義した値を設定するとエラー落ちしてしまいます。
ここで定義した値はlayoutのxmlから@color/で参照出来るようになります。

では次にlayoutです。

main.xml の Graphical Layout タブを選択し、
「レイアウト」カテゴリから「LinearLayout(Horizontal)」をエディタエリア内にドロップします。
次に
「Images & Media」の「ImageButton」をエディタエリア内に4つ横に並ぶようにドロップします。
リソースはシステムから鉛筆のマーク「ic_menu_edit」を左に3つ、
消しゴムに見えないけど、消しゴムっぽいマーク「alert_light_frame」を1つ選択しました。



Layout weight は均等にしたいので、全て 1 にします。
高さは50dpにしました。
画像の背景には、先ほど定義した色を指定します。
ソースをご覧下さい。

↓main.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:id="@+id/linearLayout1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >

        <ImageButton
            android:id="@+id/btnRed"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:background="@color/col_red";
            android:src="@android:drawable/ic_menu_edit" />
        
        <ImageButton
            android:id="@+id/btnGreen"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:background="@color/col_green"
            android:src="@android:drawable/ic_menu_edit" />

        <ImageButton
            android:id="@+id/btnBlue"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:background="@color/col_blue"
            android:src="@android:drawable/ic_menu_edit" />

        <ImageButton
            android:id="@+id/btnEraser"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:src="@android:drawable/alert_light_frame" />

    </LinearLayout>
    
    <net.dixq.painter.PaintView
        android:id="@+id/paintView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

</LinearLayout>


画像の背景に上で定義した色を使用していることを確認して下さい。
また、横レイアウトの外に、自分で作ったViewを置いています。
縦横はいっぱいにしたいので、fill_parentです。
このように書くことで、レイアウトに自作Viewが配置出来ます。

今回Activityは変更しません。
この状態でコンパイル出来るので実行してみましょう。

実行結果


だいたい行いたい事のイメージが分かってもらえたのではないかと思います。
3色のペンが選べ、消しゴムで消せる
ようになっています。

本節のプロジェクトはこちら

→分からないことがあれば掲示板で質問して下さい


Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons 3.0 Attribution License.

- Remical Soft -