黑马北京新闻项目连载(2)---侧滑菜单栏、主页面Fragment搭建

本文主要是介绍黑马北京新闻项目连载(2)---侧滑菜单栏、主页面Fragment搭建,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

项目Json数据下载地址。。。

北京新闻框架代码

侧滑开源库下载。。。

xutil库下载,,,


先看总体的导图


看ui图




************************************************先看整体布局开始********************************************************************

先实现下面的结构图



先看整体布局activity_main.xml--先放空白的framelayout然后进行替换

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/fl_content"android:background="#fff"android:layout_width="match_parent"android:layout_height="match_parent" ></FrameLayout>

在看侧栏的布局left_menu.xml--先放空白的framelayout然后进行替换

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/fl_left_menu"android:layout_width="match_parent"android:layout_height="match_parent" ></FrameLayout>

MainActivity 入口代码

package com.itheima.zhbj52;import android.os.Bundle;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.view.Window;import com.itheima.zhbj52.fragment.ContentFragment;
import com.itheima.zhbj52.fragment.LeftMenuFragment;
import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;
import com.jeremyfeinstein.slidingmenu.lib.app.SlidingFragmentActivity;/*** 主页面功能:* 1、初始化加载主页面布局--该布局是一个framelayout布局, 目的地transaction.replace将主页布局直接进行替换即可!!!!* 2、提供2个方法,用来获取左侧栏目、主页布局的方法*/
public class MainActivity extends SlidingFragmentActivity {private static final String FRAGMENT_LEFT_MENU = "fragment_left_menu";private static final String FRAGMENT_CONTENT = "fragment_content";@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);/*** 初始化加载主页面布局--该布局是一个framelayout布局* 目的地transaction.replace将主页布局直接进行替换即可!!!!*/setContentView(R.layout.activity_main);/*** 初始化设置侧栏--该布局也是一个framelayout布局* 目的地transaction.replace将侧边布局直接进行替换即可!!!!*/setBehindContentView(R.layout.left_menu);SlidingMenu slidingMenu = getSlidingMenu();// 获取侧边栏对象slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);// 设置全屏触摸slidingMenu.setBehindOffset(200);// 设置预留屏幕的宽度initFragment();}/*** 初始化fragment, 将fragment数据填充给布局文件*/private void initFragment() {FragmentManager fm = getSupportFragmentManager();FragmentTransaction transaction = fm.beginTransaction();// 开启事务transaction.replace(R.id.fl_left_menu, new LeftMenuFragment(),FRAGMENT_LEFT_MENU);// 用fragment替换framelayouttransaction.replace(R.id.fl_content, new ContentFragment(),FRAGMENT_CONTENT);transaction.commit();// 提交事务}/***  获取侧边栏fragment* @return*/public LeftMenuFragment getLeftMenuFragment() {FragmentManager fm = getSupportFragmentManager();LeftMenuFragment fragment = (LeftMenuFragment) fm.findFragmentByTag(FRAGMENT_LEFT_MENU);return fragment;}/*** 获取主页面fragment* @return*/public ContentFragment getContentFragment() {FragmentManager fm = getSupportFragmentManager();ContentFragment fragment = (ContentFragment) fm.findFragmentByTag(FRAGMENT_CONTENT);return fragment;}}

左右两侧都是fragment,有必要将其抽取一个公共的基类

BaseFragment

package com.itheima.zhbj52.fragment;import android.app.Activity;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;/*** 主页、侧栏的fragment基类* 功能:* 1、onCreate获取依托的activity* 2、onCreateView返回展现页面的布局文件,并且提供抽象方法,让子类去具体实现* 3、onActivityCreated进行初始数据用*/
public abstract class BaseFragment extends Fragment {public Activity mActivity;/*** 在 onCreate可以获取依附的mActivity*/@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);mActivity = getActivity();}/***  处理fragment的布局*  这里返回fragment的布局文件*/@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {return initViews();}// 依附的activity创建完成@Overridepublic void onActivityCreated(Bundle savedInstanceState) {super.onActivityCreated(savedInstanceState);initData();}// 子类必须实现初始化布局的方法public abstract View initViews();// 初始化数据, 可以不实现public void initData() {}}


