使用Viewpager制作图片阅读器（4）- 文件夹分类（附上源码）

最新推荐文章于 2017-12-18 06:34:24 发布

hewence1

最新推荐文章于 2017-12-18 06:34:24 发布

阅读量842

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/hewence1/article/details/39002413

本文介绍了如何在图片管理中通过文件夹分类优化图片展示体验，包括生成缩略图、数据获取与分类、适配器连接与布局设置等关键步骤。详细解释了如何将大量图片按文件夹分类展示，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

源码下载地址：http://download.youkuaiyun.com/detail/hewence1/7853405

我们现在做的是把所有的图片都放在一个list里面的，当比较多的时候显示加载就使用起来就不方便了。本文在上一节的基础上增加一个功能：

在进入list列表之前把图片的文件夹进行分类，点击对应的文件夹来查看本文件夹里面的内容，而不是查看android设备里面所有的图片。

先看一下效果

先新建一个图片文件夹的对应的实例类：

MyPhotoDir.java

public class MyPhotoDir {
    private String DirPath;

    private ArrayList<MyPhoto> mList = new ArrayList<MyPhoto>();

    private Drawable mThumb;

    private String Name;
    
    public MyPhotoDir(String dirPath){
        DirPath = dirPath;
    }
    public String getDirPath() {
        return DirPath;
    }
    
    public void setDirPath(String dirPath) {
        DirPath = dirPath;
    }

    public ArrayList<MyPhoto> getmList() {
        return mList;
    }

    public void setmList(ArrayList<MyPhoto> mList) {
        this.mList = mList;
    }

    public int getCount() {
        return mList.size();
    }

    public Drawable getmThumb() {
        if (null == mThumb){
            mThumb = createThumb(400 , 400);
        }
        return mThumb;
    }
    
