点读笔写字App（2）——初始化本子上已经记录的文字

【如果你想了解这个点读笔写字App的背景，请移步这里
http://www.jianshu.com/p/ee2a1bb99280 】

根据上篇知道了如何从drawable中获取了图片，本着如我一样的新手看完这系列的博文可以做些类似的应用，在这篇的开端会先简单说说画图类，然后转入正题。毕竟我们初始化本子上原来的记录，首先得画上去。

简单介绍画图类

其实画图类还是很简单的，随便到网上看几个例子或者android开发的入门书籍就知道该如何应用了。但是新手在什么都不知道的情况下，往往也不能对这些简单的操作有一些体会，像我自己就是这样子的。我的建议就是自己先去做一个简单的测试应用，然后去修改一些自己怀疑的点，去验证自己的想法。

上次我们获取了一个bitmap，而且该bitmap是允许我们在上面做修改的。那么如何在上面作画呢？需用使用的类有Paint和Canvas，paint是你的画笔，canvas则比较抽象，我不太想强硬地做出不太贴切的比喻。工作中使用我的体会是Canvas是作为Bitmap类的一个封装类，提供了可以在以获得的bitmap上面作画的各种方法。使用如下

canvas = new Canvas(baseBitmap);
canvas.drawRect(x, y, x+nXSpanPerPoint-1, y+nYSpanPerPoint-1, paint);

这样的类往往是很简单，也很容易理解，在使用的时候想要它们有怎样的方法，基本就能找到。如果你感觉应该有一个使用很广泛的方法，而语言事实上没有提供，那就是这语言库不好，不怪你。如果你已经开始读源码了，为什么不模仿着源码风格自己实现一个呢？

保存书写记录的图片

实际上这里保存的就是上面通过canvas改变之后的baseBitmap。

try{
    FileOutputStream fos = new FileOutputStream(SaveToFile);
    bitmap.compress(Bitmap.CompressFormat.PNG, 100, fos);
    fos.close();
}catch (Exception e)
{
    e.printStackTrace();
}

其中compress()函数的三个参数分别是保存格式，图片质量和保存文件的输出流对象。bitmap是baseBitmap的引用。文件的输出流带有全路径的文件名，SaveToFile的获取

DrewContent_Path = this.getApplicationContext().getExternalFilesDir(Environment
  .DIRECTORY_PICTURES) .getAbsolutePath();
SaveToFile= DrewContent_Path + "/" + FormatPageNo(nCurScribingPage) + ".png";

//format int into String by 00(like 1 to "01")
private String FormatPageNo(int nPageNo)
{
    DecimalFormat df = new DecimalFormat("00");
    return df.format(nPageNo);
}

在app运行的时，我们在配套的笔记本上的某页书写后，那么我们将会保存这页的图片到本地。保存的形式是直接把页码取为文件名，如第1页则对应"01.png"。上述code就是把书写的当前页的对应图片存到android/data/$包名$/files/Pictures目录下，取名“$格式化后的PageNo$.png”。这个路径和app是同时存在的，也就是我们卸载了该app，包名目录下面的所有文件包括包名本身也将不复存在。而且这里的读写文件是不需要在AndroidManifest.xml中声明读写外存权限的（一定的API Level以上）。

andriod获取路径的相关知识属于那种一看就知道怎么回事的知识，没有所谓的懂和不懂，只有知道不知道，这个就自行学习吧，网上有好多这些知识的总结，做得很不错的。相关的获取存储路径的函数有RootDirectory、getDataDirectory、getDownloadCacheDirectory、getExternalStorageDirectory、getExternalStoragePublicDirectory、context.getFilesDir、context.getCacheDir、context.getExternalFileDir、context.getExternalCacheDir。需要通过context调用的一看大概就可以猜到是和本app相关的，这些路径的内容和app共存，这些路径下的读写不需要读写权限也合情合理。从File中返回路径字符串的函数有getPath、getAbsolutePath、getCanonicalPah。另外，还有两个判断设备存储方式的函数isExternalStorageEmulated(API 11)和isExternalStorageRemovable(API 9)。

