如何在聚焦或点击时突出显示ImageView?

android focus imageview highlight

79388 观看

9回复

3447 作者的声誉

一个很好的例子就是在Twitter启动屏幕(首次启动应用程序时看到的带有大图标的屏幕),或者甚至只是在关注应用程序图标时查看应用程序托盘。

基本上我需要突出显示一个ImageView,其中突出显示在ImageView中的图像轮廓,看起来它是该图像的边框。我还想自定义高光,使其成为一种特定的颜色,并使其淡出。

谢谢,

groomsy

作者: groomsy 的来源 发布者: 2010 年 11 月 15 日

回应 9


80

2876 作者的声誉

决定

您需要分配一个状态列表drawable 的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>

谷歌IO调度应用程序有一个很好的例子。

作者: Josh Clemm 发布者: 2010 年 11 月 15 日

2

9294 作者的声誉

要显示动态图像,可以使用LayerDrawable作为图像源。

LayerDrawable d = new LayerDrawable(new Drawable[]{new BitmapDrawable(myBmp), getResources().getDrawable(R.drawable.my_selector_list)});
imageView.setImageDrawable(d);
作者: Tom Bollwitt 发布者: 2013 年 9 月 18 日

1

145 作者的声誉

我把小型库放在一起应该有帮助:https//github.com/noveogroup/Highlightify

基本上它在运行时创建选择器,它应该非常容易使用。虽然,焦点状态尚不支持......

作者: Roman Zhilich 发布者: 2014 年 6 月 30 日

2

1486 作者的声誉

只有完成Josh Clemm的回答。您还可以维护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一样简单:)

作者: jsidera 发布者: 2014 年 9 月 3 日

2

1273 作者的声誉

我的解决方案,ImageView的自定义属性:
https//github.com/henrychuangtw/Android-ImageView-hover

第1步:声明样式

<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步:在布局xml中声明myattr:xmlns:myattr =“http://schemas.android.com/apk/res-auto”

<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"/>


作者: HenryChuang 发布者: 2014 年 11 月 20 日

25

19194 作者的声誉

如果您没有其他可绘制状态,您可以使用它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;
        }
    });

它处理在视图边界外移动手指,因此如果它发生,它将恢复默认背景。

当您想要支持时,falseonTouch方法返回也很重要onClickListner

作者: klimat 发布者: 2014 年 12 月 5 日

2

367 作者的声誉

这是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;
        }
    };
作者: SilleBille 发布者: 2015 年 3 月 28 日

1

5803 作者的声誉

我注意到一个可绘制的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没有按下。您还应该OnClickListener为ImageView 分配一个。然后按下按钮。

作者: CoolMind 发布者: 2016 年 7 月 27 日

0

716 作者的声誉

android:state_selected="true"用于imageView状态

<?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" />
    <item android:drawable="@drawable/ic_enable" />
</selector> 

我们正在使用 java / kotlin代码中img_view.setSelected(true);的图像更改状态。

作者: Geet Thakur 发布者: 2019 年 7 月 17 日
32x32