Android：滚动图像视图

Android: Scrolling an Imageview

提问by luca

I have an ImageView that is twice the height of a normale screen ( 960 dip). I would like to scroll it nicely up and down on the screen. The bottom of the screen should contain a button. I have tried various combinations of ScrollView and Imageviews without any success. I have also thinkered with the :isScrollContainer attribute without results. Anyone knows how to do this? Cheers, Luca

我有一个 ImageView，它是普通屏幕高度的两倍（960 倾角）。我想在屏幕上很好地上下滚动它。屏幕底部应包含一个按钮。我尝试了 ScrollView 和 Imageviews 的各种组合，但都没有成功。我也考虑过 :isScrollContainer 属性没有结果。任何人都知道如何做到这一点？干杯，卢卡

回答by wirbly

@cV2 Thank you so much for that code. It got me going in the direction I needed. Here's my modified version which stops scrolling at the edges of the image...

@cV2 非常感谢您提供该代码。它让我朝着我需要的方向前进。这是我的修改版本，它停止在图像边缘滚动......

    // set maximum scroll amount (based on center of image)
    int maxX = (int)((bitmapWidth / 2) - (screenWidth / 2));
    int maxY = (int)((bitmapHeight / 2) - (screenHeight / 2));

    // set scroll limits
    final int maxLeft = (maxX * -1);
    final int maxRight = maxX;
    final int maxTop = (maxY * -1);
    final int maxBottom = maxY;

    // set touchlistener
    ImageView_BitmapView.setOnTouchListener(new View.OnTouchListener()
    {
        float downX, downY;
        int totalX, totalY;
        int scrollByX, scrollByY;
        public boolean onTouch(View view, MotionEvent event)
        {
            float currentX, currentY;
            switch (event.getAction())
            {
                case MotionEvent.ACTION_DOWN:
                    downX = event.getX();
                    downY = event.getY();
                    break;

                case MotionEvent.ACTION_MOVE:
                    currentX = event.getX();
                    currentY = event.getY();
                    scrollByX = (int)(downX - currentX);
                    scrollByY = (int)(downY - currentY);

                    // scrolling to left side of image (pic moving to the right)
                    if (currentX > downX)
                    {
                        if (totalX == maxLeft)
                        {
                            scrollByX = 0;
                        }
                        if (totalX > maxLeft)
                        {
                            totalX = totalX + scrollByX;
                        }
                        if (totalX < maxLeft)
                        {
                            scrollByX = maxLeft - (totalX - scrollByX);
                            totalX = maxLeft;
                        }
                    }

                    // scrolling to right side of image (pic moving to the left)
                    if (currentX < downX)
                    {
                        if (totalX == maxRight)
                        {
                            scrollByX = 0;
                        }
                        if (totalX < maxRight)
                        {
                            totalX = totalX + scrollByX;
                        }
                        if (totalX > maxRight)
                        {
                            scrollByX = maxRight - (totalX - scrollByX);
                            totalX = maxRight;
                        }
                    }

                    // scrolling to top of image (pic moving to the bottom)
                    if (currentY > downY)
                    {
                        if (totalY == maxTop)
                        {
                            scrollByY = 0;
                        }
                        if (totalY > maxTop)
                        {
                            totalY = totalY + scrollByY;
                        }
                        if (totalY < maxTop)
                        {
                            scrollByY = maxTop - (totalY - scrollByY);
                            totalY = maxTop;
                        }
                    }

                    // scrolling to bottom of image (pic moving to the top)
                    if (currentY < downY)
                    {
                        if (totalY == maxBottom)
                        {
                            scrollByY = 0;
                        }
                        if (totalY < maxBottom)
                        {
                            totalY = totalY + scrollByY;
                        }
                        if (totalY > maxBottom)
                        {
                            scrollByY = maxBottom - (totalY - scrollByY);
                            totalY = maxBottom;
                        }
                    }

                    ImageView_BitmapView.scrollBy(scrollByX, scrollByY);
                    downX = currentX;
                    downY = currentY;
                    break;

            }

            return true;
        }
    });

I'm sure it could be refined a bit, but it works pretty well. :)

我敢肯定它可以稍微改进一下，但效果很好。:)

回答by cV2

I searched so long for this Code, so I wanted to share this great peace of code:

我找了这么久这段代码，所以我想分享一下这段代码的宁静：

this code is from an Activity, which has a xml fileon the backend containingan ImageViewcalled 'img'

此代码来自一个 Activity，它在后端有一个xml 文件，其中包含一个名为“img”的ImageView

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/img"
    android:scaleType="center"
    android:background="#fff"
    android:src="@drawable/picName"
/>

---

---

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.xml_name_layout);

    final ImageView switcherView = (ImageView) this.findViewById(R.id.img);

    switcherView.setOnTouchListener(new View.OnTouchListener() {

        public boolean onTouch(View arg0, MotionEvent event) {

            float curX, curY;

            switch (event.getAction()) {

                case MotionEvent.ACTION_DOWN:
                    mx = event.getX();
                    my = event.getY();
                    break;
                case MotionEvent.ACTION_MOVE:
                    curX = event.getX();
                    curY = event.getY();
                    switcherView.scrollBy((int) (mx - curX), (int) (my - curY));
                    mx = curX;
                    my = curY;
                    break;
                case MotionEvent.ACTION_UP:
                    curX = event.getX();
                    curY = event.getY();
                    switcherView.scrollBy((int) (mx - curX), (int) (my - curY));
                    break;
            }

            return true;
        }
    });

}

did the job perfectly for me... horizontal & vertical scrolling included(enabled)

为我做了完美的工作...... 包括水平和垂直滚动（启用）

only negative side is... you can scroll over the edge of the picture... but this is no problem for me.. and spending some time you could easily implement this feature :)

