2011-02-24 88 views
12

我試圖實現一個簡單的圖像庫,其中我有一次要在設備屏幕上顯示的圖像。當我們從左向右滑動屏幕時,它應該顯示下一個圖像。
爲此,我實現了一個視圖鰭狀肢併爲其添加了圖像視圖。
但我不知道如何捕捉那個滑動事件。
有誰能告訴我一個例子嗎?如何滑動圖像

+0

爲什麼要捕捉那個滑動事件? – 2011-02-24 07:35:10

+0

我想抓住那個滑動事件,以便基於滑動我可以將圖像從左到右或反之亦然 – WISH 2011-02-24 08:01:58

回答

0

你爲什麼不使用畫廊插件實現它.....

Here is the gallery tutorial....

感謝......

+0

Gallery已棄用:(http://developer.android.com/reference/android/widget/Gallery。 html – 2012-07-24 00:51:07

1

您想使用ViewPager可供Android Support Jar。這裏是一個教程:http://thepseudocoder.wordpress.com/2011/10/05/android-page-swiping-using-viewpager/

你不想使用Gallery作爲一些建議,因爲它不推薦使用。然而從documentation他們建議ViewPagerHorizantleScrollView相對容易地解決這個問題:

This class is deprecated. 
    This widget is no longer supported. Other horizontally scrolling widgets include 
    HorizontalScrollView and ViewPager from the support library. 
+0

IMO ViewPager並不適用於所有情況,它通常與片段相關聯,如果你只想用一個單獨的片段來滑動圖片,每次滑動看起來都是過度的 – 2012-08-09 17:28:19

14

我需要爲我的應用程序一樣的東西,並使用了ViewPagerhttp://blog.sqisland.com/2012/09/android-swipe-image-viewer-with-viewpager.html

以前我使用的ImageSwitcher組合與GestureDetectorhttp://blog.sqisland.com/2012/07/android-swipe-image-viewer.html

代碼ViewPager是簡單得多,經驗是好得多因爲th當您的手指滑過屏幕時,圖像會滑動。我直接創建了ImageView,不需要片段。

+0

這應該是被接受的答案!你剛剛用你的[解決方案](https://github.com/chiuki/android-swipe-image-viewer)並節省了我幾小時的時間,非常感謝你! – Emzor 2016-02-09 10:25:26

1

你可以做到這樣的,它切切實實的工作沒有任何視圖

public class Swipe extends Activity implements OnClickListener { 

private static final int SWIPE_MIN_DISTANCE = 120; 
//private static final int SWIPE_MAX_OFF_PATH = 250; 
private static final int SWIPE_THRESHOLD_VELOCITY = 200; 
final GestureDetector gdt = new GestureDetector(new GestureListener()); 
private GestureDetector gestureDetector; 
ImageView img; 


View.OnTouchListener gestureListener; 

@Override 
public void onCreate(Bundle savedInstanceState) { 

    super.onCreate(savedInstanceState); 
    setContentView(R.layout.swipe); 
    img = (ImageView)findViewById(R.id.imageView1swipe); 

    img.setOnTouchListener(new OnTouchListener() { 
     public boolean onTouch(final View view, final MotionEvent event) { 
      // TODO Auto-generated method stub 
      gdt.onTouchEvent(event); 
      //Log.i("Hello my Log 1","How dfgfd are you"); 
      return true; 
     } 
    }); 

,並在您的.java聲明此方法

private class GestureListener extends SimpleOnGestureListener { 
     @Override 
     public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, 
       float velocityY) { 
      Log.i("Hello my Log 2","How dfgfd are you"); 
      if (e1.getX() - e2.getX() > SWIPE_MIN_DISTANCE 
        && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) { 

       Log.i("dfsd", "Right to left"); 
       return false; // Right to left 
      } else if (e2.getX() - e1.getX() > SWIPE_MIN_DISTANCE 
        && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) { 
       return false; // Left to right 
      } 

      if (e1.getY() - e2.getY() > SWIPE_MIN_DISTANCE 
        && Math.abs(velocityY) > SWIPE_THRESHOLD_VELOCITY) { 
       return false; // Bottom to top 
      } else if (e2.getY() - e1.getY() > SWIPE_MIN_DISTANCE 
        && Math.abs(velocityY) > SWIPE_THRESHOLD_VELOCITY) { 
       return false; // Top to bottom 
      } 

      return false; 
     }' 

可能this會幫你安排所有的重擊圖片

+0

請注意,你應該在這裏發佈答案的有用點,在這個網站上,或者你的崗位風險被刪除了[參見常見問題解答,它提到的只是「比鏈接更多的答案」](http://stackoverflow.com/faq#deletion)。但願只作爲'參考'。答案應該獨立,不需要鏈接。 – 2013-02-27 06:38:00

3

你也可以這樣做,也可以不使用視圖擋板

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="match_parent" 
android:layout_height="match_parent"> 

<ImageView 

       android:layout_width="fill_parent" 

       android:layout_height="fill_parent" 

       android:layout_gravity="center" 

       android:gravity="center" 

       android:layout_margin="10dip" 

       android:id="@+id/image_place_holder" 
       /> 

</RelativeLayout> 

活動課

public class MainActivity extends Activity { 

    private Integer[] mImageIds = { R.drawable.img1, R.drawable.img2, 
     R.drawable.img3 }; 
private static final String DEBUG_TAG = "MainActivity "; 
ImageView imageView; 
float startXValue = 1; 


@Override 
public void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    requestWindowFeature(Window.FEATURE_NO_TITLE); 
    setContentView(R.layout.gallery); 
    imageView = (ImageView) findViewById(R.id.image_place_holder); 
    imageView.setImageResource(mImageIds[num]); 
} 

@Override 
public boolean onTouchEvent(MotionEvent event) {  
    float endXValue = 0; 
    float x1 = event.getAxisValue(MotionEvent.AXIS_X); 
    int action = MotionEventCompat.getActionMasked(event); 
    switch (action) { 
     case (MotionEvent.ACTION_DOWN): 
      startXValue = event.getAxisValue(MotionEvent.AXIS_X); 

      return true; 

     case (MotionEvent.ACTION_UP): 
      endXValue = event.getAxisValue(MotionEvent.AXIS_X); 
      if (endXValue > startXValue) { 
       if (endXValue - startXValue > 100) { 
       System.out.println("Left-Right"); 
       imageView.setImageResource(mImageIds[2]); 
       } 
      }else { 
       if (startXValue -endXValue> 100) { 
       System.out.println("Right-Left"); 
       imageView.setImageResource(mImageIds[0]); 

        } 
         } 
     return true; 


      default: 
     return super.onTouchEvent(event); 
    } 

} 

} 
1

我這是怎麼實現的:

package com.demoimageslider; 

import java.util.List; 
import java.util.Vector; 

import com.nineoldandroids.view.ViewHelper; 

import android.os.Bundle; 
import android.support.v4.app.Fragment; 
import android.support.v4.app.FragmentActivity; 
import android.support.v4.app.FragmentManager; 
import android.support.v4.app.FragmentPagerAdapter; 
import android.support.v4.view.ViewPager; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 
import android.widget.ImageView; 

public class MainActivity extends FragmentActivity { 

    private PagerAdapter mPagerAdapter; 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_main); 

     this.initialisePaging(); 
    } 

    private void initialisePaging() { 

     List<Fragment> fragments = new Vector<Fragment>(); 
     fragments.add(Fragment.instantiate(this, Tab1Fragment.class.getName())); 
     fragments.add(Fragment.instantiate(this, Tab2Fragment.class.getName())); 
     fragments.add(Fragment.instantiate(this, Tab3Fragment.class.getName())); 
     this.mPagerAdapter = new PagerAdapter(
       super.getSupportFragmentManager(), fragments); 

     ViewPager pager = (ViewPager) super.findViewById(R.id.pager); 
     pager.setAdapter(this.mPagerAdapter); 
     pager.setPageTransformer(true, new ZoomOutPageTransformer()); 
    } 

    public static class Tab1Fragment extends Fragment { 

     public View onCreateView(LayoutInflater inflater, ViewGroup container, 
       Bundle savedInstanceState) { 
      if (container == null) { 
       return null; 
      } 
      return (ImageView) inflater.inflate(R.layout.tab_frag1_layout, 
        container, false); 
     } 
    } 

    public static class Tab2Fragment extends Fragment { 

     public View onCreateView(LayoutInflater inflater, ViewGroup container, 
       Bundle savedInstanceState) { 
      if (container == null) { 
       return null; 
      } 
      return (ImageView) inflater.inflate(R.layout.tab_frag2_layout, 
        container, false); 
     } 
    } 

    public static class Tab3Fragment extends Fragment { 

     public View onCreateView(LayoutInflater inflater, ViewGroup container, 
       Bundle savedInstanceState) { 
      if (container == null) { 
       return null; 
      } 
      return (ImageView) inflater.inflate(R.layout.tab_frag3_layout, 
        container, false); 
     } 
    } 

    public static class PagerAdapter extends FragmentPagerAdapter { 

     private List<Fragment> fragments; 

     public PagerAdapter(FragmentManager fm, List<Fragment> fragments) { 
      super(fm); 
      this.fragments = fragments; 
     } 

     @Override 
     public Fragment getItem(int position) { 
      return this.fragments.get(position); 
     } 

     @Override 
     public int getCount() { 
      return this.fragments.size(); 
     } 
    } 

    public static class ZoomOutPageTransformer implements 
      ViewPager.PageTransformer { 
     private static final float MIN_SCALE = 0.85f; 
     private static final float MIN_ALPHA = 0.5f; 

     public void transformPage(View view, float position) { 
      int pageWidth = view.getWidth(); 
      int pageHeight = view.getHeight(); 

      if (position < -1) { // [-Infinity,-1) 
       // This page is way off-screen to the left. 
       // view.setAlpha(0); 
       ViewHelper.setAlpha(view, 0); 

      } else if (position <= 1) { // [-1,1] 
       // Modify the default slide transition to shrink the page as 
       // well 
       float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position)); 
       float vertMargin = pageHeight * (1 - scaleFactor)/2; 
       float horzMargin = pageWidth * (1 - scaleFactor)/2; 
       if (position < 0) { 
        // view.setTranslationX(horzMargin - vertMargin/2); 
        ViewHelper.setTranslationX(view, horzMargin - vertMargin 
          /2); 
       } else { 
        // view.setTranslationX(-horzMargin + vertMargin/2); 
        ViewHelper.setTranslationX(view, -horzMargin + vertMargin 
          /2); 
       } 

       // Scale the page down (between MIN_SCALE and 1) 
       // view.setScaleX(scaleFactor); 
       // view.setScaleY(scaleFactor); 
       ViewHelper.setScaleX(view, scaleFactor); 
       ViewHelper.setScaleY(view, scaleFactor); 

       // Fade the page relative to its size. 
       // view.setAlpha(MIN_ALPHA + 
       // (scaleFactor - MIN_SCALE)/
       // (1 - MIN_SCALE) * (1 - MIN_ALPHA)); 

       ViewHelper.setAlpha(view, MIN_ALPHA + (scaleFactor - MIN_SCALE) 
         /(1 - MIN_SCALE) * (1 - MIN_ALPHA)); 

      } else { // (1,+Infinity] 
       // This page is way off-screen to the right. 
       // view.setAlpha(0); 
       ViewHelper.setAlpha(view, 0); 
      } 
     } 
    } 
} 

