图像在Android中的ViewPager内部拉伸

时间:2017-07-28 11:16:53

标签: android android-viewpager

我试图在viewPager中显示几个图像。图像在横向模式下显示正常,但在纵向模式下图像正在拉伸。

这是我的活动:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorAccent"
    android:orientation="vertical"
    tools:context="com.helloExp.builder.BuilderActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/builder_viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v4.view.ViewPager>

    <TextView
        android:layout_width="match_parent"
        android:gravity="center"
        android:text="Swipe to change image"
        android:background="#000"
        android:textColor="#FFF"
        android:layout_height="40dp"
        android:layout_alignParentStart="true"
        />

    <TextView
        android:layout_width="match_parent"
        android:layout_centerInParent="true"
        android:text="When one door of happiness closes, another opens; but often we look so long at the closed door that we do not see the one that has opened for us."
        android:layout_height="wrap_content"
        android:id="@+id/textView"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:orientation="horizontal"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_height="wrap_content">
        <Button
            android:layout_width="match_parent"
            android:layout_weight="5"
            android:text="Decoration"
            android:layout_height="wrap_content"/>
        <Button
            android:layout_width="match_parent"
            android:layout_weight="5"
            android:text="Share"
            android:layout_height="wrap_content"/>
    </LinearLayout>
</RelativeLayout>

这是我的viewPager适配器xml文件:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:app="http://schemas.android.com/apk/res-auto"
              android:orientation="vertical"
              android:layout_height="wrap_content"
              android:layout_width="wrap_content">

    <ImageView
        android:id="@+id/backgroundImage"
        android:layout_width="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="fitCenter"
        android:background="@drawable/cat_life_big"
        android:layout_height="match_parent"/>
</LinearLayout>

最后这里是适配器代码:

public Object instantiateItem(ViewGroup container, int position) {
        LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View layoutView = inflater.inflate(R.layout.layout_builder, container, false);
        container.addView(layoutView);
        return layoutView;
    }

参见输出

人像 - 看到图像在这里拉伸。

enter image description here

风景

enter image description here

4 个答案:

答案 0 :(得分:0)

问题可能出在android:scaleType="fitCenter

尝试android:scaleType:"center_crop"并查看其功能。

同样来自Android developer,您发现CENTER没有做任何诽谤...... FIT_CENTER基于CENTER

答案 1 :(得分:0)

使用android:scaleType="centerCrop"

<强> CENTER_CROP

均匀缩放图像(保持图像的纵横比),使图像的尺寸(宽度和高度)等于或大于视图的相应尺寸(减去填充)。

尝试这样做ImageView就像这样

 <ImageView
    android:id="@+id/backgroundImage"
    android:layout_width="wrap_content"
    android:adjustViewBounds="true"
    android:scaleType="centerCrop"
    android:background="@drawable/cat_life_big"
    android:layout_height="match_parent"/>

答案 2 :(得分:0)

我认为你应该改变scaleType属性。根据您的需要,您可以使用&#34; centerCrop&#34;或&#34; centerInside&#34;。两种情况都非常适合两个轴,而您目前使用的只适合一个。您还可以通过以下方式找到有关此内容的更多信息:

https://robots.thoughtbot.com/android-imageview-scaletype-a-visual-guide

答案 3 :(得分:0)

查看您的imageview代码。你正在使用图像作为bacground将其更改为src。 你的代码是

<ImageView
    android:id="@+id/backgroundImage"
    android:layout_width="wrap_content"
    android:adjustViewBounds="true"
    android:scaleType="fitCenter"
    android:background="@drawable/cat_life_big"
    android:layout_height="match_parent"/>

将其更改为

  <ImageView
    android:id="@+id/backgroundImage"
    android:layout_width="match_parent"
    android:adjustViewBounds="true"
    android:scaleType="fitCenter"
    android:src="@drawable/cat_life_big"
    android:layout_height="match_parent"/>