动态添加Fragment及侧滑菜单SlidingMenu仿QQ界面

2019-11-09 14:58:03

字体：大中小

来源：转载

供稿：网友

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);//右边的布局

上一篇：ScrollView起始位置不是最顶部的解决办法

下一篇：随笔Tips