解决Viewpager满屏不能自适应填充内容的三种办法

来源：互联网发布：数据库原理与应用ppt 编辑：程序博客网时间：2024/06/05 11:30

很多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的父控件。

最终的效果图也就是文章开始部分的效果图。

0 0