Android：如何在保持寬高比的同時將圖像拉伸到屏幕寬度？

Question

我想下載一張圖片（尺寸未知，但總是大致爲正方形），並將其顯示爲水平填充屏幕，並在任何屏幕尺寸下垂直延伸以保持圖像的高寬比。這是我的（非工作）代碼。它橫向延伸圖像，但不是垂直，所以它被壓扁...

ImageView mainImageView = new ImageView(context); 
    mainImageView.setImageBitmap(mainImage); //downloaded from server 
    mainImageView.setScaleType(ScaleType.FIT_XY); 
    //mainImageView.setAdjustViewBounds(true); 
    //with this line enabled, just scales image down 
    addView(mainImageView,new LinearLayout.LayoutParams( 
      LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT)); 

Answer 1

我用自定義視圖實現了這一點。設置layout_width = 「FILL_PARENT」 和layout_height = 「WRAP_CONTENT」，並將其指向到適當的繪製：

public class Banner extends View { 

    private final Drawable logo; 

    public Banner(Context context) { 
    super(context); 
    logo = context.getResources().getDrawable(R.drawable.banner); 
    setBackgroundDrawable(logo); 
    } 

    public Banner(Context context, AttributeSet attrs) { 
    super(context, attrs); 
    logo = context.getResources().getDrawable(R.drawable.banner); 
    setBackgroundDrawable(logo); 
    } 

    public Banner(Context context, AttributeSet attrs, int defStyle) { 
    super(context, attrs, defStyle); 
    logo = context.getResources().getDrawable(R.drawable.banner); 
    setBackgroundDrawable(logo); 
    } 

    @Override protected void onMeasure(int widthMeasureSpec, 
     int heightMeasureSpec) { 
    int width = MeasureSpec.getSize(widthMeasureSpec); 
    int height = width * logo.getIntrinsicHeight()/logo.getIntrinsicWidth(); 
    setMeasuredDimension(width, height); 
    } 
} 

Answer 2

您正在將ScaleType設置爲ScaleType.FIT_XY。根據javadocs，這將拉伸圖像以適應整個區域，如有必要則更改縱橫比。這將解釋你所看到的行爲。

要獲得您想要的行爲... FIT_CENTER，FIT_START或FIT_END接近，但如果圖像比較窄，則不會開始填充寬度。你可以看看這些是如何實現的，你應該能夠弄清楚如何根據你的目的進行調整。

Answer 3

最後，我手動產生的尺寸，這工作很大：

DisplayMetrics dm = new DisplayMetrics(); 
context.getWindowManager().getDefaultDisplay().getMetrics(dm); 
int width = dm.widthPixels; 
int height = width * mainImage.getHeight()/mainImage.getWidth(); //mainImage is the Bitmap I'm drawing 
addView(mainImageView,new LinearLayout.LayoutParams( 
     width, height)); 

Answer 4

ScaleType .CENTER_CROP會做你想做的事：伸展到全寬，並相應地縮放高度。如果縮放的高度超出屏幕限制，則圖像將被裁剪。

Answer 5

將adjustViewBounds設置爲true並使用LinearLayout視圖組對我工作得非常好。無需繼承或詢問設備的指標：一個的LinearLayout內

//NOTE: "this" is a subclass of LinearLayout 
ImageView splashImageView = new ImageView(context); 
splashImageView.setImageResource(R.drawable.splash); 
splashImageView.setAdjustViewBounds(true); 
addView(splashImageView); 

Answer 6

我做到了這些值：

Scale type: fitStart 
Layout gravity: fill_horizontal 
Layout height: wrap_content 
Layout weight: 1 
Layout width: fill_parent 

Answer 7

我一直在這個問題在這種或那種形式掙扎了好半天，謝謝，謝謝，謝謝.... :)

我只是想指出，你可以得到一個普遍的解決方案，從鮑勃李的只是擴展視圖和重寫onMeasure完成。這樣，你可以用任何你想要的繪製利用這一點，它不會打破，如果沒有圖像：

public class CardImageView extends View { 
     public CardImageView(Context context, AttributeSet attrs, int defStyle) { 
      super(context, attrs, defStyle); 
     } 

     public CardImageView(Context context, AttributeSet attrs) { 
      super(context, attrs); 
     } 

     public CardImageView(Context context) { 
      super(context); 
     } 

     @Override 
     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
      Drawable bg = getBackground(); 
      if (bg != null) { 
       int width = MeasureSpec.getSize(widthMeasureSpec); 
       int height = width * bg.getIntrinsicHeight()/bg.getIntrinsicWidth(); 
       setMeasuredDimension(width,height); 
      } 
      else { 
       super.onMeasure(widthMeasureSpec, heightMeasureSpec); 
      } 
     } 
    } 

