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


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

 

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

首选添加依赖:

 compile 'com.github.chrisbanes.photoview:library:+'
 compile 'com.github.bumptech.glide:glide:3.7.0'
添加访问网络权限:

 

布局文件:




    
    

        
    

    
       >


        

            

            

        

        
    





主要代码:

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+的,所以用不用也无所谓。


你可能感兴趣的:(View)