在图像上有许多按钮的滚动视图答案

【问题标题】：Scrollview with many buttons over an image在图像上有许多按钮的滚动视图
【发布时间】：2015-07-23 22:29:35
【问题描述】：

我想做一些类似于地图行为的事情，其中我有一个大图像（比手机屏幕大）和一组按钮，我想在图像上放置特殊的 XY 位置，并且当用户滚动图像时（水平和垂直），按钮在图像上保持相同的位置（就像标记一样）。然后用户可以点击一个按钮并打开一个新的活动。

我想在 xml 中执行此操作。有什么建议吗？

我不知道如何将按钮附加到图像 XY 位置：

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

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/map_view"
            android:background="@drawable/myImage"/>

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Position 1"
            android:id="@+id/radioButton" />

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Position 2"
            android:id="@+id/radioButton2" />

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Position 3"
            android:id="@+id/radioButton3" />`
        />
    </RelativeLayout>

</ScrollView>

【问题讨论】：

你能告诉我们你到目前为止尝试了什么吗？
我已经尝试更新了问题
创建一个父级相对布局，然后是里面的按钮，但首先是： ChildOfScrollView> ScrollView>

标签： android xml layout

【解决方案1】：

您应该在触摸时更改图像视图的位置，而不是滚动视图。如果用户触摸 top-down ，则 imageview 位置应该与自上而下像素相同的负方向。因此，您的图像视图也可以左右移动。

Get the touch position inside the imageview in android

Android move view on touch event

【讨论】：

【解决方案2】：

在这里，请确保 ImageView 应始终大于您所说的屏幕。

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/map_view"
        android:layout_width="1800px"
        android:layout_height="1800px"
        android:background="@drawable/the_large_image"/>

    <RadioButton
        android:id="@+id/radioButton"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="50dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Position 1"/>

    <RadioButton
        android:id="@+id/radioButton2"
        android:layout_marginTop="200dp"
        android:layout_marginLeft="50dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Position 2"/>

    <RadioButton
        android:id="@+id/radioButton3"
        android:layout_marginTop="80dp"
        android:layout_marginLeft="60dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Position 3"/>

</RelativeLayout>

</ScrollView>

【讨论】：

不是我想要的。如果图像滚动，我需要移动按钮。按钮必须保持图像上方的 XY 位置
哦，哦，你的意思是，如果你在图片的末尾，按钮也会移开，对不起，我要马上编辑它
请检查，希望一切顺利
几乎就是我想要的。它上下滚动，但不会横向导致图像适合设备宽度（即使我在图像 layout_width 上放置了 3000 像素）。有什么建议可以在不自动调整大小以适应宽度的情况下保持图像大小？
我发现了部分问题。首先，重要的是 ImageView 使用“android:src”而不是“android:background”。其次，您必须添加“android:scaleType="centerCrop"”，以便图像不适合设备宽度并保持原始大小。除此之外，我仍然无法水平滚动，只能垂直滚动。如果你能弄清楚，我就完成了:)

【解决方案3】：

感谢@Sheychan，它给了我一些线索，让我如愿以偿。

首先：xml。使用 2 个滚动视图（一个是垂直的，另一个是水平的），这样我们就可以获得水平和垂直滚动。然后是一个RelativeLayout，这样我们就可以将单选按钮放在图像上所需的位置。图像中的“src”和“scaleType”很重要，这样我们才能获得正确的图像尺寸。这是xml的代码

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/svVertical">

    <HorizontalScrollView android:id="@+id/hsvHorizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:isScrollContainer="true">

            <ImageView
                android:id="@+id/map_view"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/imagen"
                android:scaleType="centerCrop"/>

            <RadioButton
                android:id="@+id/radioButton"
                android:layout_marginTop="20dp"
                android:layout_marginLeft="50dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Position 1"/>

            <RadioButton
                android:id="@+id/radioButton2"
                android:layout_marginTop="200dp"
                android:layout_marginLeft="50dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Position 2"/>

            <RadioButton
                android:id="@+id/radioButton3"
                android:layout_marginTop="80dp"
                android:layout_marginLeft="60dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Position 3"/>

        </RelativeLayout>
    </HorizontalScrollView>
</ScrollView>

但是通过这个解决方案，我们得到了奇怪的滚动（只有垂直或水平，不能同时两个：称之为“对角线”滚动）。要解决这个问题：对持有此布局的 Activity 进行简单覆盖：

ScrollView scrollY;
HorizontalScrollView scrollYChild;

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        scrollY = (ScrollView)findViewById(R.id.svVertical);
        scrollYChild = (HorizontalScrollView)findViewById(R.id.hsvHorizontal);
    }

    @Override
    public boolean dispatchTouchEvent(MotionEvent event) {
        scrollYChild.dispatchTouchEvent(event);
        scrollY.onTouchEvent(event);
        return super.dispatchTouchEvent(event);
    }

这开始工作得更好，但仍然以一种奇怪的方式。就像滚动时移动“跳跃”一样。

解决办法：去掉action bar：

在Manifest上，在application标签（或activity标签）中添加“NoActionBar”主题

<application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@android:style/Theme.Holo.NoActionBar.Fullscreen" > 
...
        </application>

但是，请注意，因为活动不能是“ActionBarActivity”，您必须将其更改为“活动”。

并且，以防万一，根据 Android 的建议，在 Activity 的 OnCreate 上添加兼容的旧 SDK 版本，并带有“隐藏状态栏”。

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // If the Android version is lower than Jellybean, use this call to hide
        // the status bar.
        if (Build.VERSION.SDK_INT < 16) {
            getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                    WindowManager.LayoutParams.FLAG_FULLSCREEN);
        }

    setContentView(R.layout.activity_main);
    scrollY = (ScrollView)findViewById(R.id.svVertical);
    scrollYChild = (HorizontalScrollView)findViewById(R.id.hsvHorizontal);
}

这就是所有人 :) 希望它能帮助你，就像它帮助了我一样。

【讨论】：