Question

我需要将这个可点击的图像与HTML中的imageMap相似。我还需要在可点击区域上放置一个图标（在中间，有点像地图标记），但我如何考虑图像大小调整？

即。我的图像可能是800x600，可点击区域可能是20,20和60,40所覆盖的矩形，但这些像素实际上并不是指在图像中的相同位置，当它没有以像素完美的方式显示时

编辑：我的图片来自SD卡，而不是来自可绘制的文件夹

Answer 1

这是我在link

中找到的内容

我发现自己需要显示图像并让用户点按图像的不同部分以导航和执行操作。后勾勒出我需要的东西，很明显我想要的是类似HTML地图标记，但在Android视图中。多一点思考，我决定这将是一个有用的小部件可用。

生成的代码：

在布局中支持图像作为可绘制或位图允许列表   xml中的区域标签允许使用剪切和粘贴HTML区域标签   资源xml（即获取HTML地图和图像并使用的能力   它具有最少的编辑）如果图像大于，则支持平移   设备屏幕支持捏缩放支持区域时的回调   被窃听。支持将注释显示为气泡文本并提供   如果点击了气泡，则回调代码可以在GitHub – Android Image Map
中找到
2012年3月2日更新：添加了一个始终使用调整图像大小的选项   原始图像位。某些图像，当上下调整大小时丢失   很多他们的图像质量。始终从原始位调整大小   提供最佳图像，但需要额外的内存。权衡   现在取决于你。

以下是有关实施的一些快速说明，我会做一些   跟进帖子，了解一些关键领域的更多细节。

将地图与img相关联的简易性与易于操作相匹配   所以在HTML中的img标签中。只需提供要使用的地图名称   布局：

<!--?xml version="1.0" encoding="utf-8"?-->
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ctc="http://schemas.android.com/apk/res/com.ctc.android.widget"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <com.ctc.android.widget.ImageMap  
        android:id="@+id/map"
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent" 
        android:src="@drawable/usamap"
        ctc:map="usamap"/>
</LinearLayout>

区域图在项目中的res / xml / map.xml One中指定 HTML地图的区别在于每个区域必须具有id。我去了来回这个要求，我可能会改变代码以允许对于没有id的区域。如果存在，代码将使用name属性，否则它将寻找标题或alt。目前的实施每个区域也需要一个名称，但可以更改容易。

<!--?xml version="1.0" encoding="utf-8"?-->
<maps xmlns:android="http://schemas.android.com/apk/res/android">
    <map name="gridmap">
        <area id="@+id/area1001" shape="rect" coords="118,124,219,226" />
        <area id="@+id/area1002" shape="rect" coords="474,374,574,476" />
        <area id="@+id/area1004" shape="rect" coords="710,878,808,980" />
        <area id="@+id/area1005" shape="circle" coords="574,214,74" />
        <area id="@+id/area1006" shape="poly" coords="250,780,250,951,405,951" />
        <area id="@+id/area1007" shape="poly" coords="592,502,592,730,808,730,808,502,709,502,709,603,690,603,690,502" />
    </map>
    <map name="usamap">
        <area id="@+id/area1" shape="poly" coords="230,35,294,38,299,57,299,79,228,79" />
...
     </map>
</maps>

图像本身放在res / drawable-nodpi中，以便系统   不会尝试根据dpi将图像调整到设备。这条路   我们保证我们的区域坐标将正确映射到   显示图像。

以下是一个示例活动，可在布局中查找并添加视图   点击处理程序

public class ImageMapTestActivity extends Activity {
    ImageMap mImageMap;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        // find the image map in the view
        mImageMap = (ImageMap)findViewById(R.id.map);

        // add a click handler to react when areas are tapped
        mImageMap.addOnImageMapClickedHandler(new ImageMap.OnImageMapClickedHandler() {
            @Override
            public void onImageMapClicked(int id) {
                // when the area is tapped, show the name in a
                // text bubble
                mImageMap.showBubble(id);
            }

            @Override
            public void onBubbleClicked(int id) {
                // react to info bubble for area being tapped
            }
        });
    }
}

希望这会有所帮助。

带有Android图标的可点击图片

1 个答案: