XML でカスタムView

既存の View を拡張して新たに自分だけの View を作成したいときは

まず、res/values に attrs.xml を作成します

attrs.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
 <!-- name : custom view class name -->
  <declare-styleable name="CustomView">
    <attr name="text" format="string" />
    <attr name="color" format="color" />
    <attr name="size" format="dimension" />
  </declare-styleable>
</resources>

declare-styleable の name属性は作成するカスタムビューのクラス名を指定する

次に、レイアウトを作成します

xmlns:app="http://schemas.android.com/apk/res/パッケージの名前"
というのを追加します
app は勝手につけた名前

attrs.xml で作成した属性を指定します

XMLリソース
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res/androidtest.app"
  android:id="@+id/LinearLayout"
  android:layout_height="fill_parent"
  android:layout_width="fill_parent"> 
  <androidtest.app.CustomView
    android:id="@+id/CustomView" 
    android:layout_height="fill_parent"
    android:layout_width="fill_parent" 
    app:text="CustomViewTest" 
    app:color="#FFFF0000"
    app:size="32sp" />
</LinearLayout>

そしたら、カスタムビューの作成

サンプルプログラム(CustomView)
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
import androidtest.app.R;

public class CustomView extends View {
  String str;
  int color;
  int size;

  public CustomView(Context context, AttributeSet attrs) {
    super(context, attrs);

    // styleable から TypedArray の取得
    TypedArray tArray = 
      context.obtainStyledAttributes(
        attrs,
        R.styleable.CustomView
      );
  
    // TypedArray から String を取得
    str = tArray.getString(R.styleable.CustomView_text);
    // TypedArray から Color を取得
    color = tArray.getColor(R.styleable.CustomView_color, 0xFFFFFFFF);
    // TypedArray から Dimension を取得
    size = tArray.getDimensionPixelSize(R.styleable.CustomView_size, 12);
  }

  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    Paint paint = new Paint();
    paint.setColor(color);
    paint.setTextSize(size);
    canvas.drawText(str, 32, 64, paint);
  }
}

Activity では setContentView で作成した layout を指定するだけ

サンプルプログラム(Activity)
import android.app.Activity;
import android.os.Bundle;
import androidtest.app.R;

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

プログラムを実行すると...


こんな感じ!


参考サイト
http://developer.android.com/intl/ja/guide/topics/resources/available-resources.html#customresources

1 件のコメント: