Android 設定ImageView寬度固定,其高度按比例縮放適應
今天和專案經理對噴了一下,他說在應用的列表資料中的圖片應該寬度固定,高度按比例縮放自適應,我說,那豈不是很醜!直接讓運營那邊把圖片處理成固定寬高比不就好了,省的我客戶端麻煩了。 這傢伙不同意,為毛呢,因為我們公司的圖片尼瑪全部是從別的網站上蕩過來的,幾萬張圖片,本身不知道圖片寬度和高度。。。。我日。。。。
好吧,既然提出了這麼個需求,那我就實現唄,醜不醜就我就不管了。。。
我在群裡問了些人有木有相關的實現,可惜沒人鳥我,不知道是不是我問的太簡單了還是沒人會。。。於是乎網上搜了些相關的實現方式,還真讓我找到不少相關的東東,遂逐一驗證。
有篇部落格,名字是《ImageView圖片寬度為控制元件寬度,高度按比例縮放
最後,我選擇了另一個方案,結合自己的應用,做了些微的修改,效果還不錯,值得記錄一番:
首先,定義ImageView,在該ImageView中,我們需要設定屬性android:adjustViewBounds="true",他的意思圖片是否保持寬高比。切記的一點是該屬性需要與maxWidth、MaxHeight一起使用,否則單獨使用沒有效果。
- <ImageView
-
android:id
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:scaleType="centerCrop"
- android:adjustViewBounds="true"
- android:src="@drawable/load_default_img"/>
剛剛說了,android:adjustViewBounds="true"必須與MaxHeight一起使用才能有效,所以,我要設定該ImageView的最大高度MaxHeight:
- int screenWidth = getScreenWidth(this); // 獲取螢幕寬度
- ViewGroup.LayoutParams lp = testImage.getLayoutParams();
- lp.width = screenWidth;
- lp.height = LayoutParams.WRAP_CONTENT;
- testImage.setLayoutParams(lp);
- testImage.setMaxWidth(screenWidth);
- testImage.setMaxHeight(screenWidth * 5); //這裡其實可以根據需求而定,我這裡測試為最大寬度的5倍
以上是關鍵程式碼,在我的專案裡,主要是結合Adapter使用的,請看程式碼:
- import java.util.List;
- import android.app.Activity;
- import android.util.DisplayMetrics;
- import android.view.LayoutInflater;
- import android.view.View;
- import android.view.ViewGroup;
- import android.widget.BaseAdapter;
- import android.widget.ImageView;
- publicclass ImgsAdapter extends BaseAdapter {
- private Activity mContext;
- private LayoutInflater mInflater;
- private List<String> mDatas;
- privateint width;
- public ImgsAdapter(Activity context, List<String> datas) {
- mContext = context;
- mInflater = LayoutInflater.from(mContext);
- mDatas = datas;
- DisplayMetrics dm = new DisplayMetrics();
- context.getWindowManager().getDefaultDisplay().getMetrics(dm);
- width = dm.widthPixels;
- }
- publicvoid changeData(List<String> datas) {
- mDatas = datas;
- }
- publicvoid addData(List<String> datas) {
- if (mDatas != null) {
- mDatas.addAll(datas);
- } else {
- changeData(datas);
- }
- }
- @Override
- publicint getCount() {
- return (mDatas != null ? mDatas.size() : 0);
- }
- @Override
- public Object getItem(int position) {
- return (mDatas != null ? mDatas.get(position) : null);
- }
- @Override
- publiclong getItemId(int position) {
- return position;
- }
- @Override
- public View getView(finalint position, View convertView, ViewGroup parent) {
- ViewHolder holder = null;
- int type = getItemViewType(position);
- if (convertView == null) {
- // 下拉項佈局
- convertView = mInflater.inflate(R.layout.list_item_img, null);
- holder = new ViewHolder();
- holder.img_list = (ImageView) convertView.findViewById(R.id.img_list);
- int screenWidth = width;
- ViewGroup.LayoutParams lp = holder.img_list.getLayoutParams();
- lp.width = screenWidth;
- lp.height = ViewGroup.LayoutParams.WRAP_CONTENT;
- holder.img_list.setLayoutParams(lp);
- holder.img_list.setMaxWidth(screenWidth);
- holder.img_list.setMaxHeight((int) (screenWidth * 5));// 這裡其實可以根據需求而定,我這裡測試為最大寬度的1.5倍
- convertView.setTag(holder);
- } else {
- holder = (ViewHolder) convertView.getTag();
- }
- String imgUrl = mDatas.get(position);
- System.out.println(imgUrl);
- ImageLoaderUtil.getInstance().displayListItemImage(imgUrl, holder.img_list);
- return convertView;
- }
- class ViewHolder {
- ImageView img_list;
- }
- }
好啦,稍微看下效果:
注:記得在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