カスタムビューの実装:Androidでの基本的な手順と実践

Android開発でカスタムビューを実装する際の基本的な手順を解説します。ビューの描画メカニズムを理解し、適切な属性を定義することで、柔軟なUIコンポーネントを構築できます。以下の手順を踏むことで、自作ビューの実装が可能になります。

  1. ビューの動作原理を把握する2. Viewを継承したサブクラスを作成する3. ビューに独自属性を追加する4. ビューを描画する5. ユーザー操作を処理する6. カスタムコールバックを定義する

ビューの基本動作Androidのビュー構造はコンポジションパターンに基づいており、Viewが基本クラス、ViewGroupがコンテナクラスとして機能します。描画プロセスは以下の3つのメソッドで構成されます:• measure(): ビューのサイズ計算• layout(): ビューの位置設定• draw(): スクリーンへの描画これらのメソッドは内部でonMeasure()、onLayout()、onDraw()を呼び出します。

ビューのコンストラクタ実装カスタムビューの実装には3つの方法があります:1. 既存ビューを継承して拡張2. レイアウトファイルをインフレートしてコンポジットビューを構築3. Viewを直接継承してGDIで描画(最も汎用的)

独自属性の定義方法1. XML属性を直接処理する例``` public class CustomImageView extends View { private String textContent; private int imageResourceId;

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

private void init(AttributeSet attrs) {
    int textRes = attrs.getAttributeResourceValue(null, "text_content", 0);
    int imageRes = attrs.getAttributeResourceValue(null, "image_source", 0);
    textContent = context.getString(textRes);
    imageResourceId = imageRes;
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    Bitmap image = BitmapFactory.decodeResource(getResources(), imageResourceId);
    canvas.drawBitmap(image, 50, 50, null);
    canvas.drawText(textContent, 100, 100, new Paint());
}

}


レイアウトでの利用例:```
<com.example.CustomImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    text_content="@string/sample_text"
    image_source="@drawable/icon" />
  1. attrs.xmlで属性を定義する方法```

ビュー実装例:``` public class DynamicTitleView extends View { private String titleText; private int titleColor; private float titleSize; private Rect textBounds = new Rect();

public DynamicTitleView(Context context, AttributeSet attrs) {
    super(context, attrs);
    TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.DynamicTitle);
    titleText = a.getString(R.styleable.DynamicTitle_title_text);
    titleColor = a.getColor(R.styleable.DynamicTitle_title_color, Color.BLACK);
    titleSize = a.getDimension(R.styleable.DynamicTitle_title_size, 16);
    a.recycle();
    
    initPaint();
}

private void initPaint() {
    Paint paint = new Paint();
    paint.setTextSize(titleSize);
    paint.setColor(titleColor);
    paint.getTextBounds(titleText, 0, titleText.length(), textBounds);
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int width = MeasureSpec.getSize(widthMeasureSpec);
    int height = (int) (textBounds.height() * 1.2);
    setMeasuredDimension(width, height);
}

@Override
protected void onDraw(Canvas canvas) {
    canvas.drawText(titleText, 0, textBounds.height(), new Paint());
}

}


レイアウトでの利用例:```
<com.example.DynamicTitleView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:title_text="Dynamic Content"
    app:title_color="#FF0000"
    app:title_size="20sp" />

タグ: android-view custom-view ondraw

7月4日 17:52 投稿