黑马北京新闻项目连载(3)--->Tab栏、侧栏页面完成

最新推荐文章于 2022-06-30 17:06:17 发布

易辰_

最新推荐文章于 2022-06-30 17:06:17 发布

阅读量1.1k

点赞数

分类专栏： Android控件实例

本文链接：https://blog.csdn.net/u013210620/article/details/48597083

版权

Android控件实例专栏收录该内容

79 篇文章 0 订阅

订阅专栏

开源库、源码、服务器代码下载地址

这篇博客去下载资料

1、这篇就实现菜单栏切换对应的新闻、专题、组图、互动界面

2、重点实现新闻页面--新闻页面还包含可以左右移动的11个子界面

——————————————————首先贴出服务器地址和json数据bean——————————————————

GlobalContants

package com.itheima.zhbj52.global;

/**
 * 定义全局参数
 */
public class GlobalContants {

	public static final String SERVER_URL = "http://10.0.2.2:8090/zhbj";
	public static final String CATEGORIES_URL = SERVER_URL + "/categories.json";// 获取分类信息的接口

}

NewsData

package com.itheima.zhbj52.domain;

import java.util.ArrayList;

/**
 * 网络分类信息的封装
 * 
 * 字段名字必须和服务器返回的字段名一致, 方便gson解析
 */
public class NewsData {

	public int retcode;
	public ArrayList<NewsMenuData> data;

	// 侧边栏数据对象
	public class NewsMenuData {
		public String id;
		public String title;
		public int type;
		public String url;

		public ArrayList<NewsTabData> children;

		@Override
		public String toString() {
			return "NewsMenuData [title=" + title + ", children=" + children
					+ "]";
		}
	}

	// 新闻页面下11个子页签的数据对象
	public class NewsTabData {
		public String id;
		public String title;
		public int type;
		public String url;

		@Override
		public String toString() {
			return "NewsTabData [title=" + title + "]";
		}
	}

	@Override
	public String toString() {
		return "NewsData [data=" + data + "]";
	}

}

——————————————————————先实现Tab栏对应的5个页面的基类布局、代码————————————————

在上篇博客中在ContentFragment代码中

// 初始化5个子页面
		mPagerList = new ArrayList<BasePager>();
		mPagerList.add(new HomePager(mActivity));
		mPagerList.add(new NewsCenterPager(mActivity));
		mPagerList.add(new SmartServicePager(mActivity));
		mPagerList.add(new GovAffairsPager(mActivity));
		mPagerList.add(new SettingPager(mActivity));

由于页面有公共部分，我们先抽出一个基类来，那么首先看基类的布局文件--包含topBar和一个FrameLayout布局

base_pager.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" >

    <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:text="智慧北京"
            android:textColor="#fff"
            android:textSize="22sp" />

        <ImageButton
            android:id="@+id/btn_menu"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="5dp"
            android:background="@null"
            android:src="@drawable/img_menu" />
    </RelativeLayout>

    <FrameLayout
        android:id="@+id/fl_content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >
    </FrameLayout>

</LinearLayout>

BasePager

package com.itheima.zhbj52.base;

import java.util.ArrayList;

import android.app.Activity;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.FrameLayout;
import android.widget.ImageButton;
import android.widget.TextView;

import com.itheima.zhbj52.MainActivity;
import com.itheima.zhbj52.R;
import com.itheima.zhbj52.base.impl.GovAffairsPager;
import com.itheima.zhbj52.base.impl.HomePager;
import com.itheima.zhbj52.base.impl.NewsCenterPager;
import com.itheima.zhbj52.base.impl.SettingPager;
import com.itheima.zhbj52.base.impl.SmartServicePager;
import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;

/**
 * 主页下5个子页面的基类
 * 1、在ContentFragment中
 * mPagerList = new ArrayList<BasePager>();
   mPagerList.add(new HomePager(mActivity));
   mPagerList.add(new NewsCenterPager(mActivity));
   mPagerList.add(new SmartServicePager(mActivity));
   mPagerList.add(new GovAffairsPager(mActivity));
   mPagerList.add(new SettingPager(mActivity));
   
      将mActivity传递过来进行toggleSlidingMenu的方法获取
   2、布局是：头部topBar，和下边的framelayout进行填充界面
 */
public class BasePager {

	public Activity mActivity;
	
	public View mRootView;// 布局对象

	public TextView tvTitle;// 标题对象

	public FrameLayout flContent;// 内容

	public ImageButton btnMenu;// 菜单按钮

	public BasePager(Activity activity) {
		mActivity = activity;
		//初始化布局文件
		initViews();
	}

