android控制文件：ViewPager+Fragment+GridView使用（与AndroidQuery框架结合）

最近我看到一个AndroidQuery该框架。里面Demo，有一个屏幕，让博主喜欢。很顺利的左右滑动，感觉非常好，所以拿来和大家分享一下。看看结果图。：

从图中能够看出。上面的布局是一个Layout里面嵌套有个ViewPager，ViewPager中包括着Fragment，Fragment的布局文件包括了一个简单的GridView，GridView的Item布局非常easy。就是一个100*100大小的图片。好啦。先说这么多，然后咱们看代码吧。

最外层Activity的布局文件

<?
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="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Display 10x100 images from Picasa." />

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <android.support.v4.view.PagerTabStrip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top" />
    </android.support.v4.view.ViewPager>

</LinearLayout>

对应的Activity的java文件：（使用了AndroidAnnotation框架）

/*
 * $filename: ImageLoadingPageGridActivity.java,v $
 * $Date: 2014-5-3  $
 * Copyright (C) ZhengHaibo, Inc. All rights reserved.
 * This software is Made by Zhenghaibo.
 */
package edu.njupt.zhb;

import org.androidannotations.annotations.AfterViews;
import org.androidannotations.annotations.EActivity;
import org.androidannotations.annotations.NoTitle;
import org.androidannotations.annotations.ViewById;

import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
/*
 *@author: ZhengHaibo
 *web:     http://blog.csdn.net/nuptboyzhb
 *mail:    zhb931706659@126.com
 *2014-5-3  Nanjing,njupt,China
 */
@NoTitle
@EActivity(R.layout.image_page_grid_activity)
public class ImageLoadingPageGridActivity extends FragmentActivity{

	@ViewById
	ViewPager pager;
	
	PageAdapter adapter;
	
	@AfterViews
	void afterViews(){
		adapter = new PageAdapter(getSupportFragmentManager(),ImageLoadingPageGridActivity.this);
		pager.setAdapter(adapter);
		pager.setOffscreenPageLimit(3);//设置缓存视图的数目
	}
}

大家注意：setOffscreenPageLimit的參数设置，数目越大，缓存的越多。切换的时候，载入的越快。

但，并非越大越好，内存中缓存的越多，消耗的手机资源就越多。

以下看一下PageAdapter的代码

/*
 * $filename: PageAdapter.java,v $
 * $Date: 2014-5-3  $
 * Copyright (C) ZhengHaibo, Inc. All rights reserved.
 * This software is Made by Zhenghaibo.
 */
package edu.njupt.zhb;

import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.util.Log;
import android.view.ViewGroup;

/*
 *@author: ZhengHaibo  
 *web:     http://blog.csdn.net/nuptboyzhb
 *mail:    zhb931706659@126.com
 *2014-5-3  Nanjing,njupt,China
 */
public class PageAdapter extends FragmentStatePagerAdapter {

	private static String[] topics = { "dog", "cat", "bird", "panda", "horse",
			"elephant", "bear", "butterfly", "monkey", "fish", "tiger",
			"chicken", "pig" };

	Context context;

	public PageAdapter(FragmentManager fm, Context context) {
		super(fm);
		this.context = context;
	}

	@Override
	public Fragment getItem(int pos) {
		Log.d("primary", topics[pos]);
		Bundle args = new Bundle();
		args.putString("topic", topics[pos]);
		ImageGridFragment fragment = (ImageGridFragment) Fragment.instantiate(
				context, ImageGridFragment.class.getName(), args);
		return fragment;
	}

	@Override
	public int getCount() {
		return topics.length;
	}

	@Override
	public CharSequence getPageTitle(int pos) {
		return topics[pos];
	}

	@Override
	public void setPrimaryItem(ViewGroup container, int position, Object object) {

		Log.d("primary", topics[position]);

		ImageGridFragment fragment = (ImageGridFragment) object;
		fragment.init();

	}

	@Override
	public void destroyItem(ViewGroup container, int position, Object object) {
		Log.d("destroyItem", topics[position]);
	}

}

从上面的额PageAdapter的代码能够看出，里面总共同拥有13个页面。也就是左右滑动的时候，有13个Fragment。这里，注意一下getItem方法。它返回的是一个ImageGridFragment，而且向该Fragment中传递了键为topic的键值对。

以下看一下对应的ImageGridFragment的java文件和布局文件：

package edu.njupt.zhb;

import java.util.ArrayList;
import java.util.List;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;

