メモ:Android カスタムビューを作ってみる

Android アプリ作成においては、肝は View の作成にあるような気がします。
ということで、 Android における View 作成について軽くまとめておきます。

描画専用ビュー


まずは、単純な描画専用ビューから。
まずやっておく必要があることは、次の3点。

  • View クラスを派生。
  • コンストラクタ(引数 Context, AttrigbuteSet)の作成。
  • onDraw メソッドのオーバーライド。


View の派生クラスを作成する、これは基本中の基本。

ではこのクラスを作成すると、コンストラクタがない、と真っ先にエラーが出ます。 View クラスはデフォルトコンストラクタが用意されていないので、何らか明示的に作ってやる必要があります。ここでまず作っておくべきなのは、上記の引数が2つのやつ。これは、 android がレイアウト用のxmlを読み込んで View を構築する場合に利用されるので、必須となります。

そして、 onDraw メソッドのオーバーライド。ここに、実際の描画処理を記述します。

描画処理は基本的に、引数で渡された Canvas を利用。Canvas クラスには、直線や矩形描画、描画色の指定など、描画に必要な処理が多数用意されています。ので、これを介する事で必要な描画を実装します。おもに set で始まるメソッドを利用して描画に必要な情報をあらかじめセットし、draw で始まるメソッドを利用して描画を行う、という流れになります。

描画に際し注意しておくべきは、その描画範囲。
画面のディスプレイを外れた場所に描画しても意味ないですし、そして、描画範囲は android アプリを実行しているデバイスや、その表示上のレイアウトに依存します。従って、きちんとその範囲を把握しておく必要があります。

といっても、さほど複雑な話でなく、描画範囲の大きさは view の getMeasuredWidth(), getMeasuredHeight() で取得できます。従って、(0,0)-(getMeasuredWidth()-1,getMeasuredHeight()-1)の範囲で描画を行えばよいと思います。たとえそのビューがレイアウト上、ディスプレイの左上点になくとも、それは android 側でなんとかしてくれるみたいです。

以下にサンプルコードを挙げておきます。
(import は省略)

public class S01SimpleView extends View {

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

@Override
protected void onDraw(Canvas canvas) {
// 描画領域を取得(layoutされた相対領域を利用)
Rect r = new Rect(0,0,getMeasuredWidth()-1,getMeasuredHeight()-1);

// 描画に関する情報(スタイル・カラーなど)を設定
Paint p = new Paint();
p.setStyle(Paint.Style.STROKE);
p.setStrokeWidth(3);
p.setColor(Color.GREEN);

// 描画実行
canvas.drawRect(r, p);

// 以下同様にいろいろ描画
p = new Paint();
p.setColor(Color.CYAN);
RectF rf = new RectF(10,10,50,50);
canvas.drawRoundRect(rf, 5, 5, p);
}
}

参考: http://developer.android.com/intl/ja/reference/android/view/View.html

ビューの配置


ビューの配置をソースコードでガリガリ書いても良いですが、android ではレイアウトファイルという形でこれを外だし出来るので、それを利用したほうがよさそうです。

ただ、レイアウトは多種多様あり、正直よく分かってません。まずは結構使い出がありそうな、 RelativeLayout についてまとめておきます。

これは、画面上の各ビューをどのように隣り合わせて配置するか、の観点でレイアウトを決めるようです。座標を直接指定しないので、画面解像度の異なるデバイスでも柔軟に対処できそうな感じがします。

参考: http://developer.android.com/intl/ja/resources/tutorials/views/hello-relativelayout.html

view 間の並びをあらわすのに、レイアウトファイル上では主に次の xml 属性が使われます。












属性意味
android:layout_aliignParentTop
android:layout_alignParentBottom
android:layout_alignParentLeft
android:layout_alignParentRight
親View(RelativeLayout)の上下左右の縁に接するように配置する場合、 true
android:layout_alignTop
android:layout_alignBottom
android:layout_alignLeft
android:layout_alignRight
android:layout_alignBaseline
指定した id の View とそれぞれの同じ縁を並べる。
例えば alignTop の場合、双方の上縁を同じ高さに配置される
android:layout_below
android:layout_above
android:layout_toRightOf
android:layout_toLeftOf
指定した id の View に接するように隣り合わせて並べる。
例えば below の場合、指定した対象の下に接するよう配置される

参考: http://developer.android.com/intl/ja/reference/android/widget/RelativeLayout.LayoutParams.html

サンプルを挙げておきます。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:id="@+id/header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
android:layout_alignParentTop="true"/>
<TextView
android:id="@+id/footer"
android:text="@string/footer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
/>
<com.examples.views.S01SimpleView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="@+id/header"
android:layout_above="@+id/footer"
/>
</RelativeLayout>

この場合、画面の一番上と一番下に TextViiew を配置し、その間に挟まれる形で先ほど作成したサンプルのビューが配置されます。全体の画面サイズは個々のデバイスに依存し、TextView はデバイスの文字のサイズに依存するかと思いますが、その内側をいっぱいに埋めるようにサンプルビューが配置されると思います。

あとはこれを Activity から読み込ませれば ok です。

public class SampleViews extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}

画像

ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 0

この記事へのコメント

この記事へのトラックバック