	/**
	 * 初始化布局
	 * 布局文件组成
	 * 1、顶部就是topBar栏目
	 * 2、下部是FrameLayout利用后期扩展
	 */
	public void initViews() {
		mRootView = View.inflate(mActivity, R.layout.base_pager, null);

		//获取布局的控件
		tvTitle = (TextView) mRootView.findViewById(R.id.tv_title);
		flContent = (FrameLayout) mRootView.findViewById(R.id.fl_content);
		btnMenu = (ImageButton) mRootView.findViewById(R.id.btn_menu);

		btnMenu.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				toggleSlidingMenu();
			}
		});
	}

	/**
	 * 切换SlidingMenu的状态
	 */
	protected void toggleSlidingMenu() {
		MainActivity mainUi = (MainActivity) mActivity;
		SlidingMenu slidingMenu = mainUi.getSlidingMenu();
		slidingMenu.toggle();// 切换状态, 显示时隐藏, 隐藏时显示
	}

	/**
	 * 初始化数据
	 */
	public void initData() {

	}

	/**
	 * 设置侧边栏开启或关闭
	 * Tab栏目对应的首页、设置页面要求不可以拖出侧栏，所以构造一个方法进行进行判断即可
	 */
	public void setSlidingMenuEnable(boolean enable) {
		MainActivity mainUi = (MainActivity) mActivity;

		SlidingMenu slidingMenu = mainUi.getSlidingMenu();

		if (enable) {
			slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
		} else {
			slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_NONE);
		}
	}

}

——————————————————————在实现Tab栏对应的5个具体页面的布局、代码————————————————

首页、智慧服务、政务、设置页面大同小异--这里只写出首页的代码即可

package com.itheima.zhbj52.base.impl;

import android.app.Activity;
import android.graphics.Color;
import android.view.Gravity;
import android.view.View;
import android.widget.TextView;

import com.itheima.zhbj52.MainActivity;
import com.itheima.zhbj52.base.BasePager;
import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;

/**
 * 首页实现
 */
public class HomePager extends BasePager {

	public HomePager(Activity activity) {
		super(activity);
	}

	@Override
	public void initData() {
		System.out.println("初始化首页数据....");
		
		tvTitle.setText("智慧北京");// 修改标题
		btnMenu.setVisibility(View.GONE);// 隐藏菜单按钮
		setSlidingMenuEnable(false);//关闭侧边栏

		TextView text = new TextView(mActivity);
		text.setText("首页");
		text.setTextColor(Color.RED);
		text.setTextSize(25);
		text.setGravity(Gravity.CENTER);

		// 向FrameLayout中动态添加布局
		flContent.addView(text);
	}

}

NewsCenterPager

package com.itheima.zhbj52.base.impl;

import java.util.ArrayList;

import android.app.Activity;
import android.graphics.Color;
import android.view.Gravity;
import android.widget.TextView;
import android.widget.Toast;

import com.google.gson.Gson;
import com.itheima.zhbj52.MainActivity;
import com.itheima.zhbj52.base.BaseMenuDetailPager;
import com.itheima.zhbj52.base.BasePager;
import com.itheima.zhbj52.base.menudetail.InteractMenuDetailPager;
import com.itheima.zhbj52.base.menudetail.NewsMenuDetailPager;
import com.itheima.zhbj52.base.menudetail.PhotoMenuDetailPager;
import com.itheima.zhbj52.base.menudetail.TopicMenuDetailPager;
import com.itheima.zhbj52.domain.NewsData;
import com.itheima.zhbj52.domain.NewsData.NewsMenuData;
import com.itheima.zhbj52.fragment.LeftMenuFragment;
import com.itheima.zhbj52.global.GlobalContants;
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;

/**
 * 新闻中心
 * 功能：
 * 1、从服务器获取json数据，并且进行解析，
 * 3、解析完毕后，填充侧栏数据
 * 4、准备4个菜单详情页
 * 5、设置菜单详情页-新闻为默认当前页
 */
public class NewsCenterPager extends BasePager {

	private ArrayList<BaseMenuDetailPager> mPagers;// 4个菜单详情页的集合
	private NewsData mNewsData;

	public NewsCenterPager(Activity activity) {
		super(activity);
	}

	/**
	 * 初始化数据
	 */
	@Override
	public void initData() {
		System.out.println("初始化新闻中心数据....");

		tvTitle.setText("新闻");
		setSlidingMenuEnable(true);// 打开侧边栏

		//从服务器获取数据
		getDataFromServer();
	}

	/**
	 * 从服务器获取数据
	 */
	private void getDataFromServer() {
		HttpUtils utils = new HttpUtils();

		// 使用xutils发送请求
		utils.send(HttpMethod.GET, GlobalContants.CATEGORIES_URL,
				new RequestCallBack<String>() {

					// 访问成功
					@Override
					public void onSuccess(ResponseInfo responseInfo) {
						String result = (String) responseInfo.result;
						System.out.println("返回结果:" + result);

						//解析获取的json字符串
						parseData(result);
					}

					// 访问失败
					@Override
					public void onFailure(HttpException error, String msg) {
						Toast.makeText(mActivity, msg, Toast.LENGTH_SHORT)
								.show();
						error.printStackTrace();
					}

				});
	}

