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

巴特西

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

最新文章

热门文章