    /**
     * 生成缩略图
     */
    private Drawable createThumb(int width , int height) {
        Bitmap output = Bitmap.createBitmap(width, height,
                Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(output);
        canvas.drawARGB(0x99, 0xff,0xff, 0x00);
        final Paint paint = new Paint();
        final int padding = width / 10;
        Bitmap bit0 , bit1 = null , bit2 = null , bit3 = null;
        if (mList.size() >= 4){
            bit0 = ImageLoader.decodeSampledBitmapFromResource(mList.get(0).getPath(), width, height);
            bit1 = ImageLoader.decodeSampledBitmapFromResource(mList.get(1).getPath(), width, height);
            bit2 = ImageLoader.decodeSampledBitmapFromResource(mList.get(2).getPath(), width, height);
            bit3 = ImageLoader.decodeSampledBitmapFromResource(mList.get(3).getPath(), width, height);
        }else if (mList.size() == 3){
            bit0 = ImageLoader.decodeSampledBitmapFromResource(mList.get(0).getPath(), width, height);
            bit1 = ImageLoader.decodeSampledBitmapFromResource(mList.get(1).getPath(), width, height);
            bit2 = ImageLoader.decodeSampledBitmapFromResource(mList.get(2).getPath(), width, height);
        }else if (mList.size() == 2){
            bit0 = ImageLoader.decodeSampledBitmapFromResource(mList.get(0).getPath(), width, height);
            bit1 = ImageLoader.decodeSampledBitmapFromResource(mList.get(1).getPath(), width, height);
        }else if (mList.size() == 1){
            bit0 = ImageLoader.decodeSampledBitmapFromResource(mList.get(0).getPath(), width, height);
        }else{
            return null;
        }
        
        
        canvas.drawBitmap(bit0, new Rect(0, 0, bit0.getWidth(), bit0.getHeight()),
                new Rect(padding / 2, padding / 2, width / 2, height / 2), paint);
        if (null != bit1){
            canvas.drawBitmap(bit1, new Rect(0, 0, bit1.getWidth(), bit1.getHeight()),
                    new Rect(width / 2, padding / 2, width - padding / 2, height / 2), paint); 
        }
        if (null != bit2){
            canvas.drawBitmap(bit2, new Rect(0, 0, bit2.getWidth(), bit2.getHeight()),
                    new Rect(padding / 2, height / 2, width / 2, height - padding / 2), paint);
        }
        if (null != bit3){
            canvas.drawBitmap(bit3, new Rect(0, 0, bit3.getWidth(), bit3.getHeight()),
                    new Rect(width / 2, height / 2, width - padding / 2, height - padding / 2), paint);
        }
        
        return new BitmapDrawable(output);
    }
    
    public void setmThumb(Drawable mThumb) {
        this.mThumb = mThumb;
    }

    public String getName() {
        if (TextUtils.isEmpty(Name)){
            int index = DirPath.lastIndexOf("/");
            Name = DirPath.substring(index + 1);
        }
        return Name;
    }

    public void setName(String name) {
        Name = name;
    }

    public void add(MyPhoto photo) {
        mList.add(photo);
    }
    
    @Override
    public boolean equals(Object o) {
        LogUtils.w("equals Object o");
        if (this == o){
            LogUtils.w("equals Object this == o return  true");
            return true;
        }
        if (o instanceof MyPhotoDir){
            MyPhotoDir dir = (MyPhotoDir)o;
            String pathDir = dir.getDirPath();
            LogUtils.w("equals Object dir.getDirPath() = " + pathDir + "this.getDirPath() = " + this.getDirPath());
            if (pathDir != null  && pathDir.equals(this.getDirPath())){
                LogUtils.w("equals Object path.eques path  return  true");
                return true;
            }
        }
        LogUtils.w("equals Object return false");
        return false;
    }

}

其中DirPath是photoDir的唯一标识
里面的List就对应的文件夹下面的所有的图片的列表，每个图片的缩略图都是更加这个list的里面的图片来合成的，合成方法是List的前四张（少于4张就有几张合成几张）图片拼起来的。对应函数：createThumb（）

**
     * 生成缩略图
     */
    private Drawable createThumb(int width , int height) {
        Bitmap output = Bitmap.createBitmap(width, height,
                Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(output);
        canvas.drawARGB(0x99, 0xff,0xff, 0x00);
        final Paint paint = new Paint();
        final int padding = width / 10;
        Bitmap bit0 , bit1 = null , bit2 = null , bit3 = null;
        if (mList.size() >= 4){
            bit0 = ImageLoader.decodeSampledBitmapFromResource(mList.get(0).getPath(), width, height);
            bit1 = ImageLoader.decodeSampledBitmapFromResource(mList.get(1).getPath(), width, height);
            bit2 = ImageLoader.decodeSampledBitmapFromResource(mList.get(2).getPath(), width, height);
            bit3 = ImageLoader.decodeSampledBitmapFromResource(mList.get(3).getPath(), width, height);
        }else if (mList.size() == 3){
            bit0 = ImageLoader.decodeSampledBitmapFromResource(mList.get(0).getPath(), width, height);
            bit1 = ImageLoader.decodeSampledBitmapFromResource(mList.get(1).getPath(), width, height);
            bit2 = ImageLoader.decodeSampledBitmapFromResource(mList.get(2).getPath(), width, height);
        }else if (mList.size() == 2){
            bit0 = ImageLoader.decodeSampledBitmapFromResource(mList.get(0).getPath(), width, height);
            bit1 = ImageLoader.decodeSampledBitmapFromResource(mList.get(1).getPath(), width, height);
        }else if (mList.size() == 1){
            bit0 = ImageLoader.decodeSampledBitmapFromResource(mList.get(0).getPath(), width, height);
        }else{
            return null;
        }
        
        
        canvas.drawBitmap(bit0, new Rect(0, 0, bit0.getWidth(), bit0.getHeight()),
                new Rect(padding / 2, padding / 2, width / 2, height / 2), paint);
        if (null != bit1){
            canvas.drawBitmap(bit1, new Rect(0, 0, bit1.getWidth(), bit1.getHeight()),
                    new Rect(width / 2, padding / 2, width - padding / 2, height / 2), paint); 
        }
        if (null != bit2){
            canvas.drawBitmap(bit2, new Rect(0, 0, bit2.getWidth(), bit2.getHeight()),
                    new Rect(padding / 2, height / 2, width / 2, height - padding / 2), paint);
        }
        if (null != bit3){
            canvas.drawBitmap(bit3, new Rect(0, 0, bit3.getWidth(), bit3.getHeight()),
                    new Rect(width / 2, height / 2, width - padding / 2, height - padding / 2), paint);
        }
        
        return new BitmapDrawable(output);
    }

大家可以使用自己的合成方法！

那么在获取数据的时候就要把前面的方法进行修改：

思路如下：

1.在得到文件的全名之后，在得到图片的文件夹的路劲，

2.把MyPhoto尝试加入到列表（DataConfig.mPhotoDirList）分类中

3.在加入列表之前先检查myPhoto对应的文件夹是否已经在DataConfig.mPhotoDirList，

如果存在的话，就把myPhoto加入到对应的PhotoDir的list中

如果不存在的话，就根据MyPhoto的文件夹路径new 一个PhotoDir，把PhotoDir加入到DataConfig.mPhotoDirLis，再把MymyPhoto加入到对应的PhotoDir的list中

private void joinItemToDir(MyPhoto photo) {
        String stringDir = photo.getPathDir();
        MyPhotoDir mPhotoDir = null;
        if (!TextUtils.isEmpty(stringDir)){
            if (null == (mPhotoDir = findPhotoDir(stringDir)) ){  // 不存在这个目录
                mPhotoDir = new MyPhotoDir(stringDir);
                DataConfig.mPhotoDirList.add(mPhotoDir);
            } 
            mPhotoDir.add(photo);
        }
    }
    
    
    /**
     * @return  是否存在这个图片目录
     * 不存在的话就返回null
     */
    private MyPhotoDir findPhotoDir(String pathDir) {
        for (MyPhotoDir dir : DataConfig.mPhotoDirList){
            if (dir.getDirPath().equals(pathDir)){
                return dir;
            }
        }
        return null;
    }

得到数据之后就就跟Adapter联系起来，显示UI

布局文件：

<pre name="code" class="java"><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/photo10" >
    <GridView 
        android:id="@+id/mGridView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:horizontalSpacing="20dp"
        android:numColumns="3"
        android:verticalSpacing="20dp"
        >
        
    </GridView>
    
</RelativeLayout>

设置

Adapter mAdapter = new MyPhoteDirAdapter(DataConfig.mPhotoDirList, MainActivity.this);
        mGridView.setAdapter(mAdapter);

MyPhoteDirAdapter.java<pre name="code" class="java">    Context mContext = null;
    ArrayList<MyPhotoDir> mList = null;
    
    public MyPhoteDirAdapter(ArrayList<MyPhotoDir> list , Context context){
        mList = list;
        mContext = context;
    }
    @Override
    public int getCount() {
        return mList.size();
    }

    @Override
    public Object getItem(int arg0) {
        return mList.get(arg0);
    }

    @Override
    public long getItemId(int arg0) {
        return arg0;
    }
    
     ViewHolder mHolder = null;
    @Override
    public View getView(int position, View view, ViewGroup parent) {
        ViewHolder mHolder = null;
        if (null == view){
            view = LayoutInflater.from(mContext).inflate(R.layout.layout_photodir, null);
            mHolder = new ViewHolder();
            mHolder.mImage = (ImageView)view.findViewById(R.id.photo_thumb);
            mHolder.mText = (TextView)view.findViewById(R.id.photo_name);
            view.setTag(mHolder);
        }else{
            mHolder = (ViewHolder)view.getTag();
        }
        mHolder.mImage.setImageDrawable(mList.get(position).getmThumb());
        mHolder.mText.setText(mList.get(position).getName());
        return view;
    }
    
    public class ViewHolder{
        public ImageView mImage = null;
        public TextView mText = null;
    }

对应布局文件：

<pre name="code" class="html"><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    
    <ImageView 
        android:id="@+id/photo_thumb"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"/>
    <TextView 
        android:id="@+id/photo_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="25dp"
        android:textColor="#ffffffff"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/photo_thumb"/>

</RelativeLayout>

再加上点击进入对应的文件夹就大功告成了：

mGridView.setOnItemClickListener(new OnItemClickListener() {


            @Override
            public void onItemClick(AdapterView<?> arg0, View view, int position, long arg3) {
                LogUtils.i("onItemClick position = " + position);
                Intent it = new Intent(MainActivity.this , MyListActivity.class);
                mCurPosition = position;
                it.putExtra("index", position);
                startActivityForResult(it, REQUEST_MY_LIST);
            }
        });

点击时把点击的第几个文件传进去

it.putExtra("index", position);

在MyListActivity接收

Intent it = getIntent();
        if (null != it){
            index = it.getIntExtra("index", index);
        }

主要代码都贴出来了，主要的地方是生成文件的缩略图，跟文件夹的分类