如何在 Android 水平滚动图像并从用户那里获取输入?
How to Scroll Image Horizontally in Android and Get Input From User?
我正在开发相机应用程序,我的图像的数字从 1 到 35
我想实现以下结构来控制缩放功能,但我陷入了用户界面实现。
应用程序要求是,用户可以从左到右或从右到左滚动图像,select 图像中的一个数字,这样我就可以使用该数字并设置缩放。
如何滚动图像并获取用户的输入?
是否有可用的库?
查看这个名为 Horizontal Picker 的库 -> https://github.com/blazsolar/HorizontalPicker
您可以轻松地将标签从 "Item " 更改为您想要的索引
将图像裁剪成您想要显示的大小并在您想要的位置居中,注册以在图像视图上拖动事件,找出用户滚动了多少并根据该值调整裁剪中心。计算用户必须滚动多少才能更改您的号码并相应地更改 int 值。
查看 https://developer.android.com/training/gestures/scale.html 了解有关处理拖动事件的更多信息。
如果你还需要的话,我今晚回家后会post编码
** 我无法添加图像,因为我最近(重新)开始使用堆栈溢出,请参阅下面 link 中的图像以获取 [A]、[B]...**
http://i.stack.imgur.com/9b7kg.png
解释:
假设您有一个像 [A] 这样的图像,并且您想要实现自定义滚动。
理论上,将它分成[B]中的部分。我在 imageview 上实现滚动的方法是从图像中创建一个位图,只覆盖它的一部分(对我来说,图像大小为 5*180x 180,我希望位图显示为 3*180 x 180,所以它最多只能覆盖3个框(参考[C])。然后我会在activity中添加一个OnTouchListener并监听imageView上的触摸,当imageView被拖动时,注册差异并创建一个新的相应地调整图像[D],确保新的位图图像不会失焦。请看下面我的实现以供参考。
实施
我的布局文件
<TextView android:text="@string/hello_world" android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentStart="true"
android:textAlignment="center"
android:id="@+id/textView" />
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:id="@+id/imageView"
android:layout_alignParentStart="true"
android:layout_alignEnd="@+id/textView"
android:layout_alignParentBottom="true" />
</RelativeLayout>
我的Activity
// register as View.OnTouchListener to recieve updates when an object
// registered to emit the touch event gets touched
public class MainActivity extends Activity implements View.OnTouchListener {
static final int SCROLLER_WIDTH = 180*3;
static final int SCROLLER_HEIGHT = 180;
ImageView imageView; // the imageView to display the rendered image
Bitmap scrollerImage; // the original, uncut, image
TextView textView; // textView to display current indicator
int scrollerStartPos = 0; // where to start cropping from
int scrollerValue = 1; // what value is currently indicated
float previousX = 0; // previous X location, used to calculate difference in pixels scrolled over
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// get the image view we want
imageView = (ImageView) findViewById(R.id.imageView);
// set the touch listener on the image
imageView.setOnTouchListener(this);
// get the text
textView = (TextView) findViewById(R.id.textView);
// grab the uncut original image
scrollerImage = BitmapFactory.decodeResource(getResources(), R.drawable.img1);
// render the image
RenderImage();
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
/**
* this method will render the part of the image that should be
* displayed, it also calculates the scroller value
*/
private void RenderImage()
{
// create the cropped version we want to show and render it
Bitmap renderImg = Bitmap.createBitmap(scrollerImage, scrollerStartPos,0,SCROLLER_WIDTH, SCROLLER_HEIGHT);
// set imageView to be the bitmap
imageView.setImageBitmap(renderImg);
// update scroller value
if (scrollerStartPos < 180*2)
scrollerValue = 1;
else if (scrollerStartPos < 180*4)
scrollerValue = 2;
else
scrollerValue = 3;
// render scroller value on the text
textView.setText("The scroller value is: " + scrollerValue);
}
/**
* called when imageView is touched
*/
@Override
public boolean onTouch(View v, MotionEvent event) {
// the user just touched the imageView, record the x location
if (event.getAction() == MotionEvent.ACTION_DOWN) {
previousX = (int) event.getRawX();
}
// the user is moving over (scrolling), act accordingly!
else if (event.getAction() == MotionEvent.ACTION_MOVE) {
float x = event.getRawX();
// move start position accordingly
scrollerStartPos -= x - previousX;
// make sure scroller is within range
scrollerStartPos = Math.max(scrollerStartPos, 0);
scrollerStartPos = Math.min(scrollerStartPos, scrollerImage.getWidth() - SCROLLER_WIDTH);
// update the previous x value
previousX = x;
// update image
RenderImage();
}
return true;
}
}
我正在开发相机应用程序,我的图像的数字从 1 到 35 我想实现以下结构来控制缩放功能,但我陷入了用户界面实现。
应用程序要求是,用户可以从左到右或从右到左滚动图像,select 图像中的一个数字,这样我就可以使用该数字并设置缩放。
如何滚动图像并获取用户的输入?
是否有可用的库?
查看这个名为 Horizontal Picker 的库 -> https://github.com/blazsolar/HorizontalPicker
您可以轻松地将标签从 "Item " 更改为您想要的索引
将图像裁剪成您想要显示的大小并在您想要的位置居中,注册以在图像视图上拖动事件,找出用户滚动了多少并根据该值调整裁剪中心。计算用户必须滚动多少才能更改您的号码并相应地更改 int 值。
查看 https://developer.android.com/training/gestures/scale.html 了解有关处理拖动事件的更多信息。
如果你还需要的话,我今晚回家后会post编码
** 我无法添加图像,因为我最近(重新)开始使用堆栈溢出,请参阅下面 link 中的图像以获取 [A]、[B]...** http://i.stack.imgur.com/9b7kg.png
解释:
假设您有一个像 [A] 这样的图像,并且您想要实现自定义滚动。 理论上,将它分成[B]中的部分。我在 imageview 上实现滚动的方法是从图像中创建一个位图,只覆盖它的一部分(对我来说,图像大小为 5*180x 180,我希望位图显示为 3*180 x 180,所以它最多只能覆盖3个框(参考[C])。然后我会在activity中添加一个OnTouchListener并监听imageView上的触摸,当imageView被拖动时,注册差异并创建一个新的相应地调整图像[D],确保新的位图图像不会失焦。请看下面我的实现以供参考。
实施
我的布局文件
<TextView android:text="@string/hello_world" android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentStart="true"
android:textAlignment="center"
android:id="@+id/textView" />
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:id="@+id/imageView"
android:layout_alignParentStart="true"
android:layout_alignEnd="@+id/textView"
android:layout_alignParentBottom="true" />
</RelativeLayout>
我的Activity
// register as View.OnTouchListener to recieve updates when an object
// registered to emit the touch event gets touched
public class MainActivity extends Activity implements View.OnTouchListener {
static final int SCROLLER_WIDTH = 180*3;
static final int SCROLLER_HEIGHT = 180;
ImageView imageView; // the imageView to display the rendered image
Bitmap scrollerImage; // the original, uncut, image
TextView textView; // textView to display current indicator
int scrollerStartPos = 0; // where to start cropping from
int scrollerValue = 1; // what value is currently indicated
float previousX = 0; // previous X location, used to calculate difference in pixels scrolled over
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// get the image view we want
imageView = (ImageView) findViewById(R.id.imageView);
// set the touch listener on the image
imageView.setOnTouchListener(this);
// get the text
textView = (TextView) findViewById(R.id.textView);
// grab the uncut original image
scrollerImage = BitmapFactory.decodeResource(getResources(), R.drawable.img1);
// render the image
RenderImage();
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
/**
* this method will render the part of the image that should be
* displayed, it also calculates the scroller value
*/
private void RenderImage()
{
// create the cropped version we want to show and render it
Bitmap renderImg = Bitmap.createBitmap(scrollerImage, scrollerStartPos,0,SCROLLER_WIDTH, SCROLLER_HEIGHT);
// set imageView to be the bitmap
imageView.setImageBitmap(renderImg);
// update scroller value
if (scrollerStartPos < 180*2)
scrollerValue = 1;
else if (scrollerStartPos < 180*4)
scrollerValue = 2;
else
scrollerValue = 3;
// render scroller value on the text
textView.setText("The scroller value is: " + scrollerValue);
}
/**
* called when imageView is touched
*/
@Override
public boolean onTouch(View v, MotionEvent event) {
// the user just touched the imageView, record the x location
if (event.getAction() == MotionEvent.ACTION_DOWN) {
previousX = (int) event.getRawX();
}
// the user is moving over (scrolling), act accordingly!
else if (event.getAction() == MotionEvent.ACTION_MOVE) {
float x = event.getRawX();
// move start position accordingly
scrollerStartPos -= x - previousX;
// make sure scroller is within range
scrollerStartPos = Math.max(scrollerStartPos, 0);
scrollerStartPos = Math.min(scrollerStartPos, scrollerImage.getWidth() - SCROLLER_WIDTH);
// update the previous x value
previousX = x;
// update image
RenderImage();
}
return true;
}
}