177.n1-组图

组图有2种形式，一种是以listView的形式实现一种是以GridView的方式显示，两种显示方法是通过一种显示的时候另一种隐藏来实现切换的.按钮实在BsePager中进行设置的，一开始是不可见，当menu在组图处点击的时候显示切换按钮，由于组图切换的按钮是在基类中定义的，为了获取到按钮的对象，需要在NewsCenterPager.java中创建组图pager的时候在参数中带上mPagers.add(new PhotoMenuDetailPager(mActivity, btn_photo));

BasePager.xml中添加ImageButton用于切换显示是ListView还是GridView

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >        <RelativeLayout         android:layout_width="match_parent"    android:layout_height="wrap_content"    android:background="@drawable/title_red_bg"        >        <TextView            android:id="@+id/tv_title"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerHorizontal="true"            android:layout_centerVertical="true"            android:textColor="#ffffff"            android:textSize="22sp"            android:text="智慧城市" /><ImageButton     android:id="@+id/btn_menu"    android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:background="@null"            android:layout_centerVertical="true"            android:layout_marginLeft="5dp"            android:src="@drawable/img_menu"    /><ImageButton     android:id="@+id/btn_photo"    android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:background="@null"            android:layout_centerVertical="true"            android:layout_marginRight="5dp"            android:layout_alignParentRight="true"            android:src="@drawable/icon_pic_grid_type"            android:visibility="gone"    />    </RelativeLayout>    <FrameLayout         android:id="@+id/fl_content"        android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"        ></FrameLayout>            </LinearLayout>

然后在BasePager.java中获取到ImageButton对象

在NewsCenterPager.java中实现图片的展示，并将图片作为参数，携带到初始化的组图pager中

