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

5323 ワード

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+なので、使わなくてもいいです.