Android 高仿微信图片浏览，点击图片，头部和底部隐藏

           Android 微信图片浏览器中，点击某张图片，会隐藏头部和底部，再次点击又会重新展示出来，这样的动画效果其实很简单就能实现，看下图：

 

下面一步一步去实现这个功能：

首选添加依赖：

 compile 'com.github.chrisbanes.photoview:library:+'
 compile 'com.github.bumptech.glide:glide:3.7.0'

添加访问网络权限：

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

布局文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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"
    android:background="@android:color/background_dark"
    >

    <uk.co.senab.photoview.PhotoView
        android:id="@+id/photo_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <FrameLayout
        android:id="@+id/header_view"
        android:layout_width="fill_parent"
        android:layout_height="50dp"
        android:layout_alignParentTop="true"
        android:background="@android:color/background_dark">

        <ImageView
            android:layout_width="20dip"
            android:layout_height="20dip"
            android:clickable="false"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="12dip"
            android:src="@drawable/back"
            />
    </FrameLayout>

    <FrameLayout
        android:id="@+id/footer_view"
        android:layout_width="fill_parent"
        android:layout_height="48dip"
        android:layout_alignParentBottom="true"
        android:background="@android:color/background_dark">
       >


        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="left"
            android:id="@+id/ori_select"
            android:clickable="true"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/phote_select_img"
                android:layout_width="20dip"
                android:layout_height="20dip"
                android:clickable="false"
                android:layout_gravity="center_vertical"
                android:layout_marginLeft="12dip"
                 />

            <TextView
                android:id="@+id/phote_select_img_text"
                android:layout_marginLeft="10dip"
                android:layout_width="wrap_content"
                android:layout_height="50dip"
                android:layout_gravity="left"
                android:clickable="false"
                android:gravity="center"
                android:text="原图"
                android:textColor="#ffffff"
                android:textSize="18sp" />

        </LinearLayout>

        <TextView
            android:id="@+id/next"
            android:layout_width="wrap_content"
            android:layout_height="50dip"
            android:layout_gravity="right"
            android:clickable="true"
            android:layout_marginRight="10dp"
            android:gravity="center"
            android:text="发送"
            android:textColor="#ffffff"
            android:textSize="18sp" />
    </FrameLayout>



</RelativeLayout>

主要代码：

public class MainActivity extends AppCompatActivity {


    /**
     * 图片URL
     */
    private String url = "https://ws1.sinaimg.cn/large/610dc034ly1fiednrydq8j20u011itfz.jpg" ;
    private PhotoView photoView ;
    private View headerView ,footerView ;
    /*
      判断是否隐藏
     */
    private boolean isHiden = false ;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ActionBar actionBar =getSupportActionBar();
        if(actionBar != null)
        {
            actionBar.hide();
        }
        photoView = (PhotoView)findViewById(R.id.photo_view) ;
        headerView = (FrameLayout)findViewById(R.id.header_view);
        footerView = (FrameLayout)findViewById(R.id.footer_view);
        //textView.animate().translationY(500).setDuration(5000);
      /*  photoView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                updataHeaderAndFooter();
            }
        });*/
        Glide.with(this).load(url).centerCrop().diskCacheStrategy(DiskCacheStrategy.SOURCE).
                into(photoView);
        photoView.setOnViewTapListener(new PhotoViewAttacher.OnViewTapListener() {
            @Override
            public void onViewTap(View view, float x, float y) {
                updataHeaderAndFooter();
            }
        });
        //updataHeaderAndFooter();

    }

    /**
     * 动画展示
     */
    private void updataHeaderAndFooter()
    {
        if(isHiden)
        {
            //兼容低版本
            ViewPropertyAnimator.animate(headerView).translationY(0);
            ViewPropertyAnimator.animate(footerView).translationY(0);
            //下面这种方式一样的效果
            //headerView.animate().translationY(0);
            //footerView.animate().translationY(0);
        }else {

            ViewPropertyAnimator.animate(headerView).translationY(-headerView.getMeasuredHeight());
            ViewPropertyAnimator.animate(footerView).translationY(footerView.getMeasuredHeight());
           // headerView.animate().translationY(-headerView.getMeasuredHeight());
            //footerView.animate().translationY(footerView.getMeasuredHeight());
        }
        isHiden = !isHiden ;
    }
}

动画不熟悉的朋友，请移步：

Android属性动画完全解析(上)，初识属性动画的基本用法
这里还用到了：

https://github.com/JakeWharton/NineOldAndroids

不过现在手机基本都是3.0+的，所以用不用也无所谓。