Answer 8

我剛纔讀了ImageView的源代碼，它基本上是不可能沒有在這個使用子類化解決方案線。在ImageView.onMeasure我們得到這些行：

 // Get the max possible width given our constraints 
     widthSize = resolveAdjustedSize(w + pleft + pright, mMaxWidth, widthMeasureSpec); 

     // Get the max possible height given our constraints 
     heightSize = resolveAdjustedSize(h + ptop + pbottom, mMaxHeight, heightMeasureSpec); 

凡h和w是圖像的尺寸，並p*是填充。

然後：

private int resolveAdjustedSize(int desiredSize, int maxSize, 
           int measureSpec) { 
    ... 
    switch (specMode) { 
     case MeasureSpec.UNSPECIFIED: 
      /* Parent says we can be as big as we want. Just don't be larger 
       than max size imposed on ourselves. 
      */ 
      result = Math.min(desiredSize, maxSize); 

所以，如果你有一個layout_height="wrap_content"它將設置widthSize = w + pleft + pright，或者換句話說，最大寬度等於圖像寬度。

這意味着，，除非你設置一個確切的大小，圖像從來沒有放大。我認爲這是一個錯誤，但讓Google注意或修復它會帶來好運。 編輯：吃我自己的話，我提交了a bug report，他們說它已經在未來的版本中修復！

另一種解決方案

這裏是另一個子類解決辦法，但你應該（理論上，我還沒有真正測試過了！），可以在任何地方你ImageView使用它。要使用它，請設置layout_width="match_parent"和layout_height="wrap_content"。它比公認的解決方案還要普遍得多。例如。你可以做到適合身高和適合身高。

import android.content.Context; 
import android.util.AttributeSet; 
import android.widget.ImageView; 

// This works around the issue described here: http://stackoverflow.com/a/12675430/265521 
public class StretchyImageView extends ImageView 
{ 

    public StretchyImageView(Context context) 
    { 
     super(context); 
    } 

    public StretchyImageView(Context context, AttributeSet attrs) 
    { 
     super(context, attrs); 
    } 

    public StretchyImageView(Context context, AttributeSet attrs, int defStyle) 
    { 
     super(context, attrs, defStyle); 
    } 

    @Override 
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) 
    { 
     // Call super() so that resolveUri() is called. 
     super.onMeasure(widthMeasureSpec, heightMeasureSpec); 

     // If there's no drawable we can just use the result from super. 
     if (getDrawable() == null) 
      return; 

     final int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec); 
     final int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec); 

     int w = getDrawable().getIntrinsicWidth(); 
     int h = getDrawable().getIntrinsicHeight(); 
     if (w <= 0) 
      w = 1; 
     if (h <= 0) 
      h = 1; 

     // Desired aspect ratio of the view's contents (not including padding) 
     float desiredAspect = (float) w/(float) h; 

     // We are allowed to change the view's width 
     boolean resizeWidth = widthSpecMode != MeasureSpec.EXACTLY; 

     // We are allowed to change the view's height 
     boolean resizeHeight = heightSpecMode != MeasureSpec.EXACTLY; 

     int pleft = getPaddingLeft(); 
     int pright = getPaddingRight(); 
     int ptop = getPaddingTop(); 
     int pbottom = getPaddingBottom(); 

     // Get the sizes that ImageView decided on. 
     int widthSize = getMeasuredWidth(); 
     int heightSize = getMeasuredHeight(); 

     if (resizeWidth && !resizeHeight) 
     { 
      // Resize the width to the height, maintaining aspect ratio. 
      int newWidth = (int) (desiredAspect * (heightSize - ptop - pbottom)) + pleft + pright; 
      setMeasuredDimension(newWidth, heightSize); 
     } 
     else if (resizeHeight && !resizeWidth) 
     { 
      int newHeight = (int) ((widthSize - pleft - pright)/desiredAspect) + ptop + pbottom; 
      setMeasuredDimension(widthSize, newHeight); 
     } 
    } 
} 

Answer 9

一個非常簡單的解決方案就是使用RelativeLayout提供的功能。

這裏是一個能夠與標準Android Views的XML：

<?xml version="1.0" encoding="utf-8"?> 
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fillViewport="true"> 

    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     > 
     <LinearLayout 
      android:id="@+id/button_container" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:orientation="vertical" 
      android:layout_alignParentBottom="true" 
      > 
      <Button 
       android:text="button" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content"/> 
      <Button 
       android:text="button" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content"/> 
      <Button 
       android:text="button" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content"/> 
     </LinearLayout> 
     <ImageView 
      android:src="@drawable/cat" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:adjustViewBounds="true" 
      android:scaleType="centerCrop" 
      android:layout_above="@id/button_container"/> 
    </RelativeLayout> 
