XML でカスタムView

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

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

attrs.xml

view plainprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <resources>  
3.  <!-- name : custom view class name -->  
4.   <declare-styleable name="CustomView">  
5.     <attr name="text" format="string" />  
6.     <attr name="color" format="color" />  
7.     <attr name="size" format="dimension" />  
8.   </declare-styleable>  
9. </resources>  

<?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リソース

view plainprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout  
3.   xmlns:android="http://schemas.android.com/apk/res/android"  
4.   xmlns:app="http://schemas.android.com/apk/res/androidtest.app"  
5.   android:id="@+id/LinearLayout"  
6.   android:layout_height="fill_parent"  
7.   android:layout_width="fill_parent">   
8.   <androidtest.app.CustomView  
9.     android:id="@+id/CustomView"   
10.     android:layout_height="fill_parent"  
11.     android:layout_width="fill_parent"   
12.     app:text="CustomViewTest"   
13.     app:color="#FFFF0000"  
14.     app:size="32sp" />  
15. </LinearLayout>  

<?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)

view plainprint?

1. import android.content.Context;  
2. import android.content.res.TypedArray;  
3. import android.graphics.Canvas;  
4. import android.graphics.Paint;  
5. import android.util.AttributeSet;  
6. import android.view.View;  
7. import androidtest.app.R;  
8.   
9. public class CustomView extends View {  
10.   String str;  
11.   int color;  
12.   int size;  
13.   
14.   public CustomView(Context context, AttributeSet attrs) {  
15.     super(context, attrs);  
16.   
17.     // styleable から TypedArray の取得  
18.     TypedArray tArray =   
19.       context.obtainStyledAttributes(  
20.         attrs,  
21.         R.styleable.CustomView  
22.       );  
23.     
24.     // TypedArray から String を取得  
25.     str = tArray.getString(R.styleable.CustomView_text);  
26.     // TypedArray から Color を取得  
27.     color = tArray.getColor(R.styleable.CustomView_color, 0xFFFFFFFF);  
28.     // TypedArray から Dimension を取得  
29.     size = tArray.getDimensionPixelSize(R.styleable.CustomView_size, 12);  
30.   }  
31.   
32.   @Override  
33.   protected void onDraw(Canvas canvas) {  
34.     super.onDraw(canvas);  
35.     Paint paint = new Paint();  
36.     paint.setColor(color);  
37.     paint.setTextSize(size);  
38.     canvas.drawText(str, 32, 64, paint);  
39.   }  
40. }  

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)

view plainprint?

1. import android.app.Activity;  
2. import android.os.Bundle;  
3. import androidtest.app.R;  
4.   
5. public class CustomViewTest extends Activity {  
6.   @Override  
7.   public void onCreate(Bundle savedInstanceState) {  
8.     super.onCreate(savedInstanceState);  
9.     setContentView(R.layout.customviewtest);  
10.   }  
11. }  

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