我用nineoldroids庫,以支持在較舊的Android版本的效果。

4

您可以通過使用ViewPager延伸PagerAdapter ......這樣

public class ImageAdapter extends PagerAdapter { 
    private Context context; 
    private int[] GalImages = new int[] { 
      R.drawable.cap8, R.drawable.cap2, R.drawable.cap3, R.drawable.cap1,R.drawable.cap5, 
      R.drawable.cap6, R.drawable.cap7, R.drawable.cap9,R.drawable.cap4, 
      R.drawable.cap10 

    }; 
    ImageAdapter(Context context) 
    { 
     this.context=context; 
    } 

    @Override 
    public int getCount() { 
     return GalImages.length; 
    } 

    @Override 
    public boolean isViewFromObject(View view, Object object) { 
     return view == object; 
    } 
    @Override 
    public Object instantiateItem(ViewGroup container, int position) { 
     ImageView imageView = new ImageView(context); 
     int padding = context.getResources().getDimensionPixelSize(R.dimen.activity_horizontal_margin); 
     imageView.setPadding(padding, padding, padding, padding); 
     imageView.setScaleType(ImageView.ScaleType.FIT_CENTER); 
     imageView.setImageResource(GalImages[position]); 
     container.addView(imageView, 0); 
     return imageView; 
    } 
    @Override 
    public void destroyItem(ViewGroup container, int position, Object object) { 
     container.removeView((ImageView) object); 
    } 
} 

XML代碼......

<android.support.v4.view.ViewPager 
     android:id="@+id/mvieww" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" />