Android 根据图片高度动态设置ViewPager高度

有图片的地方,就有需求。
为什么一个App有那么多的Banner,这里就不吐槽了。我们还是直接进主题,如何让ViewPager自适应图片的高度。
效果如下:

如何去改变ViewPager的高度,都知道用setLayoutParams,我们不清楚的是,在什么时候给Viewpager设置。聪明的孩子马上就想到,我们用ViewPager的时候,有一个OnPageChangeListener是用来监听viewpager滑动翻页的。

@Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {

    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }

在这三个方法中,只有onPageScrolled是滑动过程一直调用的,而且刚好有个positionOffset是代表Viewpager的偏移量。这里我们不用OnPageSelected,光看Log日志,我们就知道它只有在页面position位置改变才会被调用,不满足Viewpager高度慢慢变化这个动态过程。
那么在onPageScrolled里我们要如何操作呢。为了更通俗的解决这个初中数学问题,我决定拿出我封印多年的截图涂鸦技术,look
Android 根据图片高度动态设置ViewPager高度_第1张图片
从图片1到图片2,我们可以看成是图片1高度慢慢变大的过程,高度增量y =(img1高度-img2高度)的绝对值。看到这里,相信很多小伙伴就知道怎么算了,举个例子,如果你已经滑动了20%页面,那你滑动距离就是0.2x0.2x/高度增量h=x/y ,算出来的h就是图片1增长的高度了,而我们是要给ViewPager setLayoutParams,需要拿到的具体高度就是 图片1高度+h了。
具体代码如下:

import android.graphics.Bitmap;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.Toast;

import com.bumptech.glide.Glide;
import com.bumptech.glide.request.animation.GlideAnimation;
import com.bumptech.glide.request.target.ImageViewTarget;
import com.bumptech.glide.request.target.SimpleTarget;

public class MainActivity extends AppCompatActivity {

    private ViewPager mViewpager;
    private String[] urls = {
            "http://f.hiphotos.baidu.com/zhidao/pic/item/3b87e950352ac65cbdbeff61fcf2b21193138a6d.jpg"
            , "http://c.hiphotos.baidu.com/zhidao/pic/item/562c11dfa9ec8a1359aa88b6f103918fa0ecc030.jpg",
            "http://c.hiphotos.baidu.com/zhidao/pic/item/faf2b2119313b07e6077d3bc0ad7912396dd8cb8.jpg"
    };
    private int[] imgheights;
    private int screenWidth;

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

        screenWidth=ScreenUtil.getScreenWidth(this);
        initView();


    }
    public void initView() {
        mViewpager = (ViewPager) findViewById(R.id.viewpager);
//        mViewpager.setOffscreenPageLimit(3);
        Glide.with(this).load(urls[0]).asBitmap().into(new SimpleTarget() {
            @Override
            public void onResourceReady(Bitmap resource, GlideAnimationsuper Bitmap> glideAnimation) {
                float scale = (float) resource.getHeight() / resource.getWidth();
                int defaultheight = (int) (scale * screenWidth);
                initViewPager(defaultheight);
            }
        });

    }
   //获取第一张图片高度后,给viewpager设置adapter
    private void initViewPager(final int defaultheight) {
        mViewpager.setAdapter(new PagerAdapter() {
            @Override
            public int getCount() {
                if (imgheights == null || imgheights.length != urls.length){
                    imgheights = null;
                    imgheights = new int[urls.length];}
                return urls.length;
            }


            @Override
            public Object instantiateItem(ViewGroup container, final int position) {
                final ImageView imageView = new ImageView(MainActivity.this);
                imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);

                Glide.with(getApplicationContext()).load(urls[position]).asBitmap().into(new ImageViewTarget(imageView) {
                    @Override
                    protected void setResource(Bitmap loadedImage) {
                        if(loadedImage!=null) {
                            float scale = (float) loadedImage.getHeight() / loadedImage.getWidth();
                            imgheights[position] = (int) (scale * screenWidth);
                            imageView.setImageBitmap(loadedImage);
                        }else {
                            Toast.makeText(MainActivity.this, "图片为空", Toast.LENGTH_LONG).show();
                        }
                    }
                });
                container.addView(imageView);
                return imageView;
            }

            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
                container.removeView((View) object);
            }

            @Override
            public boolean isViewFromObject(View view, Object object) {
                return view == object;
            }
        });


        mViewpager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                if (position == imgheights.length - 1) {
                    return;
                }

                //计算ViewPager现在应该的高度,heights[]表示页面高度的数组。
                int height = (int) ((imgheights[position] == 0 ? defaultheight : imgheights[position])
                        * (1 - positionOffset) +
                        (imgheights[position + 1] == 0 ? defaultheight : imgheights[position + 1])
                                * positionOffset);

                //为ViewPager设置高度
                ViewGroup.LayoutParams params = mViewpager.getLayoutParams();
                params.height = height;
                mViewpager.setLayoutParams(params);
            }

            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

}

还有一个需要注意的地方就是,我们平时加载网络图片的时候,是需要时间加载的,我们必须加载出viewpager的高度(第一张图片的高度)之后,才能去给viewpager设置adapter。我觉得比较好的方案是,在上个页面获取这个默认高度,或者让服务器返回第一张图片的宽高,我们就可以算出viewpager的默认高度了。而我在demo中是先网络请求出第一张图片的bitmap算出将要显示的高度defaultheight,才去setAdapter:
Android 根据图片高度动态设置ViewPager高度_第2张图片
不提倡项目里用这种做法,除非后台完全不搭理你的要求~
PS:
代码传送门http://download.csdn.net/detail/qq_31390699/9715350
PPS: = =因为以前用Eclipse,转Studio都是自己摸索的,没注意上传资源只需要app这个文件夹,其他文件夹都可以删除,所以代码的压缩包搞得好大…下次改进~

你可能感兴趣的:(Android,Demo)