2011-02-02 112 views
14

在我的Android應用程序中,我有一個活動,它顯示具有以下尺寸244 x 330的圖像。 我想以完整的設備寬度顯示這些圖像。將ImageView縮放到設備寬度

我的佈局文件看起來是這樣的:

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

    <LinearLayout 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent" 
     android:orientation="vertical"> 

      <ImageView android:id="@+id/news_image" 
       android:layout_height="fill_parent" 
       android:layout_width="fill_parent" 
       android:layout_marginLeft="18dip" 
       android:layout_marginRight="18dip" 
       android:background="#aaaaaa" /> 


    </LinearLayout> 

</ScrollView> 

我試圖設置的ImageView的ScaleType但沒有ScalingType其縮放比例ImageView的。 如何在橫向模式和縱向模式下按比例縮放圖像以適合整個屏幕?

基本上我想要的是像ScaleType.CENTER_CORP,但它也設置圖像的比例高度,所以我可以看到它的所有,而不僅僅是圖像的一部分。

編輯原因我知道我很困惑你和我的「怪異」任務。

我想用圖像展示給你。 這是我現在用我的佈局得到的。我想通過根據需要縮放圖像來填充整個灰色區域。我怎麼能做到這一點?

當我設置ScaleTypeCENTER_CROP我得到這個

,但這不是我想要引起你是不是看到整個圖像剛剛從中心開始的一部分內容。

而這正是我希望它是:

我希望這有助於你瞭解我試圖完成。 任何人都知道該怎麼做?

編輯2:

它看起來怪異,有點混亂,我試圖來顯示圖像,其在高度上比屏幕尺寸更大,但因爲我在我的例子使用ScrollView佈局這應該是好的,用戶可以滾動,如果他想看到未顯示的區域。

希望這有助於理解我正在嘗試做什麼。

回答

29

我在ImageView試過真的每ScaleTypefill_parentwrap_content,但沒有一次成功。我也嘗試了我在谷歌上找到的一切,但沒有爲我工作,所以我自己想出了一些東西。

很明顯,ImageView沒有縮放我的圖像,因爲我想縮放,所以我不得不自己縮放它。縮放位圖後,我會將新的位圖設置爲ImageView的圖像源。這工作不錯,看起來很不錯的G1和摩托羅拉里程碑2

這裏是我的代碼的所有作品

佈局:

<ScrollView 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"> 

    <LinearLayout 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent" 
     android:id="@+id/news_wrapper"> 

      <ImageView android:id="@+id/news_image" 
       android:layout_height="fill_parent" 
       android:layout_width="fill_parent" 
       android:layout_marginLeft="18dip" 
       android:layout_marginRight="18dip" 
       android:background="#aaaaaa" /> 

    </LinearLayout> 

</ScrollView> 

活動

public class ScalingImages extends Activity { 

    private ImageView imageView; 

    /** Called when the activity is first created. */ 
    @Override 
    public void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.test_margin); 

     this.imageView = (ImageView)findViewById(R.id.news_image); 

     // The image is coming from resource folder but it could also 
     // load from the internet or whatever 
     Drawable drawable = getResources().getDrawable(R.drawable.img); 
     Bitmap bitmap = ((BitmapDrawable)drawable).getBitmap(); 

     // Get scaling factor to fit the max possible width of the ImageView 
     float scalingFactor = this.getBitmapScalingFactor(bitmap); 

     // Create a new bitmap with the scaling factor 
     Bitmap newBitmap = Util.ScaleBitmap(bitmap, scalingFactor); 

     // Set the bitmap as the ImageView source 
     this.imageView.setImageBitmap(newBitmap); 
    } 

    private float getBitmapScalingFactor(Bitmap bm) { 
     // Get display width from device 
     int displayWidth = getWindowManager().getDefaultDisplay().getWidth(); 

     // Get margin to use it for calculating to max width of the ImageView 
     LinearLayout.LayoutParams layoutParams = 
      (LinearLayout.LayoutParams)this.imageView.getLayoutParams(); 
     int leftMargin = layoutParams.leftMargin; 
     int rightMargin = layoutParams.rightMargin; 

     // Calculate the max width of the imageView 
     int imageViewWidth = displayWidth - (leftMargin + rightMargin); 

     // Calculate scaling factor and return it 
     return ((float) imageViewWidth/(float) bm.getWidth()); 
    } 
} 