package com.ldw.beijing.base.impl;import java.util.ArrayList;import android.app.Activity;import android.text.TextUtils;import android.view.View;import android.widget.Toast;import com.google.gson.Gson;import com.ldw.beijing.MainActivity;import com.ldw.beijing.base.BaseMenuDetailPager;import com.ldw.beijing.base.BasePager;import com.ldw.beijing.base.menudetails.InteractMenuDetailPager;import com.ldw.beijing.base.menudetails.NewsMenuDetailPager;import com.ldw.beijing.base.menudetails.PhotoMenuDetailPager;import com.ldw.beijing.base.menudetails.TopicMenuDetailPager;import com.ldw.beijing.domain.NewsData;import com.ldw.beijing.domain.NewsData.NewsMenuData;import com.ldw.beijing.fragment.LeftMenuFragment;import com.ldw.beijing.global.ClobalContants;import com.ldw.beijing.utils.CacheUtils;import com.lidroid.xutils.HttpUtils;import com.lidroid.xutils.exception.HttpException;import com.lidroid.xutils.http.ResponseInfo;import com.lidroid.xutils.http.callback.RequestCallBack;import com.lidroid.xutils.http.client.HttpRequest.HttpMethod;/** * 新闻中心 *  * @author Kevin *  */public class NewsCenterPager extends BasePager {// 4个菜单详情页的集合，填充左侧菜单栏对应的ViewPager中的详情private ArrayList<BaseMenuDetailPager> mPagers;private NewsData mNewsData;public NewsCenterPager(Activity activity) {super(activity);}@Overridepublic void initData() {System.out.println("初始化设置数据....");tvTitle.setText("新闻");//btnMenu.setVisibility(View.GONE);// 隐藏菜单按钮setSlidingMenuEnable(true);// 关闭侧边栏/*TextView text = new TextView(mActivity);text.setText("设置");text.setTextColor(Color.RED);text.setTextSize(25);text.setGravity(Gravity.CENTER);// 向FrameLayout中动态添加布局flContent.addView(text);*///读取缓存,String cache = CacheUtils.getCache(ClobalContants.CATEGORIES_URL, mActivity);if(!TextUtils.isEmpty(cache)){//缓存存在，直接解析数据，不需要从服务器读取parseData(cache);}//从服务器中获取数据，从后台可以更新数据getDataFromServer();}/* * 从服务器中获取数据,使用xUtils实现 */private void getDataFromServer(){HttpUtils utils = new HttpUtils();//参数是String获取到的是Stringutils.send(HttpMethod.GET, ClobalContants.CATEGORIES_URL, new RequestCallBack<String>(){@Overridepublic void onSuccess(ResponseInfo<String> responseInfo) {//获取到返回的结果String result = (String) responseInfo.result;System.out.println("返回结果:" + result);parseData(result);//设置缓存CacheUtils.setCache(ClobalContants.CATEGORIES_URL, result, mActivity);}//访问失败@Overridepublic void onFailure(HttpException error, String msg) {Toast.makeText(mActivity, msg, Toast.LENGTH_SHORT).show();//打印错误信息error.printStackTrace();}});}/* * 解析网络数据 */protected void parseData(String result) {//使用Gson解析Gson gson = new Gson();//第一个参数是数据，第二个参数是要转化成什么对象mNewsData = gson.fromJson(result, NewsData.class);System.out.println("解析结果:" + mNewsData);// 刷新测边栏的数据,利用MainActivity获取到左侧边栏的数据MainActivity mainUi = (MainActivity) mActivity;//获取到左侧边栏的对象LeftMenuFragment leftMenuFragment = mainUi.getLeftMenuFragment();//设置网络数据leftMenuFragment.setMenuData(mNewsData);//设置4个菜单详情页,LeftMenuFragment和内容的交互，需要调用这里的方法，来初始化侧边栏对应的内容mPagers = new ArrayList<BaseMenuDetailPager>();//获取到data条目下面，news对于页面的children数据，初始化详情页的构造函数mPagers.add(new NewsMenuDetailPager(mActivity, mNewsData.data.get(0).children));mPagers.add(new TopicMenuDetailPager(mActivity));mPagers.add(new PhotoMenuDetailPager(mActivity, btn_photo));mPagers.add(new InteractMenuDetailPager(mActivity));// 设置菜单详情页-新闻为默认当前页setCurrentMenuDetailPager(0);}//设置当前的菜单详情页，显示哪一个详情页,LeftMenuFragment和内容的交互public void setCurrentMenuDetailPager(int position){//获取到某一个位置的pagerBaseMenuDetailPager pager = mPagers.get(position);// 清除之前的布局,fragment布局的内容会叠加flContent.removeAllViews();//填充内容,mRebootView就是初始化的某一个子页面，设置给frameLayoutflContent.addView(pager.mRebootView);// 设置当前页的标题NewsMenuData menuData = mNewsData.data.get(position);tvTitle.setText(menuData.title);// 初始化当前页面的数据pager.initData();if(pager instanceof PhotoMenuDetailPager){btn_photo.setVisibility(View.VISIBLE);}else{btn_photo.setVisibility(View.GONE);}}}

组图的布局menu_photo_pager.xml

<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent">        <!-- menu中组图的布局 -->    <ListView         android:id="@+id/lv_photo"        android:layout_width="match_parent"    android:layout_height="match_parent"    android:cacheColorHint="#fff"    android:divider="@null"        ></ListView>    <GridView         android:id="@+id/gv_photo"        android:layout_width="match_parent"    android:layout_height="match_parent"    android:numColumns="2"    android:visibility="gone"        ></GridView></FrameLayout>

单个条目的布局list_photo_item.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >        <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_margin="10dp"        android:background="@drawable/pic_list_item_bg"        android:gravity="center"        android:orientation="vertical" >        <ImageView            android:id="@+id/iv_pic"            android:layout_width="match_parent"            android:layout_height="180dp"            android:scaleType="centerCrop"            android:src="@drawable/news_pic_default" />        <TextView            android:id="@+id/tv_title"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:padding="10dp"            android:text="标题"            android:singleLine="true"            android:textColor="#000"            android:textSize="22sp" />    </LinearLayout></LinearLayout>

逻辑页面PhotoMenuDetailPager.java解析json数据获取到数据然后初始化列表

package com.ldw.beijing.base.menudetails;import java.util.ArrayList;import android.app.Activity;import android.text.TextUtils;import android.view.View;import android.view.View.OnClickListener;import android.view.ViewGroup;import android.widget.BaseAdapter;import android.widget.GridView;import android.widget.ImageButton;import android.widget.ImageView;import android.widget.ListView;import android.widget.TextView;import android.widget.Toast;import com.google.gson.Gson;import com.ldw.beijing.R;import com.ldw.beijing.base.BaseMenuDetailPager;import com.ldw.beijing.domain.PhotosData;import com.ldw.beijing.domain.PhotosData.PhotoInfo;import com.ldw.beijing.global.ClobalContants;import com.ldw.beijing.utils.CacheUtils;import com.lidroid.xutils.BitmapUtils;import com.lidroid.xutils.HttpUtils;import com.lidroid.xutils.exception.HttpException;import com.lidroid.xutils.http.ResponseInfo;import com.lidroid.xutils.http.callback.RequestCallBack;import com.lidroid.xutils.http.client.HttpRequest.HttpMethod;/* * 菜单详情页-组图*/ public class PhotoMenuDetailPager extends BaseMenuDetailPager {private ArrayList<PhotoInfo> mPhotoList;private PhotoAdapter mAdapter;private ImageButton btn_photo;private ListView lv_photo;private GridView gv_photo;public PhotoMenuDetailPager(Activity activity, ImageButton btn_photo) {super(activity);//获取到切换的对象this.btn_photo = btn_photo;btn_photo.setOnClickListener(new OnClickListener(){@Overridepublic void onClick(View v) {// 按钮点击的时候切换展示方式changeDisplay();}});}@Overridepublic View initView() {View view = View.inflate(mActivity, R.layout.menu_photo_pager, null);lv_photo = (ListView) view.findViewById(R.id.lv_photo);gv_photo = (GridView) view.findViewById(R.id.gv_photo);return view;}@Overridepublic void initData() {//读取缓存String cache = CacheUtils.getCache(ClobalContants.PHOTOS_URL, mActivity);if (!TextUtils.isEmpty(cache)) {}//服务器中读取数据getDataFromServer();}private void getDataFromServer() {HttpUtils utils = new HttpUtils();utils.send(HttpMethod.GET, ClobalContants.PHOTOS_URL,new RequestCallBack<String>() {@Overridepublic void onSuccess(ResponseInfo<String> responseInfo) {String result = (String) responseInfo.result;//解析json数据parseData(result);// 设置缓存CacheUtils.setCache(ClobalContants.PHOTOS_URL, result,mActivity);}@Overridepublic void onFailure(HttpException error, String msg) {Toast.makeText(mActivity, msg, Toast.LENGTH_SHORT).show();error.printStackTrace();}});}//解析json数据protected void parseData(String result) {Gson gson = new Gson();PhotosData data = gson.fromJson(result, PhotosData.class);mPhotoList = data.data.news;// 获取组图列表集合if (mPhotoList != null) {mAdapter = new PhotoAdapter();lv_photo.setAdapter(mAdapter);gv_photo.setAdapter(mAdapter);}}class PhotoAdapter extends BaseAdapter{private BitmapUtils utils;//构造函数public PhotoAdapter() {utils = new BitmapUtils(mActivity);//默认加载图片utils.configDefaultLoadingImage(R.drawable.news_pic_default);}@Overridepublic int getCount() {// TODO Auto-generated method stubreturn mPhotoList.size();}@Overridepublic PhotoInfo getItem(int position) {// TODO Auto-generated method stubreturn mPhotoList.get(position);}@Overridepublic long getItemId(int position) {// TODO Auto-generated method stubreturn position;}@Overridepublic View getView(int position, View convertView, ViewGroup parent) {ViewHolder holder;if (convertView == null) {convertView = View.inflate(mActivity, R.layout.list_photo_item,null);holder = new ViewHolder();holder.tv_title = (TextView) convertView.findViewById(R.id.tv_title);holder.iv_pic = (ImageView) convertView.findViewById(R.id.iv_pic);convertView.setTag(holder);} else {holder = (ViewHolder) convertView.getTag();}PhotoInfo item = getItem(position);//设置标题holder.tv_title.setText(item.title);//显示图片utils.display(holder.iv_pic, item.listimage);return convertView;}}static class ViewHolder {public TextView tv_title;public ImageView iv_pic;}// 是否是列表展示private boolean isListDisplay = true;/* * 切换展现方式 */private void changeDisplay() {//当前是listView展示的时候需要切换到GridView展示if (isListDisplay) {isListDisplay = false;lv_photo.setVisibility(View.GONE);gv_photo.setVisibility(View.VISIBLE);//修改图标的样式btn_photo.setImageResource(R.drawable.icon_pic_list_type);} else {isListDisplay = true;lv_photo.setVisibility(View.VISIBLE);gv_photo.setVisibility(View.GONE);//修改图标的样式为GridViewbtn_photo.setImageResource(R.drawable.icon_pic_grid_type);}}}

bean数据PhotosData.java

package com.ldw.beijing.domain;import java.util.ArrayList;/** * 组图数据 *  * @author Kevin *  */public class PhotosData {public int retcode;public PhotosInfo data;public class PhotosInfo {public String title;public ArrayList<PhotoInfo> news;}public class PhotoInfo {public String id;public String listimage;public String pubdate;public String title;public String type;public String url;}}