Search...

Sunday, November 13, 2011

How to use drag/flip on ImageSwitcher with Gallery View in android


Gallery and ImageSwitcher, in combination, we realize a simple browser image features.
Photo Gallery you can drag in addition to switching, I joined the setOnTouchListener events ImageSwitcher control to achieve, so ImageSwitcher switch can also drag images. This example is still using Java 's reflection mechanism to automatically read the resource in the picture.


Step1: Create layout with Gallery View and Image Switcher View.

<? 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">
<ImageSwitcher android: id = "@ + id / switcher"
android: layout_width = "match_parent" android: layout_height = "match_parent" />
<Gallery android: id = "@ + id / gallery"
android: background = "# 55000000"
android: layout_width = "match_parent"
android: layout_alignParentBottom = "true"
android: layout_alignParentLeft = "true"
android: gravity = "center_vertical"
android: spacing = "16dp" android: layout_height = "100dp" />
</ RelativeLayout>



Step2: Use the following source code

Program source code is as follows:
view plaincopy to clipboardprint?
package com.testImageView;
import java.lang.reflect.Field;
import java.util.ArrayList;
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.view.ViewGroup;
import android.view.animation.AnimationUtils;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.Gallery.LayoutParams;
import android.widget.ViewSwitcher.ViewFactory;
public class testImageView extends Activity implements ViewFactory {
private ImageSwitcher is;
private Gallery gallery;
private int downX, upX;
private ArrayList <Integer> imgList = new ArrayList <Integer> ();// Image ID
@ Override
protected void onCreate (Bundle savedInstanceState) {
/ / TODO Auto-generated method stub
super.onCreate (savedInstanceState);
setContentView (R.layout.main);
/ / Use reflection to obtain a picture ID resources
Field [] fields = R.drawable.class.getDeclaredFields ();
for (Field field: fields)
{
if (! "icon". equals (field.getName ()))// pictures outside apart from icon
{
int index = 0;
try {
index = field.getInt (R.drawable.class);
} Catch (IllegalArgumentException e) {
/ / TODO Auto-generated catch block
e.printStackTrace ();
} Catch (IllegalAccessException e) {
/ / TODO Auto-generated catch block
e.printStackTrace ();
}
/ / Save the image ID
imgList.add (index);
}
}
/ / Set ImageSwitcher control
is = (ImageSwitcher) findViewById (R.id.switcher);
is.setFactory (this);
is.setInAnimation (AnimationUtils.loadAnimation (this,
android.R.anim.fade_in));
is.setOutAnimation (AnimationUtils.loadAnimation (this,
android.R.anim.fade_out));
is.setOnTouchListener (new OnTouchListener () {
/ *
* In ImageSwitcher can switch on the control slide image
* /
@ Override
public boolean onTouch (View v, MotionEvent event) {
if (event.getAction () == MotionEvent.ACTION_DOWN)
{
downX = (int) event.getX ();// get the coordinates when pressed
return true;
}
else if (event.getAction () == MotionEvent.ACTION_UP)
{
upX = (int) event.getX ();// get the coordinates when released
int index = 0;
if (upX-downX> 100) / / left onto the right, ie, on the one before
{
/ / If this is the first, then go to the tail
if (gallery.getSelectedItemPosition () == 0)
index = gallery.getCount () -1;
else
index = gallery.getSelectedItemPosition () -1;
}
else if (downX-upX> 100) / / right onto the left, that is, after watching a
{
/ / If this is the last, then go to the first
if (gallery.getSelectedItemPosition ()==( gallery.getCount () -1))
index = 0;
else
index = gallery.getSelectedItemPosition () +1;
}
/ / Change the gallery image selected, automatically triggering the setOnItemSelectedListener ImageSwitcher
gallery.setSelection (index, true);
return true;
}
return false;
}
});
/ / Set the gallery control
gallery = (Gallery) findViewById (R.id.gallery);
gallery.setAdapter (new ImageAdapter (this));
gallery.setOnItemSelectedListener (new OnItemSelectedListener () {
@ Override
public void onItemSelected (AdapterView <?> arg0, View arg1,
int position, long arg3) {
is.setImageResource (imgList.get (position));
}
@ Override
public void onNothingSelected (AdapterView <?> arg0) {
/ / TODO Auto-generated method stub
}
});
}
/ / Set ImgaeSwitcher
@ Override
public View makeView () {
ImageView i = new ImageView (this);
i.setBackgroundColor (0xFF000000);
i.setScaleType (ImageView.ScaleType.CENTER); / / center
i.setLayoutParams (new ImageSwitcher.LayoutParams (/ / adaptive image size
LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
return i;
}
public class ImageAdapter extends BaseAdapter {
public ImageAdapter (Context c) {
mContext = c;
}
public int getCount () {
return imgList.size ();
}
public Object getItem (int position) {
return position;
}
public long getItemId (int position) {
return position;
}
public View getView (int position, View convertView, ViewGroup parent) {
ImageView i = new ImageView (mContext);
i.setImageResource (imgList.get (position));
i.setAdjustViewBounds (true);
i.setLayoutParams (new Gallery.LayoutParams (
LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
return i;
}
private Context mContext;
}
}

1 comment:

  1. Code needs to be more presentable. Copy pasting results errors due to unintended white spaces.

    ReplyDelete