初始化书写的记录

初始化记录的显示，主要通过SimpleAdapter来管理GridView的显示。

Screenshot_2016-06-01-23-07-07_com.afaya.livescri.jpg

msimpleAdapter = new SimpleAdapter(this, mListItems, R.layout.child_page,
        new String[] {"image", "pageNo"}, new int[] {R.id.image, R.id.pageNo});
gridView.setAdapter(msimpleAdapter);
msimpleAdapter.setViewBinder(new SimpleAdapter.ViewBinder() {
    @Override
    public boolean setViewValue(View view, Object o, String s) {
        if((view instanceof ImageView) && (o instanceof Bitmap))
        {
            ImageView imageView = (ImageView)view;
            Bitmap bitmap = (Bitmap)o;
            imageView.setImageBitmap(bitmap);
        }
    }
});

其中mListItems是一个list，里面放着需要显示的数据，每项数据为Bitmap和页码的键值对。由于SimpleAdapter默认接收的图片数据是android资源图片（也就是R.drawable.xxx）,而我们的图片是从本地读取生成的bitmap，所以需要重载setViewValue方法，把图片设置到ImageView。说到这里需要介绍一下GridView网格布局，其每个网格可以是一个子布局，R.layout.child_page的内容如下：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tools="http://schemas.android.com/tools">
    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"/>
    <TextView
        android:id="@+id/pageNo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center"
        android:textSize="30sp"
        tools:text="pageNo"/>
</FrameLayout>

可以把SimpleAdapter想象一个管家，它把负责把数据按照既定的规则显示到GridView。重载上述方法实际上就是改变了原来既定的规则，“我现在拿到的数据是什么样的，该怎么处理数据”。

在使用SimpleAdapter有点需要特别注意的:假如List中存放着的初始化数据在我们的app中是会动态改变的，当需要把更改的数据显示出来，就需要notifyDataSetChanged()来刷新。问题就在这，在我们传一个list参数new一个SimpleAdapter对象时，这个list将和SimpleAdapter的对象一直绑定。很多情况下，明明改变了list中的数据，但是SimpleAdapter通过notifyDataSetChanged()刷新显示内容时却没有变化，有时候是因为我们改变的不是原先绑定的那个list，刷新自然没有变化了。

举两个因为不知道上述原因在app中遇到的坑。

• 坑一：原先为了考虑降低函数间的耦合，尽量减少全局变量在多个函数内出现以降低后期维护难度。我定义了一个从本地读取数据的函数：

  private List<Map<String, Object>> void getDatas(String strPath)
  {
    List<Map<String, Object>> listItems = new ArrayList<>();
    //获取本地数据并处理
    return listItems;
  }

  那么实际上我每次调用getDatas都是新new的一个list，当我去改变getDatas调用获取的数据后，再去调用刷新，因为并没有改变与SimpleAdapter绑定的list，刷新自然没有反应了。
• 坑二：在我初始化页时，我在

  msimpleAdapter = new SimpleAdapter(this, mListItems, R.layout.child_page,
    new String[] {"image", "pageNo"}, new int[] {R.id.image, R.id.pageNo});
  gridView.setAdapter(msimpleAdapter);

  后

  mListItems.Clear();

  结果什么都没显示出来，这里我把绑定的数据都清除了，而我猜测是不是因为在SimpleAdapter的使用中，UI显示之前会有个刷新的调用，所以即使我clear是在setAdapter之后，还是什么都没有了(类似显示出一些图片，然后清除所有图，然后notifyDataSetChanged这样的过程)。

下篇《画布写字细节》将会介绍显示方面的细节。App是如何写字的，是如何在笔记本上写字的同时在app上实时显示的，又是如何处理显示的顺序问题的？