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 stubinit(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);// 一开始的状态就是下拉刷新完的状态，所以为DONEstate = DONE;// 是否正在刷新isRefreshable = false;}@Overridepublic boolean onTouchEvent(MotionEvent ev) {// TODO Auto-generated method stubif (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的sizeif (state == PULL_To_REFRESH) {headerView.setPadding(0, -1 * headerContentHeight+ (tempY - startY) / RATIO, 0, 0);}// 更新headView的paddingTopif (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 stubswitch (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以及heightprivate 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;}@Overridepublic int getCount() {// TODO Auto-generated method stubreturn entities.size();}@Overridepublic Object getItem(int position) {return entities.get(position);}@Overridepublic long getItemId(int position) {return position;}@Overridepublic 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() {@Overridepublic void onDownloadSuccess(Bitmap bitmap, String c_url,ImageView imageView) {// TODO Auto-generated method stubimageView.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() {@Overridepublic void onRefresh() {new AsyncTask<Void, Void, Void>() {protected Void doInBackground(Void... params) {try {Thread.sleep(1000);} catch (Exception e) {e.printStackTrace();}return null;}@Overrideprotected void onPostExecute(Void result) {adapter.notifyDataSetChanged();gridView1.onRefreshComplete();}}.execute(null, null, null);}});gridView1.setOnItemClickListener(new OnItemClickListener() {@Overridepublic void onItemClick(AdapterView<?> adpaterView, View v,int position, long lid) {// TODO Auto-generated method stubToast.makeText(getActivity(), "跳转到图片展开的界面！！！", 1).show();}});break;}}};@Overridepublic void onAttach(Activity activity) {// TODO Auto-generated method stubsuper.onAttach(activity);activity = (MainActivity) activity;}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {view = inflater.inflate(R.layout.fragment_viewer, container, false);// 获取布局对象的GridViewgridView1 = (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 {@Overridepublic void onScrollStateChanged(AbsListView view, int scrollState) {// TODO Auto-generated method stubif (isFinal && scrollState == OnScrollListener.SCROLL_STATE_IDLE) {if (pageInfo.getNowPage() != pageInfo.getCountPage()) {testInfoManager.queryObjects(pageInfo.getNowPage() + 1);isFinal = false;}}}@Overridepublic void onScroll(AbsListView view, int firstVisibleItem,int visibleItemCount, int totalItemCount) {// TODO Auto-generated method stubif ((firstVisibleItem + visibleItemCount) >= totalItemCount) {isFinal = true;showItem = firstVisibleItem;}if (firstVisibleItem == 0) {MyGridView.isRefreshable = true;} else {MyGridView.isRefreshable = false;}}}

图示：