Android图片滑动的实现

  初学Android,不得不承认Android在UI效果实现上的强大,完全不在html5之下,不过这还得归功于Android丰富的SDK,以下尝试借助ViewFlipper类来实现通过手势滑动图片的效果,先上Java代码:


package com.example.sportdemo;

import android.app.Activity;
import android.os.Bundle;
import android.view.GestureDetector;
import android.view.GestureDetector.OnGestureListener;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.view.animation.AnimationUtils;
import android.widget.ViewFlipper;

public class MainActivity extends Activity implements OnTouchListener, OnGestureListener {
private ViewFlipper mViewFlipper;
private GestureDetector mGestureDetector;

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

mViewFlipper = (ViewFlipper) findViewById(R.id.viewFlipper);
mGestureDetector = new GestureDetector(this, this);
mViewFlipper.setOnTouchListener(this);
}

@Override
public boolean onTouch(View v, MotionEvent event) {
return mGestureDetector.onTouchEvent(event);
}

@Override
public boolean onDown(MotionEvent e) {
return true;
}

@Override
public void onShowPress(MotionEvent e) {

}

@Override
public boolean onSingleTapUp(MotionEvent e) {
return false;
}

@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2,
float distanceX, float distanceY) {
return false;
}

@Override
public void onLongPress(MotionEvent e) {

}

@Override
public boolean onFling(MotionEvent e1, MotionEvent e2,
float velocityX, float velocityY) {
if (e1.getX() > e2.getX()) {
showNext();
}
else if (e1.getX() < e2.getX()) {
showPrev();
}

return false;
}

private void showPrev() {
if (mViewFlipper.getChildCount() <= 1) {
return;
}

mViewFlipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_in));
mViewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_out));
mViewFlipper.showPrevious();
}

private void showNext() {
if (mViewFlipper.getChildCount() <= 1) {
return;
}

mViewFlipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_in));
mViewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_out));
mViewFlipper.showNext();
}
}

这里强调一点, onDown回调函数要返回true,否则onFling会不被调用。

Xml布局文件:


    <ViewFlipper
android:id="@+id/viewFlipper"
android:layout_width="match_parent"
android:layout_height="wrap_content" >

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

<ImageView
android:id="@+id/image01"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:contentDescription="@string/ad_text01"
android:src="@drawable/image01" />

<TextView
android:id="@+id/text01"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/image01"
android:gravity="center_horizontal"
android:text="@string/ad_text01" />

</RelativeLayout>

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

<ImageView
android:id="@+id/image02"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@drawable/image02"
android:contentDescription="@string/ad_text02" />

<TextView
android:id="@+id/text02"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/image02"
android:gravity="center_horizontal"
android:text="@string/ad_text02" />

</RelativeLayout>

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

<ImageView
android:id="@+id/image03"
android:layout_width="match_parent"

android:layout_height="wrap_content"
android:src="@drawable/image03"
android:contentDescription="@string/ad_text03" />

<TextView
android:id="@+id/text03"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/image03"
android:gravity="center_horizontal"
android:text="@string/ad_text03" />

</RelativeLayout>

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

<ImageView
android:id="@+id/image04"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@drawable/image04"
android:contentDescription="@string/ad_text04" />

<TextView
android:id="@+id/text04"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/image04"
android:gravity="center_horizontal"
android:text="@string/ad_text04" />

</RelativeLayout>
</ViewFlipper>

Xml动画文件:

push_left_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
  <translate android:fromXDelta="100%p" android:toXDelta="0"
  android:duration="600" />
</set>

push_left_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
  <translate android:fromXDelta="0" android:toXDelta="-100%p"
   android:duration="600" />
</set>

push_right_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
  <translate android:fromXDelta="-100%p" android:toXDelta="0"
   android:duration="600" />
</set>

push_right_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
  <translate android:fromXDelta="0" android:toXDelta="100%p"
    android:duration="600" />
</set>

纯属学习笔记,欢迎指正。

时间: 2024-11-10 20:10:41

Android图片滑动的实现的相关文章

android 图片滑动控件

