Androidのボタンのようなimageviewクリック効果を与えるにはどうすればよいですか？
Androidアプリには、指定されたonClickイベントでボタンのように使用しているimageviewがありますが、ご想像のとおり、クリックしてもimageviewにクリック可能な効果はありません。どうすればそれを達成できますか？
クリックされた状態/クリックされていない状態に対して異なる画像を設計し、onTouchListenerで次のように設定できます。
final ImageView v = (ImageView) findViewById(R.id.button0);
v.setOnTouchListener(new OnTouchListener() {
@Override
public boolean onTouch(View arg0, MotionEvent arg1) {
switch (arg1.getAction()) {
case MotionEvent.ACTION_DOWN: {
v.setImageBitmap(res.getDrawable(R.drawable.img_down));
break;
}
case MotionEvent.ACTION_CANCEL:{
v.setImageBitmap(res.getDrawable(R.drawable.img_up));
break;
}
}
return true;
}
});
より良い選択は、次のようにセレクターを定義することです
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item Android:state_selected="true"
Android:drawable="@drawable/img_down" />
<item Android:state_selected="false"
Android:drawable="@drawable/img_up" />
</selector>
イベント内の画像を選択します。
v.setOnTouchListener(new OnTouchListener() {
@Override
public boolean onTouch(View arg0, MotionEvent arg1) {
v.setSelected(arg1.getAction()==MotionEvent.ACTION_DOWN);
return true;
}
});
次のようなものを使用して、単一の画像でこれを行うことができます。
//get the image view
ImageView imageView = (ImageView)findViewById(R.id.ImageView);
//set the ontouch listener
imageView.setOnTouchListener(new OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN: {
ImageView view = (ImageView) v;
//overlay is black with transparency of 0x77 (119)
view.getDrawable().setColorFilter(0x77000000,PorterDuff.Mode.SRC_ATOP);
view.invalidate();
break;
}
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_CANCEL: {
ImageView view = (ImageView) v;
//clear the overlay
view.getDrawable().clearColorFilter();
view.invalidate();
break;
}
}
return false;
}
});
再利用を容易にするために、おそらくこれをImageViewのサブクラス（またはImageViewのサブクラスでもあるImageButton）にしますが、これにより、「選択した」外観をimageviewに適用できるようになります。
ColorFilterメソッドを使用して、ちょうど1つの画像ファイルで行うことができます。ただし、ColorFilterはButtonではなくImageViewで動作することを想定しているため、ボタンをImageViewに変換する必要があります。とにかく画像をボタンとして使用している場合、これは問題ではありませんが、テキストがある場合はさらに面倒です...とにかく、テキストの問題を回避する方法を見つけたとして、使用するコードは次のとおりです。
ImageView button = (ImageView) findViewById(R.id.button);
button.setColorFilter(0xFFFF0000, PorterDuff.Mode.MULTIPLY);
これはボタンに赤いオーバーレイを適用します（色コードは完全に不透明な赤の16進コードです-最初の2桁は透明で、その後はRR GG BBです）。
EDIT：以下の元の答えは機能し、セットアップも簡単ですが、[ this post をAndroidより効率的な実装が必要な場合は、Googleのデベロッパーアドボケート。また、 Android:foreground 属性は すべてのビューに来る であり、ImageViewを含め、デフォルトでAndroid Mにあることに注意してください。
ImageViewにセレクターを使用する場合の問題は、それをビューの背景としてのみ設定できることです。画像が不透明である限り、その背後にセレクターの効果が表示されません。
トリックは、ImageViewを属性 Android:foreground でFrameLayoutにラップすることです。これにより、コンテンツのoverlayを定義できます。 Android:foreground をセレクターに設定し（例：APIレベル11+の場合は?android:attr/selectableItemBackground）、OnClickListenerをImageViewではなくFrameLayoutにアタッチすると、画像はセレクターのドロアブルでオーバーレイされます-私たちが望むクリック効果！
見よ：
<FrameLayout
Android:id="@+id/imageButton"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:foreground="?android:attr/selectableItemBackground" >
<ImageView
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:src="@drawable/yourImageFile" />
</FrameLayout>
（これは親レイアウト内に配置する必要があることに注意してください。）
final View imageButton = findViewById(R.id.imageButton);
imageButton.setOnClickListener(new OnClickListener(){
@Override
public void onClick(View view) {
// do whatever we wish!
}
});
XMLファイルでstyle = "？android：borderlessButtonStyle"を使用します。 Androidのデフォルトのクリック効果が表示されます。
<ImageView
Android:id="@+id/imageView1"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:src="@drawable/ic_launcher"
style="?android:borderlessButtonStyle"
/>
ImageButton を使用するだけです。
これを解決する私の簡単な方法は次のとおりです。
ImageView iv = (ImageView) findViewById(R.id.imageView);
iv.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
//Agrega porcentajes de cada fraccion de grafica pastel
Animation animFadein = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.fade_in);
iv.startAnimation(animFadein);
});
ファイルres/anim/fade_in.xml内：
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:fillAfter="true" >
<alpha
Android:duration="100"
Android:fromAlpha="0.0"
Android:interpolator="@Android:anim/accelerate_interpolator"
Android:toAlpha="1.0" />
</set>
セレクターの描画可能な選択肢を定義するため
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item Android:state_selected="true"
Android:drawable="@drawable/img_down" />
<item Android:state_selected="false"
Android:drawable="@drawable/img_up" />
</selector>
Android：state_selectedの代わりにAndroid：state_pressedを使用する必要があります
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item Android:state_pressed ="true"
Android:drawable="@drawable/img_down" />
<item Android:state_pressed ="false"
Android:drawable="@drawable/img_up" />
</selector>
選択可能な背景をImageViewに設定し、パディングを追加します。次に、OnClickListenerを添付します。
<ImageView
Android:id="@+id/your_image_view"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:src="@drawable/your_image"
Android:padding="10dp"
Android:background="?android:attr/selectableItemBackground"/>
Android:background="@Android:drawable/list_selector_background"を試して、デフォルトの[アラーム時計]（現在のデスク時計）の[アラームの追加]と同じ効果を得ることができます。
Mr Zorn's answer に基づいて、抽象ユーティリティクラスで静的メソッドを使用します。
public abstract class Utility {
...
public static View.OnTouchListener imgPress(){
return imgPress(0x77eeddff); //DEFAULT color
}
public static View.OnTouchListener imgPress(final int color){
return new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
switch(event.getAction()) {
case MotionEvent.ACTION_DOWN: {
ImageView view = (ImageView) v;
view.getDrawable().setColorFilter(color, PorterDuff.Mode.SRC_ATOP);
view.invalidate();
break;
}
case MotionEvent.ACTION_UP:
v.performClick();
case MotionEvent.ACTION_CANCEL: {
ImageView view = (ImageView) v;
//Clear the overlay
view.getDrawable().clearColorFilter();
view.invalidate();
break;
}
}
return true;
}
};
}
...
}
次に、onTouchListenerで使用します。
ImageView img=(ImageView) view.findViewById(R.id.image);
img.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) { /* Your click action */ }
});
img_zc.setOnTouchListener(Utility.imgPress()); //Or Utility.imgPress(int_color_with_alpha)
多くの画像があり、XMLドローアブルがなく、画像が1つだけのシンプルなonTouchエフェクトが必要な場合は、非常に簡単です。
似たようなことをします
プレスエフェクトヘルパーの表示：
使用方法：iOSのような単純なプレス効果を実行します
簡単な使用法：
ImageView img =（ImageView）findViewById（R.id.img）;
- ViewPressEffectHelper.attach（img）
OnTouchEventリスナーを作成する代わりに、ImageViewでsetPressedをオーバーライドし、そこで色フィルタリングを実行できます。
@Override
public void setPressed(boolean pressed) {
super.setPressed(pressed);
if(getDrawable() == null)
return;
if(pressed) {
getDrawable().setColorFilter(0x44000000, PorterDuff.Mode.SRC_ATOP);
invalidate();
}
else {
getDrawable().clearColorFilter();
invalidate();
}
}
上記のすべての回答と組み合わせて、ImageViewを押して状態を変更したかったのですが、ユーザーが移動した場合は「キャンセル」され、onClickListenerは実行されません。
最終的にクラス内にPointオブジェクトを作成し、ユーザーがImageViewを押し下げたときに応じてその座標を設定しました。 MotionEvent.ACTION_UPで、新しいポイントを記録し、ポイントを比較しました。
私はそれをうまく説明できるだけですが、ここに私がやったことです。
// set the ontouch listener
weatherView.setOnTouchListener(new OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
// Determine what action with a switch statement
switch (event.getAction()) {
// User presses down on the ImageView, record the original point
// and set the color filter
case MotionEvent.ACTION_DOWN: {
ImageView view = (ImageView) v;
// overlay is black with transparency of 0x77 (119)
view.getDrawable().setColorFilter(0x77000000,
PorterDuff.Mode.SRC_ATOP);
view.invalidate();
p = new Point((int) event.getX(), (int) event.getY());
break;
}
// Once the user releases, record new point then compare the
// difference, if within a certain range perform onCLick
// and or otherwise clear the color filter
case MotionEvent.ACTION_UP: {
ImageView view = (ImageView) v;
Point f = new Point((int) event.getX(), (int) event.getY());
if ((Math.abs(f.x - p.x) < 15)
&& ((Math.abs(f.x - p.x) < 15))) {
view.performClick();
}
// clear the overlay
view.getDrawable().clearColorFilter();
view.invalidate();
break;
}
}
return true;
}
});
ImageViewにonClickListenerを設定していますが、これはメソッドにすることができます。
これは私のために働いた：
img.setOnTouchListener(new OnTouchListener(){
@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction())
{
case MotionEvent.ACTION_DOWN:
{
((ImageView)v).setImageAlpha(200);
break;
}
case MotionEvent.ACTION_MOVE:
{
// if inside bounds
if(event.getX() > 0 && event.getX() < v.getWidth() && event.getY() > 0 && event.getY() < v.getHeight())
{
((ImageView)v).setImageAlpha(200);
}
else
{
((ImageView)v).setImageAlpha(255);
}
break;
}
case MotionEvent.ACTION_UP:
{
((ImageView)v).setImageAlpha(255);
}
}
return true;
}
});
@Edit：Gunhanが言ったように、setImageAlphaメソッドには後方互換性の問題があるでしょう。私はこの方法を使用しました：
public static void setImageAlpha(ImageView img, int alpha)
{
if(Build.VERSION.SDK_INT > 15)
{
img.setImageAlpha(alpha);
}
else
{
img.setAlpha(alpha);
}
}
サンプルを作成します here 、ImageViewをレイアウトから ClickableImageView に変更します。お役に立てば幸いです。
Android.widget.Buttonを使用し、そのbackgroundプロパティをAndroid.graphics.drawable.StateListDrawableに設定します。これはすべてXMLで、またはプログラムで実行できます。 Form Stuffチュートリアルのカスタムボタンセクション を参照してください。
タップしたときにリップルが必要な場合は、次のコードで指定できます。
<ImageView
...
Android:background="?attr/selectableItemBackgroundBorderless"
Android:clickable="true"
...
</ImageView>
同様に、TextViewにクリック効果を実装できます
<TextView
...
Android:background="?attr/selectableItemBackgroundBorderless"
Android:clickable="true"
...
</TextView>
あなたが背景画像を使用する場合、私はより美しさの解決策を持っています:)
public static void blackButton(View button){
button.setOnTouchListener(new OnTouchListener() {
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN: {
v.getBackground().setColorFilter(0xf0f47521,PorterDuff.Mode.SRC_ATOP);
v.invalidate();
break;
}
case MotionEvent.ACTION_UP: {
v.getBackground().clearColorFilter();
v.invalidate();
break;
}
}
return false;
}
});
}
または：
Image Buttonでこのフォームを使用できます。
ファイルres/drawable/btn_video.xmlを作成します：
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item Android:drawable="@drawable/image"
Android:state_pressed="true" />
<item Android:drawable="@drawable/ico2"
Android:state_focused="true" />
<item Android:drawable="@drawable/ico2" />
</selector>
そしてres/layout/activity_main.xml：
<ImageButton
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:id="@+id/imageButton"
Android:layout_gravity="center_horizontal"
Android:onClick="eventImageBtn"
Android:background="@drawable/btn_video"
Android:adjustViewBounds="true"
Android:scaleType="fitXY"
/>
クリックするだけで画像が変わり、直線レイアウトで調整できます。
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:fillViewport="true">
<LinearLayout
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:orientation="vertical"
Android:background="@color/menu_item_background">
<LinearLayout Android:layout_width="match_parent" Android:layout_height="match_parent" Android:orientation="vertical"
Android:paddingLeft="@dimen/main_screen_side_padding" Android:paddingRight="@dimen/main_screen_side_padding" Android:paddingTop="@dimen/main_screen_side_padding" Android:paddingBottom="@dimen/main_screen_side_padding"
Android:background="#ffb3ff13" Android:weightSum="10.00">
<LinearLayout Android:layout_weight="2.50" Android:background="#ff56cfcd" Android:orientation="vertical" Android:layout_width="fill_parent" Android:layout_height="0dp" >
<ImageButton
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:id="@+id/imageButton"
Android:layout_gravity="center_horizontal"
Android:onClick="eventImageBtn"
Android:background="@drawable/btn_video"
Android:adjustViewBounds="true"
Android:scaleType="fitXY"
/>
</LinearLayout>
<LinearLayout Android:layout_weight="0.50" Android:layout_height="0dp" Android:background="#ffffffff" Android:orientation="vertical" Android:layout_width="fill_parent" >
</LinearLayout>
<LinearLayout Android:layout_weight="4.50" Android:orientation="vertical" Android:layout_width="fill_parent" Android:layout_height="0dp" Android:background="#ff8aa5ff">
</LinearLayout>
<LinearLayout Android:layout_weight="0.50" Android:layout_height="0dp" Android:background="#ffffffff" Android:orientation="vertical" Android:layout_width="fill_parent" >
</LinearLayout>
<LinearLayout Android:layout_weight="2.00" Android:orientation="vertical" Android:layout_width="fill_parent" Android:layout_height="0dp" Android:background="#ffff7d1a" >
</LinearLayout>
</LinearLayout>
</LinearLayout>
</ScrollView>
私が試した：
<ImageButton
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:contentDescription="@string/get_started"
Android:src="@drawable/home_started"
style="?android:borderlessButtonStyle"
Android:adjustViewBounds="true"
Android:clickable="true"
Android:elevation="5dp"
Android:longClickable="true" />
そしてこれは働いた。行に注意してください：style="?android:borderlessButtonStyle"
このスレッドの助けてくれてありがとう。しかし、あなたは一つのことを見逃した...あなたもACTION_CANCELを処理する必要があります。そうしないと、ビュー階層の親ビューがタッチイベントをインターセプトするイベントでImageViewのアルファ値を適切に復元できない場合があります（ImageViewをラップするScrollViewを考えてください）。
上記のクラスに基づいた完全なクラスを次に示しますが、ACTION_CANCELも処理します。 ImageViewCompatヘルパークラスを使用して、前後のJellyBean APIの違いを抽象化します。
public class ChangeAlphaOnPressedTouchListener implements OnTouchListener {
private final float pressedAlpha;
public ChangeAlphaOnPressedTouchListener(float pressedAlpha) {
this.pressedAlpha = pressedAlpha;
}
@Override
public boolean onTouch(View v, MotionEvent event) {
ImageView iv = (ImageView) v;
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
ImageViewCompat.setAlpha(iv, pressedAlpha);
break;
case MotionEvent.ACTION_MOVE:
if (isInsideViewBounds(v, event)) {
ImageViewCompat.setAlpha(iv, pressedAlpha);
} else {
ImageViewCompat.setAlpha(iv, 1f);
}
break;
case MotionEvent.ACTION_UP:
ImageViewCompat.setAlpha(iv, 1f);
break;
case MotionEvent.ACTION_CANCEL:
ImageViewCompat.setAlpha(iv, 1f);
}
return false;
}
private static boolean isInsideViewBounds(View v, MotionEvent event) {
return event.getX() > 0 && event.getX() < v.getWidth() && event.getY() > 0
&& event.getY() < v.getHeight();
}
}
これは私が今まで見た中で最高のソリューションです。そのより一般的な
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:fillAfter="true" >
<alpha
Android:duration="100"
Android:fromAlpha="0.0"
Android:interpolator="@Android:anim/accelerate_interpolator"
Android:toAlpha="1.0" />
</set>
最も簡単な方法は、新しいXMLファイルを作成することだと思います。この場合、drawableフォルダーで「example.xml」と呼び、次のコードを追加します。
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item Android:drawable="@color/blue"
Android:state_pressed="true" />
</selector>
ただし、その前に、次のように、valuesフォルダー内のcolors.xmlファイルで色を設定する必要があります。
<resources>
<color name="blue">#0000FF</color>
</resources>
これで、次のようにButton/ImageButtonを設定して新しいレイアウトを使用するだけです。
<ImageView
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:background="@drawable/example"
/>
次に、その画像をクリックすると、で設定された色に変わります
<item Android:drawable="@color/blue"
Android:state_pressed="true" />
あなたが望むフィードバックを与える...
ImageButtonはより良い解決策だと思います
<ImageButton
Android:layout_width="96dp"
Android:layout_height="56dp"
Android:src="@mipmap/ic_launcher"
Android:adjustViewBounds="true"
Android:background="@Android:color/transparent"
Android:foreground="@drawable/selector" />
私のソリューションは、「 nineOldAndroids 」ライブラリを使用して、古いAPIもサポートしています：
rootView.setOnTouchListener(new OnTouchListener() {
@Override
public boolean onTouch(final View v, final MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_CANCEL:
v.setBackgroundResource(R.drawable.listview_normal);
ViewHelper.setAlpha(imageView, 1);
break;
case MotionEvent.ACTION_DOWN:
v.setBackgroundResource(0);
v.setBackgroundColor(getResources().getColor(R.color.listview_pressed));
ViewHelper.setAlpha(imageView, 0.75f);
break;
}
return false;
}
});
RootViewはセル自体（レイアウト）であり、セル全体に適用する色の影響を受ける単一のimageViewがあると想定しています。
編集：必要に応じて、ImageViewを拡張して前景を処理し、「？android：attr/selectableItemBackground」に設定することもできます。このためのライブラリがあります here と、希望するビューでそれを行う方法に関するチュートリアル here .
これが私のコードです。ユーザーがタッチするとImageViewがカラーフィルターを取得し、ユーザーがタッチを停止するとカラーフィルターが削除されるという考え方です。
ImageViewにもonClickEventがある場合、Martin Booka Weser、András、Ah Lam、altosh、ソリューションは機能しません。 worawee.sおよびkcoppock（ImageButtonを使用）ソリューションには背景が必要です。これは、ImageViewが透明でない場合は意味がありません。
これは AZ _ カラーフィルターについてのアイデアの拡張です。
class PressedEffectStateListDrawable extends StateListDrawable {
private int selectionColor;
public PressedEffectStateListDrawable(Drawable drawable, int selectionColor) {
super();
this.selectionColor = selectionColor;
addState(new int[] { Android.R.attr.state_pressed }, drawable);
addState(new int[] {}, drawable);
}
@Override
protected boolean onStateChange(int[] states) {
boolean isStatePressedInArray = false;
for (int state : states) {
if (state == Android.R.attr.state_pressed) {
isStatePressedInArray = true;
}
}
if (isStatePressedInArray) {
super.setColorFilter(selectionColor, PorterDuff.Mode.MULTIPLY);
} else {
super.clearColorFilter();
}
return super.onStateChange(states);
}
@Override
public boolean isStateful() {
return true;
}
}
使用法：
Drawable drawable = new FastBitmapDrawable(bm);
imageView.setImageDrawable(new PressedEffectStateListDrawable(drawable, 0xFF33b5e5));
XML属性を追加するだけで、Android：clickable = "true" ...
XMLで次のようにしました-padding画像の周りと波紋ontopで：
<ImageView
Android:layout_width="100dp"
Android:layout_height="100dp"
Android:background="@drawable/my_image"
Android:clickable="true"
Android:focusable="true"
Android:src="?android:attr/selectableItemBackground" />