展会信息港展会大全

android控件篇:ViewPager+Fragment+GridView的使用(与AndroidQuery框架结合)
来源:互联网   发布日期:2015-10-03 10:48:01   浏览:3374次  

导读:最近看了一个AndroidQuery的框架,里面的Demo,有个界面,让博主很喜欢。左右滑动十分顺畅,手感很好,于是拿来和大家分享一下。先看一下效果图:从图中可以看出,上面的布局是一个La...

最近看了一个AndroidQuery的框架,里面的Demo,有个界面,让博主很喜欢。左右滑动十分顺畅,手感很好,于是拿来和大家分享一下。先看一下效果图:

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

最外层Activity的布局文件

.support.v4.view.ViewPager>

相应的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-3Nanjing,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-3Nanjing,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 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 entries) {

AQUtility.debug("render setup");

ArrayAdapter aa = new ArrayAdapter(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 convertAll(XmlDom xml) {

List entries = xml.children("entry");

List result = new ArrayList();

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 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;

}

}

布局文件

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

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

android开发联盟QQ群:272209595

赞助本站

人工智能实验室

相关热词: android开发

AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港