自定义ImageView类onClick更改imageResource

Question

我已经创建了一个自定义的 ImageView 类，并且当用户单击它时，我正在尝试更改 imageResource，但我能够从该类调用 setImageResource（）。

此外，我还想像第二个图像视图一样进行存储。我的意思是，我的自定义imageView具有相同的starterimagerviewresource，但当单击它时，它必须是动态的imageView，例如：

ImageView1 ic_launcher（用户尚未单击它） ImageView1 ic_user（用户已单击它）

你能指导如何做到这一点吗？

这是我的自定义图像视图类：

public class CustomImageView extends android.support.v7.widget.AppCompatImageView implements View.OnClickListener {
    private View.OnClickListener clickListener;
    public CustomImageView(Context context) {
        super(context);
        setOnClickListener(this);
    }

    public CustomImageView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        setOnClickListener(this);
    }

    public CustomImageView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        setOnClickListener(this);
    }


    @Override
    public void setOnClickListener(OnClickListener l) {
        if (l == this) {
            super.setOnClickListener(l);
        } else {
            clickListener = l;
        }
    }

    @Override
    public void onClick(View v) {
        //Should change the imageResource here but also I should have to change it again if user wants (to the initial one)
        if (clickListener != null) {
            clickListener.onClick(this);
        }
    }
}

Answer 1

自定义可切换ImageView的解决方案：

值/attr.xml中的自定义属性

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="ToggleImageView">
        <attr name="low_img" format="reference" />
        <attr name="high_img" format="reference" />
    </declare-styleable>

</resources>

自定义图像视图类：

public class ToggleImageView extends AppCompatImageView implements View.OnClickListener {
    private Drawable mLowDrawable, mHighDrawable;
    private boolean isLow = true;

    public ToggleImageView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);

        // Extract drawables from custom attributes
        TypedArray values = context.obtainStyledAttributes(attrs, R.styleable.ToggleImageView);
        setLowDrawable(values.getDrawable(R.styleable.ToggleImageView_low_img));
        setHighDrawable(values.getDrawable(R.styleable.ToggleImageView_high_img));
        values.recycle();

        setImageDrawable(mLowDrawable);

        super.setOnClickListener(this);
    }

    public void setLowDrawable(Drawable drawable) {
        mLowDrawable = drawable;

        if (isLow)
            setImageDrawable(mLowDrawable);
    }

    public void setHighDrawable(Drawable drawable) {
        mHighDrawable = drawable;

        if (!isLow)
            setImageDrawable(mHighDrawable);
    }

    @Override
    public void setOnClickListener(@Nullable OnClickListener l) {
        // Do nothing to block setting listener from outer caller
    }

    @Override
    public void onClick(View view) {
        toggle();
    }

    public void toggle() {
        isLow = !isLow;

        setImageDrawable(isLow ? mLowDrawable : mHighDrawable);
    }
}

xml布局中的用法:

<?xml version="1.0" encoding="utf-8" ?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/root_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.example.tamhuynh.testfragment.ToggleImageView
        android:id="@+id/toggle_img"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        app:high_img="@mipmap/high_drawable"
        app:low_img="@drawable/low_drawable"
        tools:low_img="@drawable/low_drawable" />

</FrameLayout>