web-dev-qa-db-ja.com

フォーカスまたはクリックされたときにImageViewを強調表示する方法は？

これの良い例は、Twitter起動画面（アプリケーションの最初の起動時に表示される大きなアイコンのある画面）またはアプリケーションアイコンにフォーカスを合わせたときにアプリケーショントレイを見るだけです。

基本的に、ImageView内の画像の輪郭がハイライトされ、その画像の境界線のように見えるImageViewを強調表示する必要があります。また、ハイライトをカスタマイズして、特定の色にし、フェードアウトするようにします。

おかげで、

グルーミー

androidfocusimageviewhighlight
44
groomsy

srcのImageView属性に状態リストのドロアブルを割り当てる必要があります。言い換えると、その状態リストには、選択済み、押された、選択されていないなどの異なる画像があります。これが、Twitterアプリのやり方です。

ImageViewがある場合：

<ImageView style="@style/TitleBarLogo"
            Android:contentDescription="@string/description_logo"
            Android:src="@drawable/title_logo" />

Src drawable（title_logo.xml）は次のようになります。

<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_focused="true" Android:state_pressed="true" Android:drawable="@drawable/title_logo_pressed"/>
    <item Android:state_focused="false" Android:state_pressed="true" Android:drawable="@drawable/title_logo_pressed"/>
    <item Android:state_focused="true" Android:drawable="@drawable/title_logo_selected"/>
    <item Android:state_focused="false" Android:state_pressed="false" Android:drawable="@drawable/title_logo_default"/>
</selector>

Google IOアプリのスケジュール は、この良い例です。

81
Josh Clemm

押された状態に別のドローアブルがない場合は、setColorFilterを使用して単純な色合い効果を実現できます。

押された状態セレクターのように動作するため、画像が押されると、背景が明るい灰色に変わります。

final ImageView image = (ImageView) findViewById(R.id.my_image);
image.setOnTouchListener(new View.OnTouchListener() {
        private Rect rect;

        @Override
        public boolean onTouch(View v, MotionEvent event) {
            if(event.getAction() == MotionEvent.ACTION_DOWN){
                image.setColorFilter(Color.argb(50, 0, 0, 0));
                rect = new Rect(v.getLeft(), v.getTop(), v.getRight(), v.getBottom());
            }
            if(event.getAction() == MotionEvent.ACTION_UP){
                image.setColorFilter(Color.argb(0, 0, 0, 0));
            }
            if(event.getAction() == MotionEvent.ACTION_MOVE){
                if(!rect.contains(v.getLeft() + (int) event.getX(), v.getTop() + (int) event.getY())){
                    image.setColorFilter(Color.argb(0, 0, 0, 0));
                } 
            }
            return false;
        }
    });

ビュー境界の外側に移動する指を処理します。したがって、発生した場合、デフォルトの背景を復元します。

falseもサポートしたい場合は、onTouchメソッドからonClickListnerを返すことが重要です。

26
klimat

これはmklimekの拡張です。私は彼のスニペットからそれを適切に動作させることができませんでした。少し編集した

 ImageView testImage = (ImageView)findViewById(R.id.imageView);
 testImage.setOnTouchListener(listener);

 View.OnTouchListener listener = new View.OnTouchListener() {
        private Rect rect;
        @Override
        public boolean onTouch(View v, MotionEvent event) {


            ImageView image = (ImageView) v;
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    image.getDrawable().setColorFilter(0x77000000,PorterDuff.Mode.SRC_ATOP);
                    image.invalidate();                        
                    break;

                case MotionEvent.ACTION_UP:                        
                case MotionEvent.ACTION_CANCEL: {
                    //clear the overlay
                    image.getDrawable().clearColorFilter();
                    image.invalidate();
                    break;
                }
            }

            return true;
        }
    };
2
SilleBille

動的画像を表示するには、画像ソースにLayerDrawableを使用できます。

LayerDrawable d = new LayerDrawable(new Drawable[]{new BitmapDrawable(myBmp), getResources().getDrawable(R.drawable.my_selector_list)});
imageView.setImageDrawable(d);
2
Tom Bollwitt

ジョシュ・クレムの回答を完了するためだけに。 srcで定義された同じ画像を維持することもできますが、背景のみを変更または強調表示することができます。これは多かれ少なかれこのようになります：

