|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
所以你可以用很多方法存储数据比如最长用的sqlite当然如果另类也可以用plist文件或者其他NSManagedObjectContextNSManagedObjectContext遭到iOS版FacebookPaper的启示,在比来的项目中,我们决意在翻开列表元素时完成一个相似作风的动画效果。后来,我们试图利用一个现有的完成——android-flip,经由过程OpenGL衬着动画——在最新的Android版本中,它只做到了在屏幕上显现对照分明的工件(图片闪灼)。别的,必要对这个类库举行修改,由于它是为了滑动列表的元素计划的,但我们的工程必要在翻开列表元素的时分有动画效果。鄙人面的演示视频中能够看出区分:android-flip完成的是折叠列表,而我们实践必要的是睁开概况。
思索到这类场景,我们决意本人完成这类效果。由于使用程序撑持的最小Android版本为4.0,以是没利用OpenGL,而是用了尺度AndroidSDK中的办法:View.setRotationX(),View.setScaleX()等。当硬件减速启用时(假如方针API级别>=14,默许启用硬件减速),这些办法能够十分高效天时用GPU。
了局看起来很完善,以是决意分享我们的做法。因为本文只是先容了基础的完成要点,您能够从GitHub高低载一切的实践代码:FoldableLayout。
<br>
结构的完成
计划的第一个元素是能够半数的结构。我们的做法相称勇敢:主结构(FoldableItemLayout)只包括一个特定的结构(在baselayout)。在动画中,BaseLayout将它的内容写进到缓存中,这是一个依据原始结构的尺寸专门创立的Bitmap对象。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
classFoldableItemLayoutextendsFrameLayout{
@Override
protectedvoidonSizeChanged(intw,inth,intoldw,intoldh){
BitmapcacheBitmap=Bitmap.createBitmap(w,h,Bitmap.Config.ARGB_8888);
mBaseLayout.setCacheCanvas(newCanvas(cacheBitmap));
}
}
classBaseLayoutextendsFrameLayout{
privateCanvasmCacheCanvas;
privatevoidsetCacheCanvas(CanvascacheCanvas){
mCacheCanvas=cacheCanvas;
}
@Override
publicvoiddraw(Canvascanvas){
mCacheCanvas.drawColor(0,PorterDuff.Mode.CLEAR);
super.draw(mCacheCanvas);
}
}
别的,还必要两个分外的视图(PartView)——用于图象的上、下两半部分。它们将在缓存中显现对应的数据,这些数据代表了该图象(Bitmap)的上半部和下半部。两个视图添补了主结构的全部地区,但只显现所需的部分。为了到达这类效果,我们盘算了位图的界线——在onDraw()办法中,我们让画布经由过程[drawBitmap(Bitmapbitmap,Rectsrc,RectFdst,Paintpaint)](http://developer.android.com/reference/android/graphics/Canvas.html#drawBitmap(android.graphics.Bitmap,android.graphics.Rect,android.graphics.RectF,android.graphics.Paint))办法来绘制所需的部分。
然后经由过程setRotationX()办法设置响应的角度,想法扭转这些分外的视图,从而完成图象上半部和下半部的自力扭转。为了完成这个功效,我们为FoldableItemLayout增加了一个名为FoldRotation的新参数。
FoldRotation参数局限是(-180,180]:
- FoldRotation=0:两个部分都不扭转。在这类情形下,我们能够跳过位图缓存,及时的显现原始的结构。
- 0<FoldRotation<90:上层的部分扭转到FoldRotation角度;下层部分不扭转。
- -90<FoldRotation<0:只要下层部分扭转。
- 90≤FoldRotation<180:上层部分不再显现。在这类情形下,包括下一结构的FoldableItemLayout应当掩盖以后的FoldableItemLayout。
- -180<FoldRotation≤-90:下层部分不再显现。在这类情形下,包括先前的结构FoldableItemLayout应当掩盖以后的FoldableItemLayout。
- FoldRotation=180:两个部分都埋没。
如今有了一个二层结构,可以“折叠”它包括的元素,如许就能够做出一个FoldableListLayout——一个相似列表视图的结构,它创立列表元素,并经由过程利用BaseAdapter将其封装成FoldableItemLayout。在这类情形下,我们还利用了FoldRotation参数用来断定元素在列表中的地位。
比方,FoldRotation=30,列表第一个元素(FoldableItemLayout)的FoldRotation值为30,而第二个元素——FoldRotation=150,最多能够同时显现不凌驾2个元素。FoldRotation参数值的局限依附于元素的数目:假如列表包括一个元素,那末取值局限就会是[0,0],2——[0,180],3——[0,360]等。
翻开动画
在学会了在几个元素之间利用折叠动画转动以后,我们办理了这个严重的应战:从恣意的出发点天生元素的翻开动画。使用已完成的FoldableListLayout,并使其在两个元素之间举行切换:封面结构和概况结构。这两种元素都应当显现在屏幕上,但概况元素应当是埋没的。当用户点击一个封面元素时,使用程序会记着事先的地位,并利用不异巨细的空占位符视图代替它(以避免损坏屏幕上的其他元素),并挪动盖元素的下半专门创立的结构。今后这类结构将被用作FoldableListLayout的第一个元素。第二个元素将被交换为空占位视图,与封面元素的体例不异。
对齐
目击封面元素已从屏幕上的最后地位睁开,因而在动画过程当中我们的FoldableListLayout必要在封面元素和概况元素的地位之间挪动。这就是为何要记着在动画初始化过程当中每一个元素的初始地位和巨细的缘故原由。因为封面和概况的巨细有大概分歧,我们必要在动画时代同时扩大它们,以便使它们的宽度分歧。
我们基础已竣工,只差一件事:缩放后,封面的高度大概看起来比下半部分的概况小。这意味着你必要埋没图象的残剩部分。
语法弄明白@interface@property这些工具总要知道是干嘛的怎么用基础库 |
|