work_weipa_gridview

问题：如何实现九宫图，并且实现下拉刷新？

回答：使用自定义gridview实现

例子：

自定义gridview文件

public class MyGridView extends GridView {

	private final static int RELEASE_To_REFRESH = 1;// 下拉过程的状态值
	private final static int PULL_To_REFRESH = 2; // 从下拉返回到不刷新的状态值
	private final static int REFRESHING = 3;// 正在刷新的状态值
	private final static int DONE = 4;
	private final static int LOADING = 5;
	// 实际的padding的距离与界面上偏移距离的比例
	private final static int RATIO = 6;
	private LayoutInflater inflater;

	// ListView头部下拉刷新的布局
	private LinearLayout headerView;
	private TextView gvHeaderTipsTv;
	private TextView gvHeaderLastUpdatedTv;
	// private ImageView lvHeaderArrowIv;
	private ProgressBar gvHeaderProgressBar;

	// 定义头部下拉刷新的布局的高度
	private int headerContentHeight;

	private RotateAnimation animation;
	private RotateAnimation reverseAnimation;

	private int startY;
	private int state;
	private boolean isBack;

	// 用于保证startY的值在一个完整的touch事件中只被记录一次
	private boolean isRecored;

	private OnRefreshListener refreshListener;

	public static boolean isRefreshable;
	private AttributeSet attrs;

	public MyGridView(Context context) {
		super(context);
		// TODO Auto-generated constructor stub
		init(context);
	}

	public MyGridView(Context context, AttributeSet attrs) {
		super(context, attrs);

		init(context);
	}

	public View getView() {

		return headerView;

	}

	private void init(Context context) {
		// TODO Auto-generated method stub
		// setCacheColorHint(context.getResources().getColor(R.color.transparent));
		inflater = LayoutInflater.from(context);
		headerView = (LinearLayout) inflater.inflate(R.layout.gridview_header,
				null);
		// 下拉刷新提示
		gvHeaderTipsTv = (TextView) headerView
				.findViewById(R.id.gvHeaderTipsTv);
		// 最近更新提示
		gvHeaderLastUpdatedTv = (TextView) headerView
				.findViewById(R.id.gvHeaderLastUpdatedTv);
		// 进度条
		gvHeaderProgressBar = (ProgressBar) headerView
				.findViewById(R.id.gvHeaderProgressBar);

		measureView(headerView);

		headerContentHeight = headerView.getMeasuredHeight();
		// 设置内边距，正好距离顶部为一个负的整个布局的高度，正好把头部隐藏
		headerView.setPadding(0, -1 * headerContentHeight, 0, 0);
		// 重绘一下
		headerView.invalidate();
		// 将下拉刷新的布局加入ListView的顶部
//		addHeaderView(headerView, null, false);
		// 设置滚动监听事件
		// setOnScrollListener(this);

		// 设置旋转动画事件
		animation = new RotateAnimation(0, -100,
				RotateAnimation.RELATIVE_TO_SELF, 0.5f,
				RotateAnimation.RELATIVE_TO_SELF, 0.5f);
		animation.setInterpolator(new LinearInterpolator());
		animation.setDuration(250);
		animation.setFillAfter(true);

		// 设置旋转动画事件
		reverseAnimation = new RotateAnimation(-180, 0,
				RotateAnimation.RELATIVE_TO_SELF, 0.5f,
				RotateAnimation.RELATIVE_TO_SELF, 0.5f);
		reverseAnimation.setInterpolator(new LinearInterpolator());
		reverseAnimation.setDuration(200);
		reverseAnimation.setFillAfter(true);

		// 一开始的状态就是下拉刷新完的状态，所以为DONE
		state = DONE;
		// 是否正在刷新
		isRefreshable = false;

	}

