Android：滾動圖像視圖

28

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

我敢肯定，它可以細化一點，但它工作得很好。 :)

來源

2010-09-17 02:52:00 wirbly

+0

不客氣; =）））：=） – cV2 2012-08-23 08:27:06

+0

@wirbly：我使用這段代碼對我來說工作完美，但只是想在滾動左右的時候滾動一半的屏幕寬度。我們如何實現這一目標？我必須改變 – 2013-03-08 09:55:30

+0

你能發佈完整的工作代碼嗎？ – 2016-05-11 09:05:06

6

最簡單的方法是使用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");

這可能適用於大多數情況下/'普通應用程序'，但取決於您的具體情況。如果您將圖像作爲遊戲的可滾動背景進行討論，則可能對您沒有任何用處。

而不是一個HTML文件，你也可以直接加載圖像（PNG，JPG格式）。如果您不想使用變焦控制，請關閉它們。

來源

2010-06-17 04:52:57

+0

我這麼做很多，但是我對其他技術也有這個問題。我雖然爲你+1了！ – CQM 2011-07-11 01:54:49

+0

檢查此線程和評論，相關主題和解決方案（與代碼）：http://stackoverflow.com/questions/6476853/catiledlayer-alternative-for-android – 2011-07-11 05:38:16

+0

+1謝謝你的答案，但如何顯示圖像在內存中的WebView？ – Buffalo 2012-08-20 09:21:59

26

我搜索了這個代碼這麼長時間，所以我想分享的代碼，這個偉大的和平：

這個代碼是從一個活動，這對含有的ImageView的後端一個xml文件稱爲 'IMG'

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

做的工作完美的我... 水平&垂直滾動包括（啓用）

只有消極的一面是...你可以在圖片... 的邊緣滾動，但是這是沒有問題的我..並且花一些時間，你可以很容易地實現此功能:)

好運& &樂趣

來源

2010-06-20 23:31:14 cV2

+0

佈局是線性的還是相對的？ – reegan29 2015-05-07 07:40:20

+1

對不起，男人，不知道，但對於ImageView本身，它應該沒有任何區別:)祝你好運！ – cV2 2015-05-07 11:38:21

+1

很好的例子@ cV2，我用它來滾動我的pdf在imagView裏面。但是我做了很小的機會..在onTouch之前將mx，my，curX和curY聲明爲mx，我沒有聲明..:) – 2015-12-19 05:24:53

2

另一種方法是創建一個HorizontalScrollView，添加imageView進去，然後添加HorizontalScrollView成ScrollView。這允許你向上，向下，向左，向右滾動。

來源

2011-07-12 14:43:42

+3

我剛剛嘗試過，因爲它看起來不錯而且容易，但用戶體驗很不幸令人失望。滾動只發生在水平或垂直一次，不能發生在對角線上。更糟糕的是：假設垂直滾動是外部容器，那麼如果你做了一個不接近完美水平的對角滑動，即使滑動的垂直分量比其水平分量小得多，滾動也會垂直髮生。 – Balint 2014-02-01 21:03:22

0

嘿，夥計們發現了一個容易和100％可靠的解決方案作爲X先生上面提到的（如所提及的其他代碼不工作的工作在某些設備上或斷裂）簡單地使用滾動型由Android提供的，它需要的東西護理

像這樣

<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>

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

乾杯！

來源

2011-11-17 12:05:09 neelabh

+0

'ScrollView'只能垂直滾動。 – 2014-10-19 10:06:51

6

@wirbly非常感謝您的代碼，它的工作原理與我想要的完全一樣。但是當我第一次讀你的代碼時，我對你忘記定義的四個變量有點困惑。

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

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();

希望它有幫助。

來源

2012-04-16 16:38:05 David

12

這是我的固定它：P

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

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

來源

2014-11-10 23:42:47 frapeti

+1

簡單的解決方案..更喜歡。 – Santanu 2016-10-11 11:17:46

1

它爲我工作

<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>

來源

2016-07-14 06:05:13 Liena

Android：滾動圖像視圖

回答

相關問題