ImageView区域点击效果

最新推荐文章于 2022-02-15 15:55:50 发布

原创最新推荐文章于 2022-02-15 15:55:50 发布 · 822 阅读

0 ·

CC 4.0 BY-SA版权

Android 专栏收录该内容

81 篇文章

订阅专栏

这篇博客展示了如何创建一个自定义的ClipImageView，实现在11行11列上的点击效果。通过在ClipActivity中设置，博客提到了在onCreate中直接获取ImageView宽高为0的问题，并建议在自定义View中解决。此外，还介绍了如何在Activity的onCreate中利用post方法等待加载完成以正确获取ImageView的宽高。

先上效果图
在这里插入图片描述
转发：参考文章
1.自定义ClipImageView
实现11行11列点击效果

package com.tayh.buttontest.ClipImage;

import android.content.Context;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.view.MotionEvent;


public class ClipImageView extends android.support.v7.widget.AppCompatImageView {
    private Context mContext;
    int width;
    int height;
    final int hang = 11;//定义行数
    final int lie = 11;//定义列数

    public ClipImageView(Context context) {
        super(context);
    }

    public ClipImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mContext = context;
    }

    public ClipImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        width = getWidth();
        height = getHeight();

    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (width > 0 && height > 0 && event.getAction() == MotionEvent.ACTION_DOWN) {
            float x = event.getX();
            float y = event.getY();
            int area = 0;
            int selectI = 1;
            int selectJ = 1;
            for (int i = 1; i <= hang; i++) {
                if (x > width / hang * i) {
                    continue;
                }
                selectI = i;
                for (int j = 1; j <= lie; j++) {
                    if (y > height / lie * j) {
                        continue;
                    }
                    selectJ = j;
                    break;
                }
                break;
            }
            area = selectI + (selectJ - 1) * hang;
            ((ClipActivity) mContext).showClickArea(area);
        }
        return super.onTouchEvent(event);
    }
}

ClipActivity.class
如果在onCreate里直接获取ImageView宽高是0，因为还没有绘制，所以我写在了自定义View里

package com.tayh.buttontest.ClipImage;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;

import android.widget.ImageView;
import android.widget.Toast;

import com.tayh.buttontest.R;

public class ClipActivity extends AppCompatActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.acitivity_clip);
//        直接获取宽高为0
//        ViewGroup.LayoutParams para = imageView.getLayoutParams();
//        int w=para.width;
//        int h=para.height;
//        Log.i("111","w="+w);
//        Log.i("111","h="+h);

    }

    public void showClickArea(int area) {
        Toast.makeText(this, "您点击到了第" + area + "块区域！", Toast.LENGTH_SHORT).show();
    }
}

acitivity_clip.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent">


    <com.tayh.buttontest.ClipImage.ClipImageView
        android:id="@+id/imageview2"
        android:layout_marginTop="20dp"
        android:layout_width="match_parent"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginBottom="20dp"
        android:layout_height="match_parent"
        android:src="@drawable/ic_launcher_background"/>
</LinearLayout>

2.如果想在Activity onCreate里获取ImageView宽高，使用post等待加载完成
注意:imageView2.getDrawable() 获取条件是设置imageView src属性，如果是background 则返回null

        @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.acitivity_clip);
        // 等待ImageVivew加载完成
         ImageView imageView2 = findViewById(R.id.imageview);
        imageView2.post(new Runnable() {

            @Override
            public void run() {
                // TODO Auto-generated method stub
                // ImageView的宽和高，
                Log.i("111", "iv_W = " + imageView2.getWidth() + ", iv_H = " + imageView2.getHeight());
                // 显示的逻辑密度==密度/160
                float density = ClipActivity.this.getResources().getDisplayMetrics().density;
                // 通过getIntrinsic 获得ImageView中Image的真实宽高，
                int dw = (int) (imageView2.getDrawable().getBounds().width() / density);
                int dh = (int) (imageView2.getDrawable().getBounds().height() / density);
                Log.i("111", ClipActivity.this.getResources().getDisplayMetrics().density
                        + "drawable_X = " + dw + ", drawable_Y = " + dh);
                // 通过get获得ImageView中Image的真实宽高，
                int inDw = (int) (imageView2.getDrawable().getIntrinsicWidth()/density); //单位是dp
                int inDh = (int) (imageView2.getDrawable().getIntrinsicHeight()/density); //单位是dp
                Log.i("111", ClipActivity.this.getResources().getDisplayMetrics().density
                        +"Intrinsic_drawable_X = " + inDw + ", Intrinsic_drawable_Y = " + inDh);
            }
        });
    }