解决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 ...
随机推荐
- 【TCP/IP详解 卷一：协议】第9章 IP选路
推荐链接:网络地址与主机地址 9.1 引言 路由选择程序(daemon),通常这是一个用户进程.在大多数的Unix系统中,大多数的路由选择程序都是路由程序和网关程序. 路由表经常被IP访问,但是它被路 ...
- 【TCP/IP详解 卷一：协议】第二章：链路层
2.1 引言 链路层的三个目的: (1)为IP模块发送和接收IP数据报. (2)为ARP模块发送ARP请求和接收ARP应答.地址解析协议:ARP. (3)为RARP模块发送RARP请求和接收RARP应 ...
- UVa 11729 突击战
https://vjudge.net/problem/UVA-11729 题意:有n个部下,每个部下需要完成一项任务.第i个部下需要你话B分钟交代任务,然后立刻执行J分钟完成任务.安排交代任务顺序并计 ...
- python学习站点
1.python 外部扩展网址 http://www.lfd.uci.edu/~gohlke/pythonlibs Python Extension Packages 2.web2py学习 http: ...
- bugfree 安装配置（Ubuntu16.04 amd 64 Desktop）
上面是我使用的版本! 1.首先搭建 xampp 下载XAMPP:https://www.apachefriends.org/download.html 注意:下载低版本的,不然之后会找不到mysql ...
- Linux环境下 RabbitMQ 的下载与安装
0 环境 CentOS7 RabbitMQ 3.6.5 erlang 18.3 socat rabbitmq是使用erlang语言编写的,所以需要先安装erlang,其次rabbitmq安装依赖于so ...
- Topless eclipse导入myeclipse的web项目没法识别问题解决
1.进入项目目录,找到.project文件,打开. 2.找到<natures>...</natures>代码段. 3.在第2步的代码段中加入如下标签内容并保存: <nat ...
- 使用SFTP工具相关问题
1.使用SFTP工具,填写ip,端口都正确但是连接不上? 答:请统一使用 filezilla工具进行连接,环境搭建使用该工具进行测试和使用. 2.使用SFTP工具访 ...
- Vue项目骨架屏注入实践
相比于早些年前后端代码紧密耦合.后端工程师还得写前端代码的时代,如今已发展到前后端分离,这种开发方式大大提升了前后端项目的可维护性与开发效率,让前后端工程师关注于自己的主业.然而在带来便利的同时,也带 ...
- Java知识集锦
Java知识集锦 一.Java程序基础 1.1 开发和运行环境 1.2 Java语言概述 二.Java语法基础 2.1 基础类型和语法 2.2 对象和类型 2.3 包和访问控制 三.数据类型及类型转换 ...
