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
这里写图片描述
从图片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<Bitmap>() {
@Override
public void onResourceReady(Bitmap resource, GlideAnimation<? super 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<Bitmap>(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:
这里写图片描述
不提倡项目里用这种做法,除非后台完全不搭理你的要求~
PS:
代码传送门http://download.csdn.net/detail/qq_31390699/9715350
PPS: = =因为以前用Eclipse,转Studio都是自己摸索的,没注意上传资源只需要app这个文件夹,其他文件夹都可以删除,所以代码的压缩包搞得好大…下次改进~

人已赞赏
Android文章

Android Studio如何更改JDK和SDK的路径?

2020-4-16 19:34:06

Android文章

Android 仿今日头条评论输入框

2020-4-16 20:48:02

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
有新消息 消息中心
搜索