Android高级图片滚动控件实现3D版图片轮播器

大家好,好久不见了,最近由于工作特别繁忙,已经有一个多月的时间没写博客了,我也是深感惭愧。那么今天的这篇既然是阔别了一个多月的文章,当然要带来更加给力点的内容了,那么话不多说,赶快进入到今天的正题吧。

说到图片轮播器,很多的Android应用中都会带有这个功能,比如说网易新闻、淘宝等。最新我们公司的一款应用也加入了这个功能,并且在图片轮播的基础上还增加了三维立体的效果,但比较遗憾的是,整体效果并不理想,用户体验性比较糟糕。因此,我就花了点时间去编写了一个效果更好的3D图片轮播器,自我感觉还是比较满意的,这里果断写一篇博客来分享给大家。

首先来介绍一下实现原理吧,传统的图片轮播器在一个界面上只会显示一张图片,要用手指进行左右滑动才能看到其它的图片。这里我们将思维发散一下,允许在一个界面上同时显示三张图片,再通过Camera的方式对左右的两张图进行3D旋转,这样就能制作出一种立体的图片轮播器了,原理示意图如下所示:

对图片进行立体操作还是要使用到Camera技术,如果你对这个技术还不太熟悉,可以到网上搜一些相关资料,或者参考我前面的一篇文章:Android实现中轴旋转特效 Android制作别样的图片浏览器 。

那么我们现在就开始动手吧,首先新建一个Android项目,起名叫做ImageSwitchViewTest。

然后新建一个Image3DView继承自ImageView,它会继承ImageView的所有属性,并且加入3D旋转的功能,代码如下所示:

public class Image3DView extends ImageView {
 /**
 * 旋转角度的基准值
 */
 private static final float BASE_DEGREE = 50f;
 /**
 * 旋转深度的基准值
 */
 private static final float BASE_DEEP = 150f;
 private Camera mCamera;
 private Matrix mMaxtrix;
 private Bitmap mBitmap;
 /**
 * 当前图片对应的下标
 */
 private int mIndex;
 /**
 * 在前图片在X轴方向滚动的距离
 */
 private int mScrollX;
 /**
 * Image3DSwitchView控件的宽度
 */
 private int mLayoutWidth;
 /**
 * 当前图片的宽度
 */
 private int mWidth;
 /**
 * 当前旋转的角度
 */
 private float mRotateDegree;
 /**
 * 旋转的中心点
 */
 private float mDx;
 /**
 * 旋转的深度
 */
 private float mDeep; 

