Android:漫画APP开发札记之ListView中图片按屏幕宽度缩放

Android:漫画APP开发笔记之ListView中图片按屏幕宽度缩放

一、listview

    <ListView        android:id="@+id/piclist"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:layout_above="@+id/bottom"        android:layout_marginTop="106dp"        android:divider="#00000000"        android:listSelector="#00000000"        android:scrollbars="none" />

其中，

 android:divider="#00000000"

设置列表项的间隔颜色透明，

android:listSelector="#00000000"

设置点击图片时无背景色（透明色，不用系统背景色）

二、piclist_item

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"      android:orientation="vertical"    android:layout_width="fill_parent"      android:layout_height="fill_parent">        <ImageView         android:id="@+id/piclist_item"     	 android:layout_height="wrap_content"  	 android:layout_width="fill_parent"         android:scaleType="fitStart"/></RelativeLayout>

三、PicListInfo

package com.cartoon.adapters;import android.graphics.Bitmap;public class PicListInfo {	private Bitmap PicUrl;   //图片地址	//下面是上面属性的get和set方法	public Bitmap getPicUrl() {		return PicUrl;	}	public void setPicUrl(Bitmap picUrl) {		PicUrl = picUrl;	}	}

四、PicListAdapter

package com.cartoon.adapters;import java.util.ArrayList;import com.cartoon.R;import android.content.Context;import android.view.LayoutInflater;import android.view.View;import android.view.View.MeasureSpec;import android.view.ViewGroup;import android.view.ViewGroup.MarginLayoutParams;import android.view.WindowManager;import android.widget.ArrayAdapter;import android.widget.ImageView;import android.widget.ListAdapter;import android.widget.ListView;import android.widget.RelativeLayout;import android.widget.TextView;public class PicListAdapter extends ArrayAdapter<PicListInfo>{		public PicListAdapter(Context context, int textViewResourceId, ArrayList<PicListInfo> objects)	{		super(context, textViewResourceId, objects);	}	@Override	public View getView(int position, View convertView, ViewGroup parent) {		ViewHolder holder =null;		View view;		WindowManager wm = (WindowManager) getContext()                .getSystemService(Context.WINDOW_SERVICE);                int width = wm.getDefaultDisplay().getWidth();		                if (convertView == null) {	        view = LayoutInflater.from(getContext()).inflate(R.layout.piclist_item, null);	<pre name="code" class="java">                //设置图片的尺寸		holder = new ViewHolder();		holder.piclist_item = (ImageView)view.findViewById(R.id.piclist_item);     	        		ViewGroup.LayoutParams margin = new ViewGroup.LayoutParams(holder.piclist_item.getLayoutParams());	          RelativeLayout.LayoutParams layoutParams  = new RelativeLayout.LayoutParams(margin);

             layoutParams.height = (int) (width*0.5677);//设置图片的高度
             layoutParams.width = width; //设置图片的宽度
             layoutParams.setMargins(15, 0, 15, 0);
            holder.piclist_item.setLayoutParams(layoutParams);
            holder.piclist_item.setScaleType(ImageView.ScaleType.FIT_START); view.setTag(holder);} else {view = convertView;holder = (ViewHolder)convertView.getTag();} final PicListInfo singleoder = getItem(position); if (singleoder != null) {holder.piclist_item.setImageBitmap(singleoder.getPicUrl()); }return view;}public class ViewHolder{public ImageView piclist_item;}}

使用listview+adapter遇到了表项高度的问题，通用的方法只将图片显示在每个表项左边的狭小区域中。而项目要求图片与屏幕等宽、高度按照比例缩放，因此先获取屏幕宽度

		WindowManager wm = (WindowManager) getContext()                .getSystemService(Context.WINDOW_SERVICE);                int width = wm.getDefaultDisplay().getWidth();                int height = wm.getDefaultDisplay().getHeight();

再调整图片尺寸，注释已经写的比较清楚：

<pre name="code" class="java">                holder.piclist_item = (ImageView)view.findViewById(R.id.piclist_item);     	        		ViewGroup.LayoutParams margin9 = new ViewGroup.LayoutParams(holder.piclist_item.getLayoutParams());	          RelativeLayout.LayoutParams layoutParams  = new RelativeLayout.LayoutParams(margin);

             layoutParams.height = (int) (width*0.5677);//设置图片的高度
             layoutParams.width = width; //设置图片的宽度
             layoutParams.setMargins(15, 0, 15, 0);//左右边距15.0px，与主框架一致
            holder.piclist_item.setLayoutParams(layoutParams);
            holder.piclist_item.setScaleType(ImageView.ScaleType.FIT_START); //按比例扩大或缩小到View的宽度，然后置顶显示
view.setTag(holder);

由于已知图片宽高比例，在将宽度按屏幕宽度缩放时，只需将高度乘以对应比例即可。或者通过ScaleType缩放。

附：ScaleType属性

1）CENTER   按图片的原来size 居中显示，当图片长宽超过View的上宽时，则截取图片的居中部分显示2）CENTER_CROP   按比例扩大图片的size 居中显示，使得图片的长宽的等于或大于View的长宽3）CENTER_INSIDE   将图片的内容完整居中显示，通过按比例缩小或原来的size使得图片长宽等于或小于view的长宽4）FIT_CENTER   把图片按比例扩大或缩小到View的宽度，然后居中显示5）FIT_STAR   把图片按比例扩大或缩小到View的宽度，然后置顶显示6）FIT_END   把图片按比例扩大或缩小到View的宽度，然后置于底部显示7）FIT_XY   不按比例缩放图片，目标是把整个图片塞满整个View

如果