2017-07-28 36 views
1

我想在viewPager中显示几个图像。图像在横向模式下显示效果良好,但在纵向模式下图像拉伸。Android中的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; 
    } 

看到输出

Po rtrait - 看到图像在这里拉伸。

enter image description here

景观

enter image description here

+0

使用滑行在图像视图加载图像。 –

+0

由于原始图像宽高比大约为16:9,因此它们将伸展,并且您的肖像模式将具有相反的宽高比。一个得到解决是在你的imageview中使用android:scaleType =“centerCrop” – Dexter

回答

0

的问题可能与android:scaleType="fitCenter

尝试android:scaleType:"center_crop",看看它做什么。

同样来自Android developer,你看到CENTER确实没有做scalling ......和FIT_CENTER基于CENTER

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"/> 
+0

lol我是第一个回答这个问题的;) –

+0

@JasonKrs比恭喜 –

+0

嘿@NileshRathod,没有运气的兄弟。只要提及ImageView就被包装在一个LinearLayout中,该LinearLayout包含了高度和宽度的内容。 – TechBee

0

CHAGE您的ImageView的代码。您正在使用图像作为免费将其更改为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"/> 
+0

谢谢@Mahesh。没有运气的兄弟。 – TechBee