本次的随笔记录学习了ImageSwitcher  和 Gallery ImageSwitcher : ImageSwitcher粗略的理解就是ImageView的选择器 ImageSwitcher的原理:ImageSwitcher有两个子View:ImageView,当左右滑动的时候,就在这两个ImageView之间来回切换来显示图片 可以查看ImageSwitcher.java 的源代码同时还是要结合ViewSwitcher .java来理解: ImageSwitcher.java /* *

Android ListView滑动过程中图片显示重复错位闪烁问题解决[转载]

转自:here 主要分析Android ListView滚动过程中图片显示重复.错乱.闪烁的原因及解决方法,顺带提及ListView的缓存机制.1.原因分析ListView item缓存机制:为了使得性能更优,ListView会缓存行item(某行对应的View).ListView通过adapter的getView函数获得每行的item.滑动过程中, a. 如果某行item已经滑出屏幕,若该item不在缓存内,则put进缓存,否则更新缓存:b. 获取滑入屏幕的行item之前会先判断缓存中是否有可

android listview 滑动过程中不加载图片,停止时加载图片

今天闲来无事, 就测试了一下listview加载图片优化的功能, 在我们使用新浪微博的时候,细心的同学一定发现了,在滑动的过程中,图片是没有被加载的, 而是在滑动停止时,才加载图片了. 我们今天就做一个这样的效果吧. 我们先考虑两个问题: 1.在滑动停止的时候,如何获得需要加载的图片控件? 2.因为listiew在初始化完成的时候,OnScrollListener的onScrollStateChanged与onScroll并未被触发,如何初始化第一页的图片? package com.test.l

Android左右滑动滚屏的实现

现如今主流的Android应用中,都少不了左右滑动滚屏这项功能,(貌似现在好多人使用智能机都习惯性的有事没事的左右滑屏,也不知道在干什么...嘿嘿),由于前段时间项目的需要,所以也对其研究了一下,总的来说滑屏实现有三种方式:(至于其他的实现方式目前后还没碰到...) 1.ViewPager 2.ViewFlipper 3.ViewFlow   一.ViewPager 官方文档介绍:http://developer.android.com/reference/android/support/v4/

Android图片异步加载之Android-Universal-Image-Loader

将近一个月没有更新博客了,由于这段时间以来准备毕业论文等各种事务缠身,一直没有时间和精力沉下来继续学习和整理一些东西.最近刚刚恢复到正轨,正好这两天看了下Android上关于图片异步加载的开源项目,就顺便整理记录下来,作为这一个多月来博客的重新开火做饭吧.从今天起我会陆续恢复博客的更新,也希望大家继续支持. 今天要介绍的是Github上一个使用非常广泛的图片异步加载库Android-Universal-Image-Loader,该项目的功能十分强大,可以说是我见过的目前功能最全.性能最优的图片异

Android图片异步加载之Android-Universal-Image-Loader类库的使用

Android开发中我们会经常遇到图片过多或操作不当造成Out of Memory异常,有时虽然是解决了这个问题但却会影响程序的运行效率,例如:当用户在快速滑动滚动条的过程中,我们程序在仍在艰难的加载服务器端的图片,这样给用户造成了极不好的体验.其实网络上关于图片的异步加载和缓存的讲解很多,但是其实,写一个这方面的程序还是比较麻烦的,要考虑多线程,缓存,内存溢出等很多方面,针对这一广大开发者都会遇到的问题,一些牛人们已经帮我们解决了这一问题,今天我为大家介绍一款很流行的开源类库,可以很很好的解决

客户端实现图片滑动加载,资讯详情页面

展示方案:客户端请求资讯详情数据接口获取 富文本数据 客户端使用WebView展示. 当文章详情篇幅长.包含图片多一次性加载全部图片会造成客户端短暂的卡顿 影响用户体验 所以考虑计划做图片滑动加载 默认使用统一的占位图. 本以为使用一个前端jquery插件(jquery.lazyload.js)就可以解决,应用这个插件后,出现问题所有图片还是一次性加载完成,不是滑动加载,分析发现是因为客户端在实现webview的时候要定义页面中的标题.评论.相关文章等不能够给设置webview的高度为固定手机屏

毕加索的艺术——Picasso,一个强大的Android图片下载缓存库,OkHttpUtils的使用,二次封装PicassoUtils实现微信精选

毕加索的艺术--Picasso,一个强大的Android图片下载缓存库,OkHttpUtils的使用,二次封装PicassoUtils实现微信精选 官网: http://square.github.io/picasso/ 我们在上篇OkHttp的时候说过这个Picasso,学名毕加索,是Square公司开源的一个Android图形缓存库,而且使用起来也是非常的简单,只要一行代码就轻松搞定了,你会问,为什么不介绍一下Glide?其实Glide我有时间也是会介绍的,刚好上篇我们用到了Picasso,

Android图片的缩放效果

一.概述 Android 图片要实现:手势滑动,双击变大,多点触控的效果. 其实是有一定难度的,我们需要用Matrix ,GestureDetector 等等需要完成一个复杂的逻辑才能实现,然而今天我要说的并不是这种方法,而是一个第三方库Photoview,它使得完成图片缩放工作只需要3-5行代码就搞定了. 是不是很爽... 二.使用方法 github:https://github.com/chrisbanes/PhotoView 如果用AS需在引入如下库文件(目前是最新的): dependen