***********************************************接下来实现侧栏代码之前先看侧栏布局文件吧--侧栏是一个listview*********************************************************


fragment_left_menu.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#000" ><ListViewandroid:id="@+id/lv_list"android:layout_width="match_parent"android:layout_height="wrap_content"android:listSelector="@android:color/transparent"android:divider="@android:color/transparent"android:layout_marginTop="40dp" /></RelativeLayout>

既然是listview,那么下来的布局就是每一个item的布局

list_menu_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="wrap_content"android:orientation="vertical"android:padding="10dp" ><TextViewandroid:id="@+id/tv_title"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:drawableLeft="@drawable/btn_menu_selector"android:drawablePadding="5dp"android:enabled="false"android:text="新闻"android:textColor="@drawable/text_menu_selector"android:textSize="25sp" /></LinearLayout>

btn_menu_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:state_enabled="true" android:drawable="@drawable/menu_arr_select"/><item android:drawable="@drawable/menu_arr_normal"/></selector>

text_menu_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:state_enabled="true" android:color="#f00"/><item android:color="@android:color/white"/></selector>

LeftMenuFragment

package com.itheima.zhbj52.fragment;import java.util.ArrayList;import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.BaseAdapter;
import android.widget.ListView;
import android.widget.TextView;import com.itheima.zhbj52.MainActivity;
import com.itheima.zhbj52.R;
import com.itheima.zhbj52.base.impl.NewsCenterPager;
import com.itheima.zhbj52.domain.NewsData;
import com.itheima.zhbj52.domain.NewsData.NewsMenuData;
import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;
import com.lidroid.xutils.ViewUtils;
import com.lidroid.xutils.view.annotation.ViewInject;/*** 侧边栏* 功能:* 1、initViews中初始化自己的布局* 2、setMenuData提供一个方法,获取网络数据,这个方法是在NewsCenterPager中进行回传填充的*  刷新测边栏的数据MainActivity mainUi = (MainActivity) mActivity;LeftMenuFragment leftMenuFragment = mainUi.getLeftMenuFragment();leftMenuFragment.setMenuData(mNewsData);3、initData这里只是触发点击时间,去更新主页面的内容而已*/
public class LeftMenuFragment extends BaseFragment {//数据源--每个选项是一个NewsMenuData对象(通过json获取封装对象)private ArrayList<NewsMenuData> mMenuList;/*** 获取控件--布局是一个listView展现--新闻、专题、组图、互动4个菜单选项*/@ViewInject(R.id.lv_list)private ListView lvList;private MenuAdapter mAdapter;//适配器private int mCurrentPos;// 当前被点击的菜单项/*** 初始化侧栏的布局*/@Overridepublic View initViews() {//布局里面是一个listView展现4个菜单选项View view = View.inflate(mActivity, R.layout.fragment_left_menu, null);ViewUtils.inject(this, view);return view;}/*** 初始化左边侧栏的数据--4个菜单选项*/@Overridepublic void initData() {lvList.setOnItemClickListener(new OnItemClickListener() {@Overridepublic void onItemClick(AdapterView<?> parent, View view,int position, long id) {//点击任何一个菜单选项,赋值成为当前的postionmCurrentPos = position;//通知界面刷新mAdapter.notifyDataSetChanged();// 设置当前菜单详情页?????setCurrentMenuDetailPager(position);// 当点击任何一项,要求关闭侧栏toggleSlidingMenu();}});}/************************ 切换SlidingMenu的状态* 通过侧栏fragment可以获取依托的activity,在那里可以获取getSlidingMenu,进行左侧栏的操作*/protected void toggleSlidingMenu() {MainActivity mainUi = (MainActivity) mActivity;SlidingMenu slidingMenu = mainUi.getSlidingMenu();slidingMenu.toggle();// 切换状态, 显示时隐藏, 隐藏时显示}/*** 设置当前菜单详情页*/protected void setCurrentMenuDetailPager(int position) {MainActivity mainUi = (MainActivity) mActivity;ContentFragment fragment = mainUi.getContentFragment();// 获取主页面fragmentNewsCenterPager pager = fragment.getNewsCenterPager();// 获取新闻中心页面pager.setCurrentMenuDetailPager(position);// 设置当前菜单详情页}/***************************************  设置网络数据*  这个方法是在NewsCenterPager中进行回传填充的* @param data*/public void setMenuData(NewsData data) {mMenuList = data.data;mAdapter = new MenuAdapter();lvList.setAdapter(mAdapter);}/*** 侧边栏数据适配器*/class MenuAdapter extends BaseAdapter {@Overridepublic int getCount() {return mMenuList.size();}@Overridepublic NewsMenuData getItem(int position) {return mMenuList.get(position);}@Overridepublic long getItemId(int position) {return position;}@Overridepublic View getView(int position, View convertView, ViewGroup parent) {View view = View.inflate(mActivity, R.layout.list_menu_item, null);TextView tvTitle = (TextView) view.findViewById(R.id.tv_title);NewsMenuData newsMenuData = getItem(position);tvTitle.setText(newsMenuData.title);/*** 在初始化的时候,在没有点击选择菜单条目的时候,mCurrentPos为0* 当view绘制到postion==0时候,就将新闻菜单选项,字体变为红色,其他变为白色* 在进行点击操作时候mAdapter.notifyDataSetChanged();会通知界面刷新重新绘制界面* 这样就会将点击的菜单选项绘制成红色*/if (mCurrentPos == position) {// 判断当前绘制的view是否被选中// 显示红色tvTitle.setEnabled(true);} else {// 显示白色tvTitle.setEnabled(false);}return view;}}}

*******************************************接下来实现ContentFragment代码之前先看布局文件吧,是一个自定义viewPager+Tab栏********************************************


fragment_content.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" ><com.itheima.zhbj52.view.NoScrollViewPagerandroid:id="@+id/vp_content"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1" /><RadioGroupandroid:id="@+id/rg_group"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="@drawable/bottom_tab_bg"android:orientation="horizontal" ><RadioButtonandroid:id="@+id/rb_home"style="@style/BottomTabStyle"android:drawableTop="@drawable/btn_tab_home_selector"android:text="首页" /><RadioButtonandroid:id="@+id/rb_news"style="@style/BottomTabStyle"android:drawableTop="@drawable/btn_tab_news_selector"android:text="新闻中心" /><RadioButtonandroid:id="@+id/rb_smart"style="@style/BottomTabStyle"android:drawableTop="@drawable/btn_tab_smart_selector"android:text="智慧服务" /><RadioButtonandroid:id="@+id/rb_gov"style="@style/BottomTabStyle"android:drawableTop="@drawable/btn_tab_gov_selector"android:text="政务" /><RadioButtonandroid:id="@+id/rb_setting"style="@style/BottomTabStyle"android:drawableTop="@drawable/btn_tab_setting_selector"android:text="设置" /></RadioGroup></LinearLayout>

  <!-- 低栏RadioButton的样式 --><style name="BottomTabStyle"><item name="android:layout_width">wrap_content</item><item name="android:layout_height">wrap_content</item><item name="android:layout_gravity">center_vertical</item><item name="android:button">@null</item><item name="android:drawablePadding">3dp</item><item name="android:padding">5dp</item><item name="android:textColor">@drawable/btn_tab_text_selector</item><item name="android:layout_weight">1</item><item name="android:gravity">center</item></style>

btn_tab_text_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:color="#f00" android:state_checked="true"/><item android:color="#fff"/></selector>

btn_tab_news_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:drawable="@drawable/newscenter_press" android:state_checked="true"/><item android:drawable="@drawable/newscenter"/></selector>

NoScrollViewPager--自定义viewPager

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 NoScrollViewPager extends ViewPager {public NoScrollViewPager(Context context, AttributeSet attrs) {super(context, attrs);}public NoScrollViewPager(Context context) {super(context);}/***  表示事件是否拦截, 返回false表示不拦截--不处理*  这个是针对,在新闻中心,滑动11个页面进行的不拦截操作,*  默认是拦截的,只有返回false,对子事件不拦截,才对11个页面的滑动切换的事件才可以相应*/@Overridepublic boolean onInterceptTouchEvent(MotionEvent arg0) {return false;}/*** 重写onTouchEvent事件,什么都不用做* 滑动屏幕-不会切换*/@Overridepublic boolean onTouchEvent(MotionEvent arg0) {return false;}
}

ContentFragment

package com.itheima.zhbj52.fragment;import java.util.ArrayList;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 android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;import com.itheima.zhbj52.R;
import com.itheima.zhbj52.base.BasePager;
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.lidroid.xutils.ViewUtils;
import com.lidroid.xutils.view.annotation.ViewInject;/*** 主页内容* 1、initViews中初始化布局,初始化NoScrollViewPager、底部Tab栏视图* * 2、为NoScrollViewPager添加5个界面* 3、初始化首页数据mPagerList.get(0).initData();// 初始化首页数据* 4、setOnPageChangeListener在方法里,初始化对应页面的数据*/
public class ContentFragment extends BaseFragment {// 底部Tab栏目@ViewInject(R.id.rg_group)private RadioGroup rgGroup;/*** 主页的顶部的不能滑动的ViewPager视图控件* onInterceptTouchEvent、onTouchEvent都返回false*/@ViewInject(R.id.vp_content)private ViewPager mViewPager;//数据源头--就是Tab栏目对应的5个界面private ArrayList<BasePager> mPagerList;@Overridepublic View initViews() {View view = View.inflate(mActivity, R.layout.fragment_content, null);ViewUtils.inject(this, view); // 注入view和事件return view;}/*** 初始化数据*/@Overridepublic void initData() {// 默认勾选首页rgGroup.check(R.id.rb_home);// 初始化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));mViewPager.setAdapter(new ContentAdapter());// 监听RadioGroup的选择事件rgGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() {@Overridepublic void onCheckedChanged(RadioGroup group, int checkedId) {switch (checkedId) {case R.id.rb_home:// mViewPager.setCurrentItem(0);// 设置当前页面mViewPager.setCurrentItem(0, false);// 去掉切换页面的动画break;case R.id.rb_news:mViewPager.setCurrentItem(1, false);// 设置当前页面break;case R.id.rb_smart:mViewPager.setCurrentItem(2, false);// 设置当前页面break;case R.id.rb_gov:mViewPager.setCurrentItem(3, false);// 设置当前页面break;case R.id.rb_setting:mViewPager.setCurrentItem(4, false);// 设置当前页面break;default:break;}}});mViewPager.setOnPageChangeListener(new OnPageChangeListener() {@Overridepublic void onPageSelected(int arg0) {mPagerList.get(arg0).initData();// 获取当前被选中的页面, 初始化该页面数据}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic void onPageScrollStateChanged(int arg0) {}});mPagerList.get(0).initData();// 初始化首页数据}/*** 主界面的适配器* @author Administrator**/class ContentAdapter extends PagerAdapter {@Overridepublic int getCount() {return mPagerList.size();}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {return arg0 == arg1;}@Overridepublic Object instantiateItem(ViewGroup container, int position) {BasePager pager = mPagerList.get(position);container.addView(pager.mRootView);// pager.initData();// 初始化数据.... 不要放在此处初始化数据, 否则会预加载下一个页面return pager.mRootView;}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {container.removeView((View) object);}}/*** 获取新闻中心页面* * @return*/public NewsCenterPager getNewsCenterPager() {return (NewsCenterPager) mPagerList.get(1);}}



这篇关于黑马北京新闻项目连载(2)---侧滑菜单栏、主页面Fragment搭建的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1125328

相关文章

Node.js 数据库 CRUD 项目示例详解(完美解决方案)

《Node.js数据库CRUD项目示例详解(完美解决方案)》:本文主要介绍Node.js数据库CRUD项目示例详解(完美解决方案),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考... 目录项目结构1. 初始化项目2. 配置数据库连接 (config/db.js)3. 创建模型 (models/

springboot项目中常用的工具类和api详解

《springboot项目中常用的工具类和api详解》在SpringBoot项目中,开发者通常会依赖一些工具类和API来简化开发、提高效率,以下是一些常用的工具类及其典型应用场景,涵盖Spring原生... 目录1. Spring Framework 自带工具类(1) StringUtils(2) Coll

Spring Boot项目部署命令java -jar的各种参数及作用详解

《SpringBoot项目部署命令java-jar的各种参数及作用详解》:本文主要介绍SpringBoot项目部署命令java-jar的各种参数及作用的相关资料,包括设置内存大小、垃圾回收... 目录前言一、基础命令结构二、常见的 Java 命令参数1. 设置内存大小2. 配置垃圾回收器3. 配置线程栈大小

利用Python快速搭建Markdown笔记发布系统

《利用Python快速搭建Markdown笔记发布系统》这篇文章主要为大家详细介绍了使用Python生态的成熟工具,在30分钟内搭建一个支持Markdown渲染、分类标签、全文搜索的私有化知识发布系统... 目录引言:为什么要自建知识博客一、技术选型:极简主义开发栈二、系统架构设计三、核心代码实现(分步解析

Spring Boot项目中结合MyBatis实现MySQL的自动主从切换功能

《SpringBoot项目中结合MyBatis实现MySQL的自动主从切换功能》:本文主要介绍SpringBoot项目中结合MyBatis实现MySQL的自动主从切换功能,本文分步骤给大家介绍的... 目录原理解析1. mysql主从复制(Master-Slave Replication)2. 读写分离3.

使用Python实现快速搭建本地HTTP服务器

《使用Python实现快速搭建本地HTTP服务器》:本文主要介绍如何使用Python快速搭建本地HTTP服务器,轻松实现一键HTTP文件共享,同时结合二维码技术,让访问更简单,感兴趣的小伙伴可以了... 目录1. 概述2. 快速搭建 HTTP 文件共享服务2.1 核心思路2.2 代码实现2.3 代码解读3.

MySQL双主搭建+keepalived高可用的实现

《MySQL双主搭建+keepalived高可用的实现》本文主要介绍了MySQL双主搭建+keepalived高可用的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,... 目录一、测试环境准备二、主从搭建1.创建复制用户2.创建复制关系3.开启复制,确认复制是否成功4.同

一文教你如何将maven项目转成web项目

《一文教你如何将maven项目转成web项目》在软件开发过程中,有时我们需要将一个普通的Maven项目转换为Web项目,以便能够部署到Web容器中运行,本文将详细介绍如何通过简单的步骤完成这一转换过程... 目录准备工作步骤一:修改​​pom.XML​​1.1 添加​​packaging​​标签1.2 添加

tomcat多实例部署的项目实践

《tomcat多实例部署的项目实践》Tomcat多实例是指在一台设备上运行多个Tomcat服务,这些Tomcat相互独立,本文主要介绍了tomcat多实例部署的项目实践,具有一定的参考价值,感兴趣的可... 目录1.创建项目目录,测试文China编程件2js.创建实例的安装目录3.准备实例的配置文件4.编辑实例的

springboot集成Deepseek4j的项目实践

《springboot集成Deepseek4j的项目实践》本文主要介绍了springboot集成Deepseek4j的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价... 目录Deepseek4j快速开始Maven 依js赖基础配置基础使用示例1. 流式返回示例2. 进阶