Gallery3D筆記
布局及特效 gallery3d 的精華
一、布局
gallery3d的界面生成和普通的應用程序不一樣。普通程序一般一個界面就是一個activity,布局用xml或代碼都可以實現,界面切換是activity的切換方式;而gallery3d沒有用android的UI系統,而是用opengl畫出來的,即界面是在同一個activity的,如主界面,縮略圖界面,單張圖片查看界面,標記界面等都屬于同一個activity。那么這界面布局不同的界面是如何組合到一起的呢?分析代碼,可以把它看成一個狀態機
:
1、標記模式 public static final int MODE_SELECT = 1;(HudLayer)
包含了主界面標記模式,縮略界面矩陣游覽時標記模式、縮略圖界面分類游覽時標記模式3個界面
2、普通模式 public static final int MODE_NORMAL = 0;(HudLayer)
包含了
public static final int STATE_MEDIA_SETS = 0;主界面
public static final int STATE_GRID_VIEW = 1;縮略圖矩陣瀏覽
public static final int STATE_FULL_SCREEN = 2;查看界面
public static final int STATE_TIMELINE = 3;縮略圖界面分類瀏覽
有了以上狀態分類后,在渲染的時候就能根據些界面的組成來定哪些控件譔隱藏,哪些要顯示了。
下面是基本控件:
com.cooliris.media.GridLayer
com.cooliris.media.BackgroundLayer
com.cooliris.media.HudLayer
com.cooliris.media.ImageButton
com.cooliris.media.TimeBar
com.cooliris.media.MenuBar
com.cooliris.media.PopupMenu
com.cooliris.media.PathBarLayer
在渲染時,每一幀所有界面上的元素都畫了,由于根據上面的狀態只把特定窗口的特定元素顯示出來,其它窗口中的隱藏,所以不會亂。
Layer是上面控件的基類,上面控件的類也就有了下面兩個方法來隱藏不譔顯示的界面元素。
public boolean isHidden() {
return mHidden;
}
public void setHidden(boolean hidden) {
if (mHidden != hidden) {
mHidden = hidden;
onHiddenChanged();
}
}
下面是根據上面分類來畫不同元素所用的標識:
public static final int PASS_THUMBNAIL_CONTENT = 0;
public static final int PASS_FOCUS_CONTENT = 1;
public static final int PASS_FRAME = 2;
public static final int PASS_PLACEHOLDER = 3;
public static final int PASS_FRAME_PLACEHOLDER = 4;
public static final int PASS_TEXT_LABEL = 5;
public static final int PASS_SELECTION_LABEL = 6;
public static final int PASS_VIDEO_LABEL = 7;
public static final int PASS_LOCATION_LABEL = 8;
public static final int PASS_MEDIASET_SOURCE_LABEL = 9;
drawDisplayItem(view, gl, displayItem, texture, PASS_THUMBNAIL_CONTENT, placeholder,
displayItem.mAnimatedPlaceholderFade); 畫縮略圖的,注掉此句,前兩屏只顯示框,第三屏OK
drawDisplayItem(view, gl, displayItem, texture, PASS_FOCUS_CONTENT, null, 0.0f);畫單張圖片的,注掉,第三屏黑屏
drawDisplayItem(view, gl, itemDrawn, textureToUse, PASS_FRAME, previousTexture, ratio);畫邊框的,注掉,前兩屏明顯沒有邊框,巨齒明顯
drawDisplayItem(view, gl, displayItem, textureString, PASS_TEXT_LABEL, null, 0);畫文本標簽的
drawDisplayItem(view, gl, displayItem, textureToUse, PASS_SELECTION_LABEL, null, 0);畫選中標記的
drawDisplayItem(view, gl, displayItem, videoTexture, PASS_VIDEO_LABEL, null, 0);畫視頻標記的
drawDisplayItem(view, gl, displayItem, locationTexture, PASS_LOCATION_LABEL, null, 0);畫位置標記的
drawDisplayItem(view, gl, displayItem, locationTexture, PASS_MEDIASET_SOURCE_LABEL,
transparentTexture, 0.85f);畫源來源圖標的(相機或一般文件夾)
二、特效
舉如何顯示一張圖片為例,在圖片完全顯示出來經過這樣一個過程,附近的圖片漸小漸出,當前圖片漸大漸入,當前圖片逐漸變大直到全屏。實現這個特效,要進行很多幀的渲染。就是說并不是只調一次onDrawFrame函數就可以了,要調用多次。可以把這個特效的實現想成一個狀態變化的過程,在每一個狀態,紋理的顯示大小和位置都不同,這也符合動畫的基本原理。放大、縮小我們只要改變頂點數據就可以做到,gallery3d也是這樣做的,下面是主要代碼:
我們知道調用onDrawFrame來渲染,最后調到下面的drawFocusItems函數,
GridQuad quad = GridDrawables.sFullscreenGrid[vboIndex];
float u = texture.getNormalizedWidth();
float v = texture.getNormalizedHeight();
float imageWidth = texture.getWidth();
float imageHeight = texture.getHeight();
boolean portrait = ((theta / 90) % 2 == 1);
if (portrait) {
viewAspect = 1.0f / viewAspect;
}
quad.resizeQuad(viewAspect, u, v, imageWidth, imageHeight);//改變用來貼圖片的長方形的大小
quad.bindArrays(gl);//綁定新數據,為渲染做準備。
而位置的改變有兩種方式,一種是直接以頂點數據中改變,另一種是計算出在3維3個方向的偏移量,再調用gltranslate來做,從代碼可以看出采用的是第二種方式來做的,比第一種方式更方便一些。代碼:
gl.glTranslatef(-translateXf, -translateYf, -translateZf);
而這里的3個偏移量的計算是和camera相關的,相關文件為GridCamera.java,GridCameraManager.java,過程很復雜,理清楚后再細化吧。
cache管理
下面是cache文件
/sdcard/Android/data/com.cooliris.media/cache/local-album-cache
d---rwxr-x system sdcard_rw 2010-05-21 09:56 local-album-cache
d---rwxr-x system sdcard_rw 2010-05-21 09:56 local-meta-cache
----rwxr-x system sdcard_rw 299877 2010-05-28 07:36 local-album-cachechunk_0
d---rwxr-x system sdcard_rw 2010-05-21 09:56 geocoder-cache
----rwxr-x system sdcard_rw 284 2010-05-28 07:36 local-album-cacheindex
d---rwxr-x system sdcard_rw 2010-05-21 09:56 local-image-thumbs
d---rwxr-x system sdcard_rw 2010-05-21 09:56 local-video-thumbs
d---rwxr-x system sdcard_rw 2010-05-21 09:56 picasa-thumbs
----rwxr-x system sdcard_rw 80 2010-05-28 07:36 local-meta-cachechunk_0
----rwxr-x system sdcard_rw 164 2010-05-28 07:36 local-meta-cacheindex
d---rwxr-x system sdcard_rw 2010-05-21 09:56 hires-image-cache
----rwxr-x system sdcard_rw 627629 2010-05-28 07:37 local-image-thumbschunk_0
----rwxr-x system sdcard_rw 3914 2010-05-21 09:56 local-image-thumbsindex
----rwxr-x system sdcard_rw 53343 2010-05-28 07:34 hires-image-cache-4982941342287215583_1024.cache
----rwxr-x system sdcard_rw 237692 2010-05-28 07:33 hires-image-cache3684568484369117627_1024.cache
----rwxr-x system sdcard_rw 133182 2010-05-28 07:34 hires-image-cache607542544081226432_1024.cache
----rwxr-x system sdcard_rw 83223 2010-05-28 07:34 hires-image-cache4275479623210216146_1024.cache
----rwxr-x system sdcard_rw 292837 2010-05-28 07:34 hires-image-cache-646316556936433937_1024.cache
----rwxr-x system sdcard_rw 191377 2010-05-28 07:35 hires-image-cache2631364604509958174_1024.cache
----rwxr-x system sdcard_rw 366905 2010-05-28 07:35 hires-image-cache-3280562009766080884_1024.cache
----rwxr-x system sdcard_rw 323671 2010-05-28 07:35 hires-image-cache5752471827533329222_1024.cache
創建cache的關鍵代碼
LocalDataSource
public static final DiskCache sThumbnailCache = new DiskCache("local-image-thumbs");----------------------local-image-thumbs local-image-thumbschunk_0 local-image-thumbsindex
public static final DiskCache sThumbnailCacheVideo = new DiskCache("local-video-thumbs");--------------------local-video-thumbs
public static final DiskCache sAlbumCache = new DiskCache("local-album-cache");----------------------local-album-cache local-album-cacheindex
public static final DiskCache sMetaAlbumCache = new DiskCache("local-meta-cache");------------------local-meta-cache local-meta-cacheindex
getChunkFile --------------local-meta-cachechunk_0 local-album-cachechunk_0
ReverseGeocoder:: private static final DiskCache sGeoCache = new DiskCache("geocoder-cache"); -------------------------geocoder-cache
PicasaDataSource:: public static final DiskCache sThumbnailCache = new DiskCache("picasa-thumbs");-----------------------------picasa-thumbs
UriTexture::writeToCache --------------------------hires-image-cache-xxx_1024.cache
歡迎大家多交流,不對之處請大家指正。
一、布局
gallery3d的界面生成和普通的應用程序不一樣。普通程序一般一個界面就是一個activity,布局用xml或代碼都可以實現,界面切換是activity的切換方式;而gallery3d沒有用android的UI系統,而是用opengl畫出來的,即界面是在同一個activity的,如主界面,縮略圖界面,單張圖片查看界面,標記界面等都屬于同一個activity。那么這界面布局不同的界面是如何組合到一起的呢?分析代碼,可以把它看成一個狀態機
:
1、標記模式 public static final int MODE_SELECT = 1;(HudLayer)
包含了主界面標記模式,縮略界面矩陣游覽時標記模式、縮略圖界面分類游覽時標記模式3個界面
2、普通模式 public static final int MODE_NORMAL = 0;(HudLayer)
包含了
public static final int STATE_MEDIA_SETS = 0;主界面
public static final int STATE_GRID_VIEW = 1;縮略圖矩陣瀏覽
public static final int STATE_FULL_SCREEN = 2;查看界面
public static final int STATE_TIMELINE = 3;縮略圖界面分類瀏覽
有了以上狀態分類后,在渲染的時候就能根據些界面的組成來定哪些控件譔隱藏,哪些要顯示了。
下面是基本控件:
com.cooliris.media.GridLayer
com.cooliris.media.BackgroundLayer
com.cooliris.media.HudLayer
com.cooliris.media.ImageButton
com.cooliris.media.TimeBar
com.cooliris.media.MenuBar
com.cooliris.media.PopupMenu
com.cooliris.media.PathBarLayer
在渲染時,每一幀所有界面上的元素都畫了,由于根據上面的狀態只把特定窗口的特定元素顯示出來,其它窗口中的隱藏,所以不會亂。
Layer是上面控件的基類,上面控件的類也就有了下面兩個方法來隱藏不譔顯示的界面元素。
public boolean isHidden() {
return mHidden;
}
public void setHidden(boolean hidden) {
if (mHidden != hidden) {
mHidden = hidden;
onHiddenChanged();
}
}
下面是根據上面分類來畫不同元素所用的標識:
public static final int PASS_THUMBNAIL_CONTENT = 0;
public static final int PASS_FOCUS_CONTENT = 1;
public static final int PASS_FRAME = 2;
public static final int PASS_PLACEHOLDER = 3;
public static final int PASS_FRAME_PLACEHOLDER = 4;
public static final int PASS_TEXT_LABEL = 5;
public static final int PASS_SELECTION_LABEL = 6;
public static final int PASS_VIDEO_LABEL = 7;
public static final int PASS_LOCATION_LABEL = 8;
public static final int PASS_MEDIASET_SOURCE_LABEL = 9;
drawDisplayItem(view, gl, displayItem, texture, PASS_THUMBNAIL_CONTENT, placeholder,
displayItem.mAnimatedPlaceholderFade); 畫縮略圖的,注掉此句,前兩屏只顯示框,第三屏OK
drawDisplayItem(view, gl, displayItem, texture, PASS_FOCUS_CONTENT, null, 0.0f);畫單張圖片的,注掉,第三屏黑屏
drawDisplayItem(view, gl, itemDrawn, textureToUse, PASS_FRAME, previousTexture, ratio);畫邊框的,注掉,前兩屏明顯沒有邊框,巨齒明顯
drawDisplayItem(view, gl, displayItem, textureString, PASS_TEXT_LABEL, null, 0);畫文本標簽的
drawDisplayItem(view, gl, displayItem, textureToUse, PASS_SELECTION_LABEL, null, 0);畫選中標記的
drawDisplayItem(view, gl, displayItem, videoTexture, PASS_VIDEO_LABEL, null, 0);畫視頻標記的
drawDisplayItem(view, gl, displayItem, locationTexture, PASS_LOCATION_LABEL, null, 0);畫位置標記的
drawDisplayItem(view, gl, displayItem, locationTexture, PASS_MEDIASET_SOURCE_LABEL,
transparentTexture, 0.85f);畫源來源圖標的(相機或一般文件夾)
二、特效
舉如何顯示一張圖片為例,在圖片完全顯示出來經過這樣一個過程,附近的圖片漸小漸出,當前圖片漸大漸入,當前圖片逐漸變大直到全屏。實現這個特效,要進行很多幀的渲染。就是說并不是只調一次onDrawFrame函數就可以了,要調用多次。可以把這個特效的實現想成一個狀態變化的過程,在每一個狀態,紋理的顯示大小和位置都不同,這也符合動畫的基本原理。放大、縮小我們只要改變頂點數據就可以做到,gallery3d也是這樣做的,下面是主要代碼:
我們知道調用onDrawFrame來渲染,最后調到下面的drawFocusItems函數,
GridQuad quad = GridDrawables.sFullscreenGrid[vboIndex];
float u = texture.getNormalizedWidth();
float v = texture.getNormalizedHeight();
float imageWidth = texture.getWidth();
float imageHeight = texture.getHeight();
boolean portrait = ((theta / 90) % 2 == 1);
if (portrait) {
viewAspect = 1.0f / viewAspect;
}
quad.resizeQuad(viewAspect, u, v, imageWidth, imageHeight);//改變用來貼圖片的長方形的大小
quad.bindArrays(gl);//綁定新數據,為渲染做準備。
而位置的改變有兩種方式,一種是直接以頂點數據中改變,另一種是計算出在3維3個方向的偏移量,再調用gltranslate來做,從代碼可以看出采用的是第二種方式來做的,比第一種方式更方便一些。代碼:
gl.glTranslatef(-translateXf, -translateYf, -translateZf);
而這里的3個偏移量的計算是和camera相關的,相關文件為GridCamera.java,GridCameraManager.java,過程很復雜,理清楚后再細化吧。
cache管理
下面是cache文件
/sdcard/Android/data/com.cooliris.media/cache/local-album-cache
d---rwxr-x system sdcard_rw 2010-05-21 09:56 local-album-cache
d---rwxr-x system sdcard_rw 2010-05-21 09:56 local-meta-cache
----rwxr-x system sdcard_rw 299877 2010-05-28 07:36 local-album-cachechunk_0
d---rwxr-x system sdcard_rw 2010-05-21 09:56 geocoder-cache
----rwxr-x system sdcard_rw 284 2010-05-28 07:36 local-album-cacheindex
d---rwxr-x system sdcard_rw 2010-05-21 09:56 local-image-thumbs
d---rwxr-x system sdcard_rw 2010-05-21 09:56 local-video-thumbs
d---rwxr-x system sdcard_rw 2010-05-21 09:56 picasa-thumbs
----rwxr-x system sdcard_rw 80 2010-05-28 07:36 local-meta-cachechunk_0
----rwxr-x system sdcard_rw 164 2010-05-28 07:36 local-meta-cacheindex
d---rwxr-x system sdcard_rw 2010-05-21 09:56 hires-image-cache
----rwxr-x system sdcard_rw 627629 2010-05-28 07:37 local-image-thumbschunk_0
----rwxr-x system sdcard_rw 3914 2010-05-21 09:56 local-image-thumbsindex
----rwxr-x system sdcard_rw 53343 2010-05-28 07:34 hires-image-cache-4982941342287215583_1024.cache
----rwxr-x system sdcard_rw 237692 2010-05-28 07:33 hires-image-cache3684568484369117627_1024.cache
----rwxr-x system sdcard_rw 133182 2010-05-28 07:34 hires-image-cache607542544081226432_1024.cache
----rwxr-x system sdcard_rw 83223 2010-05-28 07:34 hires-image-cache4275479623210216146_1024.cache
----rwxr-x system sdcard_rw 292837 2010-05-28 07:34 hires-image-cache-646316556936433937_1024.cache
----rwxr-x system sdcard_rw 191377 2010-05-28 07:35 hires-image-cache2631364604509958174_1024.cache
----rwxr-x system sdcard_rw 366905 2010-05-28 07:35 hires-image-cache-3280562009766080884_1024.cache
----rwxr-x system sdcard_rw 323671 2010-05-28 07:35 hires-image-cache5752471827533329222_1024.cache
創建cache的關鍵代碼
LocalDataSource
public static final DiskCache sThumbnailCache = new DiskCache("local-image-thumbs");----------------------local-image-thumbs local-image-thumbschunk_0 local-image-thumbsindex
public static final DiskCache sThumbnailCacheVideo = new DiskCache("local-video-thumbs");--------------------local-video-thumbs
public static final DiskCache sAlbumCache = new DiskCache("local-album-cache");----------------------local-album-cache local-album-cacheindex
public static final DiskCache sMetaAlbumCache = new DiskCache("local-meta-cache");------------------local-meta-cache local-meta-cacheindex
getChunkFile --------------local-meta-cachechunk_0 local-album-cachechunk_0
ReverseGeocoder:: private static final DiskCache sGeoCache = new DiskCache("geocoder-cache"); -------------------------geocoder-cache
PicasaDataSource:: public static final DiskCache sThumbnailCache = new DiskCache("picasa-thumbs");-----------------------------picasa-thumbs
UriTexture::writeToCache --------------------------hires-image-cache-xxx_1024.cache
歡迎大家多交流,不對之處請大家指正。
OpenGL Programming Guide http://www.glprogramming.com/red/