Android 图片查看器实现 PhotoView + ViewPager

今天看了今日头条APP的图片查看的效果,就自己实现了一下。

效果如下


首先引入两个库

一个是图片缩放的功能:PhotoView框架

compile 'com.github.chrisbanes:PhotoView:1.2.6'

一个界面滑动退出效果(比如自己滑动空白区域,就退出界面,而不用按手机返回键。我这里实现上下滑动退出界面)Slider框架

compile 'com.komi.slider:slider:0.4.0'

项目目录如下:


布局文件activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.gps.MainActivity">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="120dp">

        <ImageView
            android:id="@+id/photo_1"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:background="@mipmap/photo_1"/>

        <ImageView
            android:id="@+id/photo_2"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:background="@mipmap/photo_2"/>

        <ImageView
            android:id="@+id/photo_3"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:background="@mipmap/photo_3"/>
    </LinearLayout>

</RelativeLayout>

activity_photoview.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


        <android.support.v4.view.ViewPager
            android:id="@+id/ViewPager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#000000"/>

        <TextView
            android:id="@+id/text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#ffffff"
            android:text="1/3"
            android:textSize="25dp"
            android:layout_marginTop="15dp"
            android:layout_marginLeft="15dp"/>
</RelativeLayout>

PhotoViewActivity

package com.example.gps;

import android.content.Intent;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import com.komi.slider.SliderConfig;
import com.komi.slider.SliderUtils;
import com.komi.slider.position.SliderPosition;
import java.util.ArrayList;
import uk.co.senab.photoview.PhotoViewAttacher;


public class PhotoViewActivity extends FragmentActivity {
    private ViewPager viewPager;
    private PagerAdapter pagerAdapter;
    private SliderConfig mConfig;
    private ArrayList<ImageView> mList;
    private TextView textView;
    private int imageIds[]={R.mipmap.photo_1,R.mipmap.photo_2,R.mipmap.photo_3};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_photoview);
        initSilder();
        initView();
        initShowphoto();
    }

    private void initShowphoto() {
        //Bundle bundle = getIntent().getExtras();
        Intent intent = getIntent();
        int i = intent.getIntExtra("showphoto",0);
        setSelect(i);//通过传值获取点击图片位置,从而显示当前图片
    }
    //实现界面上下滑动退出界面效果
    private void initSilder() {
        mConfig = new SliderConfig.Builder()
                .secondaryColor(Color.TRANSPARENT)
                .position(SliderPosition.VERTICAL)  //设置上下滑动
                .edge(false)  //是否允许有滑动边界值,默认是有的true
                .build();
        SliderUtils.attachActivity(this, mConfig);
    }

    private void initView() {
            viewPager=(ViewPager)findViewById(R.id.ViewPager);
            textView=(TextView)findViewById(R.id.text);

            mList = new ArrayList<ImageView>();

           pagerAdapter = new PagerAdapter() {

               // 获取要滑动的控件的数量,在这里我们以滑动的广告栏为例,那么这里就应该是展示的广告图片的ImageView数量
               @Override
               public int getCount() {
                   return imageIds.length;

                   //return Integer.MAX_VALUE;    返回一个比较大的值,目的是为了实现无限轮播
               }

               // 来判断显示的是否是同一张图片,这里我们将两个参数相比较返回即可
               @Override
               public boolean isViewFromObject(View view, Object object) {
                   return view == object;
               }

               // 当要显示的图片可以进行缓存的时候,会调用这个方法进行显示图片的初始化,
               // 我们将要显示的ImageView加入到ViewGroup中,然后作为返回值返回即可
               @Override
               public Object instantiateItem(ViewGroup container, int position) {
                   ImageView imageView = new ImageView(PhotoViewActivity.this);
                   imageView.setImageResource(imageIds[position]);

                   //使图片具有放缩功能
                   PhotoViewAttacher mAttacher=new PhotoViewAttacher(imageView);
                   mAttacher.update();

                   container.addView(imageView);
                   mList.add(imageView);
                   return imageView;
               }

               //PagerAdapter只缓存三张要显示的图片,如果滑动的图片超出了缓存的范围,就会调用这个方法,将图片销毁
               @Override
               public void destroyItem(ViewGroup container, int position, Object object) {
                   container.removeView(mList.get(position));
               }


           };

            viewPager.setAdapter(pagerAdapter);

            //设置滑动监听事件
            viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
                @Override
                public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

                }

                //滑动到第几张图片的调用的方法,position当前显示图片位置
                @Override
                public void onPageSelected(int position) {
                    switch (position){
                        case 0:
                            setSelect(0);
                            textView.setText("1/3");
                            break;
                        case 1:
                            setSelect(1);
                            textView.setText("2/3");
                            break;
                        case 2:
                            textView.setText("3/3");
                            setSelect(2);
                            break;
                    }
                }

                @Override
                public void onPageScrollStateChanged(int state) {

                }
            });

    }

    //启动查看图片时,显示你点击图片
    public void setSelect(int i) {
        switch (i){
            case 0:
                viewPager.setCurrentItem(0);
                break;
            case 1:
                viewPager.setCurrentItem(1);
                break;
            case 2:
                viewPager.setCurrentItem(2);
                break;
        }
    }

}

MainActivity

package com.example.gps;

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

public class MainActivity extends AppCompatActivity implements View.OnClickListener{
    private ImageView imageView_01,imageView_02,imageView_03;

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

    }


    private void initView() {
        imageView_01=(ImageView)findViewById(R.id.photo_1);
        imageView_02=(ImageView)findViewById(R.id.photo_2);
        imageView_03=(ImageView)findViewById(R.id.photo_3);

        imageView_01.setOnClickListener(this);
        imageView_02.setOnClickListener(this);
        imageView_03.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        Intent intent = new Intent(MainActivity.this,PhotoViewActivity.class);
        switch (v.getId()){
            case R.id.photo_1:
                intent.putExtra("showphoto",0);
                startActivity(intent);
                break;
            case R.id.photo_2:
                intent.putExtra("showphoto",1);
                startActivity(intent);
                break;
            case R.id.photo_3:
                intent.putExtra("showphoto",2);
                startActivity(intent);
                break;
        }
    }
}



猜你喜欢

转载自blog.csdn.net/qq_37238649/article/details/79616369
今日推荐