	@Override
	public boolean onTouchEvent(MotionEvent ev) {
		// TODO Auto-generated method stub
		if (isRefreshable) {
			switch (ev.getAction()) {
			case MotionEvent.ACTION_DOWN:
				if (!isRecored) {
					isRecored = true;
					startY = (int) ev.getY();// 手指按下时记录当前位置
				}
				break;

			case MotionEvent.ACTION_UP:
				if (state != REFRESHING && state != LOADING) {
					if (state == PULL_To_REFRESH) {
						state = DONE;
						changeHeaderViewByState();
					}
					if (state == RELEASE_To_REFRESH) {
						state = REFRESHING;
						changeHeaderViewByState();
						onLvRefresh();
					}
				}
				isRecored = false;
				isBack = false;
				break;

			case MotionEvent.ACTION_MOVE:
				int tempY = (int) ev.getY();
				if (!isRecored) {
					isRecored = true;
					startY = tempY;
				}
				if (state != REFRESHING && isRecored && state != LOADING) {
					// 保证在设置padding的过程中，当前的位置一直是在head，否则如果当列表超出屏幕的话，当在上推的时候，列表会同时进行滚动
					// 可以松手去刷新了
					if (state == RELEASE_To_REFRESH) {
						setSelection(0);
						// 往上推了，推到了屏幕足够掩盖head的程度，但是还没有推到全部掩盖的地步
						if ((tempY - startY) / RATIO < headerContentHeight
								&& (tempY - startY) > 0) {
							// 由松开刷新状态转变到下拉刷新状态
							state = PULL_To_REFRESH;
							changeHeaderViewByState();
						} else if (tempY - startY <= 0) {
							// 一下子推到顶了
							// 由松开刷新状态转变到done状态
							state = DONE;
							changeHeaderViewByState();
						}
					}
					// 还没有到达显示松开刷新的时候,DONE或者是PULL_To_REFRESH状态
					if (state == PULL_To_REFRESH) {
						setSelection(0);
						// 下拉到可以进入RELEASE_TO_REFRESH的状态
						if ((tempY - startY) / RATIO >= headerContentHeight) {// 由done或者下拉刷新状态转变到松开刷新
							state = RELEASE_To_REFRESH;
							isBack = true;
							changeHeaderViewByState();
						}
						// 上推到顶了
						else if (tempY - startY <= 0) {// 由done或者下拉刷新状态转变到done状态
							state = DONE;
							changeHeaderViewByState();
						}
					}

					// done状态下
					if (state == DONE) {
						if (tempY - startY > 0) {
							state = PULL_To_REFRESH;
							changeHeaderViewByState();
						}
					}
					// 更新headView的size
					if (state == PULL_To_REFRESH) {
						headerView.setPadding(0, -1 * headerContentHeight
								+ (tempY - startY) / RATIO, 0, 0);

					}
					// 更新headView的paddingTop
					if (state == RELEASE_To_REFRESH) {
						headerView.setPadding(0, (tempY - startY) / RATIO
								- headerContentHeight, 0, 0);
					}
				}

			default:
				break;
			}
		}
		return super.onTouchEvent(ev);

	}

	// 当状态改变时候，调用该方法，以更新界面
	private void changeHeaderViewByState() {
		// TODO Auto-generated method stub
		switch (state) {
		case RELEASE_To_REFRESH:
			gvHeaderProgressBar.setVisibility(View.GONE);
			gvHeaderTipsTv.setVisibility(View.VISIBLE);
			gvHeaderLastUpdatedTv.setVisibility(View.VISIBLE);

			gvHeaderTipsTv.setText("松开刷新");
			break;

		case PULL_To_REFRESH:
			gvHeaderProgressBar.setVisibility(View.GONE);
			gvHeaderTipsTv.setVisibility(View.VISIBLE);
			gvHeaderLastUpdatedTv.setVisibility(View.VISIBLE);
			// 是由RELEASE_To_REFRESH状态转变来的
			if (isBack) {
				isBack = false;
				gvHeaderTipsTv.setText("下拉刷新");
			} else {
				gvHeaderTipsTv.setText("下拉刷新");
			}
			break;
		case REFRESHING:

			headerView.setPadding(0, 0, 0, 0);

			gvHeaderProgressBar.setVisibility(View.VISIBLE);
			gvHeaderTipsTv.setText("正在刷新...");
			gvHeaderLastUpdatedTv.setVisibility(View.VISIBLE);
			break;

		case DONE:
			headerView.setPadding(0, -1 * headerContentHeight, 0, 0);

			gvHeaderProgressBar.setVisibility(View.GONE);
			gvHeaderTipsTv.setText("下拉刷新");
			gvHeaderLastUpdatedTv.setVisibility(View.VISIBLE);
			break;

		}
	}