logo_box.xml

<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_pressed="true" Android:drawable="@drawable/background_normal"/>
    <item Android:state_pressed="false" Android:drawable="@drawable/background_pressed"/>
</selector>

そして、ボタンの背景をlogo_boxとして定義します：

<ImageView
    Android:contentDescription="@string/description_logo"
    Android:src="@drawable/logo"
    Android:background="@drawable/logo_box" />

Background_normalとbackground_pressedは、必要に応じて複雑にすることも、@ colorのように単純にすることもできます:)

2
jsidera

私のソリューション、ImageViewのカスタム属性：
https://github.com/henrychuangtw/Android-ImageView-hover

ステップ1：declare-styleable

<declare-styleable name="MyImageViewAttr">
    <attr name="hover_res" format="reference" />
</declare-styleable>


ステップ2：カスタムImageView

public class MyImageView extends ImageView {

int resID, resID_hover;

public MyImageView(Context context) {
    super(context);
    // TODO Auto-generated constructor stub
}
public MyImageView(Context context, AttributeSet attrs) {
    super(context, attrs);
    // TODO Auto-generated constructor stub

    TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.MyImageViewAttr);
    resID_hover = array.getResourceId(R.styleable.MyImageViewAttr_hover_res, -1);
    if(resID_hover != -1){
        int[] attrsArray = new int[] {
                Android.R.attr.src 
            };

        TypedArray ta = context.obtainStyledAttributes(attrs, attrsArray);
        resID = ta.getResourceId(0 , View.NO_ID);           
        ta.recycle();

        setOnTouchListener(listener_onTouch);
    }

    array.recycle();

}
public MyImageView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    // TODO Auto-generated constructor stub
    TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.MyImageViewAttr);
    resID_hover = array.getResourceId(R.styleable.MyImageViewAttr_hover_res, -1);
    if(resID_hover != -1){
        int[] attrsArray = new int[] {
                Android.R.attr.src 
            };

        TypedArray ta = context.obtainStyledAttributes(attrs, attrsArray);
        resID = ta.getResourceId(0 , View.NO_ID);           
        ta.recycle();

        setOnTouchListener(listener_onTouch);
    }

    array.recycle();
}



OnTouchListener listener_onTouch = new OnTouchListener() {

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        // TODO Auto-generated method stub

        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            setImageResource(resID_hover);
            break;

        case MotionEvent.ACTION_MOVE:

            break;

        case MotionEvent.ACTION_UP:
            setImageResource(resID);
            break;

        default:
            break;
        }


        return false;
    }
};

}


ステップ3：myattrの宣言：xmlns：myattr = "http://schemas.Android.com/apk/res-auto"レイアウトxmlで

<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
        xmlns:myattr="http://schemas.Android.com/apk/res-auto"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:orientation="vertical">


ステップ4：MyImageViewにmyattr：hover_resを設定します

<dev.henrychuang.component.MyImageView 
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:clickable="true"
        myattr:hover_res="@drawable/icon_home_h"
        Android:src="@drawable/icon_home"/>


2
HenryChuang

描画可能なxmlでは不十分であることに気付きました。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:drawable="@drawable/ic_filter_up" Android:state_pressed="true"/>
    <item Android:drawable="@drawable/ic_filter_up_shadow"/>
</selector>

ImageViewは押しません。 ImageViewにはOnClickListenerも割り当てる必要があります。次に、ボタンとして押します。

1
CoolMind

それを支援する小さなライブラリをまとめました： https://github.com/noveogroup/Highlightify

基本的には、ランタイムでセレクターを作成し、本当に使いやすいはずです。ただし、フォーカス状態はまだサポートされていません...

1
Roman Zhilich

imageViewの状態に_Android:state_selected="true"_を使用しています。

_<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:drawable="@drawable/ic_enable" Android:state_selected="true" />

    <item Android:drawable="@drawable/ic_disable" Android:state_selected="false" />

    <!--for default-->
    <item Android:drawable="@drawable/ic_enable" />

</selector>
_

img_view.setSelected(true)[〜＃〜] or [〜＃〜]img_view.setSelected(false)を使用して、Java/kotlinコードの画像の状態を変更します。 。

0
Geet Thakur

SelectableItemBackgroundを背景として使用します。

Android:background="?android:attr/selectableItemBackground"
0
slowcar