import com.androidquery.AQuery;
import com.androidquery.callback.AjaxStatus;
import com.androidquery.util.AQUtility;
import com.androidquery.util.XmlDom;

public class ImageGridFragment extends Fragment {

	private AQuery aq;
	private AQuery aq2;

	private String topic;
	private List<Photo> photos;

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		View view = inflater.inflate(R.layout.image_grid_fragment, container,
				false);
		aq = new AQuery(getActivity(), view);
		aq2 = new AQuery(getActivity());
		Log.d("ViewPagerDemo","onCreateView...");
		return view;

	}

	@Override
	public void onActivityCreated(Bundle savedInstanceState) {
		super.onActivityCreated(savedInstanceState);
		topic = getArguments().getString("topic");
		Log.d("ViewPagerDemo","onActivityCreated...");
	}
	private boolean inited;

	public void init() {
		if (aq == null || inited)
			return;
		inited = true;
		Log.d("ViewPagerDemo","init...");
		refresh();
	}

	public void refresh() {
		ajaxPhotos();
	}

	private void ajaxPhotos() {
		String url = "https://picasaweb.google.com/data/feed/api/all?q="
				+ topic + "&max-results=100";
		aq.progress(R.id.progress).ajax(url, XmlDom.class, 0, this, "photosCb");
	}

	public void photosCb(String url, XmlDom xml, AjaxStatus status) {

		if (xml != null) {
			photos = convertAll(xml);
			render(photos);
		}

	}

	private void render(List<Photo> entries) {

		AQUtility.debug("render setup");
		ArrayAdapter<Photo> aa = new ArrayAdapter<Photo>(getActivity(),
				R.layout.grid_item2, entries) {
			public View getView(int position, View convertView, ViewGroup parent) {

				if (convertView == null) {
					convertView = aq.inflate(convertView, R.layout.grid_item2,
							parent);
				}
				Photo photo = getItem(position);
				AQuery aq = aq2.recycle(convertView);
				String tbUrl = photo.tb;
				if (aq.shouldDelay(position, convertView, parent, tbUrl)) {
					aq.id(R.id.tb).clear();
				} else {
					aq.id(R.id.tb).image(tbUrl, true, true, 200,
							R.drawable.image_missing, null, 0, 0);
				}
				return convertView;
			}
		};
		aq.id(R.id.grid).adapter(aa);
	}

	private List<Photo> convertAll(XmlDom xml) {
		List<XmlDom> entries = xml.children("entry");
		List<Photo> result = new ArrayList<Photo>();
		for (XmlDom entry : entries) {
			result.add(convert(entry));
		}
		return result;
	}

	private Photo convert(XmlDom xml) {
		String url = xml.child("content").attr("src");
		String title = xml.child("title").text();
		String author = xml.child("author").text("name");
		String tb = url;
		List<XmlDom> tbs = xml.tags("media:thumbnail");
		if (tbs.size() > 0) {
			// tb = tbs.get(0).attr("url");
			tb = tbs.get(tbs.size() - 1).attr("url");
		}
		tb = tb.replaceAll("https:", "http:");
		Photo photo = new Photo();
		photo.url = url;
		photo.tb = tb;
		photo.title = title;
		photo.author = author;
		return photo;
	}

	class Photo {

		String tb;
		String url;
		String title;
		String author;
	}
}

布局文件

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

<RelativeLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	android:orientation="vertical"
	>
	
    <GridView 
	    android:id="@+id/grid"
	    android:layout_width="fill_parent" 
	    android:layout_height="fill_parent"
	    android:columnWidth="90dp"
	    android:numColumns="auto_fit"
	    android:verticalSpacing="10dp"
	    android:horizontalSpacing="10dp"
	    android:stretchMode="columnWidth"
	    android:gravity="center"
	/>
    
    <ProgressBar 
        android:id="@+id/progress"
	    android:layout_width="wrap_content" 
	    android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:visibility="gone"
        />
	

</RelativeLayout>

注意：ImageGridFragment的init方法是在PageAdapter中调用的。本Demo中，init是直接使用AQuery从网络上获取对应的资源。而对于实际的项目，我们首先检查本地数据库是否有对应的资源，假设有，先载入。其次，向网络中获取。查看是否有更新，如有更新。就再在原来的基础上。加入数据。

整个项目中得比較关键的布局就这么多。整个项目下载地址：http://download.csdn.net/detail/nuptboyzhb/7287219

android发展联盟QQ组：272209595

版权声明：本文博客原创文章。博客，未经同意，不得转载。