	// 此方法直接照搬自网络上的一个下拉刷新的demo，此处是“估计”headView的width以及height
	private void measureView(View child) {
		ViewGroup.LayoutParams params = child.getLayoutParams();
		if (params == null) {
			params = new ViewGroup.LayoutParams(
					ViewGroup.LayoutParams.MATCH_PARENT,
					ViewGroup.LayoutParams.WRAP_CONTENT);
		}
		int childWidthSpec = ViewGroup.getChildMeasureSpec(0, 0 + 0,
				params.width);
		int lpHeight = params.height;
		int childHeightSpec;
		if (lpHeight > 0) {
			childHeightSpec = MeasureSpec.makeMeasureSpec(lpHeight,
					MeasureSpec.EXACTLY);
		} else {
			childHeightSpec = MeasureSpec.makeMeasureSpec(0,
					MeasureSpec.UNSPECIFIED);
		}
		child.measure(childWidthSpec, childHeightSpec);
	}

	// 刷新的监听
	public void setonRefreshListener(OnRefreshListener refreshListener) {
		this.refreshListener = refreshListener;
		isRefreshable = true;
	}

	// 接口
	public interface OnRefreshListener {
		public void onRefresh();
	}

	// 刷新完成
	public void onRefreshComplete() {
		state = DONE;
		SimpleDateFormat format = new SimpleDateFormat("yyyy年MM月dd日  HH:mm");

		String date = format.format(new Date());

		gvHeaderLastUpdatedTv.setText("最近更新:" + date);
		changeHeaderViewByState();
	}

	private void onLvRefresh() {
		if (refreshListener != null) {
			refreshListener.onRefresh();
		}
	}

	public void setAdapter(TestAdapter adapter) {
		SimpleDateFormat format = new SimpleDateFormat("yyyy年MM月dd日  HH:mm");

		String date = format.format(new Date());

		gvHeaderLastUpdatedTv.setText("最近更新:" + date);

		super.setAdapter(adapter);
	}

}

①布局文件

fragment_viewer.xml

<LinearLayout
            android:id="@+id/head"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" 
            android:orientation="horizontal">
        </LinearLayout>

        <com.example.weipa.galview.MyGridView
            android:id="@+id/gridView1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:numColumns="3" />

gridview_header.xml

<RelativeLayout
        android:id="@+id/header_contentLayout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="30dp" >

        <!-- 箭头图像、进度条 -->

        <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true" >

            <!-- 箭头 -->
            <!--
                <ImageView  
               android:id="@+id/lvHeaderArrowIv"  
                android:layout_width="wrap_content"  
                android:layout_height="wrap_content"  
                android:layout_gravity="center"  
                android:src="@drawable/arrow" /> -->


            <!-- 进度条 -->

            <ProgressBar
                android:id="@+id/gvHeaderProgressBar"
                style="?android:attr/progressBarStyleSmall"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:visibility="gone" />
        </FrameLayout>

        <!-- 提示、最近更新 -->

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:gravity="center_horizontal"
            android:orientation="vertical" >

            <!-- 提示 -->

            <TextView
                android:id="@+id/gvHeaderTipsTv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="下拉刷新"
                android:textSize="20sp" />

            <!-- 最近更新 -->

            <TextView
                android:id="@+id/gvHeaderLastUpdatedTv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="上次更新"
                android:textColor="#f77000"
                android:textSize="10sp" />
        </LinearLayout>
    </RelativeLayout>

    <LinearLayout
        android:id="@+id/lv_con"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#ffffff"
        android:orientation="vertical" >
    </LinearLayout>

②adapter文件

public class GridViewAdapter extends BaseAdapter{

	private List<GridImages> entities;

	private Context context;
	
	private Activity activity;
	
	//构造函数
	public GridViewAdapter(Context context, List<GridImages> entities,Activity activity) {
		this.context = context;
		this.entities = entities;
		this.activity = activity;
	}

	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return entities.size();
	}

	@Override
	public Object getItem(int position) {
		return entities.get(position);
	}

	@Override
	public long getItemId(int position) {
		return position;
	}

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		final View v = View.inflate(context, R.layout.viewer_item, null);
		
		//获取控件对象
