大家好,好久不见了,最近由于工作特别繁忙,已经有一个多月的时间没写博客了,我也是深感惭愧。那么今天的这篇既然是阔别了一个多月的文章,当然要带来更加给力点的内容了,那么话不多说,赶快进入到今天的正题吧。
说到图片轮播器,很多的Android应用中都会带有这个功能,比如说网易新闻,淘宝等。最新我们公司的一款应用也加入了这个功能,并且在图片轮播的基础上还增加了三维立体的效果,但比较遗憾的是,整体效果并不理想,用户体验性比较糟糕。因此,我就花了点时间去编写了一个效果更好的3 d图片轮播器,自我感觉还是比较满意的,这里果断写一篇博客来分享给大家。
首先来介绍一下实现原理吧,传统的图片轮播器在一个界面上只会显示一张图片,要用手指进行左右滑动才能看到其它的图片。这里我们将思维发散一下,允许在一个界面上同时显示三张图片,再通过相机的方式对左右的两张图进行3 d旋转,这样就能制作出一种立体的图片轮播器了,原理示意图如下所示:
对图片进行立体操作还是要使用到相机技术,如果你对这个技术还不太熟悉,可以到网上搜一些相关资料,或者参考我前面的一篇文章:Android实现中轴旋转特效Android制作别样的图片浏览器。
那么我们现在就开始动手吧,首先新建一个Android项目,起名叫做ImageSwitchViewTest。
然后新建一个Image3DView继承自ImageView,它会继承ImageView的所有属性,并且加入3 d旋转的功能,代码如下所示:
公开课Image3DView延伸ImageView {/* *
*旋转角度的基准值
*/私有静态最终浮BASE_DEGREE=50 f;/* *
*旋转深度的基准值
*/私有静态最终浮BASE_DEEP=150 f;
私人相机mCamera;
私人矩阵mMaxtrix;
私人位图mBitmap;/* *
*当前图片对应的下标
*/私人int mIndex;/* *
*在前图片在X轴方向滚动的距离
*/私人int mScrollX;/* *
* Image3DSwitchView控件的宽度
*/私人int mLayoutWidth;/* *
*当前图片的宽度
*/私人int mWidth;/* *
*当前旋转的角度
*/私人mRotateDegree浮动;/* *
*旋转的中心点
*/私人mDx浮动;/* *
*旋转的深度
*/私人mDeep浮动;
公共Image3DView(上下文语境,AttributeSet attrs) {
超级(上下文,attrs);
mCamera=新相机();
mMaxtrix=新矩阵();
}/* *
*初始化Image3DView所需要的信息,包括图片宽度,截取背景图等。
*/公共空间initImageViewBitmap () {
如果(mBitmap==null) {
setDrawingCacheEnabled(真正的);
buildDrawingCache ();
mBitmap=getDrawingCache ();
}
mLayoutWidth=Image3DSwitchView.mWidth;
mWidth=getWidth () + Image3DSwitchView。IMAGE_PADDING * 2;
}/* *
*设置旋转角度。
*
* @param指数
*当前图片的下标
* @param scrollX
*当前图片在X轴方向滚动的距离
*/公共空间setRotateData (int指数,int scrollX) {
mIndex=指数;
mScrollX=scrollX;
}/* *
*回收当前的位图对象,以释放内存。
*/公共空间recycleBitmap () {
如果(mBitmap !=零,,! mBitmap.isRecycled ()) {
mBitmap.recycle ();
}
}
@Override
公共空间setImageResource (int渣油){
super.setImageResource(渣油);
mBitmap=零;
initImageViewBitmap ();
}
@Override
公共空间setImageBitmap(位图bm) {
super.setImageBitmap (bm);
mBitmap=零;
initImageViewBitmap ();
}
@Override
公共空间setImageDrawable(可拉的可拉的){
super.setImageDrawable(可拉的);
mBitmap=零;
initImageViewBitmap ();
}
@Override
公共空间setImageURI (Uri Uri) {
super.setImageURI (uri);
mBitmap=零;
initImageViewBitmap ();
}
@Override
保护空白>
公开课Image3DSwitchView延伸ViewGroup {/* *
*图片左右两边的空白间距
*/公共静态最终int IMAGE_PADDING=10;
私有静态最终int TOUCH_STATE_REST=0;
私有静态最终int TOUCH_STATE_SCROLLING=1;/* *
*滚动到下一张图片的速度
*/私有静态最终int SNAP_VELOCITY=600;/* *
*表示滚动到下一张图片这个动作
*/私有静态最终int SCROLL_NEXT=0;/* *
*表示滚动到上一张图片这个动作
*/私有静态最终int SCROLL_PREVIOUS=1;/* *
*表示滚动回原图片这个动作
*/私有静态最终int SCROLL_BACK=2;
私有静态处理程序处理程序=new处理程序();/* *
*控件宽度
*/公共静态int mWidth;
私人VelocityTracker mVelocityTracker;
私人照片卷轴mScroller;/* *
*图片滚动监听器,当图片发生滚动时回调这个接口
*/私人>
& lt; RelativeLayout xmlns: android=" http://schemas.android.com/apk/res/android "
android: layout_width=" match_parent "
android: layout_height=" match_parent "
android:背景=" # fff“比;
& lt; com.example.imageswitchviewtest.Image3DSwitchView
android: id=癅 + id/image_switch_view”
android: layout_width=" match_parent "
android: layout_height=?50 dp”比;
& lt; com.example.imageswitchviewtest.Image3DView
android: id=癅 + id/image1”
android: layout_width=" match_parent "
android: layout_height=" match_parent "
android: scaleType=" fitXY "
android: src=" https://www.yisu.com/zixun/@drawable image1 "/比;
& lt; com.example.imageswitchviewtest.Image3DView
android: id=癅 + id/image2”
android: layout_width=" match_parent "
android: layout_height=" match_parent "
android: scaleType=" fitXY "
android: src=" https://www.yisu.com/zixun/@drawable image2 "/比;
& lt; com.example.imageswitchviewtest.Image3DView
android: id=癅 + id/image3”
android: layout_width=" match_parent "
android: layout_height=" match_parent "
android: scaleType=" fitXY "
android: src=" https://www.yisu.com/zixun/@drawable image3 "/比;
& lt; com.example.imageswitchviewtest.Image3DView
android: id=癅 + id/image4”
android: layout_width=" match_parent "
android: layout_height=" match_parent "
android: scaleType=" fitXY "
android: src=" https://www.yisu.com/zixun/@drawable image4 "/比;
& lt; com.example.imageswitchviewtest.Image3DView
android: id=癅 + id/image5”
android: layout_width=" match_parent "
android: layout_height=" match_parent "
android: scaleType=" fitXY "
android: src=" https://www.yisu.com/zixun/@drawable image5 "/比;
& lt; com.example.imageswitchviewtest.Image3DView
android: id=癅 + id/image6”
android: layout_width=" match_parent "
android: layout_height=" match_parent "
android: scaleType=" fitXY "
android: src=" https://www.yisu.com/zixun/@drawable image6 "/比;
& lt; com.example.imageswitchviewtest.Image3DView
android: id=癅 + id/image7”
android: layout_width=" match_parent "
android: layout_height=" match_parent "
null
null
null
null
null
null
null
null
null
null
null
null
null