</ScrollView> 

的技巧是，你設置的ImageView填補了屏幕，但它必須是其他佈局上面。這樣你就可以實現你需要的一切。

Answer 10

對於我android：scaleType =「centerCrop」沒有解決我的問題。它實際上擴大了圖像的方式。所以我嘗試使用android：scaleType =「fitXY」，它工作得很好。

Answer 11

我已經設法使用這個XML代碼來實現這一點。可能是這種情況，日食並沒有渲染高度來顯示它擴大到適合;然而，當你真的在設備上運行它時，它會正確渲染並提供所需的結果。 （至少對我來說）

<FrameLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content"> 

    <ImageView 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:adjustViewBounds="true" 
      android:scaleType="centerCrop" 
      android:src="@drawable/whatever" /> 
</FrameLayout> 

Answer 12

在某些情況下，這個神奇的公式很好地解決了這個問題。

對於任何與此相關的人員來自另一個平臺，「尺寸和形狀適合」選項在Android中處理得很漂亮，但很難找到。

你通常希望該組合：

• 寬度匹配父，
• 高度渦卷內容，
• adjustViewBounds接通（原文如此）
• 規模fitCenter
• cropToPadding OFF（原文如此）

然後它是自動和驚人的。

如果你是一位iOS開發人員，那真是太神奇了，你可以在表格視圖中完成「完全動態的單元格高度」。err，我的意思是ListView。請享用。

<com.parse.ParseImageView 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:id="@+id/post_image" 
    android:src="@drawable/icon_192" 
    android:layout_margin="0dp" 
    android:cropToPadding="false" 
    android:adjustViewBounds="true" 
    android:scaleType="fitCenter" 
    android:background="#eff2eb"/> 

Answer 13

看有一個更容易解決問題的方法：

ImageView imageView; 

protected void onCreate(Bundle savedInstanceState){ 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.your_layout); 
    imageView =(ImageView)findViewById(R.id.your_imageView); 
    Bitmap imageBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.your_image); 
    Point screenSize = new Point(); 
    getWindowManager().getDefaultDisplay().getSize(screenSize); 
    Bitmap temp = Bitmap.createBitmap(screenSize.x, screenSize.x, Bitmap.Config.ARGB_8888); 
    Canvas canvas = new Canvas(temp); 
    canvas.drawBitmap(imageBitmap,null, new Rect(0,0,screenSize.x,screenSize.x), null); 
    imageView.setImageBitmap(temp); 
} 

Answer 14

這工作正常按我的要求

<ImageView android:id="@+id/imgIssue" android:layout_width="fill_parent" android:layout_height="wrap_content" android:adjustViewBounds="true" android:scaleType="fitXY"/>

Answer 15

每個人都在這樣做程序化，所以我認爲這個答案會fi在這裏完美無缺。這段代碼適用於我的XML。我沒有考慮比例，但仍然希望能夠提出這個答案，如果它能幫助任何人。

import android.content.Context; 
import android.util.AttributeSet; 
import android.widget.ImageView; 

public class StretchableImageView extends ImageView{ 

    public StretchableImageView(Context context) { 
     super(context); 
    } 

    public StretchableImageView(Context context, AttributeSet attrs) { 
     super(context, attrs); 
    } 

    public StretchableImageView(Context context, AttributeSet attrs, int defStyle) { 
     super(context, attrs, defStyle); 
    } 

    @Override 
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
     if(getDrawable()!=null){ 
      if(getDrawable().getIntrinsicWidth()>=getDrawable().getIntrinsicHeight()){ 
       int width = MeasureSpec.getSize(widthMeasureSpec); 
       int height = width * getDrawable().getIntrinsicHeight() 
          /getDrawable().getIntrinsicWidth(); 
       setMeasuredDimension(width, height); 
      }else{ 
       int height = MeasureSpec.getSize(heightMeasureSpec); 
       int width = height * getDrawable().getIntrinsicWidth() 
          /getDrawable().getIntrinsicHeight(); 
       setMeasuredDimension(width, height); 
      } 
     } 
    } 
} 

Answer 16

可以取決於可拉伸寬度和高度用我StretchableImageView保持縱橫比（由寬度或通過高度）在ImageView的XML文件中設置adjustViewBounds="true"和scaleType="fitCenter"！

<ImageView 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:src="@drawable/image" 

     android:adjustViewBounds="true" 
     android:scaleType="fitCenter" 
     /> 

注：layout_width設爲match_parent

Answer 17

及其簡單的事情：

android:adjustViewBounds="true" 

乾杯..