如何在android中实现多个屏幕尺寸的图像区域点击监听器？答案

【问题标题】：How to implement image region click listener for multiple screen size in android?如何在android中实现多个屏幕尺寸的图像区域点击监听器？
【发布时间】：2015-03-01 10:00:09
【问题描述】：

我想创建全屏加载图片广告的全屏活动。示例图像是这样的：

请注意，按钮也是图像的一部分。这是布局xml：

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

</LinearLayout>

可以看到图片加载了android:background。

我想要实现的是：当点击“按钮”图像部分时，它会做一些事情（比如启动另一个活动），以及点击右上角的“关闭 [X]”矩形，它将关闭活动。

在“按钮”绘图的区域部分实现点击逻辑似乎很容易。到目前为止，我找到了两种方法：

在 LinearLayout 上设置 ontouch 侦听器，并检查 Button 绘制区域的 X 和 Y 坐标
将不可见的ImageView放在布局中的“按钮”图片之上，并设置onclick监听器。

但问题是：许多 Android 设备都有多种屏幕尺寸和分辨率。所以我想知道这两种解决方案是否可以在不同的屏幕尺寸上以便携的方式使用？

由于图像在以不同的屏幕分辨率加载时可能会被拉伸，这意味着对于解决方案 #1：我必须调整 X 和 Y 数。对于解决方案 #2：不可见的 ImageView 的位置可能会与 Button 绘图同步。

那么有人知道更好的解决方案吗？

更新：

我正在尝试使用隐形点击占位符解决方案。这是布局xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/ad_image"
    android:id="@+id/adLayout"
    android:weightSum="1">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.75"/>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.16"
        android:id="@+id/adImageLayout"
        android:onClick="adImageClicked">
    </LinearLayout>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"/>
</LinearLayout>

adImageLayout 是按钮绘制的点击占位符。

【问题讨论】：

我会使用带有天蓝色背景的 RelativeLayout，然后添加一个 TextView 和一个按钮（关闭 X 和按钮）。第一个将有一个 9 补丁作为背景，后者是一个可绘制的圆角。非常简单，不像全屏图片那样占用内存。
@DerGolem：上面的图片只是一个例子，我将使用的真实图片不是这样的纯色背景图片。
哦，我明白了。无论如何，在我看来，覆盖在父级背景技术上的 TextView + Button 比实现一些不必要的自定义逻辑更方便。
@DerGolem：不幸的是，事情没那么简单。广告图片可能类似于this。而且我不是艺术家，所以图像将由其他人提供。我只是在做代码逻辑。
是的，给我一点时间。这完全是关于设计，而不是代码（我将在布局中创建一个共享的 onClick 侦听器并区分代码中的调用者）。让我先准备来自您的示例的示例图像（这需要一些时间，其余的很容易）。

标签： java android image layout

【解决方案1】：

我决定回答我的问题。我改进了我原来的解决方案：

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

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.7">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:src="@drawable/xbutton"
            android:onClick="xButtonClicked"/>
    </LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.2">

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.1" />

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="0.3"
            android:onClick="buttonClicked"/>

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1"/>
    </LinearLayout>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"/>

</LinearLayout>

这是布局的架构：

关闭按钮是用 ImageView 加载的。

所以基本上我只是在这里使用layout_weight 技巧。我避免硬编码dpi，因为它会导致不同的LinearLayout的宽度/高度导致不同的屏幕尺寸。

我已经测试了几种屏幕分辨率（平板电脑尺寸除外），效果很好。我不需要为多种密度提供不同的图像和布局文件。而且Activity类中所需的代码非常少，只有设置全屏的代码：

getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, 
                     WindowManager.LayoutParams.FLAG_FULLSCREEN);
requestWindowFeature(Window.FEATURE_NO_TITLE);

和onClick 事件方法。

当然，如果您能找到更好的解决方案，请告诉我。

【讨论】：

很抱歉我要说什么，但你的解决方案实在是太糟糕了。你7岁了！ ViewGroups 为了位置 2！ Views。你绝对应该重新考虑
如果使用您的解决方案，按钮绘图之外的区域仍然是可点击的。至少我的解决方案仍然可以获得每个按钮顶部的点击区域的准确性。别担心，我肯定不会接受我自己的答案。
但是你做错了。你的weight 只是在说：70% 屏幕的百分比不是clickable 并且在30% 之外左使x% 可点击。您可以使用我给您的解决方案轻松做到这一点，但只有 1 个ViewGroup 和 1-2 个视图（每个按钮）而不是您的 9 个。
但是您的解决方案使用硬编码 dp，这意味着我必须为不同的密度提供每个布局。
正如我在我的 cmets 中提到的，您的 SHOULD NOT 使用硬编码 dp 但以语法方式计算布局的高度，然后将所需的高度分配给您的按钮。我什至向你展示了如何获取屏幕尺寸

【解决方案2】：

或者为android支持的每个密度提供image，并添加layout，以便为每个图像相应地定位按钮或者更好，但只是使图像的下部区域可点击。 button 本身很大，几乎覆盖了下部屏幕的整个区域。如果用户不想点击按钮，他们不会尝试点击那里。我可以直接告诉你，这就是广告公司在这种情况下所做的事情。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="your_background">

   <ImageButton
       android:layout_width="match_parent"
       android:layout_height="120dp"
       android:layout_alignParentBottom="true"
       android:background="#000"
    />
</RelativeLayout>

---- 更新----

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:context=".MainActivity">

<Button
    android:id="@+id/my_button"
    android:text="My Button"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/black"
    android:textColor="@android:color/white"
    android:gravity="center"
    android:layout_gravity="bottom"
    android:padding="24dp"
    />

</FrameLayout>

public class MainActivity extends Activity {

    @Override
    protected void onCreate (Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Button button = (Button) findViewById(R.id.my_button);

        final int heightPixels = getResources().getDisplayMetrics().heightPixels;
        button.setTranslationY(- heightPixels / 3 / 2);
    }



}

【讨论】：

如果按钮画在中间呢？
所以将你的不可见按钮 width 设置为 match_parent 并在父级中对齐按钮中心。
我刚试过，好像看不见的按钮不能点击。
只需在<Button> 中添加android:onClick="buttonClicked" 也有android:visibility="invisible"，然后我在buttonClicked 方法中放置一个显示Toast 代码，但onClick 方法不会被调用。即使在不可见按钮上设置 onTouchListener 也无济于事。最后，我通过使用LinearLayout 作为按钮绘图的不可见点击占位符来解决它（请参阅编辑后的问题）。你怎么看？是否足够好或您有更好的建议？
您好，我已经尝试过您的布局，但它不起作用。请参阅此screenshot。该按钮在左上角显示为蓝点。

【解决方案3】：

如果您不想使用按钮和视图，您可以只考虑 X 和 Y 以整个屏幕宽度和高度的分数形式。

假设可点击区域是屏幕宽度的 1/3 到 2/3。然后你可以回忆一下实际的 ScreenWidth（以 dp、像素或其他为单位）并在运行时说可点击区域从 (1/3)*ScreenWidth 变为 (2/3)*ScreenWidth。

对于 Ys 或关闭按钮也是如此。然后设计师会根据这些比例制作背景。

【讨论】：