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

1.主界面及Fragment界面展示

总的思路是：首先创建主页面布局（头像Imgview+中间页面+底部3个按钮），中间页面的容器是FrameLayout，再创建3个fragment布局及代码，利用FragmentManager和FragmentTransaction实现点击3个按钮会切换fragment。



首先创建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();

//因为第一次进入程序时会显示消息页面，所以就在这开启一次事务并提交
cb55

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();

//实例化slidingmenu
slidingMenu = new SlidingMenu(MainActivity.this);

//设置滑动模式,SlidingMenu.LEFT表示滑动菜单在左边，类似QQ
slidingMenu.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);//右边的布局