Gallery2的OpenGL ES图形库的移植

在阅读google的Gallery2源码之后，简直和哥伦布发现新大陆时的心情一样激动。这是一个全新的世界，大部分摈弃了android原生的view体系，所有界面的渲染都是基于OpenGL ES，而且不同页面的切换也使用自己的page类，自己去管理它们的生命周期。本文主要对OpenGL ES库的移植过程进行一些记录和计划，以及对该库进行介绍。

原生Gallery2的GLView体系介绍

简介

Gallery2中的ui体系基于OpenGL ES，更为具体的可以说，基于GLSurfaceView。核心是构建了基于OpenGL ES的GLCanvas、GLPaint，图形的绘制主要基于此。类比View体系，也有GLView,不过这个也只是树型结构的抽象，原理也是从GLSurfaceView开始绘制，然后遍历GLView,分别绘制child。

和view的对比

相同点：
- 都有onLayout(),onDraw()，onTouch()类似的方法，目前GLView没有onMeasure()
- 都是树型结构
- 自定义控件的流程类似
- 有类似的控件，比如ImageView类比BitmapTexture,TextView类比StringTexture。

不同点：
- GLView基于GLSurfaceView，所有的动画都在GLSurfaceView完成。
- GLView中BitmapTexture绑定纹理后，可以直接在内存中释放bitmap。
- GLView可以自定义更多的opengl es动画。
- GLView控件的布局需要手动代码布局，比较麻烦
- 绘制在单独的线程

GLView绘制流程

GLRootView是GLSurfaceView的子类，在onFrame()中会进行绘制。这里会进行子View的绘制，流程如下：

如何使用

工程地址

如何布局

View中需要包含GLRootView,是整个体系的核心。如下所示：

<merge xmlns:android="http://schemas.android.com/apk/res/android">

    <RelativeLayout
        android:id="@+id/gl_parent_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <com.android.gallery3d.ui.GLRootView
            android:id="@+id/gl_root_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    RelativeLayout>
    <View android:id="@+id/gl_root_cover"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#fafafa"/>
merge>

设置ContentPane

        GLView panelGLView = new GLView();
        mGLRootView.setContentPane(panelGLView);

添加子View

        GLView glView = new GLView();
        panelGLView.addComponent(glView);

开启一个动画

        AlphaAnimation alphaAnimation = new AlphaAnimation(0, 1);
        alphaAnimation.setDuration(3000);
        alphaAnimation.setRepeatCount(Animation.INFINITE);
        alphaAnimation.setRepeatMode(Animation.REVERSE);
        glView.startAnimation(alphaAnimation);

sample效果图

记录和规划

已完成：
- 基本库的移植
- 补充类View的基本动画，如平移、缩放等

未来计划：
- 实现一些opengl es特有的动画效果
- 能够使用xml对GLView进行布局