實用類

public class Util { 

    public static Bitmap ScaleBitmap(Bitmap bm, float scalingFactor) { 
     int scaleHeight = (int) (bm.getHeight() * scalingFactor); 
     int scaleWidth = (int) (bm.getWidth() * scalingFactor); 

     return Bitmap.createScaledBitmap(bm, scaleWidth, scaleHeight, true); 
    } 

} 

如果有更好或更準確的方法來完成相同的縮放請讓我知道因爲我不能相信這樣一個小事情是很難完成。

我真的希望看到一個更好的方法來做到這一點。

謝謝您的閱讀。

2

您是否試圖通過ImageView.setScaleType()以編程方式設置它?

setAdjustViewBounds(false)也可能有幫助。

編輯:對不起,我錯讀了這個問題。無論如何,setAdjustViewBounds()仍然可能會有所幫助。從來沒有使用它。

+0

我剛剛嘗試過`setAdjustViewBounds`,但它沒有幫助。還有其他建議嗎?也許我的編輯讓我的目標更好理解。 – OemerA 2011-02-02 22:44:51

2

我想要顯示那些圖像完整的 設備寬度。

這很簡單。你只是有錯誤的邊距設置。刪除這些行,您的圖像將顯示在完整的設備寬度:

android:layout_marginLeft="18dip" 
android:layout_marginRight="18dip" 
+0

這似乎很奇怪,但實際上我希望有這些邊緣,否則它會像「粘」到屏幕上。除非那些18左右傾斜,我想使用整個屏幕大小。 – OemerA 2011-02-02 22:08:20

3

對您要查找的內容有些困惑。如果您要縮放以適應屏幕,則有三種選擇,其中兩種可以保持比例。你可以使用ScaleType fitCenter,它可以使圖像按比例適合邊界,或者你可以使用centerCrop(你說你嘗試過),它將拉伸圖像的最短邊以適應容器(意味着某些將被裁剪掉在較長的維度上)。無法裁剪或不成比例地拉伸,以至於不能適應寬度和高度。

編輯:好的,我想我現在明白你的觀點。首先,我將你的LinearLayout設置爲wrap_content的高度。其次,在代碼中,這是我可以想到的一種方式。可能還有另一種方法,可以通過首先獲取屏幕尺寸,然後使用新尺寸執行createScaledBitmap,然後設置背景資源。

final ImageView newsImage = (ImageView)findViewById(R.id.news_image); 

//get details on resolution from the display 
DisplayMetrics metrics = new DisplayMetrics(); 
getWindowManager().getDefaultDisplay().getMetrics(metrics); 

//going to set what happens as the layout happens 
newsImage.getViewTreeObserver().addOnGlobalLayoutListener(
    new ViewTreeObserver.OnGlobalLayoutListener() { 

     public void onGlobalLayout() { 
      int oldHeight, oldWidth, newHeight, newWidth; 

      //we want the new width to be as wide as the screen 
      newWidth = metrics.widthPixels; 

      oldHeight = newsImage.getDrawable().getIntrinsicHeight(); 
      oldWidth = newsImage.getDrawable().getIntrinsicWidth(); 

      //keeping the aspect ratio, the new height should be w1/h1 = w2/h2 
      newHeight = Math.floor((oldHeight * newWidth)/oldWidth); 
      LinearLayout.LayoutParams params = 
       (LinearLayout.LayoutParams)newsImage.getLayoutParams(); 
      params.height = newHeight; 
      params.width = newWidth; 
      newsImage.setLayoutParams(params); 
      newsImage.setScaleType(ScaleType.CENTER); 
      newsImage.invalidate(); 
      newsImage.getViewTreeObserver().removeGlobalOnLayoutListener(this); 
     } 
    } 
} 
+0

我試過,但`ScaleType.CENTER_CROP`did切高度。你能提供樣品嗎?我會再試一次(也許我犯了一個錯誤)併發布我的結果。 – OemerA 2011-02-02 22:06:43

+0

您的示例顯示了在物理設備外部延伸的圖像... – kcoppock 2011-02-02 22:58:22

+0

如果要使其適合寬度,則必須切割高度。要做你想做的事,你會使用fitXY縮放類型,但它會不成比例地縮放。沒有其他辦法可以做到這一點。 – kcoppock 2011-02-02 23:03:01

1

我再也看不到這些圖像了,問題在老化,但以防萬一別人發現這個問題並且有同樣的問題。如果獲得float screenWidth = getResources().getDisplayMetrics().widthPixels並以編程方式設置ImageView LayoutParamters以將圖像縮放爲screenWidth,會不會更好?只是一個主意!

1

管理爲達到我想要的東西,這希望是一樣的,你的目標

@Override 
public void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.pgviewer); 

    ImageView PgContainer = (ImageView)findViewById(R.id.imageView1); 

    String Page = String.valueOf(getIntent().getExtras().getInt("Page")); 
    try { 
     PgContainer.setImageBitmap(getBitmapFromAsset(Page)); 
    } catch (IOException e) { 
     // TODO Auto-generated catch block 
     e.printStackTrace(); 
    } 

    PgContainer.setScaleType(ScaleType.FIT_CENTER); 
    PgContainer.scrollTo(0, 0); 
    PgContainer.setScrollBarStyle(0); 
} 

然後縮放位圖:

private Bitmap getBitmapFromAsset(String strName) throws IOException 
{ 
    AssetManager assetManager = getAssets(); 
    InputStream istr = assetManager.open(strName+".png"); 
    Bitmap bitmap = BitmapFactory.decodeStream(istr); 

    float screenWidth = getResources().getDisplayMetrics().widthPixels; 
    int ih=bitmap.getHeight(); 
    int iw=bitmap.getWidth(); 
    float scalefactor = screenWidth/iw; 
    //w = 480, h=~ 
    //int newh = bitmap.getHeight()/bitmap.getWidth(); 
    return android.graphics.Bitmap.createScaledBitmap(bitmap, (int)(iw*scalefactor), (int)(ih*scalefactor), true); 
    //return bitmap; 
} 
3

我用Google搜索無處不在,但沒有找到一個解決方案。 這就是我所做的,這對我和滾動視圖的工作。

XML文件:

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fillViewport="true" > 

    <ImageView 
     android:id="@+id/manga_page_image" 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:adjustViewBounds="true" 
     android:scaleType="fitCenter" /> 
</ScrollView> 
19

最簡單的方法是添加機器人:adjustViewBounds = 「true」 添加到的ImageView,並設置規模類型爲 「fitCenter」

0

我用來縮放的ImageView與設備分辨率是針對父級設置的屬性。所以隨着父母大​​小的變化,元素的大小也會隨之變大。 這裏是我的activity_main.xml中的一個例子

<?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" 
    tools:context="com.example.csci567.singleimagerequest.MainActivity"> 

    <ImageView 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:id="@+id/image_display" 
     android:layout_marginBottom="100dp" 
     android:layout_marginLeft="15dp" 
     android:layout_marginRight="15dp" 
     android:layout_centerHorizontal="true" 
     /> 

    <Button 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="Upload Image" 
     android:id="@+id/upload_button" 
     android:layout_alignParentBottom="true" 
     android:layout_centerHorizontal="true" 
     android:layout_marginBottom="22dp" /> 

</RelativeLayout 

你可以把通過調節利潤更多的元素。