Picture Flash(图片放映)

Picture Flash (图片放映)
考点: 数据库操作, 图片内存管理, 列表类视图, 动画, [异步线程]
功能描述:
1.创建放映专辑(专辑创建界面)
用户从手机中选定多张图片, 设置图片专辑名称后, 点击确认创建一个图片flash专辑.
1)图片列表从系统媒体库中查询获取, 按图片媒体库中的添加时间排列
2)采用两列多行的方式显示图片列表
3)用户可以输入Flash专辑的名称
4)选定多张图片并且输入专辑名称后, 点击OK按钮后创建一个图片Flash专辑存到数据库.

其他说明:
A.用户点击图片即可选定图片, 如已选中则转为未选定
B.若用户没有输入专辑名, 点击OK按钮时则Toast提示”请输入专辑名”
C.若用户未选择任何图片, 点击OK按钮时则Toast提示”请选择图片”
D.图片的加载会比较耗时, 考虑使作异步线程进行加载

图2.1

2.专辑列表浏览(主界面)
1)以列表的方式显示用户之前创建的所有专辑
2)列表每项显示专辑名, 及其中的第一张图片作为封面
3)点击列表中的专辑即跳转到图片Flash播放界面(见功能点3)
4)点击标题栏右边的”+”按钮跳转到专辑创建界面

其他说明:
A.如初始进入程序专辑列表为空, 可在列表空白处给出提示信息
B.如列表较多时加载数据需要一些时间, 考虑使用异步线程加载并显示一个loading

图 2.2

3.播放图片Flash专辑(图片Flash播放界面)
1)进入界面后即开始播放当前专辑的所有图片
2)以图片由大到小的镜头拉近动画效果(参看天猫主页的顶部Banner效果)顺序播放图片, 循环播放
3)在页面底部以 “ 当前页 / 总页数”的格式显示播放进度
4)切换到下一张图片的时机为当图片缩放至布满屏幕时(高度或宽度布满即可, 保持图片原比例), 图片起始的大小为布满大小的1.2倍
在播放其间点击屏幕任意位置即退出播放界面

图2.3

这是来到公司的第二个小项目，做一个图片专辑放映。最终实现的效果如下所示：

然后，附上程序的流程图

接着，附上项目的MUL图。

分析一下需求，要实现上述效果，需要做的有以下几点：
1. 自定义imagerloader类的实现
2. 图片路径的获取
3. 数据库的操作
4. 图片的放映
5. recylerview的使用以及图片大小的适配

要完成上述功能，首先我们必须写好一个imageloader类，一是不能动不动就OOM，二是使用起来要方便简洁。刚好想起鸿洋有一篇讲解仿微信相册的博客，于是就跑去看了。

主要是http://blog.csdn.net/lmj623565791/article/details/49300989和http://blog.csdn.net/lmj623565791/article/details/39943731。

首先是imageloader类，获取一个单例，使用一个线程进行加载，队列的调度方式为先进后出

public static ImageLoader getInstance(){    if (mInstance == null)    {        synchronized (ImageLoader.class)        {            if (mInstance == null)            {                mInstance = new ImageLoader(1, Type.LIFO);            }        }    }    return mInstance;}

接着是初始化工作，首先创建一个线程，不断轮训，让线程池不断查找是否有任务。