唯一的缺点是......你可以滚动图片的边缘......但这对我来说没问题......花一些时间你可以轻松实现这个功能:)

good luck && have fun

祝你好运&&玩得开心

回答by frapeti

this is how I fixed it :p

这就是我修复它的方式：p

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:scrollbarAlwaysDrawVerticalTrack="true">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:contentDescription="Specs"
        android:scrollbars="vertical"
        android:src="@drawable/image"/>
</ScrollView>

回答by hukeping

@wirbly Thank you so much for your code, it works exactly the way I want. But when i first read your code, I was a little confused about the four variables that you forgot to define .

@wirbly 非常感谢您的代码，它完全按照我想要的方式工作。但是当我第一次阅读您的代码时，我对您忘记定义的四个变量感到有些困惑。

So, i want to add the definition for the code to make it clearer.

所以，我想添加代码的定义以使其更清晰。

Resources res=getResources();
Bitmap mBitmap = BitmapFactory.decodeResource(res, R.drawable.p_1920x1080); 
BitmapDrawable bDrawable = new BitmapDrawable(res, mBitmap);

//get the size of the image and  the screen
int bitmapWidth = bDrawable.getIntrinsicWidth();
int bitmapHeight = bDrawable.getIntrinsicHeight();
int screenWidth = this.getWindowManager().getDefaultDisplay().getWidth();  
int screenHeight = this.getWindowManager().getDefaultDisplay().getHeight();

Hope it's helpful.

希望它有帮助。

回答by Mathias Conradt

The easiest way is imho to use a webview and load the image into it via a local html file. This way you will also automatically get the zoom controls if you want to use them. For a large image (i.e. if it's 1000 or 3000 px wide) you will notice that Android (Coliris) isn't very good at displaying large zoomed images very sharp, even if the original images is sharp and uncompressed). This is a known issue. The solution for that is to break down the large image into smaller tiles and put them together again via html (div's or table). I use this approach to provide a subway map (larger than the screen and scrollable) to the user.

最简单的方法是使用 webview 并通过本地 html 文件将图像加载到其中。这样，如果您想使用它们，您还将自动获得缩放控件。对于大图像（即，如果它是 1000 或 3000 像素宽），您会注意到 Android (Coliris) 不太擅长显示非常清晰的大缩放图像，即使原始图像清晰且未压缩）。这是一个已知的问题。解决方案是将大图像分解为较小的图块，然后通过 html（div 或表格）将它们重新组合在一起。我使用这种方法向用户提供地铁地图（大于屏幕且可滚动）。

    WebView webView = (WebView)findViewById(R.id.webView);
    webView.getSettings().setBuiltInZoomControls(true);
    webView.getSettings().setUseWideViewPort(true);
    webView.getSettings().setDefaultZoom(WebSettings.ZoomDensity.FAR);

    webView.loadUrl( "content://com.myapp.android.localfile/sdcard/myappdata/common/mtr_map.html");

This might work for most cases / 'regular apps', although depends on your particular case. If you are talking about a image as a scrollable background of a game, it might not be useful for you.

这可能适用于大多数情况/“常规应用程序”，但取决于您的特定情况。如果您将图像作为游戏的可滚动背景来讨论，那么它可能对您没有用处。

Instead of a html file, you could also load the image directly (png, jpg). If you don't want the zoom control, just turn them off.

除了 html 文件，您还可以直接加载图像（png、jpg）。如果您不想要缩放控制，只需将它们关闭即可。

回答by Mr X

Another way is to create a HorizontalScrollView, add the imageViewinto it and then add the HorizontalScrollViewinto a ScrollView. This allows you to scroll up, down, left, right.

另一种方法是创建一个HorizontalScrollView，将imageView加入其中，然后将 加入HorizontalScrollView到 a 中ScrollView。这允许您向上、向下、向左、向右滚动。

回答by Liena

it works for me

这个对我有用

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="10dp">

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

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/img"
            android:scaleType="centerCrop"
            android:adjustViewBounds="true"/>

        <Button
            style="@style/btn"
            android:id="@+id/btn"
            android:layout_height="60dp"
            android:layout_marginTop="20dp"
            android:background="@drawable/btn"
            android:onClick="click"
            android:text="text" />
    </LinearLayout>

</ScrollView>

回答by neelabh

hey guys found an easy and 100% reliable solution as Mr X mentioned above(as the other codes mentioned weren't working working on some devices or breaking) Simply use ScrollView provided by android and it takes care of stuff

嘿伙计们找到了一个简单且 100% 可靠的解决方案，正如上面提到的 X 先生（因为提到的其他代码在某些设备上不起作用或损坏）只需使用 android 提供的 ScrollView 就可以了

something like this

像这样的东西

<ScrollView android:layout_width="fill_parent" android:id="@+id/scrollView1"
        android:layout_height="wrap_content" android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true" android:layout_above="@+id/button1"
        android:layout_alignParentRight="true" android:scrollbarAlwaysDrawVerticalTrack="true">
        <LinearLayout android:id="@+id/linearLayout1"
            android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="center_horizontal">
            <ImageView android:src="@android:drawable/ic_menu_report_image"
                android:layout_height="wrap_content" android:id="@+id/imageView1"
                android:layout_width="wrap_content"></ImageView>
        </LinearLayout>
    </ScrollView>

and in oncreate something like this

并在oncreate这样的东西

if (mImageName != null) {
        InputStream is = null;
        try {
            is = this.getResources().getAssets().open("mathematics/"+mImageName);
        } catch (IOException e) {
        }
        Bitmap image = BitmapFactory.decodeStream(is);

        mImageView.setImageBitmap(image);
}

Cheers!

干杯!