2011年4月9日土曜日

Android ColorFilter を使う

Android フレームワークの Menu アイコンなど、用意されている画像の色だけを変えたい場合、ColorFilter が便利です。

ColorFilter を継承したクラスとして、ColorMatrixColorFilter, LightingColorFilter, PorterDuffColorFilter が用意されています。

ここでは、PorterDuffColorFilter を使ってみます。



■ ImageView で ColorFilter を使う

ImageView には、ColorFilter を設定するためのメソッドが用意されています。

 ・public final void setColorFilter (int color) (Since: API Level 8)
   引数で指定された color で SRC_ATOP blending mode の
   PorterDuffColorFilter をかけます。

 ・public void setColorFilter (ColorFilter cf)
   引数で指定された ColorFilter をかけます。

 ・public final void setColorFilter (int color, PorterDuff.Mode mode)
   引数で指定された color と blending mode での
   PorterDuffColorFilter をかけます。

また、XML の属性として android:tint が用意されています。

 ・android:tint="#rgb", "#argb", "#rrggbb", or "#aarrggbb"
   指定された color で SRC_ATOP blending mode の
   PorterDuffColorFilter をかけます。


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:app="http://schemas.android.com/apk/res/yanzm.example.customview"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView
android:id="@+id/imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@android:drawable/ic_menu_camera"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@android:drawable/ic_menu_camera"
android:tint="#ccff0000"
/>
</LinearLayout>



public class MainActivity extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

ImageView imageView = (ImageView)findViewById(R.id.imageview);
imageView.setColorFilter(0xcc0000ff, PorterDuff.Mode.SRC_IN);
}
}







■ Custom View で ColorFilter を使う

 上記で指摘したように、ImageView の android:tint では PorterDuff のモードが PorterDuff.Mode.SRC_ATOP に固定されてしまいます。そこで、PorterDuff のモードも attribute で指定できるようにした Custom View を作りました。

   ColorFilteredImageView.java


 yanzm/yanzm-s-Custom-View-Project - GitHub - の ColorFilteredImageViewSample がサンプルアプリです。

 こんな感じで使います。詳しくはサンプルアプリを見てください。


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:app="http://schemas.android.com/apk/res/yanzm.example.customview"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
>
<yanzm.products.customview.ColorFilteredImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@android:drawable/ic_menu_share"
app:tint="#ccff00ff"
app:porterduff_mode="MULTIPLY"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ColorFilteredImageView\n #ccff00ff MULTIPLY"
/>
</LinearLayout>
</LinearLayout>

 

 YanzmCustomView を Android Library Project にして使うこともできます。サンプルアプリでは、YanzmCustomView を Library Project として参照しています。

 Library Projectとして使う場合、

xmlns:app="http://schemas.android.com/apk/res/yanzm.example.customview"

 部分の最後のパッケージ名には、Library Project を使う方のパッケージ名を入れてください。
 Library Project のパッケージ名にするとエラーになります。








 

1 件のコメント: