Android常用开源项目(二十三)



Android开发之在ListView头部实现图片下拉放大效果

1.首先看下实现的效果图

2.具体实现步骤

代码结构图

(1).实现自定义的ListView

public class ImgListView extends ListView {

private static final int BACK_SCALE = 0;

private boolean isHaveHead = false;// 头部是否有图片

private float scaleY = 0;

private boolean isBacking = false;// 是否处在回弹状态

private int displayWidth;

private Context mContext;

private Bitmap bmp;

private View headerView;

private ImageView imageView;

/** 用于记录拖拉图片移动的坐标位置 */

private Matrix matrix = new Matrix();

/** 用于记录图片要进行拖拉时候的坐标位置 */

private Matrix currentMatrix = new Matrix();

private Matrix defaultMatrix = new Matrix();

private float imgHeight, imgWidth;

/** 记录是拖拉照片模式还是放大缩小照片模式 0:拖拉模式，1：放大 */

private int mode = 0;// 初始状态

/** 拖拉照片模式 */

private final int MODE_DRAG = 1;

/** 用于记录开始时候的坐标位置 */

private PointF startPoint = new PointF();

private int mImageId;

private AttributeSet attrs;

public ImgListView(Context context) {

super(context);

this.mContext = context;

initView();

}

public ImgListView(Context context, AttributeSet attrs) {

super(context, attrs);

this.mContext = context;

this.attrs = attrs;

initView();

}

public ImgListView(Context context, AttributeSet attrs, int defStyle) {

super(context, attrs, defStyle);

this.mContext = context;

this.attrs = attrs;

initView();

}

public void setAdapter(ListAdapter adapter) {

super.setAdapter(adapter);

}

public void addHeaderView(View v) {

super.addHeaderView(v);

}

public void setImageId(int id) {

this.mImageId = id;

bmp = BitmapFactory.decodeResource(getResources(), mImageId);

if (isHaveHead)

this.removeHeaderView(headerView);

initHead();

}

public void setImageBitmap(Bitmap bit) {

this.bmp = bit;

if (isHaveHead)

this.removeHeaderView(headerView);

initHead();

}

/**

* 初始化图片

*/

private void initView() {

/* 取得屏幕分辨率大小 */

DisplayMetrics dm = new DisplayMetrics();

WindowManager mWm = (WindowManager) mContext.getSystemService(Context.WINDOW_SERVICE);

mWm.getDefaultDisplay().getMetrics(dm);

displayWidth = dm.widthPixels;

TypedArray a = mContext.obtainStyledAttributes(attrs, R.styleable.ImgListView);

mImageId = a.getResourceId(R.styleable.ImgListView_headimage, 0);

a.recycle();

if (null == bmp && mImageId != 0) {

bmp = BitmapFactory.decodeResource(getResources(), mImageId);

initHead();

}

}

private void initHead() {

LayoutInflater inflater = LayoutInflater.from(mContext);

headerView = inflater.inflate(R.layout.top_img, null);

imageView = (ImageView) headerView.findViewById(R.id.imageView);

float scale = (float) displayWidth / (float) bmp.getWidth();// 1080/1800

matrix.postScale(scale, scale, 0, 0);

imageView.setImageMatrix(matrix);

defaultMatrix.set(matrix);

imgHeight = scale * bmp.getHeight();

imgWidth = scale * bmp.getWidth();

ListView.LayoutParams relativeLayout = new ListView.LayoutParams((int) imgWidth, (int) imgHeight);

imageView.setLayoutParams(relativeLayout);

this.addHeaderView(headerView);

isHaveHead = true;

}

/**

* 向下滑动让图片变大

*

* @param event

* @return

*/

public boolean onTouchEvent(MotionEvent event) {

if (!isHaveHead) {// 无头部图片

return super.onTouchEvent(event);

}

switch (event.getAction() & MotionEvent.ACTION_MASK) {

// 手指压下屏幕

case MotionEvent.ACTION_DOWN:

if (isBacking) {

return super.onTouchEvent(event);

}

int[] location = new int[2];

imageView.getLocationInWindow(location);

if (location[1] >= 0) {

mode = MODE_DRAG;

// 记录ImageView当前的移动位置

currentMatrix.set(imageView.getImageMatrix());

startPoint.set(event.getX(), event.getY());

}

break;

// 手指在屏幕上移动，改事件会被不断触发

case MotionEvent.ACTION_MOVE:

// 拖拉图片

if (mode == MODE_DRAG) {

float dx = event.getX() - startPoint.x; // 得到x轴的移动距离

float dy = event.getY() - startPoint.y; // 得到y轴的移动距离

// 在没有移动之前的位置上进行移动

if (dy / 2 + imgHeight <= 1.5 * imgHeight) {

matrix.set(currentMatrix);

float scale = (dy / 2 + imgHeight) / (imgHeight);// 得到缩放倍数

if (dy > 0) {

scaleY = dy;

ListView.LayoutParams relativeLayout = new ListView.LayoutParams((int) (scale * imgWidth), (int) (scale * imgHeight));

imageView.setLayoutParams(relativeLayout);

matrix.postScale(scale, scale, imgWidth / 2, 0);

imageView.setImageMatrix(matrix);

}

}

}

break;

// 手指离开屏幕

case MotionEvent.ACTION_UP:

// 当触点离开屏幕，图片还原

mHandler.sendEmptyMessage(BACK_SCALE);

case MotionEvent.ACTION_POINTER_UP:

mode = 0;

break;

}

return super.onTouchEvent(event);

}

private Handler mHandler = new Handler() {

@Override

public void handleMessage(Message msg) {

// TODO Auto-generated method stub

switch (msg.what) {

case BACK_SCALE:

float scale = (scaleY / 2 + imgHeight) / (imgHeight);// 得到缩放倍数

if (scaleY > 0) {

isBacking = true;

matrix.set(currentMatrix);

ListView.LayoutParams relativeLayout = new ListView.LayoutParams((int) (scale * imgWidth), (int) (scale * imgHeight));

imageView.setLayoutParams(relativeLayout);

matrix.postScale(scale, scale, imgWidth / 2, 0);

imageView.setImageMatrix(matrix);

scaleY = (float) (scaleY / 2 - 1);

mHandler.sendEmptyMessageDelayed(BACK_SCALE, 20);

} else {

scaleY = 0;

ListView.LayoutParams relativeLayout = new ListView.LayoutParams((int) imgWidth, (int) imgHeight);

imageView.setLayoutParams(relativeLayout);

matrix.set(defaultMatrix);

imageView.setImageMatrix(matrix);

isBacking = false;

}

break;

default:

break;

}

super.handleMessage(msg);

}

};

}

(2).listview的头部布局文件top_img.xml

<?xml version="1.0" encoding="utf-8"?>

<ImageView xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/imageView"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:scaleType="matrix"

android:src="@drawable/top_img"

android:background="#EEEEEE"

/>

(3).新建Activity类，实现之定义listview的显示

public class MainActivity extends Activity {

private Context sContext;

private List<String> sNewsList;

private NewsAdapter sNewsAdapter;

private ImgListView sListView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

sContext = this;

sNewsList = new ArrayList<String>();

geneItems();

sListView = (ImgListView) findViewById(R.id.xListView);

//sListView.setImageId(R.drawable.top_img);//可以再资源文件中通过 imglistview:headimage="@drawable/top_img" 设置图片，也可通过本方法

sNewsAdapter = new NewsAdapter();

sListView.setAdapter(sNewsAdapter);

}

private void geneItems() {

for (int i = 0; i != 10; ++i) {

sNewsList.add(""+i);

}

}

private class NewsAdapter extends BaseAdapter {

private LayoutInflater mInflater;

public NewsAdapter() {

mInflater = LayoutInflater.from(sContext);

}

@Override

public int getCount() {

return sNewsList.size();

}

@Override

public Object getItem(int position) {

return sNewsList.get(position);

}

@Override

public long getItemId(int position) {

return position;

}

@Override

public View getView(int position, View convertView, ViewGroup parent) {

Holder h = null;

if (convertView == null) {

h = new Holder();

convertView = mInflater.inflate(R.layout.list_item, null);

h.content = (TextView) convertView.findViewById(R.id.tv_content);

convertView.setTag(h);

} else {

h = (Holder) convertView.getTag();

}

h.content.setText(sNewsList.get(position));

return convertView;

}

private class Holder {

public TextView content;

}

}

}

(4).Activity的布局文件activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

xmlns:imglistview="http://schemas.android.com/apk/res/com.roger.listimgdemo"

android:layout_width="match_parent"

android:layout_height="match_parent" >

<com.roger.listimgdemo.ImgListView

android:id="@+id/xListView"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:layout_margin="0dp"

android:cacheColorHint="#00000000"

android:divider="#ffffff"

android:dividerHeight="0dp"

android:fadingEdgeLength="0dp"

android:padding="0dp"

imglistview:headimage="@drawable/top_img" />

</RelativeLayout>

(5).Adapter的布局文件list_item.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_marginLeft="5dp"

android:layout_marginRight="5dp"

android:background="#EEEEEE"

android:orientation="horizontal" >

<TextView

android:id="@+id/tv_content"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginBottom="5dp"

android:layout_marginLeft="5dp"

android:layout_marginTop="25dp"

android:padding="10dp"

android:text="1"

android:textColor="#000000"

android:textIsSelectable="false" />

</LinearLayout>