Question

我想做一些类似于地图行为的事情，其中我有一个大图像（比电话屏幕大）和一组按钮我想要放在图像上的特殊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>

Answer 1

感谢@Sheychan给了我一些线索，让我得到了我想要的。

首先：xml。使用2个滚动视图（一个垂直的主视图和另一个水平视图），以便我们可以进行水平和垂直滚动。然后是RelativeLayout，这样我们就可以将radiobuttons放在图像上的所需位置。重要的是＆＃34; src＆＃34;和＆＃34; scaleType＆＃34;在图像中，以便我们可以获得正确的图像尺寸。这是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>

但是通过这个解决方案，我们得到了奇怪的滚动（只有垂直或水平，而不是两个同时：调用它＆＃34;对角线＆＃34;滚动）。要解决此问题：对包含此布局的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);
    }

这开始变得更好，但仍然是奇怪的方式。就像移动＆＃34;跳跃＆＃34;滚动时。

解决方案：取消操作栏：

在Manifest上，添加＆＃34; NoActionBar＆＃34;应用程序标记（或活动标记）中的主题

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

但是，要小心，因为活动不能是＆＃34; ActionBarActivity＆＃34;，你必须将它改为＆＃34;活动＆＃34;。

并且，以防万一，通过Android推荐，添加兼容的旧SDK版本和＆＃34;隐藏状态栏＆＃34;关于活动的OnCreate。

@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);
}

那是所有人:)希望它可以帮助你，因为它帮助了我。

Answer 2

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

Get the touch position inside the imageview in android

Android move view on touch event

Answer 3

在这里，确保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>

在图像上有许多按钮的Scrollview

3 个答案: