カスタムビューの作り方

既に用意されているビューではなく、ビューを組み合わせるなどしてカスタマイズしたビューを作るにはViewクラスを拡張します。

例えば左にボタン、右にエディットテキストを持つようなビューを作りたければ次の手順で作れます。

  1. カスタムビュークラスの作成
  2. レイアウトに設置

カスタムビュークラスの作成

初めにビューまたはレイアウトクラスなどの親になるクラスを拡張してカスタムビュークラスを作成します。

例えばLinearLayoutを拡張して次のようなカスタムクラスを作ります。

package com.MyApp.myapp;

import android.content.Context;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.LinearLayout;

public class MyView extends LinearLayout 
{
    
    public MyView(Context context, AttributeSet attrs) 
    {
        super(context, attrs);
        
        Button myButton = new Button(context);
        myButton.setText("Submit");
        myButton.setTextSize(TypedValue.COMPLEX_UNIT_SP, 18);
        
        EditText myEdit = new EditText(context);
        myEdit.setLayoutParams(new LinearLayout.LayoutParams(
            LayoutParams.FILL_PARENT,
            LayoutParams.MATCH_PARENT));
        myEdit.setTextSize(TypedValue.COMPLEX_UNIT_SP, 18);
        
        addView(myButton);
        addView(myEdit);
    }
    
}

LinearLayoutのなかに1つのボタンと1つのテキストエディットを作り、addViewメソッドでレイアウト中に追加することができます。

またカスタムビューはレイアウト画面で子のビューのテキストサイズやレイアウトの変更ができないのであらかじめソースの中で定義しておく必要があります。

レイアウトにビューを設置

ビュークラスを拡張してカスタムしたビューはレイアウト画面で設置することが可能です。

例えば先ほど作成したMyViewをレイアウト中に設置したければ次のようなレイアウトを書きます。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" 
    tools:context=".MainActivity" >
    
    <com.MyApp.myapp.MyView
        android:id="@+id/tabBar1" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" >
    </com.MyApp.myapp.MyView>

</LinearLayout>

カスタムしたビューはあらかじめ用意されているビューとは違い、com.MyApp.myapp.MyViewのようにパッケージ名を含めた名前を書かないと正しく認識されません。

あとはコードからビューを取得したり普通のビューと同じように扱うことができます。

ちなみにこの例で作ったカスタムビューはアプリ上では次のように表示されます。

カスタムビューの例
関連項目
プライバシーポリシー