SlidingMenu的使用,结合Fragment(eclipse环境)

首先下载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
    @Override
    public 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);
        //设置预留屏幕的宽度为110dp
        slidingMenu.setBehindOffset(SizeUtils.dip2px(MainActivity.this, 110));
        
        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
        //把左侧菜单的空布局替换成Fragment,注意,一定是用R.id,即FrameLayout的ID
        //而不是R.layout,不是布局文件的ID
        transaction.replace(R.id.left_menu, new FragmentLeft());
        //把主内容的空FrameLayout的ID替换成读者Fragment
        transaction.replace(R.id.activity_main, new ReaderFragment(MainActivity.this));
        transaction.commit();
        
    }

}

 

 

左侧菜单Fragment的布局:

/**左侧菜单的Fragment,在左侧菜单Fragment里面处理点击事件*/
public class FragmentLeft extends Fragment implements OnClickListener {
    private View view;
    
    @Override
    public 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);
    }

    @Override
    public void onClick(View v) {
        //获取SlidingMenu
        SlidingFragmentActivity 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替换主布局,主布局就是一个FrameLayout
            PayFragment payFragment = new PayFragment(getActivity());
            getActivity().getSupportFragmentManager().
                        beginTransaction().replace(R.id.activity_main, payFragment).commit();
            
            //Fragment替换之后,就关闭侧边栏
            
            slidingMenu.toggle();//如果侧边栏是打开的,就关闭,反之亦然
            break;
        case R.id.tv_collect:
       //收藏Fragment getActivity().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;
    }
    @Override
    public 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的界面,运行效果图如下:

posted @ 2015-11-10 14:17  四念处  阅读(381)  评论(0编辑  收藏  举报