 public Image3DView(Context context, AttributeSet attrs) {
 super(context, attrs);
 mCamera = new Camera();
 mMaxtrix = new Matrix();
 }
 /**
 * 初始化Image3DView所需要的信息,包括图片宽度,截取背景图等。
 */
 public void initImageViewBitmap() {
 if (mBitmap == null) {
 setDrawingCacheEnabled(true);
 buildDrawingCache();
 mBitmap = getDrawingCache();
 }
 mLayoutWidth = Image3DSwitchView.mWidth;
 mWidth = getWidth() + Image3DSwitchView.IMAGE_PADDING * 2;
 }
 /**
 * 设置旋转角度。
 *
 * @param index
 * 当前图片的下标
 * @param scrollX
 * 当前图片在X轴方向滚动的距离
 */
 public void setRotateData(int index, int scrollX) {
 mIndex = index;
 mScrollX = scrollX;
 }
 /**
 * 回收当前的Bitmap对象,以释放内存。
 */
 public void recycleBitmap() {
 if (mBitmap != null && !mBitmap.isRecycled()) {
 mBitmap.recycle();
 }
 }
 @Override
 public void setImageResource(int resId) {
 super.setImageResource(resId);
 mBitmap = null;
 initImageViewBitmap();
 }
 @Override
 public void setImageBitmap(Bitmap bm) {
 super.setImageBitmap(bm);
 mBitmap = null;
 initImageViewBitmap();
 }
 @Override
 public void setImageDrawable(Drawable drawable) {
 super.setImageDrawable(drawable);
 mBitmap = null;
 initImageViewBitmap();
 }
 @Override
 public void setImageURI(Uri uri) {
 super.setImageURI(uri);
 mBitmap = null;
 initImageViewBitmap();
 }
 @Override
 protected void onDraw(Canvas canvas) {
 if (mBitmap == null) {
 // 如果Bitmap对象还不存在,先使用父类的onDraw方法进行绘制
 super.onDraw(canvas);
 } else {
 if (isImageVisible()) {
 // 绘图时需要注意,只有当图片可见的时候才进行绘制,这样可以节省运算效率
 computeRotateData();
 mCamera.save();
 mCamera.translate(0.0f, 0.0f, mDeep);
 mCamera.rotateY(mRotateDegree);
 mCamera.getMatrix(mMaxtrix);
 mCamera.restore();
 mMaxtrix.preTranslate(-mDx, -getHeight() / 2);
 mMaxtrix.postTranslate(mDx, getHeight() / 2);
 canvas.drawBitmap(mBitmap, mMaxtrix, null);
 }
 }
 }
 /**
 * 在这里计算所有旋转所需要的数据。
 */
 private void computeRotateData() {
 float degreePerPix = BASE_DEGREE / mWidth;
 float deepPerPix = BASE_DEEP / ((mLayoutWidth - mWidth) / 2);
 switch (mIndex) {
 case 0:
 mDx = mWidth;
 mRotateDegree = 360f - (2 * mWidth + mScrollX) * degreePerPix;
 if (mScrollX < -mWidth) {
 mDeep = 0;
 } else {
 mDeep = (mWidth + mScrollX) * deepPerPix;
 }
 break;
 case 1:
 if (mScrollX > 0) {
 mDx = mWidth;
 mRotateDegree = (360f - BASE_DEGREE) - mScrollX * degreePerPix;
 mDeep = mScrollX * deepPerPix;
 } else {
 if (mScrollX < -mWidth) {
 mDx = -Image3DSwitchView.IMAGE_PADDING * 2;
 mRotateDegree = (-mScrollX - mWidth) * degreePerPix;
 } else {
 mDx = mWidth;
 mRotateDegree = 360f - (mWidth + mScrollX) * degreePerPix;
 }
 mDeep = 0;
 }
 break;
 case 2:
 if (mScrollX > 0) {
 mDx = mWidth;
 mRotateDegree = 360f - mScrollX * degreePerPix;
 mDeep = 0;
 if (mScrollX > mWidth) {
 mDeep = (mScrollX - mWidth) * deepPerPix;
 }
 } else {
 mDx = -Image3DSwitchView.IMAGE_PADDING * 2;
 mRotateDegree = -mScrollX * degreePerPix;
 mDeep = 0;
 if (mScrollX < -mWidth) {
 mDeep = -(mWidth + mScrollX) * deepPerPix;
 }
 }
 break;
 case 3:
 if (mScrollX < 0) {
 mDx = -Image3DSwitchView.IMAGE_PADDING * 2;
 mRotateDegree = BASE_DEGREE - mScrollX * degreePerPix;
 mDeep = -mScrollX * deepPerPix;
 } else {
 if (mScrollX > mWidth) {
 mDx = mWidth;
 mRotateDegree = 360f - (mScrollX - mWidth) * degreePerPix;
 } else {
 mDx = -Image3DSwitchView.IMAGE_PADDING * 2;
 mRotateDegree = BASE_DEGREE - mScrollX * degreePerPix;
 }
 mDeep = 0;
 }
 break;
 case 4:
 mDx = -Image3DSwitchView.IMAGE_PADDING * 2;
 mRotateDegree = (2 * mWidth - mScrollX) * degreePerPix;
 if (mScrollX > mWidth) {
 mDeep = 0;
 } else {
 mDeep = (mWidth - mScrollX) * deepPerPix;
 }
 break;
 }
 }
 /**
 * 判断当前图片是否可见。
 *
 * @return 当前图片可见返回true,不可见返回false。
 */
 private boolean isImageVisible() {
 boolean isVisible = false;
 switch (mIndex) {
 case 0:
 if (mScrollX < (mLayoutWidth - mWidth) / 2 - mWidth) {
 isVisible = true;
 } else {
 isVisible = false;
 }
 break;
 case 1:
 if (mScrollX > (mLayoutWidth - mWidth) / 2) {
 isVisible = false;
 } else {
 isVisible = true;
 }
 break;
 case 2:
 if (mScrollX > mLayoutWidth / 2 + mWidth / 2
 || mScrollX < -mLayoutWidth / 2 - mWidth / 2) {
 isVisible = false;
 } else {
 isVisible = true;
 }
 break;
 case 3:
 if (mScrollX < -(mLayoutWidth - mWidth) / 2) {
 isVisible = false;
 } else {
 isVisible = true;
 }
 break;
 case 4:
 if (mScrollX > mWidth - (mLayoutWidth - mWidth) / 2) {
 isVisible = true;
 } else {
 isVisible = false;
 }
 break;
 }
 return isVisible;
 }
} 

这段代码比较长,也比较复杂的,我们慢慢来分析。在Image3DView的构造函数中初始化了一个Camera和Matrix对象,用于在后面对图片进行3D操作。然后在initImageViewBitmap()方法中初始化了一些必要的信息,比如对当前图片进行截图,以用于后续的立体操作,得到当前图片的宽度等。

然后还提供了一个setRotateData()方法,用于设置当前图片的下标和滚动距离,有了这两样数据就可以通过computeRotateData()方法来计算旋转角度的一些数据,以及通过isImageVisible()方法来判断出当前图片是否可见了,具体详细的算法逻辑你可以阅读代码来慢慢分析。

接下来当图片需要绘制到屏幕上的时候就会调用onDraw()方法,在onDraw()方法中会进行判断,如果当前图片可见就调用computeRotateData()方法来计算旋转时所需要的各种数据,之后再通过Camera和Matrix来执行旋转操作就可以了。

接着新建一个Image3DSwitchView继承自ViewGroup,代码如下所示:

public class Image3DSwitchView extends ViewGroup {
 /**
 * 图片左右两边的空白间距
 */
 public static final int IMAGE_PADDING = 10;
 private static final int TOUCH_STATE_REST = 0;
 private static final int TOUCH_STATE_SCROLLING = 1;
 /**
 * 滚动到下一张图片的速度
 */
 private static final int SNAP_VELOCITY = 600;
 /**
 * 表示滚动到下一张图片这个动作
 */
 private static final int SCROLL_NEXT = 0;
 /**
 * 表示滚动到上一张图片这个动作
 */
 private static final int SCROLL_PREVIOUS = 1;
 /**
 * 表示滚动回原图片这个动作
 */
 private static final int SCROLL_BACK = 2;
 private static Handler handler = new Handler();
 /**
 * 控件宽度
 */
 public static int mWidth;
 private VelocityTracker mVelocityTracker;
 private Scroller mScroller;
 /**
 * 图片滚动监听器,当图片发生滚动时回调这个接口
 */
 private OnImageSwitchListener mListener;
 /**
 * 记录当前的触摸状态
 */
 private int mTouchState = TOUCH_STATE_REST;
 /**
 * 记录被判定为滚动运动的最小滚动值
 */
 private int mTouchSlop;
 /**
 * 记录控件高度
 */
 private int mHeight;
 /**
 * 记录每张图片的宽度
 */
 private int mImageWidth;
 /**
 * 记录图片的总数量
 */
 private int mCount;
 /**
 * 记录当前显示图片的坐标
 */
 private int mCurrentImage;
 /**
 * 记录上次触摸的横坐标值
 */
 private float mLastMotionX;
 /**
 * 是否强制重新布局
 */
 private boolean forceToRelayout;
 private int[] mItems;
 public Image3DSwitchView(Context context, AttributeSet attrs) {
 super(context, attrs);
 mTouchSlop = ViewConfiguration.get(getContext()).getScaledTouchSlop();
 mScroller = new Scroller(context);
 }
 @Override
 protected void onLayout(boolean changed, int l, int t, int r, int b) {
 if (changed || forceToRelayout) {
 mCount = getChildCount();
 // 图片数量必须大于5,不然无法正常显示
 if (mCount < 5) {
 return;
 }
 mWidth = getMeasuredWidth();
 mHeight = getMeasuredHeight();
 // 每张图片的宽度设定为控件宽度的百分之六十
 mImageWidth = (int) (mWidth * 0.6);
 if (mCurrentImage >= 0 && mCurrentImage < mCount) {
 mScroller.abortAnimation();
 setScrollX(0);
 int left = -mImageWidth * 2 + (mWidth - mImageWidth) / 2;
 // 分别获取每个位置上应该显示的图片下标
 int[] items = { getIndexForItem(1), getIndexForItem(2),
 getIndexForItem(3), getIndexForItem(4),
 getIndexForItem(5) };
 mItems = items;
 // 通过循环为每张图片设定位置
 for (int i = 0; i < items.length; i++) {
 Image3DView childView = (Image3DView) getChildAt(items[i]);
 childView.layout(left + IMAGE_PADDING, 0, left
 + mImageWidth - IMAGE_PADDING, mHeight);
 childView.initImageViewBitmap();
 left = left + mImageWidth;
 }
 refreshImageShowing();
 }
 forceToRelayout = false;
 }
 }
 @Override
 public boolean onTouchEvent(MotionEvent event) {
 if (mScroller.isFinished()) {
 if (mVelocityTracker == null) {
 mVelocityTracker = VelocityTracker.obtain();
 }
 mVelocityTracker.addMovement(event);
 int action = event.getAction();
 float x = event.getX();
 switch (action) {
 case MotionEvent.ACTION_DOWN:
 // 记录按下时的横坐标
 mLastMotionX = x;
 break;
 case MotionEvent.ACTION_MOVE:
 int disX = (int) (mLastMotionX - x);
 mLastMotionX = x;
 scrollBy(disX, 0);
 // 当发生移动时刷新图片的显示状态
 refreshImageShowing();
 break;
 case MotionEvent.ACTION_UP:
 mVelocityTracker.computeCurrentVelocity(1000);
 int velocityX = (int) mVelocityTracker.getXVelocity();
 if (shouldScrollToNext(velocityX)) {
 // 滚动到下一张图
 scrollToNext();
 } else if (shouldScrollToPrevious(velocityX)) {
 // 滚动到上一张图
 scrollToPrevious();
 } else {
 // 滚动回当前图片
 scrollBack();
 }
 if (mVelocityTracker != null) {
 mVelocityTracker.recycle();
 mVelocityTracker = null;
 }
 break;
 }
 }
 return true;
 }
 /**
 * 根据当前的触摸状态来决定是否屏蔽子控件的交互能力。
 */
 @Override
 public boolean onInterceptTouchEvent(MotionEvent ev) {
 int action = ev.getAction();
 if ((action == MotionEvent.ACTION_MOVE)
 && (mTouchState != TOUCH_STATE_REST)) {
 return true;
 }
 float x = ev.getX();
 switch (action) {
 case MotionEvent.ACTION_DOWN:
 mLastMotionX = x;
 mTouchState = TOUCH_STATE_REST;
 break;
 case MotionEvent.ACTION_MOVE:
 int xDiff = (int) Math.abs(mLastMotionX - x);
 if (xDiff > mTouchSlop) {
 mTouchState = TOUCH_STATE_SCROLLING;
 }
 break;
 case MotionEvent.ACTION_UP:
 default:
 mTouchState = TOUCH_STATE_REST;
 break;
 }
 return mTouchState != TOUCH_STATE_REST;
 }
 @Override
 public void computeScroll() {
 if (mScroller.computeScrollOffset()) {
 scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
 refreshImageShowing();
 postInvalidate();
 }
 }
 /**
 * 设置图片滚动的监听器,每当有图片滚动时会回调此接口。
 *
 * @param listener
 * 图片滚动监听器
 */
 public void setOnImageSwitchListener(OnImageSwitchListener listener) {
 mListener = listener;
 }
 /**
 * 设置当前显示图片的下标,注意如果该值小于零或大于等于图片的总数量,图片则无法正常显示。
 *
 * @param currentImage
 * 图片的下标
 */
 public void setCurrentImage(int currentImage) {
 mCurrentImage = currentImage;
 requestLayout();
 }
 /**
 * 滚动到下一张图片。
 */
 public void scrollToNext() {
 if (mScroller.isFinished()) {
 int disX = mImageWidth - getScrollX();
 checkImageSwitchBorder(SCROLL_NEXT);
 if (mListener != null) {
 mListener.onImageSwitch(mCurrentImage);
 }
 beginScroll(getScrollX(), 0, disX, 0, SCROLL_NEXT);
 }
 }
 /**
 * 滚动到上一张图片。
 */
 public void scrollToPrevious() {
 if (mScroller.isFinished()) {
 int disX = -mImageWidth - getScrollX();
 checkImageSwitchBorder(SCROLL_PREVIOUS);
 if (mListener != null) {
 mListener.onImageSwitch(mCurrentImage);
 }
 beginScroll(getScrollX(), 0, disX, 0, SCROLL_PREVIOUS);
 }
 }
 /**
 * 滚动回原图片。
 */
 public void scrollBack() {
 if (mScroller.isFinished()) {
 beginScroll(getScrollX(), 0, -getScrollX(), 0, SCROLL_BACK);
 }
 }
 /**
 * 回收所有图片对象,释放内存。
 */
 public void clear() {
 for (int i = 0; i < mCount; i++) {
 Image3DView childView = (Image3DView) getChildAt(i);
 childView.recycleBitmap();
 }
 }
 /**
 * 让控件中的所有图片开始滚动。
 */
 private void beginScroll(int startX, int startY, int dx, int dy,
 final int action) {
 int duration = (int) (700f / mImageWidth * Math.abs(dx));
 mScroller.startScroll(startX, startY, dx, dy, duration);
 invalidate();
 handler.postDelayed(new Runnable() {
 @Override
 public void run() {
 if (action == SCROLL_NEXT || action == SCROLL_PREVIOUS) {
 forceToRelayout = true;
 requestLayout();
 }
 }
 }, duration);
 }
 /**
 * 根据当前图片的下标和传入的item参数,来判断item位置上应该显示哪张图片。
 *
 * @param item
 * 取值范围是1-5
 * @return 对应item位置上应该显示哪张图片。
 */
 private int getIndexForItem(int item) {
 int index = -1;
 index = mCurrentImage + item - 3;
 while (index < 0) {
 index = index + mCount;
 }
 while (index > mCount - 1) {
 index = index - mCount;
 }
 return index;
 }
 /**
 * 刷新所有图片的显示状态,包括当前的旋转角度。
 */
 private void refreshImageShowing() {
 for (int i = 0; i < mItems.length; i++) {
 Image3DView childView = (Image3DView) getChildAt(mItems[i]);
 childView.setRotateData(i, getScrollX());
 childView.invalidate();
 }
 }
 /**
 * 检查图片的边界,防止图片的下标超出规定范围。
 */
 private void checkImageSwitchBorder(int action) {
 if (action == SCROLL_NEXT && ++mCurrentImage >= mCount) {
 mCurrentImage = 0;
 } else if (action == SCROLL_PREVIOUS && --mCurrentImage < 0) {
 mCurrentImage = mCount - 1;
 }
 }
 /**
 * 判断是否应该滚动到下一张图片。
 */
 private boolean shouldScrollToNext(int velocityX) {
 return velocityX < -SNAP_VELOCITY || getScrollX() > mImageWidth / 2;
 }
 /**
 * 判断是否应该滚动到上一张图片。
 */
 private boolean shouldScrollToPrevious(int velocityX) {
 return velocityX > SNAP_VELOCITY || getScrollX() < -mImageWidth / 2;
 }
 /**
 * 图片滚动的监听器
 */
 public interface OnImageSwitchListener {
 /**
 * 当图片滚动时会回调此方法
 *
 * @param currentImage
 * 当前图片的坐标
 */
 void onImageSwitch(int currentImage);
 }
}

这段代码也比较长,我们来一点点进行分析。在onLayout()方法首先要判断子视图个数是不是大于等于5,如果不足5个则图片轮播器无法正常显示,直接return掉。如果大于等于5个,就会通过一个for循环来为每个子视图分配显示的位置,而每个子视图都是一个Image3DView,在for循环中又会调用Image3DView的initImageViewBitmap()方法来为每个控件执行初始化操作,之后会调用refreshImageShowing()方法来刷新图片的显示状态。

接着当手指在Image3DSwitchView控件上滑动的时候就会进入到onTouchEvent()方法中,当手指按下时会记录按下时的横坐标,然后当手指滑动时会计算出滑动的距离,并调用scrollBy()方法来进行滚动,当手指离开屏幕时会距离当前滑动的距离和速度来决定,是滚动到下一张图片,还是滚动到上一张图片,还是滚动回原图片。分别调用的方法是scrollToNext()、scrollToPrevious()和scrollBack()。

在scrollToNext()方法中会先计算一下还需滚动的距离,然后进行一下边界检查,防止当前图片的下标超出合理范围,接着会调用beginScroll()方法来进行滚动。在beginScroll()方法中其实就是调用了Scroller的startScroll()方法来执行滚动操作的,当滚动结束后还会调用requestLayout()方法来要求重新布局,之后onLayout()方法就会重新执行,每个图片的位置也就会跟着改变了。至于scrollToPrevious()和scrollBack()方法的原理也是一样的,这里就不再重复分析了。

那么在onLayout()方法的最后调用的refreshImageShowing()方法到底执行了什么操作呢?其实就是遍历了一下每个Image3DView控件,然后调用它的setRotateData()方法,并把图片的下标和滚动距离传进去,这样每张图片就知道应该如何进行旋转了。

另外一些其它的细节就不在这里讲解了,注释写的还是比较详细的,你可以慢慢地去分析和理解。

那么下面我们来看下如何使用Image3DSwitchView这个控件吧,打开或新建activity_main.xml作为程序的主布局文件,代码如下所示:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="#fff" >
 <com.example.imageswitchviewtest.Image3DSwitchView
 android:id="@+id/image_switch_view"
 android:layout_width="match_parent"
 android:layout_height="150dp" >
 <com.example.imageswitchviewtest.Image3DView
 android:id="@+id/image1"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:scaleType="fitXY"
 android:src="@drawable/image1" />
 <com.example.imageswitchviewtest.Image3DView
 android:id="@+id/image2"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:scaleType="fitXY"
 android:src="@drawable/image2" />
 <com.example.imageswitchviewtest.Image3DView
 android:id="@+id/image3"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:scaleType="fitXY"
 android:src="@drawable/image3" />
 <com.example.imageswitchviewtest.Image3DView
 android:id="@+id/image4"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:scaleType="fitXY"
 android:src="@drawable/image4" />
 <com.example.imageswitchviewtest.Image3DView
 android:id="@+id/image5"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:scaleType="fitXY"
 android:src="@drawable/image5" />
 <com.example.imageswitchviewtest.Image3DView
 android:id="@+id/image6"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:scaleType="fitXY"
 android:src="@drawable/image6" />
 <com.example.imageswitchviewtest.Image3DView
 android:id="@+id/image7"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:scaleType="fitXY"
 android:src="@drawable/image7" />
 </com.example.imageswitchviewtest.Image3DSwitchView>
</RelativeLayout>

可以看到,这里我们引入了一个Image3DSwitchView控件,然后在这个控件下面又添加了7个Image3DView控件,每个Image3DView其实就是一个ImageView,因此我们可以通过android:src属于给它指定一张图片。注意前面也说过了,Image3DSwitchView控件下的子控件必须大于等于5个,不然将无法正常显示。

代码到这里就写得差不多了,现在运行一下程序就可以看到一个3D版的图片轮播器,使用手指进行滑动可以查看更多的图片,如下图所示:

怎么样?效果还是非常不错的吧!除此之外,Image3DSwitchView中还提供了setCurrentImage()方法和setOnImageSwitchListener()方法,分别可用于设置当前显示哪张图片,以及设置图片滚动的监听器,有了这些方法,你可以更加轻松地在Image3DSwitchView的基础上进行扩展,比如说加入页签显示功能等。

好了,今天的讲解就到这里,有疑问的朋友可以在下面留言(不过最近工作着实繁忙,恐怕无法一一回复大家)。

源码下载,请点击这里

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

您可能感兴趣的文章:

  • Android实现图片轮播效果的两种方法
  • Android实现图片轮播效果
  • Android ViewPager实现图片轮播效果
  • Android实现广告图片轮播效果
  • Android自动播放Banner图片轮播效果
  • Android实现图片轮播切换实例代码
  • Android使用RecyclerView实现水平滚动控件
  • Android垂直滚动控件ScrollView使用方法详解