//		ImageView img_item =(ImageView) v.findViewById(R.id.img_item);
		GridImages entity = entities.get(position);
		System.out.println(entities);
		
		//获取ImageView控件对象
		ImageView image = (ImageView) v.findViewById(R.id.img_item);
		
		//设置值
		image.setTag(entity.getImage());

		
		//创建ImageDownloader对象
		ImageDownloader imageDownloader = new ImageDownloader();
		//获取图片路径
		
		String url = HttpUrl.url+entity.getImage();
		//注册图片下载事件
		imageDownloader.imageDownload(url, image, null, activity,new OnImageDownload() {
			@Override
			public void onDownloadSuccess(Bitmap bitmap, String c_url,
					ImageView imageView) {
				// TODO Auto-generated method stub
				imageView.setImageBitmap(bitmap);
			}
		});
		return v;
	}
	
	

}

③实现

public class ViewerFragment extends Fragment {

	private MyGridView gridView1;

	// 声明适配器对象
	private TestAdapter adapter;
	// 声明管理对象
	private TestInfoManager testInfoManager;
	// 创建出分页对象
	private PageInfo pageInfo = new PageInfo();

	private int showItem = 0;
	private boolean isFinal = false;

	private View view;

	public static LinearLayout head;

	Handler handler = new Handler() {
		public void handleMessage(Message msg) {
			switch (msg.what) {
			case WhatUtil.QUERYCATEGORIES:
				// 创建适配器对象
				pageInfo = testInfoManager.getPageInfo();
				adapter = new TestAdapter(getActivity(),
						testInfoManager.getEntities(), getActivity());
				// 设置GridView控件的适配器
				gridView1.setAdapter(adapter);
				gridView1.setSelection(showItem);
				gridView1.setOnScrollListener(new myScrollListener());
				// gridView1.setVerticalScrollBarEnabled(true);
				gridView1.setonRefreshListener(new OnRefreshListener() {

					@Override
					public void onRefresh() {
						new AsyncTask<Void, Void, Void>() {
							protected Void doInBackground(Void... params) {
								try {
									Thread.sleep(1000);
								} catch (Exception e) {
									e.printStackTrace();
								}
								return null;
							}

							@Override
							protected void onPostExecute(Void result) {
								adapter.notifyDataSetChanged();
								gridView1.onRefreshComplete();
							}
						}.execute(null, null, null);
					}
				});

				gridView1.setOnItemClickListener(new OnItemClickListener() {

					@Override
					public void onItemClick(AdapterView<?> adpaterView, View v,
							int position, long lid) {
						// TODO Auto-generated method stub
						Toast.makeText(getActivity(), "跳转到图片展开的界面！！！", 1).show();
					}
				});

				break;
			}
		}
	};

	@Override
	public void onAttach(Activity activity) {
		// TODO Auto-generated method stub
		super.onAttach(activity);
		activity = (MainActivity) activity;

	}

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		view = inflater.inflate(R.layout.fragment_viewer, container, false);

		// 获取布局对象的GridView
		gridView1 = (MyGridView) view.findViewById(R.id.gridView1);

		// gridview头部刷新布局与listview区别：gridView没有addHeaderView方法所以必须在GridView布局上方加一个放置头部布局的布局，然后用addView方法代替
		head = (LinearLayout) view.findViewById(R.id.head);

		LayoutParams p = new LayoutParams(LayoutParams.MATCH_PARENT,
				LayoutParams.WRAP_CONTENT, Gravity.CENTER);

		// 获取MyGridView里面的head布局
		head.addView(gridView1.getView(), p);

		// 创建管理对象
		testInfoManager = new TestInfoManager(getActivity(), handler);
		// 获取当前页的数据
		testInfoManager.queryObjects(1);

		return view;
	}

	class myScrollListener implements OnScrollListener {

		@Override
		public void onScrollStateChanged(AbsListView view, int scrollState) {
			// TODO Auto-generated method stub
			if (isFinal && scrollState == OnScrollListener.SCROLL_STATE_IDLE) {
				if (pageInfo.getNowPage() != pageInfo.getCountPage()) {
					testInfoManager.queryObjects(pageInfo.getNowPage() + 1);
					isFinal = false;
				}
			}
		}

		@Override
		public void onScroll(AbsListView view, int firstVisibleItem,
				int visibleItemCount, int totalItemCount) {
			// TODO Auto-generated method stub
			if ((firstVisibleItem + visibleItemCount) >= totalItemCount) {
				isFinal = true;
				showItem = firstVisibleItem;
			}
			if (firstVisibleItem == 0) {
				MyGridView.isRefreshable = true;
			} else {
				MyGridView.isRefreshable = false;
			}
		}
	}

图示：