private void init(int threadCount, Type type)    {        // loop thread        mPoolThread = new Thread()        {            @Override            public void run()            {                Looper.prepare();                mPoolThreadHander = new Handler()                {                    @Override                    public void handleMessage(Message msg)                    {                        mThreadPool.execute(getTask());                        try                        {                            mPoolSemaphore.acquire();                        } catch (InterruptedException e)                        {                        }                    }                };                // 释放一个信号量                mSemaphore.release();                Looper.loop();            }        };        mPoolThread.start();        // 获取应用程序最大可用内存        int maxMemory = (int) Runtime.getRuntime().maxMemory();        int cacheSize = maxMemory / 8;        mLruCache = new LruCache<String, Bitmap>(cacheSize)        {            @Override            protected int sizeOf(String key, Bitmap value)            {                return value.getRowBytes() * value.getHeight();            };        };        mThreadPool = Executors.newFixedThreadPool(threadCount);        mPoolSemaphore = new Semaphore(threadCount);        mTasks = new LinkedList<Runnable>();        mType = type == null ? Type.LIFO : type;    }

接着，便是加载图片。首先通过LruCache算法，根据图片路径从内存取出bitmap，如果为空，创建线程并将线程作为一个Task添加至线程池中。

public void loadImage(final String path, final ImageView imageView)    {        // set tag        imageView.setTag(path);        // UI线程        if (mHandler == null)        {            mHandler = new Handler()            {                @Override                public void handleMessage(Message msg)                {                    ImgBeanHolder holder = (ImgBeanHolder) msg.obj;                    ImageView imageView = holder.imageView;                    Bitmap bm = holder.bitmap;                    String path = holder.path;                    if (imageView.getTag().toString().equals(path))                    {                        imageView.setImageBitmap(bm);                    }                }            };        }        Bitmap bm = getBitmapFromLruCache(path);        if (bm != null)        {            ImgBeanHolder holder = new ImgBeanHolder();            holder.bitmap = bm;            holder.imageView = imageView;            holder.path = path;            Message message = Message.obtain();            message.obj = holder;            mHandler.sendMessage(message);        } else        {            addTask(new Runnable()            {                @Override                public void run()                {                    ImageSize imageSize = getImageViewWidth(imageView);                    int reqWidth = imageSize.width;                    int reqHeight = imageSize.height;                    Bitmap bm = decodeSampledBitmapFromResource(path, reqWidth,                            reqHeight);                    addBitmapToLruCache(path, bm);                    ImgBeanHolder holder = new ImgBeanHolder();                    holder.bitmap = getBitmapFromLruCache(path);                    holder.imageView = imageView;                    holder.path = path;                    Message message = Message.obtain();                    message.obj = holder;                    // Log.e("TAG", "mHandler.sendMessage(message);");                    mHandler.sendMessage(message);                    mPoolSemaphore.release();                }            });        }    }

接下来，根据图片的原有宽高，缩放成指定大小的图片。故须计算一下inSampleSize。

private int calculateInSampleSize(BitmapFactory.Options options,                                      int reqWidth, int reqHeight)    {        // 源图片的宽度        int width = options.outWidth;        int height = options.outHeight;        int inSampleSize = 1;        if (width > reqWidth && height > reqHeight)        {            // 计算出实际宽度和目标宽度的比率            int widthRatio = Math.round((float) width / (float) reqWidth);            int heightRatio = Math.round((float) width / (float) reqWidth);            inSampleSize = Math.max(widthRatio, heightRatio);        }        return inSampleSize;    }

然后根据上述的inSampleSize,对图片进行缩放处理

private Bitmap decodeSampledBitmapFromResource(String pathName,int reqWidth, int reqHeight)    {        // 第一次解析将inJustDecodeBounds设置为true，来获取图片大小        final BitmapFactory.Options options = new BitmapFactory.Options();        options.inJustDecodeBounds = true;        BitmapFactory.decodeFile(pathName, options);        // 调用上面定义的方法计算inSampleSize值        options.inSampleSize = calculateInSampleSize(options, reqWidth,                reqHeight);        // 使用获取到的inSampleSize值再次解析图片        options.inJustDecodeBounds = false;        Bitmap bitmap = BitmapFactory.decodeFile(pathName, options);        return bitmap;    }

到这里，一个基本的ImageLoader已经基本完成了。
然后，我们来到图片页面。通过Content Provider对数据进行查找，获取所有图片的路径、张数和popwindow的路片路径和首张图片的路径。

private class ScanAsyncTask extends          AsyncTask<Void,Void,Void>{        @Override        protected void onPreExecute() {            if (!Environment.getExternalStorageState().equals(                    Environment.MEDIA_MOUNTED)){                view.showToast("暂无外部存储");                return;            }            view.showLoding();        }        @Override        protected Void doInBackground(Void... voids) {            String firstImage = null;            Uri mImageUri = MediaStore.Images.Media.EXTERNAL_CONTENT_URI;            ContentResolver mContentResolver = mContext.getContentResolver();            // 只查询jpeg和png的图片            Cursor mCursor = mContentResolver.query(mImageUri, null,                    MediaStore.Images.Media.MIME_TYPE + "=? or "                            + MediaStore.Images.Media.MIME_TYPE + "=?",                    new String[] { "image/jpeg", "image/png" },                    MediaStore.Images.Media.DATE_ADDED+" DESC");            while (mCursor.moveToNext()){                //获取图片路径                String path = mCursor.getString(mCursor.getColumnIndex(                        MediaStore.Images.Media.DATA                ));                if (firstImage == null){                    firstImage = path;                }                File parentFile = new File(path).getParentFile();                if (parentFile == null)                    continue;                String dirPath = parentFile.getAbsolutePath();                ImageFloder imageFloder = null;                // 利用一个HashSet防止多次扫描同一个文件夹（不加这个判断，图片多起来还是相当恐怖的~~）                if (mDirPaths.contains(dirPath))                {                    continue;                }else {                    mDirPaths.add(dirPath);                    imageFloder = new ImageFloder();                    imageFloder.setDir(dirPath);                    imageFloder.setFirstImagePath(path);                }                int picSize = parentFile.list(new FilenameFilter() {                    @Override                    public boolean accept(File file, String filename) {                        return filename.endsWith(".jpg")                                || filename.endsWith(".png")                                || filename.endsWith(".jpeg");                    }                }).length;                totalCount += picSize;                imageFloder.setCount(picSize);                mImageFloders.add(imageFloder);                if (picSize > mPicsSize){                    mPicsSize = picSize;                    mImgDir = parentFile;                }            }            mCursor.close();            mDirPaths = null;            return null;        }        @Override        protected void onPostExecute(Void aVoid) {            super.onPostExecute(aVoid);            view.dismissLoading();            if (mImgDir == null){                view.showToast("一张图片都没扫描到。。");                return;            }            mImgs = Arrays.asList(mImgDir.list());            view.setPictureData(mImgs,mImgDir.getAbsolutePath());            view.setPicTotalCount(totalCount+"张");            view.setImageFloders(mImageFloders);        }    }

接着，在PictureActivity通过recyclerview对数据进行展示，点击popwindow的时候，根据所选的文件路径，查找该文件夹下的图片，并对数据进行刷新。

@Overridepublic void setImageFloders(List<ImageFloder> list) {        mImageFloders = list;        mListImageDirPopupWindow = new ListImageDirPopupWindow(                ViewGroup.LayoutParams.MATCH_PARENT, (int) (App.sScreenHeight * 0.7),                mImageFloders, LayoutInflater.from(getApplicationContext())                .inflate(R.layout.list_dir, null));        mListImageDirPopupWindow.setOnDismissListener(new PopupWindow.OnDismissListener() {            @Override            public void onDismiss() {                // 设置背景颜色变暗                WindowManager.LayoutParams lp = getWindow().getAttributes();                lp.alpha = 1.0f;                getWindow().setAttributes(lp);            }        });        // 设置选择文件夹的回调        mListImageDirPopupWindow.setOnImageDirSelected(this);    }    @Override    public void selected(ImageFloder floder) {        mImgDir = new File(floder.getDir());        mImgs = Arrays.asList(mImgDir.list(new FilenameFilter() {            @Override            public boolean accept(File dir, String filename) {                if (filename.endsWith(".jpg") || filename.endsWith(".png")                        || filename.endsWith(".jpeg"))                    return true;                return false;            }        }));        mAdapter.setData(mImgs, mImgDir);        idTotalCount.setText(mImgs.size() + "张");        idChooseDir.setText(floder.getName());        mListImageDirPopupWindow.dismiss();    }

当点击右上角的时候，创建一个弹窗，用于添加所选图片的专辑名字。创建成功，则把选过的图片取消，把edittext清空，并将所选图片的路径和专辑名称存入数据库。

mBuilder = new AlertDialog.Builder(this);        mBuilder.setTitle("创建专辑")                .setView(dialog)                .setPositiveButton("确定",new DialogInterface.OnClickListener() {                  @Override                   public void onClick(DialogInterface dialogInterface, int i) {                       if (!editText.getText().toString().equals("")){                           mDialog.cancel();                           mPresenter.createAlumb(editText.getText().toString(),mAdapter.getmSelectedImage());                           editText.setText("");                           mAdapter.clearSelected();                           Toast.makeText(mContext,"创建成功",Toast.LENGTH_SHORT).show();                       }else {                           mDialog.show();                           Toast.makeText(mContext,"专辑名不能为空",Toast.LENGTH_SHORT).show();                      }                  }                 }).setNeutralButton("取消", new DialogInterface.OnClickListener() {            @Override            public void onClick(DialogInterface dialogInterface, int i) {                editText.setText("");            }        });        mDialog = mBuilder.create(); ｝

那么，创建成功的时候，要将数据存入数据库，那么，我们得写一个SqlHelper类，用于管理数据的增删改查。

public class DBOpenHelper extends SQLiteOpenHelper {    //创建一个picture表，有id（自增长）、图片路径、专辑名称三个属性    private static final String CREATE_TABLE_SQL = "create table  picture( id " + "integer primary key autoincrement,path varchar not null, " +"alumb varchar not null)";    public DBOpenHelper(Context context, String name, SQLiteDatabase.CursorFactory factory, int version) {        super(context, name, factory, version);    }    @Override    public void onCreate(SQLiteDatabase sqLiteDatabase) {        sqLiteDatabase.execSQL(CREATE_TABLE_SQL);    }    @Override    public void onUpgrade(SQLiteDatabase sqLiteDatabase, int i, int i1) {    }}

接着就是一个service类，用于实现数据库的增删改查

public class PictureService {    DBOpenHelper mDbHelper;    SQLiteDatabase mDb;    public PictureService(Context context, int version) {        mDbHelper = new DBOpenHelper(context, "picture.db", null, version);    }    public void insert(String path,String alumb) {        mDb = mDbHelper.getWritableDatabase();        mDb.execSQL("insert into picture(path,alumb) values(?,?)",                new Object[]{path, alumb});    }    public void delete(String alumb) {        mDb = mDbHelper.getWritableDatabase();        mDb.execSQL("delete from picture where alumb=?", new String[]{alumb});    }    public List<AlumbBean> getAlumbInfo() {        mDb = mDbHelper.getWritableDatabase();        List<AlumbBean> alumbList = new ArrayList<>();        Cursor cursor = mDb.rawQuery("select * from picture",null);        boolean first = true;        String myPath = "";        String myAlumb = "";        if (cursor.moveToFirst()){            do {                String path = cursor.getString(cursor.getColumnIndex("path"));                String alumb = cursor.getString(cursor.getColumnIndex("alumb"));                ImageBean bean = new ImageBean();                bean.setPath(path)                        .setAlumb(alumb);                    AlumbBean alumbBean = new AlumbBean(myPath,myAlumb);                    if (alumbBean.getAlumb().equals(alumb)){                        myPath = myPath + "," +path;                    }else {                        if (first){                            first = false;                        }else {                            alumbList.add(alumbBean);                        }                        myPath = path;                        myAlumb = alumb;                    }                }while (cursor.moveToNext());                alumbList.add(new AlumbBean(myPath,myAlumb));            }            cursor.close();        return alumbList;    }}

到这里，我们已经可以实现专辑的创建以及图片的选择了。那么剩下的，就是主页面的展示和专辑详情页面的展示。在主页面，我们通过PictureService里的getAlumbInfo()，我们可以获取到专辑列表，我们只需配合recyclerview将数据展示出来即可。

点击主页面专辑的时候，回跳转至ImagePagerActivity
这里是一个viewpager嵌套着fragment，循环滑动的页面。
fragment通过获取到到url，对图片进行加载，配合scale动画。

由于viewpager会自动缓存左右两个页面，即使设置了setOffscreenPageLimit(0);也无效，查看源码，发现limit小于1的时候，会自动设置为1，故设置不缓存是不可行的。所以使用懒加载的方式，当页面可见的时候再加载动画，就不会出现页面跳转之后没有缩放动画了

public class ImageDetailFragment extends Fragment {    private String ImageUrl;    private ImageView img;    private Animation animation;    public static ImageDetailFragment newInstance(String imageUrl) {        final ImageDetailFragment f = new ImageDetailFragment();        final Bundle args = new Bundle();        args.putString("url", imageUrl);        f.setArguments(args);        return f;    }    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        ImageUrl = getArguments()!=null?getArguments().getString("url"):null;        getArguments().remove("url");    }    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {        View v = inflater.inflate(R.layout.image_detail_fragment,container,false);        img = (ImageView) v.findViewById(R.id.image);        ImageLoader.getInstance(3, ImageLoader.Type.LIFO)                .loadImage(ImageUrl,img);        animation = AnimationUtils.loadAnimation(getContext(),R.anim.scale_in);        img.setClickable(true);        img.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View view) {                getActivity().finish();            }        });        return v;    }    @Override    public void onResume() {        super.onResume();        animation = AnimationUtils.loadAnimation(getContext(),R.anim.scale_in);        img.startAnimation(animation);    }    @Override    public void setUserVisibleHint(boolean isVisibleToUser) {        if (isVisibleToUser&&animation!=null){            img.startAnimation(animation);        }        super.setUserVisibleHint(isVisibleToUser);    }}

到这里，项目的分析基本就结束了。最后附上代码链接：
https://github.com/RuijiePan/PictureFlash.git