今天看了今日头条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;
}
}
}