滚动视图，在图像上有许多按钮 [英] Scrollview with many buttons over an image
问题描述
我想做一些类似于地图"行为的操作，在该行为中，我有一个较大的图像(比电话屏幕大)，并且有一组按钮要在图像上的特殊XY位置以及用户滚动图像时放置(水平和垂直)，这些按钮在图像上保持相同的位置(就像标记一样).然后，用户可以单击按钮并打开一个新活动.
I want to do something similar to a Map behavior where I have a large Image (bigger than the phone screen) and a group of buttons I want to put over special XY locations over the image, and when the user scrolls the image (horizontally and vertically), the buttons keep the same position over the image (like markers do). Then the user can click over a button and open a new activity.
我想在xml中执行此操作.有什么建议吗?
I want to do this in xml. Any suggestion?
我不知道如何将按钮附在图像的XY位置:
I cant figure out how to attach the buttons with the image XY positions:
<?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>
推荐答案
感谢@Sheychan，这为我提供了一些获取所需线索的线索.
Thanks to @Sheychan that gave me some clue for getting this as I wanted.
首先:xml.使用2个滚动视图(一个主视图是垂直的，另一主视图是水平的)，这样我们就可以进行水平和垂直滚动.然后是一个RelativeLayout，以便我们可以将单选按钮放在图像上的所需位置.重要的是图像中的"src"和"scaleType"，以便我们可以获取正确的图像尺寸.这是xml的代码
First of all: the xml. Use 2 scroll views (one main that is vertical, and another horizontal), so that we can get horizontal and vertical scrolling. Then a RelativeLayout so that we can put the radiobuttons over the image in desired positions. Is important the "src" and "scaleType" in image so that we can get correct image dimensions. Here is the code for 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进行简单覆盖:
But with this solution we got odd scrolling (only vertical or horizontal, not both at the same time: call it "diagonal" scrolling). To resolve this: a simple override on Activity holding this layout:
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);
}
这开始效果更好，但仍然有些奇怪.就像在滚动时移动跳转"一样.
This start working better, but still in an odd way. Is like the move "jumps" while scrolling.
解决方案:取消操作栏:
The solution: take away the action bar:
在清单上，在应用程序标记(或活动标记)中添加"NoActionBar"主题
On the Manifest, add the "NoActionBar" theme in the application tag (or the activity tag)
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:theme="@android:style/Theme.Holo.NoActionBar.Fullscreen" >
...
</application>
但是，请小心，因为该活动不能是"ActionBarActivity"，则必须将其更改为"Activity".
But, be careful, cause the activity must not be an "ActionBarActivity", you must change it to "Activity".
以防万一，以防万一，根据Android的建议，在Activity的OnCreate上添加带有隐藏状态栏"的兼容旧SDK版本.
And, just in case, by Android recommendation, add a compatible old SDK versions with a "hide the status bar" on the OnCreate of the Activity.
@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);
}
这就是所有人:)希望它能对您有所帮助.
And that's all folks :) Hope it helps you as it helped me.
这篇关于滚动视图，在图像上有许多按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
