一、背景
ByPhoto是個安卓圖片選擇庫， 在啟動渲染速度上做了很多優化； 榮耀8真機測試，圖庫里有3000多張圖片。 冷啟動圖片選擇頁渲染完成需800ms左右， 熱啟動（即第二次打開Activity）渲染需要300ms。 真正實現了秒開的用戶體驗。
設計背景.png
結果頁.png
選中頁.png
二、需求
1、支持圖片預加載， 即將圖庫的前幾張圖片加載到內存中； 使用了Glide的preload；
2、數據庫分段回調， 即圖片有幾千張圖片時， 每查詢一定數量時(例如10條)就通知UI補充數據； RecyclerView不會刷新屏幕外的圖片，只是緩存了文件路徑； PS：這里還可以再優化一下，例如列表向下滑動時預加載后半段數據； 但考慮到字符串占用內存不大，幾兆的樣子，暫未實現；
3、數據結構， 使用適當的數據結構Map、Set降低讀寫時間復雜度；
4、支持手指在屏幕滑動時自動勾選經過的圖片；
5、勾選圖片時只刷新選中圖標， 不刷新item圖片；避免縱向滑動時刷新閃爍的問題；
6、支持設置單行圖片數量和最多選中數量；
改造點.png
三、核心代碼
類圖.png
在子線程查詢數據庫，并分批通知UI數據變化；
@Override protected List<ImageItem> doInBackground(String... strings) {
...
while (cursor.moveToNext()) {
...
//每隔10個圖片報一次, 即分段通知UI數據變化
if (i % Constants.PHOTO_COUNT_PER_TIME == 0 && i > 0) {
ImageItem[] segData = new ImageItem[Constants.PHOTO_COUNT_PER_TIME];
for (int k = 0; k < Constants.PHOTO_COUNT_PER_TIME; k++) {
segData[k] = itemList.get(i - Constants.PHOTO_COUNT_PER_TIME + k);
}
publishProgress(segData);
}
return null;
}
預加載前幾張圖片到Glide緩存中, 默認加載前15張；
public static void preloadData(final Context ctx) {
...
while (cursor.moveToNext() && i < Constants.MAX_PRELOAD_PHOTO_NUMS) {
final String path = cursor.getString(cursor.getColumnIndex(MediaStore.Images.Media.DATA));
if (path != null && new File(path).exists()) {
Log.d("brycegao", "文件已存在：" + path);
}
sHandler.post(new Runnable() {
@Override public void run() {
Glide.with(ctx)
.load(new File(path))
.addListener(new RequestListener<Drawable>() {
@Override
public boolean onLoadFailed(@Nullable GlideException e, Object model,
Target<Drawable> target, boolean isFirstResource) {
return false;
}
@Override public boolean onResourceReady(Drawable resource, Object model,
Target<Drawable> target, DataSource dataSource, boolean isFirstResource) {
return false;
}
})
.preload(Constants.getScreenWidth(context), Constants.getScreenWidth(context));
}
});
i++;
}
...
}
在Activity的onCreate最開始啟動線程加載數據, 注意：這里不會出現并發問題， 原因是子線程通過Handler執行UI線程的函數。 onCreate必須執行完成才可能響應子線程觸發的回調；
protected void onCreate(Bundle savedInstanceState) {
//在子線程加載數據
initData();
super.onCreate(savedInstanceState);
...
}
重寫RecyclerView并處理滑動事件, 邏輯是判斷橫向滑動時勾選經過的item， 縱向滑動時不做處理； 通過坐標(x,y)找到匹配的RecyclerView條目；
private boolean processTouchEvent(MotionEvent event) {
int x = (int) event.getX();
int y = (int) event.getY();
//記錄點擊屏幕時的初始坐標
if (event.getAction() == MotionEvent.ACTION_DOWN) {
mDownX = x;
mDownY = y;
}
//抬起手指時重置
if (event.getAction() == MotionEvent.ACTION_UP
|| event.getAction() == MotionEvent.ACTION_CANCEL) {
mDownY = 0;
mDownX = 0;
mLastX = 0;
mLastY = 0;
}
if (event.getAction() == MotionEvent.ACTION_MOVE) {
double distance = Math.sqrt(Math.abs(x - mLastX) * Math.abs(x - mLastX)
+ Math.abs(y - mLastY) * Math.abs(y - mLastY));
//如果是橫向滑動且滑動距離超過閾值，則判斷經過的item并勾選
if (distance > MIN_DISTANCE && Math.abs(x - mDownX) > Math.abs(y - mDownY)) {
mLastY = y;
mLastX = x;
doCheckSingleFinger(x, y);
}
}
return false;
}
控件：設置控件固定寬高， 減少測量時間；
四、總結
todo：手指滑動時取消勾選狀態； 手指滑動時RecyclerView不動；
通過各種技術措施， 盡可能減少渲染時間； 目前最耗時的部分是Glide加載文件并繪制到控件；
監聽DrawListener回調， 顯示第一個圖片(不是背景圖，是目標圖片)需要800ms左右(冷啟動），UI體驗看上去就是RecyclerView控件白了一下；
大概寫了2天， 有一些收獲。
歡迎技術交流~~~
