我們在看知乎的時候,你會發現,首頁,發現,關注,收藏,草稿這五項,你在點擊之后進入到相應頁面之后,側滑菜單還在,你左側滑一下,這個側滑菜單還在,而提問,左滑屏幕,這個頁面就沒有,有點像返回上一頁的感覺。
從操作來看,五頁面應該是fragment之間的切換,而提問是單獨的activity。
我們先從幾個fragment入手,這里我們建立五fragment頁,選擇繼承自android.support.v4.app.Fragment,因為這五個頁面基本上都一樣,就是簡單的一個布局,然后顯示一個標題。分別是
首頁: IndexFragment.java
發現: FindFragment.java
關注: AttentionFragment.java
收藏: CollectionFragment.java
草稿: DraftFragment.java
代碼就以首頁為例:
fragment_index.xml
1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent"> 5 6 <TextView 7 android:layout_width="fill_parent" 8 android:layout_height="fill_parent" 9 android:text="我是首頁" 10 android:gravity="center"/> 11 12 </LinearLayout>
IndexFragment.java
1 import android.os.Bundle; 2 import android.support.v4.app.Fragment; 3 import android.view.LayoutInflater; 4 import android.view.View; 5 import android.view.ViewGroup; 6 7 /** 8 * 首頁 9 * Created by cg on 2015/10/27. 10 */ 11 public class IndexFragment extends Fragment { 12 @Override 13 public View onCreateView(LayoutInflater inflater, ViewGroup container, 14 Bundle savedInstanceState) { 15 View view = inflater.inflate(R.layout.fragment_index,container,false); 16 17 return view; 18 } 19 }
fragment頁面之間的切換,這個大家都會,這里就不細說了,如果有感覺這方面還不是很明確的,給推薦一個blog,里面說的很不錯。http://blog.csdn.net/lmj623565791/article/details/42628537
這里我要強調的是,一般我們來進行fragment頁面切換的時候,都是采用replace方法,進行切換,其實replace方就是remove方法和add方法的一個合體,使我們的代碼變得簡單了。可是這里就出現一個問題,這個方法,是移除與添加,也就是說,我們在切換的時候,它會重新加載,也就是說如果是讀取數據,它就會重新去讀數據,重新加載。這個在讀本地數據庫的時候,可能不算什么,可是在讀網絡數據的時候,這就浪費了流量,所以我們不能使用這個方法,我們這里使用hide,show,方法,用隱藏和顯示的方法來進行切換。下面是一個通用的方法,代碼如下:
1 /** 2 * 當fragment進行切換時,采用隱藏與顯示的方法加載fragment以防止數據的重復加載 3 * @param from 4 * @param to 5 */ 6 public void switchContent(Fragment from, Fragment to) { 7 if (isFragment != to) { 8 isFragment = to; 9 FragmentManager fm = getSupportFragmentManager(); 10 //添加漸隱漸現的動畫 11 FragmentTransaction ft = fm.beginTransaction(); 12 if (!to.isAdded()) { // 先判斷是否被add過 13 ft.hide(from).add(R.id.frame_main, to).commit(); // 隱藏當前的fragment,add下一個到Activity中 14 } else { 15 ft.hide(from).show(to).commit(); // 隱藏當前的fragment,顯示下一個 16 } 17 } 18 }
好,我們解決了fragment切換的問題,哪么下面我們就要來看一下,如何去觸發這個方法,當我們點擊左側側滑菜單按鈕的時候,我們如何去進行觸發這個點擊事件呢。 其實也很簡單,我們只要在側滑菜單頁頁,定義一個點擊事件的接口,然后讓mainActivity頁面,implements它就行了, 我們來修改一下我們的tool_NavigationDrawerFragment.java。代碼如下:
1 import android.app.Fragment; 2 import android.content.res.TypedArray; 3 import android.os.Bundle; 4 import android.view.LayoutInflater; 5 import android.view.View; 6 import android.view.ViewGroup; 7 import android.widget.AdapterView; 8 import android.widget.ListView; 9 10 import com.example.cg.zhihu_one.Adapters.Main_Drawer_lv_Adapter; 11 import com.example.cg.zhihu_one.models.MainDrawerMenu; 12 13 import java.util.ArrayList; 14 import java.util.List; 15 16 /** 17 * 左側側滑頁面 18 * Created by cg on 2015/10/23. 19 */ 20 public class tool_NavigationDrawerFragment extends Fragment { 21 private ListView lv_main_drawer_leftmenu; //定義菜單的listView 22 private List<MainDrawerMenu> list_menu; 23 24 25 /** 26 * 設置菜單點擊接口,以方便外部Activity調用 27 */ 28 public interface menuClickListener 29 { 30 void menuClick(String menuName); 31 } 32 33 @Override 34 public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { 35 36 View view = inflater.inflate(R.layout.fragment_main_drawer,container,false); 37 38 initleftMenuContral(view); 39 40 return view; 41 } 42 43 /** 44 * 初始化左側菜單列表listView,並為菜單,設置點擊事件 45 * @param view 46 */ 47 private void initleftMenuContral(View view) { 48 lv_main_drawer_leftmenu = (ListView)view.findViewById(R.id.lv_main_drawer_leftmenu); 49 list_menu = getMenuItem(); 50 lv_main_drawer_leftmenu.setAdapter(new Main_Drawer_lv_Adapter(getActivity(),list_menu)); 51 lv_main_drawer_leftmenu.setOnItemClickListener(new AdapterView.OnItemClickListener() { 52 @Override 53 public void onItemClick(AdapterView<?> parent, View view, int position, long id) { 54 if(getActivity() instanceof menuClickListener) 55 { 56 ((menuClickListener)getActivity()).menuClick(list_menu.get(position).getMainDrawer_menuName()); 57 } 58 } 59 }); 60 } 61 62 /** 63 * 從arrays.xml中取出數據,裝入list<T>中 64 * @return 65 */ 66 private List<MainDrawerMenu> getMenuItem() 67 { 68 List<MainDrawerMenu> list_menu = new ArrayList<MainDrawerMenu>(); 69 70 String[] itemTitle = getResources().getStringArray(R.array.item_title); 71 TypedArray itemIconRes = getResources().obtainTypedArray(R.array.item_icon_res); 72 73 for(int i=0;i<itemTitle.length;i++) 74 { 75 76 MainDrawerMenu lmi = new MainDrawerMenu(); 77 lmi.setMainDrawer_icon(itemIconRes.getResourceId(i,0)); 78 lmi.setMainDrawer_menuName(itemTitle[i]); 79 list_menu.add(lmi); 80 } 81 82 return list_menu; 83 } 84 } 85 86 好了,現在我們再來修改一下我們的 MainActivity.java代碼。 87 這里我們要添加三個地方,一是初始的時候,我們把首頁的fragment給它加載進去,二是把implements自tool_NavigationDrawerFragment的點擊方法實現了, 88 三是實現頁面之間的切換。下面直接看代碼吧 89 <pre name="code" class="java">import android.os.Bundle; 90 import android.support.v4.app.Fragment; 91 import android.support.v4.app.FragmentManager; 92 import android.support.v4.app.FragmentTransaction; 93 import android.support.v4.widget.DrawerLayout; 94 import android.support.v7.app.ActionBarDrawerToggle; 95 import android.support.v7.app.AppCompatActivity; 96 import android.support.v7.widget.Toolbar; 97 import android.view.Menu; 98 import android.view.MenuItem; 99 100 public class MainActivity extends AppCompatActivity implements tool_NavigationDrawerFragment.menuClickListener { 101 102 private Toolbar toolbar; //定義toolbar 103 private ActionBarDrawerToggle mDrawerToggle; //定義toolbar左上角的彈出左側菜單按鈕 104 private DrawerLayout drawer_main; //定義左側滑動布局,其實就是主布局 105 106 private IndexFragment iFragment; //定義首頁fragment 107 private FindFragment fFragment; //定義發現fragment 108 private AttentionFragment aFragment; //定義關注fragment 109 private CollectionFragment cFragment; //定義收藏fragment 110 private DraftFragment dFragment; //定義草稿fragment 111 112 113 private Fragment isFragment; //記錄當前正在使用的fragment 114 115 @Override 116 protected void onCreate(Bundle savedInstanceState) { 117 super.onCreate(savedInstanceState); 118 setContentView(R.layout.activity_main); 119 120 initToolbar(); 121 initFragment(savedInstanceState); 122 } 123 124 /** 125 * 初始化Toolbar,並設置Toolbar中的菜單與標題,並與DrawerLayout.DrawerListener相關聯,設置動態圖標 126 */ 127 public void initToolbar() 128 { 129 toolbar = (Toolbar)this.findViewById(R.id.toolbar); 130 toolbar.setTitle(R.string.menu_index); // 標題的文字需在setSupportActionBar之前,不然會無效 131 setSupportActionBar(toolbar); 132 133 //為了生成,工具欄左上角的動態圖標,要使用下面的方法 134 drawer_main = (DrawerLayout) findViewById(R.id.drawer_main); 135 mDrawerToggle = new ActionBarDrawerToggle(this, drawer_main, toolbar, R.string.drawer_open, 136 R.string.drawer_close); 137 mDrawerToggle.syncState(); 138 drawer_main.setDrawerListener(mDrawerToggle); 139 } 140 141 @Override 142 public boolean onCreateOptionsMenu(Menu menu) { 143 // Inflate the menu; this adds items to the action bar if it is present. 144 getMenuInflater().inflate(R.menu.menu_main, menu); 145 return true; 146 } 147 148 @Override 149 public boolean onOptionsItemSelected(MenuItem item) { 150 // Handle action bar item clicks here. The action bar will 151 // automatically handle clicks on the Home/Up button, so long 152 // as you specify a parent activity in AndroidManifest.xml. 153 int id = item.getItemId(); 154 155 //noinspection SimplifiableIfStatement 156 if (id == R.id.main_toolbar_shuffle) { 157 return true; 158 } 159 160 return super.onOptionsItemSelected(item); 161 } 162 163 /** 164 * 為頁面加載初始狀態的fragment 165 */ 166 public void initFragment(Bundle savedInstanceState) 167 { 168 //判斷activity是否重建,如果不是,則不需要重新建立fragment. 169 if(savedInstanceState==null) { 170 FragmentManager fm = getSupportFragmentManager(); 171 FragmentTransaction ft = fm.beginTransaction(); 172 if(iFragment==null) { 173 iFragment = new IndexFragment(); 174 } 175 isFragment = iFragment; 176 ft.replace(R.id.frame_main, iFragment).commit(); 177 } 178 } 179 180 /** 181 * 接收左側側滑菜單的點擊事件 182 * @param menuName 菜單名稱 183 */ 184 @Override 185 public void menuClick(String menuName) { 186 187 getSupportActionBar().setTitle(menuName); //修改Toolbar菜單的名字 188 189 FragmentManager fm = getSupportFragmentManager(); 190 FragmentTransaction ft = fm.beginTransaction(); 191 192 switch (menuName) 193 { 194 case "首頁" : 195 if(iFragment!=null) { 196 iFragment = new IndexFragment(); 197 } 198 switchContent(isFragment,iFragment); 199 break; 200 case "發現" : 201 if(fFragment==null) 202 { 203 fFragment = new FindFragment(); 204 } 205 switchContent(isFragment,fFragment); 206 break; 207 case "關注" : 208 if(aFragment==null) 209 { 210 aFragment = new AttentionFragment(); 211 } 212 switchContent(isFragment,aFragment); 213 break; 214 case "收藏" : 215 if(cFragment==null) 216 { 217 cFragment = new CollectionFragment(); 218 } 219 switchContent(isFragment,cFragment); 220 break; 221 case "草稿" : 222 if(dFragment==null) 223 { 224 dFragment = new DraftFragment(); 225 } 226 switchContent(isFragment,dFragment); 227 break; 228 case "提問" : 229 230 break; 231 } 232 233 invalidateOptionsMenu(); 234 235 /** 236 * 關閉左側滑出菜單 237 */ 238 drawer_main.closeDrawers(); 239 } 240 241 /** 242 * 當fragment進行切換時,采用隱藏與顯示的方法加載fragment以防止數據的重復加載 243 * @param from 244 * @param to 245 */ 246 public void switchContent(Fragment from, Fragment to) { 247 if (isFragment != to) { 248 isFragment = to; 249 FragmentManager fm = getSupportFragmentManager(); 250 //添加漸隱漸現的動畫 251 FragmentTransaction ft = fm.beginTransaction(); 252 if (!to.isAdded()) { // 先判斷是否被add過 253 ft.hide(from).add(R.id.frame_main, to).commit(); // 隱藏當前的fragment,add下一個到Activity中 254 } else { 255 ft.hide(from).show(to).commit(); // 隱藏當前的fragment,顯示下一個 256 } 257 } 258 } 259 }
來看一下,我們運行的效果,如圖

當我們點擊左側菜單的時候,你會發現里面的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代碼如下:
1 import android.os.Bundle; 2 import android.support.v4.app.Fragment; 3 import android.support.v4.app.FragmentManager; 4 import android.support.v4.app.FragmentTransaction; 5 import android.support.v4.widget.DrawerLayout; 6 import android.support.v7.app.ActionBarDrawerToggle; 7 import android.support.v7.app.AppCompatActivity; 8 import android.support.v7.widget.Toolbar; 9 import android.view.Menu; 10 import android.view.MenuItem; 11 import android.widget.Toast; 12 13 public class MainActivity extends AppCompatActivity implements tool_NavigationDrawerFragment.menuClickListener { 14 15 private Toolbar toolbar; //定義toolbar 16 private ActionBarDrawerToggle mDrawerToggle; //定義toolbar左上角的彈出左側菜單按鈕 17 private DrawerLayout drawer_main; //定義左側滑動布局,其實就是主布局 18 19 private IndexFragment iFragment; //定義首頁fragment 20 private FindFragment fFragment; //定義發現fragment 21 private AttentionFragment aFragment; //定義關注fragment 22 private CollectionFragment cFragment; //定義收藏fragment 23 private DraftFragment dFragment; //定義草稿fragment 24 25 26 private Fragment isFragment; //記錄當前正在使用的fragment 27 private boolean isMenuShuffle = false; //判斷是否顯示toolbar上的隨機菜單 28 29 @Override 30 protected void onCreate(Bundle savedInstanceState) { 31 super.onCreate(savedInstanceState); 32 setContentView(R.layout.activity_main); 33 34 initToolbar(); 35 initFragment(savedInstanceState); 36 } 37 38 /** 39 * 初始化Toolbar,並設置Toolbar中的菜單與標題,並與DrawerLayout.DrawerListener相關聯,設置動態圖標 40 */ 41 public void initToolbar() 42 { 43 toolbar = (Toolbar)this.findViewById(R.id.toolbar); 44 toolbar.setTitle(R.string.menu_index); // 標題的文字需在setSupportActionBar之前,不然會無效 45 setSupportActionBar(toolbar); 46 47 //為了生成,工具欄左上角的動態圖標,要使用下面的方法 48 drawer_main = (DrawerLayout) findViewById(R.id.drawer_main); 49 mDrawerToggle = new ActionBarDrawerToggle(this, drawer_main, toolbar, R.string.drawer_open, 50 R.string.drawer_close); 51 mDrawerToggle.syncState(); 52 drawer_main.setDrawerListener(mDrawerToggle); 53 } 54 55 @Override 56 public boolean onCreateOptionsMenu(Menu menu) { 57 // Inflate the menu; this adds items to the action bar if it is present. 58 getMenuInflater().inflate(R.menu.menu_main, menu); 59 return true; 60 } 61 62 @Override 63 public boolean onOptionsItemSelected(MenuItem item) { 64 65 66 switch (item.getItemId()) 67 { 68 case R.id.main_toolbar_search: 69 Toast.makeText(this, "main_toolbar_search", Toast.LENGTH_LONG).show(); 70 break; 71 case R.id.main_toolbar_notify: 72 Toast.makeText(this, "main_toolbar_notify", Toast.LENGTH_LONG).show(); 73 break; 74 case R.id.main_toolbar_about: 75 Toast.makeText(this, "main_toolbar_about", Toast.LENGTH_LONG).show(); 76 break; 77 case R.id.main_toolbar_register: 78 Toast.makeText(this,"main_toolbar_register",Toast.LENGTH_LONG).show(); 79 break; 80 case R.id.main_toolbar_shuffle: 81 Toast.makeText(this,"main_toolbar_shuffle",Toast.LENGTH_LONG).show(); 82 break; 83 } 84 85 86 return super.onOptionsItemSelected(item); 87 } 88 89 @Override 90 public boolean onPrepareOptionsMenu(Menu menu) { 91 //Log.e("isMenuShuffle",isMenuShuffle + ""); 92 if(isMenuShuffle) 93 { 94 menu.findItem(R.id.main_toolbar_shuffle).setVisible(true); 95 }else 96 { 97 menu.findItem(R.id.main_toolbar_shuffle).setVisible(false); 98 } 99 return super.onPrepareOptionsMenu(menu); 100 } 101 102 /** 103 * 為頁面加載初始狀態的fragment 104 */ 105 public void initFragment(Bundle savedInstanceState) 106 { 107 //判斷activity是否重建,如果不是,則不需要重新建立fragment. 108 if(savedInstanceState==null) { 109 FragmentManager fm = getSupportFragmentManager(); 110 FragmentTransaction ft = fm.beginTransaction(); 111 if(iFragment==null) { 112 iFragment = new IndexFragment(); 113 } 114 isFragment = iFragment; 115 ft.replace(R.id.frame_main, iFragment).commit(); 116 } 117 } 118 119 /** 120 * 接收左側側滑菜單的點擊事件 121 * @param menuName 菜單名稱 122 */ 123 @Override 124 public void menuClick(String menuName) { 125 126 getSupportActionBar().setTitle(menuName); //修改Toolbar菜單的名字 127 128 FragmentManager fm = getSupportFragmentManager(); 129 FragmentTransaction ft = fm.beginTransaction(); 130 131 switch (menuName) 132 { 133 case "首頁" : 134 if(iFragment!=null) { 135 iFragment = new IndexFragment(); 136 } 137 switchContent(isFragment,iFragment); 138 isMenuShuffle = false; 139 break; 140 case "發現" : 141 if(fFragment==null) 142 { 143 fFragment = new FindFragment(); 144 } 145 switchContent(isFragment,fFragment); 146 isMenuShuffle = true; 147 break; 148 case "關注" : 149 if(aFragment==null) 150 { 151 aFragment = new AttentionFragment(); 152 } 153 switchContent(isFragment,aFragment); 154 isMenuShuffle = false; 155 break; 156 case "收藏" : 157 if(cFragment==null) 158 { 159 cFragment = new CollectionFragment(); 160 } 161 switchContent(isFragment,cFragment); 162 isMenuShuffle = false; 163 break; 164 case "草稿" : 165 if(dFragment==null) 166 { 167 dFragment = new DraftFragment(); 168 } 169 switchContent(isFragment,dFragment); 170 isMenuShuffle = false; 171 break; 172 case "提問" : 173 isMenuShuffle = false; 174 /*Intent qIntent = new Intent(); 175 qIntent.setClass(this,QuestionAcivity.class); 176 startActivity(qIntent);*/ 177 break; 178 } 179 180 invalidateOptionsMenu(); 181 182 /** 183 * 關閉左側滑出菜單 184 */ 185 drawer_main.closeDrawers(); 186 } 187 188 /** 189 * 當fragment進行切換時,采用隱藏與顯示的方法加載fragment以防止數據的重復加載 190 * @param from 191 * @param to 192 */ 193 public void switchContent(Fragment from, Fragment to) { 194 if (isFragment != to) { 195 isFragment = to; 196 FragmentManager fm = getSupportFragmentManager(); 197 //添加漸隱漸現的動畫 198 FragmentTransaction ft = fm.beginTransaction(); 199 if (!to.isAdded()) { // 先判斷是否被add過 200 ft.hide(from).add(R.id.frame_main, to).commit(); // 隱藏當前的fragment,add下一個到Activity中 201 } else { 202 ft.hide(from).show(to).commit(); // 隱藏當前的fragment,顯示下一個 203 } 204 } 205 }
最后的結果如下圖:

是不是達到了我們想要的效果呢
