解决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 ...
随机推荐
- Planar Shadow
Unity上平面阴影的计算与实现 //如何求顶点投影到平面上的点(阴影点) //当平面上取不相等的任意两个点组成一个向量,与平面的法线总是垂直的,向量垂直点乘为0,因此可以通过一个点和一个法线来定义, ...
- Python Sip [RuntimeError: the sip module implements API v11.0 to v11.2 but the PyQt5.QtCore module requires API v11.3]
不知道原因,尝试卸载.编译安装均失败.只有这样曲线救国 import matplotlib matplotlib.use("WXAgg",warn=True) import mat ...
- Pro Git读书笔记 - 分支
Git 分支介绍. 几乎所有的版本控制系统都以某种形式支持分支. 使用分支意味着你可以把你的工作从开发主线上分离开来,以免影响开发主线. 在很多版本控制系统中,这是一个略微低效的过程--常常需要完全创 ...
- python ros 创建节点订阅robot_pose
建立文件夹hello_rospy,再在该目录下建立子目录src,cd到该src目录,运行如下命令创建工作包 catkin_create_pkg beginner_tutorials std_msgs ...
- JSON序列化反序列化
JSON(全称为JavaScript Object Notation) 是一种轻量级的数据交换格式.它是基于JavaScript语法标准的一个子集. JSON采用完全独立于语言的文本格式,可以很容易在 ...
- 视图层view layer
视图层是Django处理请求的核心代码层,我们大多数Python代码都集中在这一层面. 它对外接收用户请求,对内调度模型层和模版层,统合数据库和前端,最后根据业务逻辑,将处理好的数据,与前端结合,返回 ...
- Java 常用对象-StringBuffer类
2017-11-02 20:57:02 StringBuffer:线程安全的可变字符序列.一个类似于 String 的字符串缓冲区,但不能修改.虽然在任意时间点上它都包含某种特定的字符序列,但通过某些 ...
- m_Orchestrate learning system---三十、项目中的dist文件一般是做什么的
m_Orchestrate learning system---三十.项目中的dist文件一般是做什么的 一.总结 一句话总结: Bootstrap switch:dist 目录是放最终的js和css ...
- (GoRails) 用app/decorators来取代app/helpers; delegate()方法
视频:https://gorails.com/episodes/decorators-from-scratch?autoplay=1 装饰设置风格:把Model层变的干净,但不使用app/helper ...
- 3-22 Ruby 编码规则（个人整理）
编码规则 https://github.com/thoughtbot/guides/tree/master/style/ruby *Use a trailing comma after each it ...
