仿知乎程序 fragment的切换以及toolbar在不同页面下显示的menu不同
我们在看知乎的时候,你会发现,首页,发现,关注,收藏,草稿这五项,你在点击之后进入到相应页面之后,侧滑菜单还在,你左侧滑一下,这个侧滑菜单还在,而提问,左滑屏幕,这个页面就没有,有点像返回上一页的感觉。
从操作来看,五页面应该是fragment之间的切换,而提问是单独的activity。
我们先从几个fragment入手,这里我们建立五fragment页,选择继承自android.support.v4.app.Fragment,因为这五个页面基本上都一样,就是简单的一个布局,然后显示一个标题。分别是
首页: IndexFragment.java
发现: FindFragment.java
关注: AttentionFragment.java
收藏: CollectionFragment.java
草稿: DraftFragment.java
代码就以首页为例:
fragment_index.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"> <TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="我是首页"
android:gravity="center"/> </LinearLayout>
IndexFragment.java
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup; /**
* 首页
* Created by cg on 2015/10/27.
*/
public class IndexFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_index,container,false); return view;
}
}
fragment页面之间的切换,这个大家都会,这里就不细说了,如果有感觉这方面还不是很明确的,给推荐一个blog,里面说的很不错。http://blog.csdn.net/lmj623565791/article/details/42628537
这里我要强调的是,一般我们来进行fragment页面切换的时候,都是采用replace方法,进行切换,其实replace方就是remove方法和add方法的一个合体,使我们的代码变得简单了。可是这里就出现一个问题,这个方法,是移除与添加,也就是说,我们在切换的时候,它会重新加载,也就是说如果是读取数据,它就会重新去读数据,重新加载。这个在读本地数据库的时候,可能不算什么,可是在读网络数据的时候,这就浪费了流量,所以我们不能使用这个方法,我们这里使用hide,show,方法,用隐藏和显示的方法来进行切换。下面是一个通用的方法,代码如下:
/**
* 当fragment进行切换时,采用隐藏与显示的方法加载fragment以防止数据的重复加载
* @param from
* @param to
*/
public void switchContent(Fragment from, Fragment to) {
if (isFragment != to) {
isFragment = to;
FragmentManager fm = getSupportFragmentManager();
//添加渐隐渐现的动画
FragmentTransaction ft = fm.beginTransaction();
if (!to.isAdded()) { // 先判断是否被add过
ft.hide(from).add(R.id.frame_main, to).commit(); // 隐藏当前的fragment,add下一个到Activity中
} else {
ft.hide(from).show(to).commit(); // 隐藏当前的fragment,显示下一个
}
}
}
好,我们解决了fragment切换的问题,哪么下面我们就要来看一下,如何去触发这个方法,当我们点击左侧侧滑菜单按钮的时候,我们如何去进行触发这个点击事件呢。
其实也很简单,我们只要在侧滑菜单页页,定义一个点击事件的接口,然后让mainActivity页面,implements它就行了,
我们来修改一下我们的tool_NavigationDrawerFragment.java。代码如下:
import android.app.Fragment;
import android.content.res.TypedArray;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.ListView; import com.example.cg.zhihu_one.Adapters.Main_Drawer_lv_Adapter;
import com.example.cg.zhihu_one.models.MainDrawerMenu; import java.util.ArrayList;
import java.util.List; /**
* 左侧侧滑页面
* Created by cg on 2015/10/23.
*/
public class tool_NavigationDrawerFragment extends Fragment {
private ListView lv_main_drawer_leftmenu; //定义菜单的listView
private List<MainDrawerMenu> list_menu; /**
* 设置菜单点击接口,以方便外部Activity调用
*/
public interface menuClickListener
{
void menuClick(String menuName);
} @Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_main_drawer,container,false); initleftMenuContral(view); return view;
} /**
* 初始化左侧菜单列表listView,并为菜单,设置点击事件
* @param view
*/
private void initleftMenuContral(View view) {
lv_main_drawer_leftmenu = (ListView)view.findViewById(R.id.lv_main_drawer_leftmenu);
list_menu = getMenuItem();
lv_main_drawer_leftmenu.setAdapter(new Main_Drawer_lv_Adapter(getActivity(),list_menu));
lv_main_drawer_leftmenu.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
if(getActivity() instanceof menuClickListener)
{
((menuClickListener)getActivity()).menuClick(list_menu.get(position).getMainDrawer_menuName());
}
}
});
} /**
* 从arrays.xml中取出数据,装入list<T>中
* @return
*/
private List<MainDrawerMenu> getMenuItem()
{
List<MainDrawerMenu> list_menu = new ArrayList<MainDrawerMenu>(); String[] itemTitle = getResources().getStringArray(R.array.item_title);
TypedArray itemIconRes = getResources().obtainTypedArray(R.array.item_icon_res); for(int i=0;i<itemTitle.length;i++)
{ MainDrawerMenu lmi = new MainDrawerMenu();
lmi.setMainDrawer_icon(itemIconRes.getResourceId(i,0));
lmi.setMainDrawer_menuName(itemTitle[i]);
list_menu.add(lmi);
} return list_menu;
}
} 好了,现在我们再来修改一下我们的 MainActivity.java代码。
这里我们要添加三个地方,一是初始的时候,我们把首页的fragment给它加载进去,二是把implements自tool_NavigationDrawerFragment的点击方法实现了,
三是实现页面之间的切换。下面直接看代码吧
<pre name="code" class="java">import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem; public class MainActivity extends AppCompatActivity implements tool_NavigationDrawerFragment.menuClickListener { private Toolbar toolbar; //定义toolbar
private ActionBarDrawerToggle mDrawerToggle; //定义toolbar左上角的弹出左侧菜单按钮
private DrawerLayout drawer_main; //定义左侧滑动布局,其实就是主布局 private IndexFragment iFragment; //定义首页fragment
private FindFragment fFragment; //定义发现fragment
private AttentionFragment aFragment; //定义关注fragment
private CollectionFragment cFragment; //定义收藏fragment
private DraftFragment dFragment; //定义草稿fragment private Fragment isFragment; //记录当前正在使用的fragment @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); initToolbar();
initFragment(savedInstanceState);
} /**
* 初始化Toolbar,并设置Toolbar中的菜单与标题,并与DrawerLayout.DrawerListener相关联,设置动态图标
*/
public void initToolbar()
{
toolbar = (Toolbar)this.findViewById(R.id.toolbar);
toolbar.setTitle(R.string.menu_index); // 标题的文字需在setSupportActionBar之前,不然会无效
setSupportActionBar(toolbar); //为了生成,工具栏左上角的动态图标,要使用下面的方法
drawer_main = (DrawerLayout) findViewById(R.id.drawer_main);
mDrawerToggle = new ActionBarDrawerToggle(this, drawer_main, toolbar, R.string.drawer_open,
R.string.drawer_close);
mDrawerToggle.syncState();
drawer_main.setDrawerListener(mDrawerToggle);
} @Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
} @Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId(); //noinspection SimplifiableIfStatement
if (id == R.id.main_toolbar_shuffle) {
return true;
} return super.onOptionsItemSelected(item);
} /**
* 为页面加载初始状态的fragment
*/
public void initFragment(Bundle savedInstanceState)
{
//判断activity是否重建,如果不是,则不需要重新建立fragment.
if(savedInstanceState==null) {
FragmentManager fm = getSupportFragmentManager();
FragmentTransaction ft = fm.beginTransaction();
if(iFragment==null) {
iFragment = new IndexFragment();
}
isFragment = iFragment;
ft.replace(R.id.frame_main, iFragment).commit();
}
} /**
* 接收左侧侧滑菜单的点击事件
* @param menuName 菜单名称
*/
@Override
public void menuClick(String menuName) { getSupportActionBar().setTitle(menuName); //修改Toolbar菜单的名字 FragmentManager fm = getSupportFragmentManager();
FragmentTransaction ft = fm.beginTransaction(); switch (menuName)
{
case "首页" :
if(iFragment!=null) {
iFragment = new IndexFragment();
}
switchContent(isFragment,iFragment);
break;
case "发现" :
if(fFragment==null)
{
fFragment = new FindFragment();
}
switchContent(isFragment,fFragment);
break;
case "关注" :
if(aFragment==null)
{
aFragment = new AttentionFragment();
}
switchContent(isFragment,aFragment);
break;
case "收藏" :
if(cFragment==null)
{
cFragment = new CollectionFragment();
}
switchContent(isFragment,cFragment);
break;
case "草稿" :
if(dFragment==null)
{
dFragment = new DraftFragment();
}
switchContent(isFragment,dFragment);
break;
case "提问" : break;
} invalidateOptionsMenu(); /**
* 关闭左侧滑出菜单
*/
drawer_main.closeDrawers();
} /**
* 当fragment进行切换时,采用隐藏与显示的方法加载fragment以防止数据的重复加载
* @param from
* @param to
*/
public void switchContent(Fragment from, Fragment to) {
if (isFragment != to) {
isFragment = to;
FragmentManager fm = getSupportFragmentManager();
//添加渐隐渐现的动画
FragmentTransaction ft = fm.beginTransaction();
if (!to.isAdded()) { // 先判断是否被add过
ft.hide(from).add(R.id.frame_main, to).commit(); // 隐藏当前的fragment,add下一个到Activity中
} else {
ft.hide(from).show(to).commit(); // 隐藏当前的fragment,显示下一个
}
}
}
}
来看一下,我们运行的效果,如图
当我们点击左侧菜单的时候,你会发现里面的fragment进行切换。同时toolbar左上角的标题也跟着变了。左上角的标题主要是代码getSupportActionBar().setTitle(menuName)
;它是用来动态修改toolbar的title的。在initFragment方法有一个很重要的知识点,就是if(savedInstanceState==null)的判断,它的作用就是在我们进行横竖屏切换时不会
出现页面叠加,我在一开始给的blog里面有两个连接也其中一个就是讲这个的,大家有兴趣可以去看一下。
现在我们已经可以很轻松的切换左侧侧滑菜单的各页面了,这时候我们会现一个问题,就是在toolbar上,第一个menu,这个menu在知乎里只有当菜单是发现时,才会出来,
而在别的页面时,它是不会显示的,也就是说,toolbar里面的menu是可以动态改变的。
我们知道,菜单是可以在onCreateOptionsMenu中进行处理的,可是这个方法,有一个问题,它在menu刚建立时才会执行,因此想动态修改menu它是不行的。
onPrepareOptionsMenu这个方法,是每次点击menu时就会被触发,可是这个方法也是我们用的,因为我们是要点击左侧侧滑菜单来改变menu啊。
还有一个方法是invalidateOptionsMenu();这个方法是使原填充的menu无效,那么我们在每次点击侧滑菜单时,加上这句就OK了。
MainActivty.java代码如下:
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast; public class MainActivity extends AppCompatActivity implements tool_NavigationDrawerFragment.menuClickListener { private Toolbar toolbar; //定义toolbar
private ActionBarDrawerToggle mDrawerToggle; //定义toolbar左上角的弹出左侧菜单按钮
private DrawerLayout drawer_main; //定义左侧滑动布局,其实就是主布局 private IndexFragment iFragment; //定义首页fragment
private FindFragment fFragment; //定义发现fragment
private AttentionFragment aFragment; //定义关注fragment
private CollectionFragment cFragment; //定义收藏fragment
private DraftFragment dFragment; //定义草稿fragment private Fragment isFragment; //记录当前正在使用的fragment
private boolean isMenuShuffle = false; //判断是否显示toolbar上的随机菜单 @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); initToolbar();
initFragment(savedInstanceState);
} /**
* 初始化Toolbar,并设置Toolbar中的菜单与标题,并与DrawerLayout.DrawerListener相关联,设置动态图标
*/
public void initToolbar()
{
toolbar = (Toolbar)this.findViewById(R.id.toolbar);
toolbar.setTitle(R.string.menu_index); // 标题的文字需在setSupportActionBar之前,不然会无效
setSupportActionBar(toolbar); //为了生成,工具栏左上角的动态图标,要使用下面的方法
drawer_main = (DrawerLayout) findViewById(R.id.drawer_main);
mDrawerToggle = new ActionBarDrawerToggle(this, drawer_main, toolbar, R.string.drawer_open,
R.string.drawer_close);
mDrawerToggle.syncState();
drawer_main.setDrawerListener(mDrawerToggle);
} @Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
} @Override
public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId())
{
case R.id.main_toolbar_search:
Toast.makeText(this, "main_toolbar_search", Toast.LENGTH_LONG).show();
break;
case R.id.main_toolbar_notify:
Toast.makeText(this, "main_toolbar_notify", Toast.LENGTH_LONG).show();
break;
case R.id.main_toolbar_about:
Toast.makeText(this, "main_toolbar_about", Toast.LENGTH_LONG).show();
break;
case R.id.main_toolbar_register:
Toast.makeText(this,"main_toolbar_register",Toast.LENGTH_LONG).show();
break;
case R.id.main_toolbar_shuffle:
Toast.makeText(this,"main_toolbar_shuffle",Toast.LENGTH_LONG).show();
break;
} return super.onOptionsItemSelected(item);
} @Override
public boolean onPrepareOptionsMenu(Menu menu) {
//Log.e("isMenuShuffle",isMenuShuffle + "");
if(isMenuShuffle)
{
menu.findItem(R.id.main_toolbar_shuffle).setVisible(true);
}else
{
menu.findItem(R.id.main_toolbar_shuffle).setVisible(false);
}
return super.onPrepareOptionsMenu(menu);
} /**
* 为页面加载初始状态的fragment
*/
public void initFragment(Bundle savedInstanceState)
{
//判断activity是否重建,如果不是,则不需要重新建立fragment.
if(savedInstanceState==null) {
FragmentManager fm = getSupportFragmentManager();
FragmentTransaction ft = fm.beginTransaction();
if(iFragment==null) {
iFragment = new IndexFragment();
}
isFragment = iFragment;
ft.replace(R.id.frame_main, iFragment).commit();
}
} /**
* 接收左侧侧滑菜单的点击事件
* @param menuName 菜单名称
*/
@Override
public void menuClick(String menuName) { getSupportActionBar().setTitle(menuName); //修改Toolbar菜单的名字 FragmentManager fm = getSupportFragmentManager();
FragmentTransaction ft = fm.beginTransaction(); switch (menuName)
{
case "首页" :
if(iFragment!=null) {
iFragment = new IndexFragment();
}
switchContent(isFragment,iFragment);
isMenuShuffle = false;
break;
case "发现" :
if(fFragment==null)
{
fFragment = new FindFragment();
}
switchContent(isFragment,fFragment);
isMenuShuffle = true;
break;
case "关注" :
if(aFragment==null)
{
aFragment = new AttentionFragment();
}
switchContent(isFragment,aFragment);
isMenuShuffle = false;
break;
case "收藏" :
if(cFragment==null)
{
cFragment = new CollectionFragment();
}
switchContent(isFragment,cFragment);
isMenuShuffle = false;
break;
case "草稿" :
if(dFragment==null)
{
dFragment = new DraftFragment();
}
switchContent(isFragment,dFragment);
isMenuShuffle = false;
break;
case "提问" :
isMenuShuffle = false;
/*Intent qIntent = new Intent();
qIntent.setClass(this,QuestionAcivity.class);
startActivity(qIntent);*/
break;
} invalidateOptionsMenu(); /**
* 关闭左侧滑出菜单
*/
drawer_main.closeDrawers();
} /**
* 当fragment进行切换时,采用隐藏与显示的方法加载fragment以防止数据的重复加载
* @param from
* @param to
*/
public void switchContent(Fragment from, Fragment to) {
if (isFragment != to) {
isFragment = to;
FragmentManager fm = getSupportFragmentManager();
//添加渐隐渐现的动画
FragmentTransaction ft = fm.beginTransaction();
if (!to.isAdded()) { // 先判断是否被add过
ft.hide(from).add(R.id.frame_main, to).commit(); // 隐藏当前的fragment,add下一个到Activity中
} else {
ft.hide(from).show(to).commit(); // 隐藏当前的fragment,显示下一个
}
}
}
最后的结果如下图:
是不是达到了我们想要的效果呢
仿知乎程序 fragment的切换以及toolbar在不同页面下显示的menu不同的更多相关文章
- 微信小程序开发日记——高仿知乎日报(下)
本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该 ...
- 微信小程序开发日记——高仿知乎日报(中)
本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该教 ...
- 微信小程序开发日记——高仿知乎日报(上)
本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该 ...
- 使程序在Linux下后台运行,程序运行前后台切换
一.为什么要使程序在后台执行 我们计算的程序都是周期很长的,通常要几个小时甚至一个星期.我们用的环境是用putty远程连接到日本Linux服务器.所以使程序在后台跑有以下三个好处: 1:我们这边是否关 ...
- Fragment保持状态切换,fragment状态切换
在使用Activity管理多个Fragment时,每次切换Fragment使用的是replace,结果导致出现xxx is not currently in the FragmentManager异常 ...
- 学习react,动手实现一个小demo(仿知乎问答)
学习react也有一周的时间,最近自己做了个仿知乎问答的小demo,项目源码在github上:https://github.com/yang302/reactQa 使用技术:bower+gulp+re ...
- 仿知乎app登录界面(Material Design设计框架拿来就用的TexnInputLayout)
在我脑子里还没有Material Design这种概念,就我个人而言,PC端应用扁平化设计必须成为首选,手当其冲的两款即时通讯旺旺和QQ早就完成UI扁平化的更新,然而客户端扁平化的设计本身就存在天生的 ...
- Fragment与Fragment相互切换之间的生命周期方法
Fragment 1 切换到 Fragment 2时生命周期变化 1.通过 add hide show 方式来切换 Fragment Fragment1 的生命周期变化为:onCreate().onC ...
- 微信小程序写tab切换
微信小程序之tab切换效果,如图: 最近在学习微信小程序并把之前的公司app搬到小程序上,挑一些实现效果记录一下(主要是官方文档里没说的,毕竟官方文档只是介绍功能) .wxml代码: <view ...
随机推荐
- js中的换算小技巧
之前自己一直使用~~运算符来把‘112222’字符型的数值换算成整型的数值 但今天调试程序发现了一些问题 ~~'999'=>999 ~~'111111999'=>111111999 这些都 ...
- 透过统计力学,模拟软物质——EPJE专访2016年玻尔兹曼奖得主Daan Frenkel
原文来源:Eur. Phys. J. E (2016) 39: 68 2016年玻尔兹曼奖得主Daan Frenkel接受欧洲物理学报E专访,畅谈统计物理在交叉科学研究中的前所未有的重要性. 统计物理 ...
- Hadoop 之面试题
颜色区别: 蓝色:hive,橙色:Hbase.黑色hadoop 请简述hadoop怎样实现二级排序. 你认为用Java,Streaming,pipe 方式开发map/reduce,各有哪些优缺点: 6 ...
- Python制作统计图形
转载自:http://www.dcharm.com/?p=15 Python一般使用Matplotlib制作统计图形,用它自己的说法是‘让简单的事情简单,让复杂的事情变得可能’.(你说国外的“码农”咋 ...
- H5项目常见问题汇总及解决方案
H5项目常见问题汇总及解决方案 H5 2015-12-06 10:15:33 发布 您的评价: 4.5 收藏 4收藏 H5项目常见问题及注意事项 Meta基础知识: H5页 ...
- Android快速开发系列 10个常用工具类
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38965311,本文出自[张鸿洋的博客] 打开大家手上的项目,基本都会有一大批的辅 ...
- http://debugjs.com/
浏览器内调试js代码,这篇文章介绍了作者的开发心路 http://amasad.me/2014/01/06/building-an-in-browser-javascript-vm-and-debug ...
- 编写Delphi控件属性Stored和Default的理解及应用
property ButtonSize: Integer read FButtonSize write SetButtonSize default 0; property Color: TCol ...
- Python 学习笔记四
接着三继续写http://www.cnblogs.com/dzzy/p/5295019.html 文件和函数操作: from sys import argv script,input_file=arg ...
- HackerRank savita-and-friends
Description 在一条边上求一个点,使得这个点到所有点的最长的最短距离 最短. \(n \leqslant 10^5\) Sol Dijkstra+扫描线+单调队列. 这个好像叫什么最小直径生 ...