(0)

相关推荐

  • Android实现图片轮播效果的两种方法

    大家在使用APP的过程中,经常会看到上部banner图片轮播的效果,那么今天我们就一起来学习一下,android中图片轮询的几种实现方法: 第一种:使用动画的方法实现:(代码繁琐) 这种发放需要:两个动画效果,一个布局,一个主类来实现,不多说了,来看代码吧: public class IamgeTrActivity extends Activity { /** Called when the activity is first created. */ public ImageView image

  • Android ViewPager实现图片轮播效果

    在app中图片的轮播显示可以说是非常常见的实现效果了,其实现原理不过是利用ViewPager,然后利用handler每隔一定的时间将ViewPager的currentItem设置为当前item的position+1即可.先来看看效果图吧: 就是实现这样的一个轮播广告的效果. 因为这个是自己为了练习仿照某旅游类App做的,所以这里的数据是使用抓包工具抓取的,准备数据等工作就不在这里赘述了,反正数据的添加大体都是相同的.我的思路是这样的,从网络上实时的获取数据(当然你也可以将数据写死),然后通过网络

  • Android实现图片轮播效果

    本文实例讲述了JaAndroid实现图片轮播效果代码,分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: 首先看下一下布局文件: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_par

  • Android使用RecyclerView实现水平滚动控件

    前言 相信大家都知道Android滚动控件的实现方式有很多, 使用RecyclerView也比较简单. 做了一个简单的年龄滚动控件, 让我们来看看RecyclerView的使用方式, 主要有以下几点: (1) 对齐控件中心位置. (2) 计算滚动距离. (3) 高亮中心视图. (4) 实时显示中心数据. (5) 停止时自动对齐. (6) 滚动时, 设置按钮状态开关. 效果 1. 框架 主要关注RecyclerView部分逻辑. /** * 初始化年龄滑动条 */ private void ini

  • Android实现图片轮播切换实例代码

    利用Android的ViewFlipper和AnimationUtils实现图片带有动画的轮播切换,其中当点击"上一张"图片时,切换到上一张图片:当点击"下一张"图片时,切换到下一张图片.其效果图如下: 设置布局文件,其内容如下: activity_image_flipper_shade.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xm

  • Android垂直滚动控件ScrollView使用方法详解

    一.简介 二.方法 1)ScrollView垂直滚动控件使用方法 1.在layout布局文件的最外层建立一个ScrollView控件 2.在ScrollView控件中加入一个LinearLayout控件,并且把它的orientation设置为vertical 3.在LinearLayout控件中放入多个装有图片的ImageView控件 三.代码实例 1.效果图 2.代码 /Ex27ScrollView/src/fry/Activity01.java <?xml version="1.0&q

  • Android实现广告图片轮播效果

    本文实例介绍了Android广告轮播图效果实现方法,分享给大家供大家参考,具体内容如下 首先看下一下布局文件: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:

  • Android自动播放Banner图片轮播效果

    先看一下效果图 支持本地图片以及网络图片or本地网络混合. 使用方式: <com.jalen.autobanner.BannerView android:id="@+id/banner" android:layout_width="match_parent" android:layout_height="230dip"> </com.jalen.autobanner.BannerView> 核心代码: int length

  • Android高级图片滚动控件实现3D版图片轮播器

    大家好,好久不见了,最近由于工作特别繁忙,已经有一个多月的时间没写博客了,我也是深感惭愧.那么今天的这篇既然是阔别了一个多月的文章,当然要带来更加给力点的内容了,那么话不多说,赶快进入到今天的正题吧. 说到图片轮播器,很多的Android应用中都会带有这个功能,比如说网易新闻.淘宝等.最新我们公司的一款应用也加入了这个功能,并且在图片轮播的基础上还增加了三维立体的效果,但比较遗憾的是,整体效果并不理想,用户体验性比较糟糕.因此,我就花了点时间去编写了一个效果更好的3D图片轮播器,自我感觉还是比较

  • android水平循环滚动控件使用详解

    本文实例为大家分享了android水平循环滚动控件的具体代码,供大家参考,具体内容如下 CycleScrollView.java package com.example.test; import android.content.Context; import android.graphics.Rect; import android.os.Handler; import android.util.AttributeSet; import android.view.GestureDetector;

  • jQuery实现的3D版图片轮播示例【滑动轮播】

    本文实例讲述了jQuery实现的3D版图片轮播.分享给大家供大家参考,具体如下: 这个是用了3张图,来回滑动,类似一个圆圈(不晓得这个 怎么上动图啊!!!!) 图就是这么个图,但是他是可以滑动的(不好描述啊!!) 贴代码比较方便... <div class="banner"> <div class="banner_li left"> <img src="2.jpg" /> </div> <di

  • Android实现图片滚动和页签控件功能的实现代码

    首先题外话,今天早上起床的时候,手滑一下把我的手机甩了出去,结果陪伴我两年半的摩托罗拉里程碑一代就这么安息了,于是我今天决定怒更一记,纪念我死去的爱机. 如果你是网购达人,你的手机上一定少不了淘宝客户端.关注特效的人一定都会发现,淘宝不管是网站还是手机客户端,主页上都会有一个图片滚动播放器,上面展示一些它推荐的商品.这个几乎可以用淘宝来冠名的功能,看起来还是挺炫的,我们今天就来实现一下. 实现原理其实还是之前那篇文章Android仿人人客户端滑动菜单的侧滑菜单效果,史上最简单的侧滑实现  ,算是

  • 浅谈Android RecyclerView UI的滚动控件示例

    ListView 由于其强大的功能,在过去的 Andorid 开发中使用非常广泛.不过 ListView 需要优化来提升运行效率,就像我们之前所优化的那样,否则性能将很差.还有就是只能够纵向滚动,如果要想实现横向移动,用 ListView 是做不到的. RecyclerView 可以说是一个增强版的 ListView .它不仅实现了和 ListView 同样的效果,而且还优化了 ListView 存在的各种不足. RecyclerView 现在可是官方推荐使用的滚动控件哦O(∩_∩)O~ 1 基

  • android开发实现列表控件滚动位置精确保存和恢复的方法(推荐)

    Android开发经常要对列表的滚动位置进行保存和恢复,网上也有很多关于此功能的方法文章,但绝大多数都只能保存恢复到某一行,对于滚动到半行的情况不能精确的恢复.也有很多文章介绍了好几种方法,也说某些方法能够精确的控制,但实际上根本不能实现.还有些介绍了很多玄乎且非常复杂的方法,但也没看到能完整实现的代码. 经过一段时间的研究测试,下面的代码可以完美的实现列表滚动位置的精确保存和恢复,而且只是在原来记忆到行位置的基础上增加了2行代码而已. 具体见下面代码和注释: //保存位置: int posit

  • Android通过自定义ImageView控件实现图片的缩放和拖动的实现代码

    概述:通过自定义ImageView控件,在xml布局里面调用自定的组件实现图片的缩放. /** * 自定义的ImageView控制,可对图片进行多点触控缩放和拖动 * * @author qiuwanyong */ public class MyImageView extends ImageView { /** * 初始化状态常量 */ public static final int STATUS_INIT = 1; /** * 图片放大状态常量 */ public static final i

  • Android编程实现GridView控件点击图片变暗效果的方法

    本文实例讲述了Android编程实现GridView控件点击图片变暗效果的方法.分享给大家供大家参考,具体如下: @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); grid = (GridView) findViewById(R.id.grid); grid.setAdapte

随机推荐