Quiero crear una presentación de imágenes en android.ejemplo de presentación de diapositivas en android?
Tengo muchas imágenes en android GridView ahora quiero abrir una presentación de diapositivas manual si se hace clic en cualquier imagen para poder verla moviendo el dedo hacia la izquierda o hacia la derecha y las imágenes anteriores como Android incorporado en la galería.
cualquiera me guía cómo lograr esto?
cualquier ayuda sería apreciada.
puede encontrar ejemplo de Gallery1 y Gallery2 en ApiDemos:
c:\android-sdk-windows\samples\android-7\ApiDemos\src\com\example\android\apis\view\
probar este código si está utilizando ViewFlipper para mostrar imágenes
slideShowBtn.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
runnable = new Runnable() {
@Override
public void run() {
handler.postDelayed(runnable, 3000);
imageFrame.showNext();
}
};
handler.postDelayed(runnable, 500);
}
});
Para retirar el dispositivo handler.removeCallbacks(runnable);
public class PhotoSlideShowActivity 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;
private GestureDetector gestureDetector;
View.OnTouchListener gestureListener;
ViewFlipper imageFrame;
RelativeLayout slideShowBtn;
Handler handler;
Runnable runnable;
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.photo_slideshow_main);
imageFrame = (ViewFlipper) findViewById(R.id.imageFrames);
//get sd card path for images
File parentFolder = new
File(Environment.getExternalStorageDirectory()
.getAbsolutePath()
+ "/images");
addFlipperImages(imageFrame, parentFolder);
// Gesture detection
gestureDetector = new GestureDetector(new MyGestureDetector());
gestureListener = new View.OnTouchListener() {
public boolean onTouch(View v, MotionEvent event) {
if (gestureDetector.onTouchEvent(event))
return true;
else
return false;
}
};
handler = new Handler();
imageFrame.setOnClickListener(PhotoSlideShowActivity.this);
imageFrame.setOnTouchListener(gestureListener);
slideShowBtn = (RelativeLayout) findViewById(R.id.slideShowBtn);
slideShowBtn.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
runnable = new Runnable() {
@Override
public void run() {
handler.postDelayed(runnable, 3000);
imageFrame.showNext();
}
};
handler.postDelayed(runnable, 500);
}
});
}
private void addFlipperImages(ViewFlipper flipper, File parent) {
int imageCount = parent.listFiles().length;
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.FILL_PARENT,
RelativeLayout.LayoutParams.FILL_PARENT);
for (int count = 0; count < imageCount - 1; count++) {
ImageView imageView = new ImageView(this);
Bitmap imbm = BitmapFactory.decodeFile(parent.listFiles()[count]
.getAbsolutePath());
imageView.setImageBitmap(imbm);
imageView.setLayoutParams(params);
flipper.addView(imageView);
}
}
class MyGestureDetector extends SimpleOnGestureListener {
@SuppressWarnings("static-access")
@Override
public boolean onSingleTapConfirmed(MotionEvent e) {
// TODO Auto-generated method stub
slideShowBtn = (RelativeLayout) findViewById(R.id.slideShowBtn);
slideShowBtn.setVisibility(slideShowBtn.VISIBLE);
handler.removeCallbacks(runnable);
runnable = new Runnable() {
@Override
public void run() {
slideShowBtn.setVisibility(slideShowBtn.INVISIBLE);
}
};
handler.postDelayed(runnable, 2000);
return true;
}
@SuppressWarnings("static-access")
@Override
public boolean onSingleTapUp(MotionEvent e) {
// TODO Auto-generated method stub
slideShowBtn = (RelativeLayout) findViewById(R.id.slideShowBtn);
slideShowBtn.setVisibility(slideShowBtn.VISIBLE);
handler.removeCallbacks(runnable);
runnable = new Runnable() {
@Override
public void run() {
slideShowBtn.setVisibility(slideShowBtn.INVISIBLE);
}
};
handler.postDelayed(runnable, 2000);
return true;
}
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
float velocityY) {
try {
if (Math.abs(e1.getY() - e2.getY()) > SWIPE_MAX_OFF_PATH)
return false;
// right to left swipe
if (e1.getX() - e2.getX() > SWIPE_MIN_DISTANCE
&& Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
handler.removeCallbacks(runnable);
imageFrame.setInAnimation(inFromRightAnimation());
imageFrame.setOutAnimation(outToLeftAnimation());
imageFrame.showNext();
} else if (e2.getX() - e1.getX() > SWIPE_MIN_DISTANCE
&& Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
handler.removeCallbacks(runnable);
imageFrame.setInAnimation(inFromLeftAnimation());
imageFrame.setOutAnimation(outToRightAnimation());
imageFrame.showPrevious();
}
} catch (Exception e) {
// nothing
}
return false;
}
}
@Override
public void onClick(View view) {
}
private Animation inFromRightAnimation() {
Animation inFromRight = new TranslateAnimation(
Animation.RELATIVE_TO_PARENT, +1.2f,
Animation.RELATIVE_TO_PARENT, 0.0f,
Animation.RELATIVE_TO_PARENT, 0.0f,
Animation.RELATIVE_TO_PARENT, 0.0f);
inFromRight.setDuration(500);
inFromRight.setInterpolator(new AccelerateInterpolator());
return inFromRight;
}
private Animation outToLeftAnimation() {
Animation outtoLeft = new TranslateAnimation(
Animation.RELATIVE_TO_PARENT, 0.0f,
Animation.RELATIVE_TO_PARENT, -1.2f,
Animation.RELATIVE_TO_PARENT, 0.0f,
Animation.RELATIVE_TO_PARENT, 0.0f);
outtoLeft.setDuration(500);
outtoLeft.setInterpolator(new AccelerateInterpolator());
return outtoLeft;
}
private Animation inFromLeftAnimation() {
Animation inFromLeft = new TranslateAnimation(
Animation.RELATIVE_TO_PARENT, -1.2f,
Animation.RELATIVE_TO_PARENT, 0.0f,
Animation.RELATIVE_TO_PARENT, 0.0f,
Animation.RELATIVE_TO_PARENT, 0.0f);
inFromLeft.setDuration(500);
inFromLeft.setInterpolator(new AccelerateInterpolator());
return inFromLeft;
}
private Animation outToRightAnimation() {
Animation outtoRight = new TranslateAnimation(
Animation.RELATIVE_TO_PARENT, 0.0f,
Animation.RELATIVE_TO_PARENT, +1.2f,
Animation.RELATIVE_TO_PARENT, 0.0f,
Animation.RELATIVE_TO_PARENT, 0.0f);
outtoRight.setDuration(500);
outtoRight.setInterpolator(new AccelerateInterpolator());
return outtoRight;
}
}
Disposición
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ViewFlipper
android:id="@+id/imageFrames"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@android:drawable/screen_background_dark" >
</ViewFlipper>
<RelativeLayout
android:id="@+id/slideShowBtn"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:gravity="center" android:visibility="invisible">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#33FFFFFF"
android:gravity="center"
android:paddingLeft="1dp"
android:paddingRight="1dp"
android:paddingTop="1dp" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#66000000"
android:gravity="center" >
<TextView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="center"
android:text="Slideshow"
android:textSize="18dp" />
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>
es muy fácil aplicar la presentación con ViewFlipper en android.
coloque las imágenes en una carpeta dibujable y siga el código a continuación.
slide_show.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ViewFlipper
android:id="@+id/myflipper"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center" >
</ViewFlipper>
</LinearLayout>
SlideShowActivity.java
package com.example.viewpagerexample;
import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.widget.ImageView;
import android.widget.ViewFlipper;
public class SlideShowActivity extends Activity {
private ViewFlipper myViewFlipper;
private float initialXPoint;
int[] image = { R.drawable.one_full, R.drawable.two_full,
R.drawable.three_full, R.drawable.four_full, R.drawable.five_full,
R.drawable.six_full, R.drawable.seven_full, R.drawable.eight_full,
R.drawable.nine_full, R.drawable.ten_full };
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.slide_show);
myViewFlipper = (ViewFlipper) findViewById(R.id.myflipper);
for (int i = 0; i < image.length; i++) {
ImageView imageView = new ImageView(SlideShowActivity.this);
imageView.setImageResource(image[i]);
myViewFlipper.addView(imageView);
}
}
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
initialXPoint = event.getX();
break;
case MotionEvent.ACTION_UP:
float finalx = event.getX();
if (initialXPoint > finalx) {
if (myViewFlipper.getDisplayedChild() == image.length)
break;
myViewFlipper.showNext();
} else {
if (myViewFlipper.getDisplayedChild() == 0)
break;
myViewFlipper.showPrevious();
}
break;
}
return false;
}
}
Aquí las imágenes sólo se están cambiando mientras que el usuario es golpe.
Si desea deslizar de forma automática, con intervalos determinados agregue el código siguiente
myViewFlipper.setAutoStart(true);
myViewFlipper.setFlipInterval(3000);
myViewFlipper.startFlipping();
Funciona bien, pero ¿cómo escalar la imagen al centro? Veo un espacio en blanco en el lado izquierdo y derecho de la imagen. –
Hola, lo he hecho al agregar esta línea: imageView.setScaleType (ScaleType.CENTER_CROP); –
Tengo un problema, se está quedando sin memoria. ¿Hay alguna manera de resolver este error? Me sale 'Fallo al asignar una asignación de 52920012 bytes con 4194304 bytes libres y 31MB hasta OOM' –
Prueba estas por debajo de su código fuente:
MainActivity.java:
package com.example.splashanimation;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ViewFlipper;
public class MainActivity extends Activity {
int mFlipping = 0 ; // Initially flipping is off
Button mButton ; // Reference to button available in the layout to start and stop the flipper
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activtiy_main);
/** Click event handler for button */
ViewFlipper flipper = (ViewFlipper) findViewById(R.id.flipper1);
/** Start Flipping */
flipper.startFlipping();
mFlipping=1;
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}
activity_main .xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ViewFlipper
android:id="@+id/flipper1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:flipInterval="3000"
android:inAnimation="@anim/slide_in_right"
android:outAnimation="@anim/slide_in_left"
android:layout_centerInParent="true" >
<ImageView
android:src="@drawable/img1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="@string/str_img1"
android:layout_gravity="center_horizontal" />
<ImageView
android:src="@drawable/img2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="@string/str_img2"
android:layout_gravity="center_horizontal" />
<ImageView
android:src="@drawable/img3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="@string/str_img3"
android:layout_gravity="center_horizontal" />
<ImageView
android:src="@drawable/img4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@string/str_img4"
android:layout_gravity="center_horizontal" />
<ImageView
android:src="@drawable/img5"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="@string/str_img5"
android:layout_gravity="center_horizontal" />
</ViewFlipper>
</RelativeLayout>
En res/animal/slide_in_left.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/decelerate_interpolator" >
<translate
android:fromXDelta="0"
android:toXDelta="-100%p"
android:duration="500"/>
</set>
En res/animal/slide_in_right.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/decelerate_interpolator">
<translate
android:fromXDelta="100%p"
android:toXDelta="0"
android:duration="500"/>
</set>
sin tanto no son útiles quiero abrir imagen en el lado completo, luego deslice hacia la izquierda y hacia la derecha manualmente cómo abrir la imagen de pantalla completa con control deslizante? – UMAR
solo cree un ImageView a pantalla completa (establezca el ancho y alto para fill_parent) y agregue un SimpleGestureListener para reconocer el gesto onFling.cuando se reconoce, cambie la imagen en ImageView. – reflog
¿Qué pasa con la animación? ¿Qué hay de los gestos? ¿Qué pasa con el pellizco y el zoom? ¿girar? ¿cultivo? ¿Establecer como fondo de pantalla? ¡El problema es que la galería 3d no puede ser reutilizada! –