制作一个基于ImageView和ImageSwitcher的照片浏览器

发表于 2020-05-12 16:12:47
阅读 42

介绍

介绍

在 Android 的App程序里,可以通过 ImageView 来查看图片,可以通过 ImageSwitcher 来浏览多张图片

我们今天就借助 ImageView 和 ImageSwitcher 来制作一个简单的照片浏览器

教程

权限

我们需要申请存储权限

通过 manifests 申请权限

打开 app -> manifests -> AndroidManifest.xml 文件

在 manifest 节点下面增加

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

动态申请权限

新版本的 Android Studio 在进行 IO 操作时候需要动态申请权限

导入库

import androidx.core.app.ActivityCompat;
import androidx.core.content.ContextCompat;

申请权限

if(ContextCompat.checkSelfPermission(MainActivity.this, Manifest.permission.READ_EXTERNAL_STORAGE) != PackageManager.PERMISSION_GRANTED){
    ActivityCompat.requestPermissions(MainActivity.this, new String[]{Manifest.permission.READ_EXTERNAL_STORAGE}, 1);
}

布局

我们只需要一个 ImageSwitcher 控件

打开 app -> res -> layout -> activity_main.xml 文件

增加 ImageSwitcher 控件

<ImageSwitcher
    android:id="@+id/imageswitcher"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000"/>

代码

这里面用到了几个技术

  • File:文件夹遍历技术

  • ImageSwitcher:图片调度器的使用

  • ImageView:图片显示器的使用

  • ScaleAnimation:缩放动画的使用

  • Timer:定时器的使用

自定义属性

我们将一些关键对象放到了属性里,便于调用

private ImageSwitcher imgSwitcher;
private ScaleAnimation animation;
private String[] images;
private Integer currPos;
private Float downX;

文件夹遍历

我们建立 images 字符串数组,通过遍历文件夹将 jpg 图片的路径保存进来

private void LoadPictures(){
    String fileName;
    File dir;
    Integer i, l, fl;
    dir = new File("/mnt/sdcard/DCIM/Camera/");
    File[] subFile = dir.listFiles();
    l = subFile.length;
    if(l > 0){
        fl = 0;
        for(i=0;i<l;i++){
            if(subFile[i].isFile()){
                fileName = subFile[i].getAbsolutePath();
                if(fileName.toLowerCase().indexOf(".jpg") != -1){
                    fl ++;
                }
            }
        }
        images = new String[fl];
        fl = 0;
        for(i=0;i<l;i++){
            if(subFile[i].isFile()){
                fileName = subFile[i].getAbsolutePath();
                if(fileName.toLowerCase().indexOf(".jpg") != -1){
                    images[fl] = fileName;
                    fl ++;
                }
            }
        }
    }
}

设置 ImageSwitcher 图片调度器

现在我们需要对 ImageSwitcher 进行初始化,设置事件,绑定事件等操作了

初始化

imgSwitcher = (ImageSwitcher) findViewById(R.id.imageswitcher);

设置切换效果

imgSwitcher.setInAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_in));
imgSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_out));

设置工厂对象

imgSwitcher.setFactory(new ViewFactory(){
    @Override
    public View makeView(){
        ImageView imgView = new ImageView(MainActivity.this);
        imgView.setLayoutParams(new ImageSwitcher.LayoutParams(-1, LayoutParams.MATCH_PARENT));
        return imgView;
    }
});

设置触摸事件,左右滑动

imgSwitcher.setOnTouchListener(new OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        try{
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    downX = event.getX();
                    break;
                case MotionEvent.ACTION_UP:
                    float lastX = event.getX();
                    if(lastX > downX) {
                        PlayPrevious();
                    }

                    if(lastX < downX){
                        PlayNext();
                    }
                    break;
            }
        }
        catch (Exception e){
            Toast.makeText(getApplication(), e.getMessage(), Toast.LENGTH_SHORT).show();
        }
        return true;
    }
});

上一张、下一张函数

private void PlayPrevious(){
    if (currPos == 0) {
        currPos = images.length;
    }
    imgSwitcher.setInAnimation(AnimationUtils.loadAnimation(getApplication(), android.R.anim.fade_in));
    imgSwitcher.setOutAnimation(AnimationUtils.loadAnimation(getApplication(), android.R.anim.fade_out));
    currPos--;
    imgSwitcher.clearAnimation();
    imgSwitcher.setImageURI(Uri.fromFile(new File(images[currPos])));
    imgSwitcher.startAnimation(animation);
}

private void PlayNext(){
    if(currPos == images.length - 1) {
        currPos = -1;
    }
    imgSwitcher.setInAnimation(AnimationUtils.loadAnimation(getApplication(), android.R.anim.fade_in));
    imgSwitcher.setOutAnimation(AnimationUtils.loadAnimation(getApplication(), android.R.anim.fade_out));
    currPos ++ ;
    imgSwitcher.clearAnimation();
    imgSwitcher.setImageURI(Uri.fromFile(new File(images[currPos])));
    imgSwitcher.startAnimation(animation);
}

添加缩放动画效果

现在我们给图片增加缩放动画效果

animation = new ScaleAnimation(
        1, 1.5f,
        1, 1.5f,
        Animation.RELATIVE_TO_SELF,
        0.5f,
        1,
        0.5f
);
animation.setDuration(6000);
animation.setRepeatCount(0);

设置自动播放定时器

我们通过 Timer 定时器让 ImageSwitcher 自动轮播照片

final Handler handler = new Handler();
Timer timer = new Timer();
TimerTask timerTask = new TimerTask() {
    @Override
    public void run() {
        handler.post(new Runnable() {
            @Override
            public void run() {
                PlayNext();
            }
        });
    }
};
timer.schedule(timerTask, 0, 6000);

测试

简单的照片浏览器制作完成了,赶快安装到手机上用用看吧~~