動態添加Fragment及側滑菜單SlidingMenu仿QQ界面

2019-11-09 16:10:54

字體：大中小

來源：轉載

供稿：網友

1.主界面及Fragment界面展示

總的思路是：首先創建主頁面布局（頭像Imgview+中間頁面+底部3個按鈕），中間頁面的容器是FrameLayout，再創建3個fragment布局及代碼，利用FragmentManager和FragmentTransaction實現點擊3個按鈕會切換fragment。

頭像按鈕+中間頁面+底部3個按鈕

首先創建activity_main_xml布局

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="com.soft.qianyu.myQQslidingmenu.MainActivity"><ImageView android:id="@+id/img" android:layout_width="wrap_content" android:layout_height="0dp" android:layout_weight="1" android:src="@drawable/tx6" /> <FrameLayout android:id="@+id/contanter" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="8"> </FrameLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"> <Button android:id="@+id/msg" android:layout_width="0dp" android:layout_weight="1" android:layout_height="match_parent" android:text="消息" /> <Button android:id="@+id/contect" android:layout_width="0dp" android:layout_weight="1" android:layout_height="match_parent" android:text="聯系人" /> <Button android:id="@+id/dt" android:layout_width="0dp" android:layout_weight="1" android:layout_height="match_parent" android:text="動態" /> </LinearLayout></LinearLayout>

頭像Imgview+中間頁面+底部3個按鈕，點擊按鈕會切換中間的界面

然后創建三個fragment.xml布局和代碼部分。 msgfragment.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"><TextView android:layout_width="match_parent" android:layout_height="match_parent" android:text="消息頁面" android:textSize="35sp" android:gravity="center" android:background="#34c13b"/></LinearLayout>

然后是fragment代碼界面 MsgFragment.java

public class MsgFragment extends Fragment { View view; @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { if (view==null){ view = inflater.inflate(R.layout.msg_fragment,container,false); } return view; }}

創建同樣的另外兩個fragment。

再到MainActivity.java中修改代碼

