仿知乎程序 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

 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     }

最后的結果如下圖:

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM