Android中图像的动态热点设计

Question

我必须像下面这样开发一个UI：

​

​

我想要显示这种类型的图像，并在该图像上显示热点。热点的位置将是动态的，根据x，y和半径，假设圆将绘制在原始图片上。用户可以点击热点，并且将在用户将点击的特定热点上定义onclick动作。

开发这种类型的UI的最佳流程是什么？

Answer 1

将主布局设置为RelativeLayout，然后可以使用以下代码以编程方式将具有onClickListener的ImageView添加到您的布局中：

private void addImageView(RelativeLayout mainLayout, int x, int y, int width, int height, OnClickListener onClickListener){
    ImageView imageView = new ImageView(this);
    imageView.setAdjustViewBounds(false);
    RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
    params.height = height;
    params.width = width;
    imageView.setLayoutParams(params);
    imageView.setScaleType(ImageView.ScaleType.FIT_XY);  //remove this if you want to keep aspect ratio
    imageView.setImageDrawable(getResources().getDrawable(R.drawable.ic_launcher)); //here goes your drawable
    params.leftMargin = x - width/2;
    params.topMargin = y - height/2;
    imageView.setOnClickListener(onClickListener);
    mainLayout.addView(imageView);
}

要使用它，您可以调用：

    RelativeLayout mainLayout = (RelativeLayout) findViewById(R.id.relativeLayout); //this is your main layout
    addImageButton(mainLayout, 200, 300, 200, 200, new OnClickListener() {

        @Override
        public void onClick(View v) {
            Toast.makeText(MainActivity.this, "clicked", Toast.LENGTH_SHORT).show();
        }
    });

您也可以使用ImageButton来实现相同的姿势，尽管图像大小会受到按钮边框的影响：

private void addImageButton(RelativeLayout mainLayout, int x, int y, int width, int height, OnClickListener onClickListener){
    ImageButton imageButton = new ImageButton(this);
    imageButton.setAdjustViewBounds(true);
    RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
    params.height = height;
    params.width = width;
    imageButton.setLayoutParams(params);
    imageButton.setScaleType(ImageView.ScaleType.FIT_XY);
    imageButton.setImageDrawable(getResources().getDrawable(R.drawable.ic_launcher));
    params.leftMargin = x - width/2;
    params.topMargin = y - height/2;
    imageButton.setOnClickListener(onClickListener);
    mainLayout.addView(imageButton);
}

试试看。