public class MainActivity extends FragmentActivity implements View.OnClickListener{ //聲明3個fragment MsgFragment msgFragment; ContectFragment contectFragment; DtFragment dtFragment; //聲明FragmentManager碎片管理器和FragmentTransaction碎片轉換事務 FragmentManager fragmentManager; FragmentTransaction ft; @Override PRotected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //初始化各個碎片及控件并設置監聽 init(); } private void init() { //初始化碎片 msgFragment = new MsgFragment(); contectFragment = new ContectFragment(); dtFragment = new DtFragment(); //為底部3個按鈕設置監聽事件 findViewById(R.id.msg).setOnClickListener(MainActivity.this); findViewById(R.id.contect).setOnClickListener(MainActivity.this); findViewById(R.id.dt).setOnClickListener(MainActivity.this);//獲取碎片管理器 fragmentManager = getSupportFragmentManager();//因為第一次進入程序時會顯示消息頁面，所以就在這開啟一次事務并提交ft=fragmentManager.beginTransaction();ft.replace(R.id.contanter,msgFragment);ft.commit();}//點擊監聽事件塊 @Override public void onClick(View view) { //開啟事務 ft=fragmentManager.beginTransaction(); switch (view.getId()){ case R.id.msg: //轉換 ft.replace(R.id.contanter,msgFragment); break; case R.id.contect: //轉換 ft.replace(R.id.contanter,contectFragment); break; case R.id.dt: //轉換 ft.replace(R.id.contanter,dtFragment); break; } //提交 ft.commit(); }}

以上代碼，就可以實現動態添加fragment了。

2.SlidingMenu的側滑效果的實現

參考網址1 參考網址2

注意事項 使用jar包在編譯版本大于24時會出現一個問題，會報一個NumberFormat異常，分析原因應該是slidingMenu會依賴v4包，但v4包在7.0的時候做了處理，可能把其中一個文件刪除了

如果使用jar包則直接將jar包拷貝到相應module的libs目錄下并添加lib依賴如果使用的是github上下載的源碼，則在工程目錄下導入壓縮包中library中的源碼，并在相應module下添加module依賴 github上的源碼的結構可能會和我們使用的Android studio代碼結構不一致，這時為了避免不必要的麻煩，可以自己新建一個lib module然后把相應的資源,源碼拷貝到相應的位置 **1.盡量保持新建libary的包名與原包名一致 2.拷貝源碼 3.刪除錯誤注解**

效果圖這里寫圖片描述

在上面動態加載Fragment的基礎上首先編寫SlidingMenu.xml的布局文件

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#4dea62" ><TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="我是slidingmenu" android:textSize="35sp" /> <Button android:id="@+id/back" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="點擊返回"/></LinearLayout>

然后在主MainActivity.java中直接注冊并調用方法就可以了 MainActivity.java

public class MainActivity extends FragmentActivity implements View.OnClickListener{ //聲明頭像按鈕和Slidingmenu中的按鈕控件 Button back; ImageView img; //聲明Slidingmenu SlidingMenu slidingMenu; MsgFragment msgFragment; ContectFragment contectFragment; DtFragment dtFragment; FragmentManager fragmentManager; FragmentTransaction ft; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); init(); } private void init() {msgFragment = new MsgFragment();contectFragment = new ContectFragment();dtFragment = new DtFragment();findViewById(R.id.msg).setOnClickListener(MainActivity.this); findViewById(R.id.contect).setOnClickListener(MainActivity.this); findViewById(R.id.dt).setOnClickListener(MainActivity.this);//為頭像按鈕設置點擊監聽事件findViewById(R.id.img).setOnClickListener(MainActivity.this); fragmentManager = getSupportFragmentManager(); ft=fragmentManager.beginTransaction(); ft.replace(R.id.contanter,msgFragment); ft.commit();//實例化slidingmenuslidingMenu = new SlidingMenu(MainActivity.this);//設置滑動模式,SlidingMenu.LEFT表示滑動菜單在左邊，類似QQslidingMenu.setMode(SlidingMenu.LEFT);//設置slidingmenu左右滑動的寬度slidingMenu.setBehindWidth(800);//設置slidingmenu滑動時為上下全屏顯示模式 slidingMenu.attachToActivity(MainActivity.this,SlidingMenu.SLIDING_WINDOW);/* 把SlidingMenu附加在Activity上SlidingMenu.SLIDING_WINDOW:菜單拉開后高度是全屏的SlidingMenu.SLIDING_CONTENT:菜單拉開后高度是不包含Title/ActionBar的內容區域*///設置slidingmenu的側滑布局slidingMenu.setMenu(R.layout.slidingmenu_layout);//如果slidingmenu中的控件需要有點擊事件則可以按照如下步驟操作//1.獲得slidingmenu的布局view對象View slidingView = slidingMenu.getMenu();//2.查找到相應的控件并設置監聽器slidingView.findViewById(R.id.back).setOnClickListener(MainActivity.this); }//執行點擊事件 @Override public void onClick(View view) { ft=fragmentManager.beginTransaction(); switch (view.getId()){ case R.id.msg: ft.replace(R.id.contanter,msgFragment); break; case R.id.contect: ft.replace(R.id.contanter,contectFragment); break; case R.id.dt: ft.replace(R.id.contanter,dtFragment); break; case R.id.img://如果需要在Activity的控件點擊事件中展示slidingmenu則調用如下方法 slidingMenu.showMenu(); break; case R.id.back: Toast.makeText(MainActivity.this,"返回成功",Toast.LENGTH_SHORT).show();//如果需要在Activity的控件點擊事件中關閉slidingmenu的展示則調用如下方法 slidingMenu.toggle(); break; } ft.commit(); }}

另外備注：

//如果需要左右兩邊都有側滑菜單，則需要進行如下操作 //將slidingmenu的滑動模式設置為左右都有 slidingMen.setMode(SlidingMenu.LEFT_RIGHT); //分別為左右兩邊的側滑菜單添加布局 slidingMen.setMenu(R.layout.sliding_layout); //左邊的布局 slidingMen.setSecondaryMenu(R.layout.sliding_layout);//右邊的布局

上一篇：picasso-基本使用及環境配置

下一篇：歡迎使用CSDN-markdown編輯器