	/**
	 * 解析网络数据
	 * 
	 * @param result
	 */
	protected void parseData(String result) {
		Gson gson = new Gson();
		mNewsData = gson.fromJson(result, NewsData.class);
		System.out.println("解析结果:" + mNewsData);

		// 刷新测边栏的数据
		MainActivity mainUi = (MainActivity) mActivity;
		LeftMenuFragment leftMenuFragment = mainUi.getLeftMenuFragment();
		leftMenuFragment.setMenuData(mNewsData);

		// 准备4个菜单详情页！！！！！
		mPagers = new ArrayList<BaseMenuDetailPager>();
		mPagers.add(new NewsMenuDetailPager(mActivity,
				mNewsData.data.get(0).children));
		mPagers.add(new TopicMenuDetailPager(mActivity));
		mPagers.add(new PhotoMenuDetailPager(mActivity));
		mPagers.add(new InteractMenuDetailPager(mActivity));

		setCurrentMenuDetailPager(0);// 设置菜单详情页-新闻为默认当前页
	}

	/**
	 * 设置当前菜单详情页
	 */
	public void setCurrentMenuDetailPager(int position) {
		BaseMenuDetailPager pager = mPagers.get(position);// 获取当前要显示的菜单详情页
		flContent.removeAllViews();// 清除之前的布局
		flContent.addView(pager.mRootView);// 将菜单详情页的布局设置给帧布局

		// 设置当前页的标题
		NewsMenuData menuData = mNewsData.data.get(position);
		tvTitle.setText(menuData.title);

		pager.initData();// 初始化当前页面的数据？？？？？
	}

}

——————————————实现侧栏的4个页面————————————————

在新闻中心页面代码中

// 准备4个菜单详情页！！！！！
		mPagers = new ArrayList<BaseMenuDetailPager>();
		mPagers.add(new NewsMenuDetailPager(mActivity,
				mNewsData.data.get(0).children));
		mPagers.add(new TopicMenuDetailPager(mActivity));
		mPagers.add(new PhotoMenuDetailPager(mActivity));
		mPagers.add(new InteractMenuDetailPager(mActivity));

首先看下公共的基类吧BaseMenuDetailPager

package com.itheima.zhbj52.base;

import android.app.Activity;
import android.view.View;

/**
 * 菜单详情页基类
 * 
 * @author Kevin
 * 
 */
public abstract class BaseMenuDetailPager {

	public Activity mActivity;

	public View mRootView;// 根布局对象

	public BaseMenuDetailPager(Activity activity) {
		mActivity = activity;
		mRootView = initViews();
	}

	/**
	 * 初始化界面
	 */
	public abstract View initViews();

	/**
	 * 初始化数据
	 */
	public void initData() {

	}

}

菜单栏的专题、组图、互动大同小异

package com.itheima.zhbj52.base.menudetail;

import android.app.Activity;
import android.graphics.Color;
import android.view.Gravity;
import android.view.View;
import android.widget.TextView;

import com.itheima.zhbj52.base.BaseMenuDetailPager;

/**
 * 菜单详情页-专题
 */
public class TopicMenuDetailPager extends BaseMenuDetailPager {

	public TopicMenuDetailPager(Activity activity) {
		super(activity);
	}

	@Override
	public View initViews() {
		TextView text = new TextView(mActivity);
		text.setText("菜单详情页-专题");
		text.setTextColor(Color.RED);
		text.setTextSize(25);
		text.setGravity(Gravity.CENTER);

		return text;
	}

}

—————————————————————————单独实现侧栏新闻的11个页面————————————————————
首先看NewsMenuDetailPager布局文件--就是一个自定义的ViewPager控件

<?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" >

    <com.itheima.zhbj52.view.NewsMenuDetailNoScrollViewPager
        android:id="@+id/vp_menu_detail"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

NewsMenuDetailNoScrollViewPager代码

package com.itheima.zhbj52.view;

import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;

/**
 * 不能左右划的ViewPager
 * 对事件不拦截、不处理
 * 
 * 
 */
public class NewsMenuDetailNoScrollViewPager extends ViewPager {

	public NewsMenuDetailNoScrollViewPager(Context context, AttributeSet attrs) {
		super(context, attrs);
	}

	public NewsMenuDetailNoScrollViewPager(Context context) {
		super(context);
	}
	/**
	 * 事件分发, 请求父控件及祖宗控件是否拦截事件
	 */
	@Override
	public boolean dispatchTouchEvent(MotionEvent ev) {
		if (getCurrentItem() != 0) {
			getParent().requestDisallowInterceptTouchEvent(true);// 用getParent去请求,
																	// 不拦截
		} else {// 如果是第一个页面,需要显示侧边栏, 请求父控件拦截
			getParent().requestDisallowInterceptTouchEvent(false);// 拦截
		}
		return super.dispatchTouchEvent(ev);
	}

	
}

NewsMenuDetailPager代码

package com.itheima.zhbj52.base.menudetail;

import java.util.ArrayList;

import android.app.Activity;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.ViewGroup;

import com.itheima.zhbj52.R;
import com.itheima.zhbj52.base.BaseMenuDetailPager;
import com.itheima.zhbj52.base.TabDetailPager;
import com.itheima.zhbj52.domain.NewsData.NewsTabData;

/**
 * 菜单详情页-新闻
 * 1、获取填充11个子界面的ViewPager控件
 * 2、创建11个界面的集合
 * 3、设置适配器，并且填充适配器
 * 4、设置setOnPageChangeListener滑动监听，切换对应的数据页面
 * 5、初始化页面mPagerList.get(0).initData();
 * 
 */
public class NewsMenuDetailPager extends BaseMenuDetailPager {
	//获取布局中的viewPager控件对象
	private ViewPager mViewPager;
	//构造数据源
	private ArrayList<TabDetailPager> mPagerList;

	private ArrayList<NewsTabData> mNewsTabData;// 页签网络数据

	public NewsMenuDetailPager(Activity activity,
			ArrayList<NewsTabData> children) {
		super(activity);

		mNewsTabData = children;
	}

	@Override
	public View initViews() {
		//布局是一个自定义的viewPager
		View view = View.inflate(mActivity, R.layout.news_menu_detail, null);
		//获取布局中的viewPager控件对象
		mViewPager = (ViewPager) view.findViewById(R.id.vp_menu_detail);
		return view;
	}

	/**
	 * 初始化数据
	 */
	@Override
	public void initData() {
		mPagerList = new ArrayList<TabDetailPager>();

		// 初始化页签数据
		for (int i = 0; i < mNewsTabData.size(); i++) {
			//将参数传递过去，设置textView显示的内容
			TabDetailPager pager = new TabDetailPager(mActivity, mNewsTabData.get(i));
			mPagerList.add(pager);
		}
		//设置适配器
		mViewPager.setAdapter(new MenuDetailAdapter());
		//
		mViewPager.setOnPageChangeListener(new OnPageChangeListener() {

			@Override
			public void onPageSelected(int arg0) {
				mPagerList.get(arg0).initData();// 获取当前被选中的页面, 初始化该页面数据
			}

			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {

			}

			@Override
			public void onPageScrollStateChanged(int arg0) {

			}
		});
		// 初始化首页数据
		mPagerList.get(0).initData();
	}

	/**
	 * 新闻中心--侧栏新闻数据的 适配器
	 * @author Administrator
	 *
	 */
	class MenuDetailAdapter extends PagerAdapter {

		private TabDetailPager pager;

		@Override
		public int getCount() {
			return mPagerList.size();
		}

		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			return arg0 == arg1;
		}

		@Override
		public Object instantiateItem(ViewGroup container, int position) {
			pager = mPagerList.get(position);
			container.addView(pager.mRootView);
			
			return pager.mRootView;
		}

		@Override
		public void destroyItem(ViewGroup container, int position, Object object) {
			container.removeView((View) object);
		}
	}

}

在上面的代码中

	// 初始化页签数据
		for (int i = 0; i < mNewsTabData.size(); i++) {
			//将参数传递过去，设置textView显示的内容
			TabDetailPager pager = new TabDetailPager(mActivity, mNewsTabData.get(i));
			mPagerList.add(pager);
		}

将11个叶签详情页面进行抽取基类

TabDetailPager

package com.itheima.zhbj52.base;

import com.itheima.zhbj52.domain.NewsData.NewsTabData;

import android.app.Activity;
import android.graphics.Color;
import android.view.Gravity;
import android.view.View;
import android.widget.TextView;

/**
 * 11个页签详情页
 * 
 */
public class TabDetailPager extends BaseMenuDetailPager {

	NewsTabData mTabData;
	private TextView tvText;

	public TabDetailPager(Activity activity, NewsTabData newsTabData) {
		super(activity);
		mTabData = newsTabData;
	}

	/**
	 * 填充一个textView视图控件
	 */
	@Override
	public View initViews() {
		tvText = new TextView(mActivity);
		tvText.setTextColor(Color.RED);
		tvText.setTextSize(25);
		tvText.setGravity(Gravity.CENTER);
		return tvText;
	}

	/**
	 * 初始化11个子页面的内容
	 */
	@Override
	public void initData() {
		tvText.setText(mTabData.title);
	}

}