首先下载SlidingMenu,有Library和Sample,然后在自己的项目中引入类库(引入智慧北京工作空间的Library),然后V4包会发生冲突,删掉自己项目Libs目录下的V4包即可
侧滑布局和主界面布局都先用一个空布局填充一下(FrameLayout),
UI框架搭建简介:整个界面就是一个MainActivity,MainActivity左边是一个滑动侧边栏,是一个Fragment;MainActivity主体又是一个Fragment(三个Fragment中的某一个),左侧边栏Fragment依附于MainActivity,三个主体Fragment依附于侧边栏Fragment
项目的代码结构:
MainActivity的代码:
//一打开程序默认就是读者Fragment public class MainActivity extends SlidingFragmentActivity{//改为Public @Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.activity_main);//把主布局设置为空布局(FrameLayout) setBehindContentView(R.layout.left_menu);//把左侧边栏布局设置为空布局SlidingMenu slidingMenu = getSlidingMenu();//设置触摸模式为全屏触摸 slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);//设置预留屏幕的宽度为110dpslidingMenu.setBehindOffset(SizeUtils.dip2px(MainActivity.this, 110));FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();//把左侧菜单的空布局替换成Fragment,注意,一定是用R.id,即FrameLayout的ID//而不是R.layout,不是布局文件的IDtransaction.replace(R.id.left_menu, new FragmentLeft());//把主内容的空FrameLayout的ID替换成读者Fragmenttransaction.replace(R.id.activity_main, new ReaderFragment(MainActivity.this));transaction.commit();}}
左侧菜单Fragment的布局:
/**左侧菜单的Fragment,在左侧菜单Fragment里面处理点击事件*/ public class FragmentLeft extends Fragment implements OnClickListener {private View view;@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {view = View.inflate(getActivity(), R.layout.left_menu_fragment, null);initView();return view;}private void initView() {//左侧菜单的读者TextView tv_duzhe= (TextView) view.findViewById(R.id.tv_duzhe);//左侧菜单的充值TextView tv_pay= (TextView) view.findViewById(R.id.tv_pay);//左侧菜单的收藏TextView tv_collect= (TextView) view.findViewById(R.id.tv_collect);tv_duzhe.setOnClickListener(this);tv_pay.setOnClickListener(this);tv_collect.setOnClickListener(this);}@Overridepublic void onClick(View v) {//获取SlidingMenuSlidingFragmentActivity activity= (SlidingFragmentActivity)getActivity();SlidingMenu slidingMenu = activity.getSlidingMenu();switch (v.getId()) {case R.id.tv_duzhe:ReaderFragment readerFragment = new ReaderFragment(getActivity());getActivity().getSupportFragmentManager().beginTransaction().replace(R.id.activity_main, readerFragment).commit();slidingMenu.toggle();break;case R.id.tv_pay://当每次点击充值时,就用充值Fragment替换主布局,主布局就是一个FrameLayoutPayFragment payFragment = new PayFragment(getActivity());getActivity().getSupportFragmentManager().beginTransaction().replace(R.id.activity_main, payFragment).commit();//Fragment替换之后,就关闭侧边栏 slidingMenu.toggle();//如果侧边栏是打开的,就关闭,反之亦然break;case R.id.tv_collect:
//收藏FragmentgetActivity().getSupportFragmentManager().beginTransaction().replace(R.id.activity_main, new CollectFragment(getActivity())).commit();slidingMenu.toggle();break;default:break;}} }
读者的Fragment,Fragment里的布局就是两个字,其它两个Fragment一模一样,就不写了
/**读者的Fragment*/ public class ReaderFragment extends Fragment {private Context context;/**由于ReaderFragment是依附于侧边栏Fragment的,所以不能用getActivity()来获取上下文,必须传过来*/public ReaderFragment(Context context){this.context=context;}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {System.out.println("读者Fragment");View view = View.inflate(context, R.layout.fragment_duzhe, null);return view;} }
这就是类似于读者APP的界面,运行效果图如下: