android初心者が初めてcustom viewを使ってみたので、その流れを残してみる。
custom viewとは？
ViewやViewGroupといった規定レイアウトクラスに基づいたコンポーネントに、独自に機能や外観を追加したり、欲しいコンポーネントがなかったらオリジナルのコンポーネントを作ったりできる。
これらを実装したものがcustom view。
用途は主に
- 独自のコンポーネントの実装
- 既存のコンポーネントをグループしたものの操作
- 既存のコンポーネントの機能拡張
とされる。今回は２番目の「既存のコンポーネントのグループ化」について扱っていく。
custom viewの実装
今回の題材を実装するのに使用するファイルは以下の通り。
- グループ化したい部分が実装されたレイアウトxml
- custom viewのjavaファイル
- custom viewを配置したいレイアウトxml
ここではcustom viewとして扱いたいレイアウトの部分を別のxmlファイルに取り出して、ただ表示するためだけの実装を取り上げる。
まずグループ化した部分のxmlファイルは特に意識することなく実装して問題ないです。ここでは仮にhogoHoge.xmlとする。
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="320dp"
android:layout_height="160dp" >
<LinearLayout
android:id="@+id/hogeLayout"
style="@style/InputFormLayout"
android:orientation="horizontal"
android:layout_width="320dp"
android:layout_height="40dp">
<TextView
android:id="@+id/hogeTitle"
style="@style/FormTitle"
android:layout_weight="2"
android:text="hage"/>
<TextView
android:id="@+id/hogeText"
style="@style/InputFormText"
android:layout_marginRight="20dp"
android:gravity="right|center_vertical"
android:layout_weight="4"
android:text="hoge" />
</LinearLayout>
</LinearLayout>
次にcustom viewのjavaファイル部分の実装は次のように行う。ファイル名はhogeHoge.java
package ****.*****;
import
…
public class hogeHoge extends LinearLayout{
public InputForm(Context context, AttributeSet attr){
super(context, attr);
init(context);
}
public InputForm(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context);
}
@TargetApi(21)
public InputForm(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
init(context);
}
public InputForm(Context context) {
super(context);
init(context);
}
private void init(Context context) {
View.inflate(context, R.layout.input_form, this);
}
extendsしたclassに基づくコンストラクタと指定したレイアウトxmlを描画するためのinitメソッドを与えることでグループ化したコンポーネントを表示できるようになる。
custom viewを表示させたいxmlファイルにはこのように書く。
<FrameLayout
android:orientation="vertical"
android:layout_width="320dp"
android:layout_height="160dp" >
< ****.*****.hogeHoge
android:id="@+id/hoge0"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
</****.*****.hogeHoge>
・・・
xmlファイルでタグにcustom viewの"package.file名"を渡すことで呼び出すことができる。
custom viewのメソッドの使い方
custom viewにおいて、状況によって背景や文字などを変更したり、view内にある値を取得したり逆に反映させたりなどの操作の必要があり、activity(もしくはfragment)で行いたい場合、このように実装する。
まず、custom viewの方で次のようなmethodを作成したとする。
・・・
public void setActive() {
findViewById(R.id.hogeLayout).setBackgroundColor(Color.rgb(45, 141, 229));
}
・・・
簡単に背景の色を適当に変えるメソッドです。
これをactivityで使いたいときは
・・・
hogeHoge hoge = (hogeHoge)findViewById(R.id.hogeLayout);
hoge.setActive();
・・・
のように使えば良い。
すごく当たり前なことかもしれないが、初心者向けの内容ということで書いておくことにした。
custom viewにもライフスタイルがあるのでまだまだ語るべき内容は多いが、ここまでにしておく。
ほんのさわりの部分だけの説明だったが、これをみてなんとなく実装できた！って人が出てきてくれれば幸いです。