1. 程式人生 > >Android 設定ImageView寬度固定,其高度按比例縮放適應

Android 設定ImageView寬度固定,其高度按比例縮放適應

今天和專案經理對噴了一下,他說在應用的列表資料中的圖片應該寬度固定,高度按比例縮放自適應,我說,那豈不是很醜!直接讓運營那邊把圖片處理成固定寬高比不就好了,省的我客戶端麻煩了。 這傢伙不同意,為毛呢,因為我們公司的圖片尼瑪全部是從別的網站上蕩過來的,幾萬張圖片,本身不知道圖片寬度和高度。。。。我日。。。。

  好吧,既然提出了這麼個需求,那我就實現唄,醜不醜就我就不管了。。。

  我在群裡問了些人有木有相關的實現,可惜沒人鳥我,不知道是不是我問的太簡單了還是沒人會。。。於是乎網上搜了些相關的實現方式,還真讓我找到不少相關的東東,遂逐一驗證。

 有篇部落格,名字是《ImageView圖片寬度為控制元件寬度,高度按比例縮放

》,乍眼一看,這不是正是我要的麼,因為我專案正式採用了非同步圖片載入庫Android-Universal-Image-Loader, 可是我一嘗試,沒效果,我就呵呵呵了。。。

 最後,我選擇了另一個方案,結合自己的應用,做了些微的修改,效果還不錯,值得記錄一番:

 首先,定義ImageView,在該ImageView中,我們需要設定屬性android:adjustViewBounds="true",他的意思圖片是否保持寬高比。切記的一點是該屬性需要與maxWidth、MaxHeight一起使用,否則單獨使用沒有效果。 

  1. <ImageView
  2.        android:id
    ="@+id/img_list"
  3.        android:layout_width="fill_parent"
  4.        android:layout_height="wrap_content"
  5.        android:scaleType="centerCrop"
  6.        android:adjustViewBounds="true"
  7.        android:src="@drawable/load_default_img"/>

剛剛說了,android:adjustViewBounds="true"必須與MaxHeight一起使用才能有效,所以,我要設定該ImageView的最大高度MaxHeight:

  1. int screenWidth = getScreenWidth(this); // 獲取螢幕寬度  
  2. ViewGroup.LayoutParams lp = testImage.getLayoutParams();  
  3. lp.width = screenWidth;  
  4. lp.height = LayoutParams.WRAP_CONTENT;  
  5. testImage.setLayoutParams(lp);  
  6. testImage.setMaxWidth(screenWidth);  
  7. testImage.setMaxHeight(screenWidth * 5); //這裡其實可以根據需求而定,我這裡測試為最大寬度的5倍  

以上是關鍵程式碼,在我的專案裡,主要是結合Adapter使用的,請看程式碼:

  1. import java.util.List;  
  2. import android.app.Activity;  
  3. import android.util.DisplayMetrics;  
  4. import android.view.LayoutInflater;  
  5. import android.view.View;  
  6. import android.view.ViewGroup;  
  7. import android.widget.BaseAdapter;  
  8. import android.widget.ImageView;  
  9. publicclass ImgsAdapter extends BaseAdapter {  
  10.     private Activity mContext;  
  11.     private LayoutInflater mInflater;  
  12.     private List<String> mDatas;  
  13.     privateint width;  
  14.     public ImgsAdapter(Activity context, List<String> datas) {  
  15.         mContext = context;  
  16.         mInflater = LayoutInflater.from(mContext);  
  17.         mDatas = datas;  
  18.         DisplayMetrics dm = new DisplayMetrics();  
  19.         context.getWindowManager().getDefaultDisplay().getMetrics(dm);  
  20.         width = dm.widthPixels;  
  21.     }  
  22.     publicvoid changeData(List<String> datas) {  
  23.         mDatas = datas;  
  24.     }  
  25.     publicvoid addData(List<String> datas) {  
  26.         if (mDatas != null) {  
  27.             mDatas.addAll(datas);  
  28.         } else {  
  29.             changeData(datas);  
  30.         }  
  31.     }  
  32.     @Override
  33.     publicint getCount() {  
  34.         return (mDatas != null ? mDatas.size() : 0);  
  35.     }  
  36.     @Override
  37.     public Object getItem(int position) {  
  38.         return (mDatas != null ? mDatas.get(position) : null);  
  39.     }  
  40.     @Override
  41.     publiclong getItemId(int position) {  
  42.         return position;  
  43.     }  
  44.     @Override
  45.     public View getView(finalint position, View convertView, ViewGroup parent) {  
  46.         ViewHolder holder = null;  
  47.         int type = getItemViewType(position);  
  48.         if (convertView == null) {  
  49.             // 下拉項佈局
  50.             convertView = mInflater.inflate(R.layout.list_item_img, null);  
  51.             holder = new ViewHolder();  
  52.             holder.img_list = (ImageView) convertView.findViewById(R.id.img_list);  
  53.             int screenWidth = width;  
  54.             ViewGroup.LayoutParams lp = holder.img_list.getLayoutParams();  
  55.             lp.width = screenWidth;  
  56.             lp.height = ViewGroup.LayoutParams.WRAP_CONTENT;  
  57.             holder.img_list.setLayoutParams(lp);  
  58.             holder.img_list.setMaxWidth(screenWidth);  
  59.             holder.img_list.setMaxHeight((int) (screenWidth * 5));// 這裡其實可以根據需求而定,我這裡測試為最大寬度的1.5倍
  60.             convertView.setTag(holder);  
  61.         } else {  
  62.             holder = (ViewHolder) convertView.getTag();  
  63.         }  
  64.         String imgUrl = mDatas.get(position);  
  65.         System.out.println(imgUrl);  
  66.         ImageLoaderUtil.getInstance().displayListItemImage(imgUrl, holder.img_list);  
  67.         return convertView;  
  68.     }  
  69.     class ViewHolder {  
  70.         ImageView img_list;  
  71.     }  
  72. }  

好啦,稍微看下效果:


注:記得在ImageLoader的DisplayImageOptions設定中加入.imageScaleType(ImageScaleType.EXACTLY_STRETCHED)// 圖片會縮放到目標大小完全

才可以實現效果

相關推薦

Android 設定ImageView寬度固定高度比例適應

今天和專案經理對噴了一下,他說在應用的列表資料中的圖片應該寬度固定,高度按比例縮放自適應,我說,那豈不是很醜!直接讓運營那邊把圖片處理成固定寬高比不就好了,省的我客戶端麻煩了。 這傢伙不同意,為毛呢,因為我們公司的圖片尼瑪全部是從別的網站上蕩過來的,幾萬張圖片,本身不知道

ImageView圖片寬度為控制元件寬度高度比例

寫在前面:本篇文章使用了非同步圖片載入庫Android-Universal-Image-Loader,如果你的專案不使用此庫,本文提供的方法就不能解決你的問題了。 需求說明:顯示多張圖片,每張圖片大小不定,要求圖片顯示寬度為ImageView的寬度,高度按比例縮放,能

圖片寬度為控制元件寬度高度比例

圖片寬度固定,高度按比例縮放自適應 本身不知道圖片寬度和高度  首先,定義ImageView,在該ImageView中,我們需要設定屬性android:adjustViewBounds="t

6、js控制設定圖片跟隨視窗(主要是根據高度變化)大小變化比例

html: <div class="container"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545633786675&a

淺談Android根據螢幕寬度比例圖片

mageView有scaleType屬性可以縮放圖片,讓圖片鋪滿螢幕寬度,但是會出現壓縮或裁剪的情況。 ImageView的scaleType的屬性分別是matrix(預設)、center、centerCrop、centerInside、fitCenter、fitEnd、f

Android imageView圖片比例

android:scaleType可控制圖片的縮放方式,示例程式碼如下: <ImageViewandroid:id="@+id/img"     android:src="@drawable/logo"     android:scaleType="ce

圖片加載防止窗口抖動又可以等比例

窗口 head width 方法 wid nbsp image ima add 由於html加載最後才會加載圖片,所以如果沒有提前設置高度的話,就會出現窗口抖動,用戶體驗很不好. 如果固定死高度的話,又不能於寬等比例縮放。 解決辦法: 已知原圖的寬高比例 例如:此圖寬5

【移動端元素比例】用Padding-buttom撐開高度

 1、在說容器按比例縮放前,我們先說下圖片按比例縮放。 對於圖片,預設只設置圖片的一個寬或高,那麼另一個值就會按照圖片真實比例縮放。 圖片因為本身存在寬高比,所以設定一個值,另一個值自動也就根據真實的比例對應上,但是如果是視訊、div元素等元素則沒有這個屬性。 一般在響

iOS 圖片處理方法(比例,指定寬度比例)

今天遇見的處理圖片的問題,一張圖片上下兩個部分都有一個空白區域,就中間是圖片。要求是不能讓他顯示上下    有空白問間距。這是測試提出來的問題,但是圖片本身就是這個毛病。無奈,哥哥改。誰有好的方法推薦推薦推薦      啊!!!    兩個方法如下    建議讓這兩個

android背景圖比例方法

直接在你的layout檔案的開頭加一個FrameLayout ,裡面放一個ImageView,因為只有android:src可以設定android:scaleType,android:background是無法設定的,我的程式碼: <?xml version="1.0

QT 使用qimage比例畫在qlabel

bool CZSPage::DrawRight(QImage *img) {qDebug("%s::%d::%s", __FILE__, __LINE__,__FUNCDNAME__);ui.ZS_R

在一定範圍裡比例圖片優化展示效果

在listview中,每個條目有一張圖片,圖片的大小是隨機的,怎麼展示才能美觀。很多人用的方法是,在ImageView中,加屬性 android:adjustViewBounds="true" android:maxHeight="300d

textarea寬度固定自動增高 input高度固定自動增寬

                [javascript] view plain copy print?input高度固定,自動增寬<br>  <input type="text" style="width:60;overflow-x:visible;overflow-y:visible;"&

頁面佈局--三欄佈局高度已知兩邊寬度固定中間自適應實現方式

題目:假設高度已知,三欄佈局,其中左欄和右欄寬度為200px,中間自適應 全域性樣式 html *{ padding: 0; margin: 0; } .layout{ margin-top: 20px;

布局:左寬度固定右邊自適應

con sidebar section 屏幕 type char red oat oct 需求: 左側固定寬,右側自適應屏幕寬; 左右兩列,等高布局; 左右兩列要求有最小高度,例如:200px;(當內容超出200時,會自動以等高的方式增高) 方法1:浮動布局 這種方法我

div寬度固定將其中的文字換行並動態獲取div的高

rip title oat clas 獲取 pre jquery logs -c <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title&

佈局:左寬度固定右邊自適應

需求: 左側固定寬,右側自適應螢幕寬; 左右兩列,等高佈局; 左右兩列要求有最小高度,例如:200px;(當內容超出200時,會自動以等高的方式增高)   方法一:浮動佈局 這種方法我採用的是左邊浮動,右邊加上一個margin-left值,讓他實現左邊固定,右邊自適應的佈局效果 這種實

【CSS】右邊寬度固定左邊自適應

右邊寬度固定,左邊自適應 第一種: <style> body{ display: flex; } .left{ background-color: rebeccapurple; height: 200px; flex: 1; } .righ

--------------------------三欄佈局之左右寬度固定中間自適應--------------------------

常見的頁面佈局有 1、左右寬度固定,中間自適應; 2、上下高度固定,中間自適應; 3、左寬度固定,右自適應; 4、上高度固定,下自適應, 下邊是我看過網上的視訊後寫出來的三欄佈局-左右寬高固定,中間自適應; 1 <!DOCTYPE html><!-- html 5 --

常用css上下佈局-上邊高度固定下邊高度適應

 上下兩個盒子,上邊的固定,下面的自適應 <div class= "container"> <div class="left"></div> <div class="right"></div> </div