【达内课程】图库应用（3）

创建ImageStoreApplication

public class ImageStoreApplication extends Application {
    private List<Image> images;

    @Override
    public void onCreate() {
        super.onCreate();
        images = new ImageDao(this).getData();
    }

    public List<Image> getImages(){
        return images;
    }
}

AndroidManifest.xml中注册

<application
        android:name=".app.ImageStoreApplication"
        android:allowBackup="true"
        ......
        >
        ......
</application>

MainActivity中获取图片数据的代码进行修改，并且增加点击事件

public class MainActivity extends Activity implements AdapterView.OnItemClickListener {
    private GridView listView;
    private ImageAdapter imageAdapter;
    private List<Image> imageList;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        listView = findViewById(R.id.lv_images);

        ImageStoreApplication app = (ImageStoreApplication)getApplication();
        imageList = app.getImages();

        imageAdapter = new ImageAdapter(this,imageList);

        listView.setAdapter(imageAdapter);

        listView.setOnItemClickListener(this);
    }

    @Override
    public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
        Intent intent = new Intent(this,DisplayImageActivity.class);
        intent.putExtra("position",i);
        startActivity(intent);
    }

}

打开新的展示图片的DisplayImageActivity

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

import com.example.xx.myapplication2.R;
import com.example.xx.myapplication2.app.ImageStoreApplication;
import com.example.xx.myapplication2.entity.Image;

import java.util.List;

public class DisplayImageActivity extends AppCompatActivity implements View.OnClickListener {
    private Button btnPrevious;
    private Button btnNext;
    private ImageView imgThumb;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_display_image);

        btnPrevious = findViewById(R.id.btn_previous);
        btnNext = findViewById(R.id.btn_next);
        imgThumb = findViewById(R.id.img_thumb);

        btnPrevious.setOnClickListener(this);
        btnNext.setOnClickListener(this);

        //获取数据源
        ImageStoreApplication application = (ImageStoreApplication) getApplication();
        imageList = application.getImages();
        //获取当前默认需要显示的图片的索引
        currentImageIndex = getIntent().getIntExtra("position", 0);
        //显示图片
        displayImage();
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.btn_previous:
                diaplayPrevious();
                break;
            case R.id.btn_next:
                diaplayNext();
                break;
        }
    }

    //当前显示的图片的索引
    private int currentImageIndex;
    //数据源
    private List<Image> imageList;

    /**
     * 显示图片
     */
    private void displayImage() {
        imgThumb.setImageBitmap(imageList.get(currentImageIndex).getBitmap());
    }

    /**
     * 显示上一张
     */
    private void diaplayPrevious() {
        currentImageIndex--;
        if (currentImageIndex < 0) {
            currentImageIndex = imageList.size() - 1;
        }
        displayImage();
    }

    /**
     * 显示下一张
     */
    private void diaplayNext() {
        currentImageIndex++;
        if (currentImageIndex >= imageList.size()) {
            currentImageIndex = 0;
        }
        displayImage();
    }
}

目前的运行效果

目前存在的bug就是点到后面就空白了，原因是现在上一张下一张是上个页面已经显示的列表

修改activity_display_image.xml让界面效果显示的更好一些

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.DisplayImageActivity"
    android:gravity="center"
    android:orientation="horizontal">

    <Button
        android:id="@+id/btn_previous"
        android:layout_width="50dp"
        android:layout_height="50dp"/>

    <ImageView
        android:id="@+id/img_thumb"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        android:scaleType="fitXY"
        android:adjustViewBounds="true"
        />

    <Button
        android:id="@+id/btn_next"
        android:layout_width="50dp"
        android:layout_height="50dp"/>

</LinearLayout>

修改DisplayImageActivity

public class DisplayImageActivity extends AppCompatActivity implements View.OnClickListener {

    ......

    //当前显示的图片的索引
    private int currentImageIndex;
    //数据源
    private List<Image> imageList;

    /**
     * 显示图片
     */
    private void displayImage() {
        LoadImageTask task = new LoadImageTask();
        task.execute();
    }

    ......

    private static final int IMAGE_MAX_SIZE = 200;

    private Map<View,LoadImageTask> tasks = new HashMap<View, LoadImageTask>();

    //参数；是否更新进度；结果
    private class LoadImageTask extends AsyncTask<Void,Void,Bitmap> {
        private Image image;

        public LoadImageTask() {
            super();
            this.image = imageList.get(currentImageIndex);
        }

        @Override
        protected Bitmap doInBackground(Void... voids) {
            //判断是否需要解码图片
            if(image.getBitmap() == null){
                //判断并计算图片的缩放比
                //200单位是px
                int rate = 1;
                if(image.getWidth()>IMAGE_MAX_SIZE&&image.getHeight()>IMAGE_MAX_SIZE){
                    if(image.getWidth()<image.getHeight()){
                        rate = image.getWidth()/IMAGE_MAX_SIZE;
                    }else {
                        rate = image.getHeight()/IMAGE_MAX_SIZE;
                    }
                }

                //创建解码图片选项参数
                BitmapFactory.Options opts = new BitmapFactory.Options();
                opts.inSampleSize = rate;
                //解码图片得到图片的bitmap对象
                Bitmap bitmap = BitmapFactory.decodeFile(image.getData(),opts);

                Log.d("Image","解码完成，bitmap尺寸为"+bitmap.getWidth()+"x"+bitmap.getHeight()+"bitmap占用内存:"+bitmap.getByteCount());

                //将解码得到的Bitmap封装到图片数据中
                image.setBitmap(bitmap);
            }

            return null;
        }

        @Override
        protected void onPostExecute(Bitmap bitmap) {
            imgThumb.setImageBitmap(image.getBitmap());
        }
    }
}

修改后的运行效果

增加手势滑动

可以先看手势滑动

DisplayImageActivity增加以下代码即可

    private float downX;

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                Log.d("Motion","ACTION_DOWN->"+event.getX()+","+event.getY());
                downX = event.getX();
                break;
            case MotionEvent.ACTION_UP:
                Log.d("Motion","ACTION_UP->"+event.getX()+","+event.getY());
                if(event.getX()-downX>60){
                    Log.d("Motion","从左至右滑动");
                    diaplayPrevious();
                }
                if(downX - event.getX()>60){
                    Log.d("Motion","从右至左滑动");
                    diaplayNext();
                }
                break;
            case MotionEvent.ACTION_MOVE:
                Log.d("Motion","ACTION_MOVE->"+event.getX()+","+event.getY());
                break;
        }
        return false;
    }

手势滑动效果