解决Viewpager满屏不能自适应填充内容的三种办法
由于排版问题，本人博客园同名博文地址为：http://www.cnblogs.com/bill-technology/articles/3143667.html
很多Android开发者在使用ViewPager控件的时候经常会遇到这样的问题：当我们在XML布局中对ViewPager的属性android:layout_height属性进行wrap_content设置之后，却发现并没有任何作用，Viewpager依然是铺满全屏的状态。
我这里针对以下一个案例提供一下解决方案，并指出决解方案的利弊：
该案例的实现效果如图：
标蓝位置为Viewpager控件位置
第一种：让Viewpager所在父控件占满屏幕剩余位置。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
style="@style/bg"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" > <!-- 页面顶部布局 --> <RelativeLayout
style="@style/top_bg"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingBottom="10dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="10dp" > <TextView
android:id="@+id/text_main_refresh"
style="@style/top_refresh"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true" /> <ImageView
android:id="@+id/img_main_logo"
style="@style/top_img_logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true" /> <EditText
android:id="@+id/edit_main_search"
style="@style/search"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_centerVertical="true"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_toLeftOf="@id/text_main_refresh"
android:layout_toRightOf="@id/img_main_logo"
android:clickable="true"
android:editable="false" />
</RelativeLayout>
<!-- 页面底部分类按钮 --> <RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" > <!-- 模块布局 --> <LinearLayout
android:id="@+id/layout_module"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true"
android:layout_below="@id/layout_adver"
android:gravity="center"
android:orientation="vertical"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="10dp" > <LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="horizontal"
android:paddingBottom="10dp"
android:paddingTop="10dp" > <TextView
android:id="@+id/text_module_misseye"
style="@style/moudle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableTop="@drawable/misseye"
android:text="@string/misseye" /> <TextView
android:id="@+id/text_module_planning"
style="@style/moudle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableTop="@drawable/planning"
android:text="@string/planning" /> <TextView
android:id="@+id/text_module_instrument"
style="@style/moudle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableTop="@drawable/instrument"
android:text="@string/instrument" /> <TextView
android:id="@+id/text_module_baby"
style="@style/moudle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableTop="@drawable/baby"
android:text="@string/baby" />
</LinearLayout> <LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="horizontal"
android:paddingBottom="10dp"
android:paddingTop="10dp" > <!-- 商品分类 --> <TextView
android:id="@+id/text_module_type"
style="@style/moudle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableTop="@drawable/type"
android:text="@string/type" />
<!-- 条码购 --> <TextView
android:id="@+id/text_module_barcode"
style="@style/moudle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableTop="@drawable/barcode"
android:text="@string/barcode" />
<!-- 我的订单 --> <TextView
android:id="@+id/text_module_order"
style="@style/moudle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableTop="@drawable/order"
android:text="@string/order" />
<!-- 使用反馈 --> <TextView
android:id="@+id/text_module_feedback"
style="@style/moudle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableTop="@drawable/feedback"
android:text="@string/feedback" />
</LinearLayout>
</LinearLayout>
<!-- 图片轮播页面 -->
<RelativeLayout
android:id="@+id/layout_adver"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="@id/layout_module" > <android.support.v4.view.ViewPager
android:id="@+id/vp_main"
android:layout_width="fill_parent"
android:layout_height="wrap_content" /> <LinearLayout
android:id="@+id/linear_point"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="10dip"
android:gravity="center"
android:orientation="horizontal" >
</LinearLayout>
</RelativeLayout></RelativeLayout></LinearLayout>
注解：这种方法能够解决viewpager铺满全屏的问题，但是不方便的是由于搭载Android系统的手机数不胜数，屏幕分辨率也不尽相同，如果viewpager所填充的控件为Imageview用来显示一些广告图片，那么这些图片不能显示效果不能适合所有的机型，也就是说图片会扭曲或者变形。（前提是需求上明确图片必须置顶充满显示，两边不能留白）。
以下两张是保证图片不扭曲变形并完整显示所实现的效果（这里设置的ScaleType.CENTER_INSIDE），但是上面会有留白：
标蓝的地方为留白
第二种：设置Viewpager或者其父控件的高度为固定值。
效果图如下：
标蓝的地方为问题所在，也就是说标识切换的点与图片分离了。
第三种方法：这种方法是我现在使用的方法，也是我所能想到的最完美的解决办法，这里与大家共同讨论下。这种方法的思路是这样的。
从第二种方法我们可以得知，当我们指定了viewpager父控件的高度之后，viewpager就再像之前那样铺满全屏显示了。所以我想到的是动态的对viewpager的父控件的高度进行控制，而在布局中只是指定父控件的显示位置而已。但是会有人问了，如何动态的对父控件进行控制？而却父控件进行控制的值又从何而来呢？
拿上面的那个案例来说，是这样的，上面的那个案例中的viewpager中的子控件是imageview，也就是说，这里的viewpager只是一个广告轮播的功能。我们只要得到所要显示图片宽高，在得到起缩放的比例便得到了imageview控件的宽高，也就是得到了viewpager父控件的高度。
如果大家还不理解，请看代码：
布局文件：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
style="@style/bg"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" > <!-- 页面顶部布局 --> <RelativeLayout
style="@style/top_bg"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingBottom="10dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="10dp" > <TextView
android:id="@+id/text_main_refresh"
style="@style/top_refresh"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true" /> <ImageView
android:id="@+id/img_main_logo"
style="@style/top_img_logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true" /> <EditText
android:id="@+id/edit_main_search"
style="@style/search"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_centerVertical="true"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_toLeftOf="@id/text_main_refresh"
android:layout_toRightOf="@id/img_main_logo"
android:clickable="true"
android:editable="false" />
</RelativeLayout>
<!-- 页面底部分类按钮 --> <RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" > <!-- 图片轮播页面 --> <RelativeLayout
android:id="@+id/layout_adver"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" > <android.support.v4.view.ViewPager
android:id="@+id/vp_main"
android:layout_width="fill_parent"
android:layout_height="wrap_content" /> <LinearLayout
android:id="@+id/linear_point"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="10dip"
android:gravity="center"
android:orientation="horizontal" >
</LinearLayout>
</RelativeLayout> <!-- 模块布局 --> <LinearLayout
android:id="@+id/layout_module"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true"
android:layout_below="@id/layout_adver"
android:gravity="center"
android:orientation="vertical"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="10dp" > <LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="horizontal"
android:paddingBottom="10dp"
android:paddingTop="10dp" > <TextView
android:id="@+id/text_module_misseye"
style="@style/moudle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableTop="@drawable/misseye"
android:text="@string/misseye" /> <TextView
android:id="@+id/text_module_planning"
style="@style/moudle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableTop="@drawable/planning"
android:text="@string/planning" /> <TextView
android:id="@+id/text_module_instrument"
style="@style/moudle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableTop="@drawable/instrument"
android:text="@string/instrument" /> <TextView
android:id="@+id/text_module_baby"
style="@style/moudle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableTop="@drawable/baby"
android:text="@string/baby" />
</LinearLayout> <LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="horizontal"
android:paddingBottom="10dp"
android:paddingTop="10dp" > <!-- 商品分类 --> <TextView
android:id="@+id/text_module_type"
style="@style/moudle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableTop="@drawable/type"
android:text="@string/type" />
<!-- 条码购 --> <TextView
android:id="@+id/text_module_barcode"
style="@style/moudle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableTop="@drawable/barcode"
android:text="@string/barcode" />
<!-- 我的订单 --> <TextView
android:id="@+id/text_module_order"
style="@style/moudle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableTop="@drawable/order"
android:text="@string/order" />
<!-- 使用反馈 --> <TextView
android:id="@+id/text_module_feedback"
style="@style/moudle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableTop="@drawable/feedback"
android:text="@string/feedback" />
</LinearLayout>
</LinearLayout>
</RelativeLayout> </LinearLayout>代码：
DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
int tempWidth = bm.getWidth();
int tempHeight = bm.getHeight();
img.setImageBitmap(bm);
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) layout.getLayoutParams();
params.height = (int) (tempHeight * ((double) dm.widthPixels / (double) tempWidth));
layout.setLayoutParams(params);注解：这里的img指的是imageview，bm是得到的bitmap格式的图片，layout指的是viewpager的父控件。
最终的效果图也就是文章开始部分的效果图。
由于排版问题，本人博客园同名博文地址为：http://www.cnblogs.com/bill-technology/articles/3143667.html
解决Viewpager满屏不能自适应填充内容的三种办法的更多相关文章
- 解决C/C++程序执行一闪而过的方法（三种办法）
简述 在VS编写控制台程序的时候,包括使用其他IDE(Visual C++)编写C/C++程序,经常会看到程序的执行结果一闪而过,要解决这个问题,可以在代码的最后加上system(“pause”).g ...
- linux清空文件内容的三种方法
linux系统中清空文件内容的三种方法 1.使用vi/vim命令打开文件后,输入"%d"清空,后保存即可.但当文件内容较大时,处理较慢,命令如下:vim file_name:%d: ...
- [转]MFC子线程中更新控件内容的两种办法
一.概述 每个系统中都有线程(至少都有一个主线程),而线程最重要的作用就是并行处理,提高软件的并发率.针对界面来说,还能提高界面的响应能力.一般的,为了应用的稳定性,在数据处理等耗时操作会单独在一个线 ...
- ios webview自适应实际内容高度4种方法
有的时候会碰见类似的苦逼需求, webview自适应实际内容高度 下面有四种方法供使用 方法1:获取webview中scrovllview的contentsize进行设置 1 2 3 4 5 6 ...
- 详解linux下批量替换文件内容的三种方法(perl,sed,shell)
在建设本网站的时候,发现新建了很多的网页,突然发现,每个文件都需要进行修改一样的内容,一个一个打开很是麻烦,所以,总结了一下如何快速修改一个目录下多个文件进行内容替换.第三种方法用的不多 方法一 使用 ...
- 解决 Ajax 发送 post 请求出现 403 Forbidden 的三种方式
众所周知前端向后台发送 post 请求时,必须验证 csrf,否则会报错 403 Forbidden.使用 Django Form 表单可以直接在表单里面添加 {% csrf_token %} 即可, ...
- Java追加文件内容的三种方法
import java.io.BufferedWriter; import java.io.File; import java.io.FileOutputStream; import java.io. ...
- Python输出内容的三种方式：print输出 python脚本执行 linux直接执行
1. 在linux中安装python后,在linux命令行中输入python即可切换到Python命令行下 退出python命令行的命令: 老版本:ctrl+D 新版本:quit();或exit() ...
- Python读取文件内容的三种方式并比较
本次实验的文件是一个60M的文件,共计392660行内容. 程序一: def one(): start = time.clock() fo = open(file,'r') fc = fo.readl ...
随机推荐
- C# 代码设置DataGrid列属性
1 DataGridTableStyle dts = new DataGridTableStyle(); 2 dataGrid1.TableStyles.Clear(); 3 dts.MappingN ...
- UVa 820 因特网带宽（最大流）
https://vjudge.net/problem/UVA-820 题意: 给出所有计算机之间的路径和路径容量后求出两个给定结点之间的流通总容量. 思路: 裸的最大流问题.注意有个比较坑的地方,最后 ...
- Centos下挖XMR门罗币的详细教程
很多朋友都看过我之前写的Ubuntu下挖XMR门罗币的教程,也有很多朋友提出,为什么不写个Centos的教程出来,今天我在这里就写个Centos的教程,看这个教程前,大家先看看之前的教程,因为里面涉及 ...
- Windows上玩转TensorFlow(一）
Windows上TensorFlow的安装和环境搭建: 1.安装Python 3.5.2 2.通过Pip3安装TensorFlow CPU版 https://www.tensorflow.org/in ...
- CASSANDRA How to import and export data
https://docs.datastax.com/en/cql/3.1/cql/cql_reference/copy_r.html 感谢领导,感谢同事,与其自己百思不得其解,不如一个问题就搞定了. ...
- DATEDIFF 和 DATEADD
/* DATEDIFF函数计算两个日期之间的小时.天.周.月.年等时间间隔总数 语法 DATEDIFF(interval, date1, date2[, firstdayofweek[, firstw ...
- Django模板语言详解
本节将介绍Django模版系统的语法.Django模版语言致力于在性能和简单性上取得平衡. 如果你有过其它编程背景,或者使用过一些在HTML中直接混入程序代码的语言,那么你需要记住,Django的模版 ...
- [ogre]ogre::Animation
参考:http://blog.csdn.net/leonwei/article/details/5819248 http://blog.csdn.net/debugconsole/article/de ...
- 常用的vi/vim基本命令(持续更新)
★删除/复制/粘贴 全部删除:按esc后,然后dG 全部复制:按esc后,然后ggyG 全选高亮显示:按esc后,然后ggvG或者ggVG 按“+p“可将系统全局粘贴板里的内容粘贴进来 y ...
- CentOS下的Autoconf和AutoMake(实践篇) 2
阅读过<Linux下的Autoconf和AutoMake(理论篇)>之后,进入到实践环节.实验环境:CentOS release 6.7 (Final) x64 1.检查一下这4个工具是否 ...
