高仿糗事百科学习(一) SlidingMenu

感谢大神的分享的demo，demo地址

http://www.devstore.cn/code/info/201.html

鉴于对于自己的学习，已经控制自己，我打算将其写成一篇博客，这是第一篇关于SlidingMenu布局的书写.
我在原作者的基础上使用了xUtils框架

框架地址

https://github.com/wyouflf/xUtils3

高仿糗事百科的界面是通过Fragment实现的
在main_activity中只有简单的帧布局FrameLayout
以下是main_activity的代码

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/main" android:layout_width="match_parent" android:layout_height="match_parent" >
</FrameLayout>

通过帧布局我们在MainActivity中只需要通过FragmentManager来获取fragment替代帧布局的main就行，具体代码如下

mFragmentManager = MainActivity.this.getSupportFragmentManager();
        mFragmentTransaction = mFragmentManager.beginTransaction();
        //替换Fragment
        FragmentTransaction mFragmentTransaction = mFragmentManager
                .beginTransaction();
        mFragmentTransaction.replace(R.id.main, mHotFragment);
        mFragmentTransaction.commit();

下面就开始关于SlidingMenu布局的说明

布局其实并不复杂，具体代码如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:background="#413A30" android:layout_width="match_parent" android:layout_height="match_parent">
    <RelativeLayout  android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@mipmap/menu_title_bg">
        <LinearLayout  android:id="@+id/SettingBtnlayout" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:orientation="horizontal">
            <ImageView  android:id="@+id/SettingBtn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingLeft="10dp" android:paddingRight="10dp" android:src="@mipmap/side_setting_icon"/>
        </LinearLayout>
        <LinearLayout  android:id="@+id/SettingBtnShuxian" android:layout_width="1dp" android:layout_height="wrap_content" android:layout_toLeftOf="@id/SettingBtnlayout" android:orientation="horizontal" android:background="@mipmap/side_menu_col">
        </LinearLayout>
        <LinearLayout  android:id="@+id/LoginThisApp" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignBottom="@id/SettingBtnlayout" android:layout_alignTop="@id/SettingBtnlayout" android:layout_centerVertical="true" android:layout_toLeftOf="@id/SettingBtnShuxian" android:gravity="center_vertical" android:orientation="horizontal" android:paddingLeft="8dp" >
           <ImageView  android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@mipmap/side_button_background" android:src="@mipmap/side_user_avatar"/>
            <TextView  android:id="@+id/myUserName" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:gravity="center_vertical|center_horizontal" android:padding="5dp" android:text="登录糗百" android:textColor="#ffffff" android:textSize="16sp" />
        </LinearLayout>
    </RelativeLayout>
    <ScrollView  android:layout_width="match_parent" android:layout_height="wrap_content">
        <LinearLayout  android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical">
           <RelativeLayout  android:id="@+id/LeftHot" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/leftview_list_bg">
               <TextView  android:text="热门" android:textColor="#ffffff" android:textSize="16sp" android:paddingLeft="10dp" android:layout_centerVertical="true" android:layout_width="wrap_content" android:layout_height="wrap_content" />
               <ImageView  android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:src="@mipmap/menu_more_details" />
           </RelativeLayout>
            <LinearLayout  android:layout_width="match_parent" android:layout_height="2dp" android:background="@mipmap/menu_seperator" >
            </LinearLayout>
            <RelativeLayout  android:id="@+id/LeftNice" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/leftview_list_bg">
                <TextView  android:text="精华" android:textColor="#ffffff" android:textSize="16sp" android:paddingLeft="10dp" android:layout_centerVertical="true" android:layout_width="wrap_content" android:layout_height="wrap_content" />
                <ImageView  android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:src="@mipmap/menu_more_details" />
            </RelativeLayout>
            <LinearLayout  android:layout_width="match_parent" android:layout_height="2dp" android:background="@mipmap/menu_seperator" >
            </LinearLayout>
            <RelativeLayout  android:id="@+id/LeftPicture" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/leftview_list_bg">
                <TextView  android:text="有图有真相" android:textColor="#ffffff" android:textSize="16sp" android:paddingLeft="10dp" android:layout_centerVertical="true" android:layout_width="wrap_content" android:layout_height="wrap_content" />
                <ImageView  android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:src="@mipmap/menu_more_details" />
            </RelativeLayout>
            <LinearLayout  android:layout_width="match_parent" android:layout_height="2dp" android:background="@mipmap/menu_seperator" >
            </LinearLayout>
            <RelativeLayout  android:id="@+id/LeftCross" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/leftview_list_bg" >
                <TextView  android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_marginLeft="10dp" android:text="穿越" android:textColor="#ffffff" android:textSize="16sp" />
                <ImageView  android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:src="@mipmap/menu_more_details" />
            </RelativeLayout>
            <LinearLayout  android:layout_width="match_parent" android:layout_height="2dp" android:background="@mipmap/menu_seperator" >
            </LinearLayout>
            <RelativeLayout  android:id="@+id/LeftScrip" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:background="@drawable/leftview_list_bg" >
                <TextView  android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_marginLeft="10dp" android:text="小纸条" android:textColor="#ffffff" android:textSize="16sp" />
                <ImageView  android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:src="@mipmap/menu_more_details" />
            </RelativeLayout>
            <LinearLayout  android:layout_width="match_parent" android:layout_height="2dp" android:background="@mipmap/menu_seperator" >
            </LinearLayout>
            <RelativeLayout  android:id="@+id/LeftNear" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/leftview_list_bg" >
                <TextView  android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_marginLeft="10dp" android:text="附近" android:textColor="#ffffff" android:textSize="16sp" />
                <ImageView  android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:src="@mipmap/menu_more_details" />
            </RelativeLayout>
            <LinearLayout  android:layout_width="match_parent" android:layout_height="2dp" android:background="@mipmap/menu_seperator" >
            </LinearLayout>
            <RelativeLayout  android:id="@+id/LeftCheck" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:background="@drawable/leftview_list_bg" >
                <TextView  android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_marginLeft="10dp" android:text="审核新糗事" android:textColor="#ffffff" android:textSize="16sp" />
                <ImageView  android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:src="@mipmap/menu_more_details" />
            </RelativeLayout>
            <RelativeLayout  android:id="@+id/LeftCheck11111111111" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:background="@drawable/leftview_list_bg" >
                <TextView  android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_marginLeft="10dp" android:text="" android:textColor="#ffffff" android:textSize="16sp" />
                <ImageView  android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:src="@mipmap/menu_more_details" />
            </RelativeLayout>
            <LinearLayout  android:layout_width="match_parent" android:layout_height="2dp" android:background="@mipmap/menu_seperator" >
            </LinearLayout>
        </LinearLayout>
    </ScrollView>
</LinearLayout>

大的布局就两块一个RelativeLayout是登陆部分的布局
另外一个就是ScrollView是具体菜单的布局

布局方面已经完成下面就该是加载到视图中了

@ContentView(R.layout.activity_main)
public class MainActivity extends SlidingFragmentActivity {
    private KFSettingsManager mSettingsMgr;
    private View mLeftView;
    //SlidingMenu
    private SlidingMenu mSlidingMenu;
    // 热门的碎片
    private HotFragment mHotFragment;
    // 精华的碎片
    private NiceFragment mNiceFragment;
    // 有图有真相的碎片
    private PictureFragment mPictureFragment;
    // 穿越的碎片
    private CrossFragment mCrossFragment;
    // 小纸条的碎片
    private NotesFragment mNotesFragment;
    // 附近的碎片
    private NearFragment mNearFragment;
    //Fragment管理器
    private FragmentManager mFragmentManager;
    // 获取fragment栈
    private FragmentTransaction mFragmentTransaction;
    private List<Fragment> myFragmentList = new ArrayList<Fragment>();

    private int fragmentFlag = 0;
    @ViewInject(R.id.myUserName)
    private TextView myUserName;
    @ViewInject(R.id.LoginThisApp)
    private LinearLayout mLoginThisAPP;// 登录糗百按
    @ViewInject(R.id.SettingBtn)
    private ImageView mSettingBtn;// 设置按钮
    // leftview中下面的按钮
    @ViewInject(R.id.LeftHot)
    private RelativeLayout mLeftHot;
    @ViewInject(R.id.LeftNice)
    private RelativeLayout mLeftNice;
    @ViewInject(R.id.LeftPicture)
    private RelativeLayout  mLeftPicture;
    @ViewInject(R.id.LeftCross)
    private RelativeLayout mLeftCross;
    @ViewInject(R.id.LeftScrip)
    private RelativeLayout mLeftScrip;
    @ViewInject(R.id.LeftNear)
    private RelativeLayout mLeftNear;
    @ViewInject(R.id.LeftCheck)
    private RelativeLayout mLeftCheck; // leftview中下面的按钮

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        mLeftView=View.inflate(MainActivity.this,R.layout.left_view,null);
        x.view().inject(this,mLeftView);
        initView();
        mSettingsMgr = KFSettingsManager.getSettingsManager(this);
        // 设置开发者调试模式，默认为true，如要关闭开发者模式，请设置为false
        KFIMInterfaces.enableDebugMode(this, true);
        login();
        //数据本地化
        SharedPreferences sp = MainActivity.this.getSharedPreferences(
                "UserInfo", MODE_PRIVATE);
        String result = sp.getString("UserInfoJson", "none");
        Log.e("SharedPreferencesOld", result);

    }

    private void initView() {
        mLeftHot.setBackgroundResource(R.mipmap.side_menu_background_active);
        mHotFragment = new HotFragment();
        myFragmentList.add(mHotFragment);
        mNiceFragment = new NiceFragment();
        myFragmentList.add(mNiceFragment);
        mPictureFragment = new PictureFragment();
        myFragmentList.add(mPictureFragment);
        mCrossFragment = new CrossFragment();
        myFragmentList.add(mCrossFragment);
        mNotesFragment = new NotesFragment();
        myFragmentList.add(mNotesFragment);
        mNearFragment = new NearFragment();
        myFragmentList.add(mNearFragment);
        mSlidingMenu = this.getSlidingMenu();
        //将leftview设置到slidingmenu
        this.setBehindContentView(mLeftView);
        ////设置阴影图片
        mSlidingMenu.setShadowDrawable(R.mipmap.drawer_shadow);
        //设置阴影图片的宽度
        mSlidingMenu.setShadowWidthRes(R.dimen.shadow_width);
        //设置划出时主页面显示的剩余宽度
        mSlidingMenu.setBehindOffsetRes(R.dimen.slidingmenu_offset);
        //滑动时的渐变程度
        mSlidingMenu.setFadeDegree(0.35f);
        //设置要使菜单滑动，触碰屏幕的范围
        mSlidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_MARGIN);
        //获取Fragment管理器
        mFragmentManager = MainActivity.this.getSupportFragmentManager();
        mFragmentTransaction = mFragmentManager.beginTransaction();
        createFargment(5);
        createFargment(1);
        //替换Fragment
        FragmentTransaction mFragmentTransaction = mFragmentManager
                .beginTransaction();
        mFragmentTransaction.replace(R.id.main, mHotFragment);
        mFragmentTransaction.commit();
    }
    // 设置右边的fragment加载的控件
    private void createFargment(int flag) {
        // 如果正在加载的fragment是传过来的 那么就不操作否则就去加载
        MainActivity.this.toggle();
        if(fragmentFlag!=flag){
            switch (flag){
                case 1:// 热门的Fragment
                   hotFragmentCallBack();
                    break;
                case 2:// 精华的Fragment
                   // niceFragmentCallBack();
                    break;
                case 3:// 有图有真相的Fragment
                   // pictureFragmentCallBack();
                    break;
                case 4:// 穿越的Fragment
                   // crossFragmentCallBack();
                    break;
                case 5:// 小纸条的Fragment
                   // notesfragmentCallBack();
                    break;
                case 6:// 附近的Fragment
                   // nearfragmentCallBack();
                    break;
            }
            if (fragmentFlag != 0) {
                mFragmentTransaction.remove(myFragmentList
                        .get(fragmentFlag - 1));
            }
            mFragmentTransaction = mFragmentManager.beginTransaction();
            mFragmentTransaction.replace(R.id.main,
                    myFragmentList.get(flag - 1));
            // 提交保存杠杆替换或者添加的fragment
            mFragmentTransaction.commit();
            fragmentFlag = flag;
        }

    }



    @Event(value ={ R.id.LoginThisApp,R.id.SettingBtn,R.id.LeftHot,R.id.LeftNice,R.id.LeftPicture,R.id.LeftScrip,R.id.LeftNear,R.id.LeftCross,R.id.LeftCheck},type = View.OnClickListener.class)
    private void OnClick(View v){
        int mID = v.getId();
        // MainActivity.this.toggle();
        switch (mID) {
            case R.id.LoginThisApp:
                if (Model.MYUSERINFO != null) {
                    // Intent intent = new Intent(MainActivity.this,
                    // UserInfoActivity.class);
                    // Bundle bund = new Bundle();
                    // bund.putSerializable("UserInfo", Model.MYUSERINFO);
                    // intent.putExtra("value", bund);
                    // startActivity(intent);
                } else {
                    // Intent intent = new Intent(MainActivity.this,
                    // LoginActivity.class);
                    // startActivity(intent);
                }
                break;
            case R.id.SettingBtn:
                Toast.makeText(MainActivity.this, "你好我是Xutils的IOC功能", Toast.LENGTH_SHORT).show();
                //Intent intent = new Intent(MainActivity.this, SettingActivity.class);
                // startActivity(intent);
                break;
            case R.id.LeftHot:
                createleftviewbg();
                mLeftHot.setBackgroundResource(R.mipmap.side_menu_background_active);
                createFargment(1);
                break;
            case R.id.LeftNice:
                createleftviewbg();
                mLeftNice.setBackgroundResource(R.mipmap.side_menu_background_active);
                createFargment(2);
                break;
            case R.id.LeftPicture:
                createleftviewbg();
                mLeftPicture.setBackgroundResource(R.mipmap.side_menu_background_active);
                createFargment(3);
                break;
            case R.id.LeftCross:
                createleftviewbg();
                mLeftCross.setBackgroundResource(R.mipmap.side_menu_background_active);
                createFargment(4);
                break;
            case R.id.LeftScrip:
                createleftviewbg();
                mLeftScrip.setBackgroundResource(R.mipmap.side_menu_background_active);
                createFargment(5);
                break;
            case R.id.LeftNear:
                createleftviewbg();
                mLeftNear.setBackgroundResource(R.mipmap.side_menu_background_active);
                createFargment(6);
                break;
            case R.id.LeftCheck:
                createleftviewbg();
                mLeftCheck.setBackgroundResource(R.mipmap.side_menu_background_active);
                // 这里是跳转到审核糗事的activity中
                // Intent intent1 = new Intent(MainActivity.this, AuditActivity.class);
                //startActivity(intent1);
                break;
            default:
                break;
        }
    }

    // 设置leftview控件的默认背景色
    private void createleftviewbg() {
        mLeftHot.setBackgroundResource(R.drawable.leftview_list_bg);
        mLeftNice.setBackgroundResource(R.drawable.leftview_list_bg);
        mLeftPicture.setBackgroundResource(R.drawable.leftview_list_bg);
        mLeftScrip.setBackgroundResource(R.drawable.leftview_list_bg);
        mLeftNear.setBackgroundResource(R.drawable.leftview_list_bg);
        mLeftCross.setBackgroundResource(R.drawable.leftview_list_bg);
        mLeftCheck.setBackgroundResource(R.drawable.leftview_list_bg);
    }






    // 从hotfragment里面回调回来的事件监听设置方法
    private void hotFragmentCallBack() {
        mHotFragment.setCallBack(new MyHotFragmentCallBack());
    }

    private class MyHotFragmentCallBack implements HotFragment.HotFragmentCallBack {
        @Override
        public void callback(int flag) {
            switch (flag) {
                case R.id.Menu:
                    MainActivity.this.toggle();
                    break;
                case R.id.SendAshamed:
                   /* if (Model.MYUSERINFO != null) { Intent intent = new Intent(MainActivity.this, UploadActivity.class); startActivity(intent); } else { Intent intent = new Intent(MainActivity.this, LoginActivity.class); startActivity(intent); } */
                    break;
                default:
                    break;
            }
        }
    }

   @Override
    protected void onRestart() {
        super.onRestart();
        if (Model.MYUSERINFO != null) {
            myUserName.setText(Model.MYUSERINFO.getUname());
        } else {
            myUserName.setText("登录糗百");
        }
        //createFargment(fragmentFlag);
    }

    @Override
    protected void onStart() {
        if (Model.MYUSERINFO != null) {
            myUserName.setText(Model.MYUSERINFO.getUname());
            KFIMInterfaces.setVCardField(MainActivity.this, "NICKNAME",
                    Model.MYUSERINFO.getUname());
        } else {
            myUserName.setText("登录糗百");
        }
        super.onStart();
    }

    private void login() {
        //检查 用户名/密码 是否已经设置,如果已经设置，则登录
       if (!"".equals(mSettingsMgr.getUsername())
                && !"".equals(mSettingsMgr.getPassword()))
            KFIMInterfaces.login(this, mSettingsMgr.getUsername(),
                   mSettingsMgr.getPassword());
        // 设置个人资料"NICKNAME"
    }

}

   通过xUtils框架我们能省去一堆FindViewById()的代码，更有利于代码的观看，在这个控件的初始化上，我也是遇到了一些问题，这个问题在我另外一篇中讲的更加清楚。如果你不使用框架的话想要实例这些控件要记住先加载View视图，然后通过View.findViewByid()因为这些控件是在View中声明的并不是你setContent中的控件。
   其次在InitView()方法中，我们有以下代码
    mSlidingMenu = this.getSlidingMenu();
    //将leftview设置到slidingmenu
    this.setBehindContentView(mLeftView);
    ////设置阴影图片
    mSlidingMenu.setShadowDrawable(R.mipmap.drawer_shadow);
    //设置阴影图片的宽度
    mSlidingMenu.setShadowWidthRes(R.dimen.shadow_width);
    //设置划出时主页面显示的剩余宽度
    mSlidingMenu.setBehindOffsetRes(R.dimen.slidingmenu_offset);
    //滑动时的渐变程度
    mSlidingMenu.setFadeDegree(0.35f);
    //设置要使菜单滑动，触碰屏幕的范围
    mSlidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_MARGIN);
 其中this.setBehindContentView(mLeftView);是必不可少的，这条代码是将视图加载到侧滑栏中，如果不设置将会报错。其他的就是设置侧滑栏的属性，用途都在注释中，如果你对更多的用法感兴趣，可以寻求度娘帮助。
 Fragment是通过接口进行回调的

 // 从hotfragment里面回调回来的事件监听设置方法
    private void hotFragmentCallBack() {
        mHotFragment.setCallBack(new MyHotFragmentCallBack());
    }

    private class MyHotFragmentCallBack implements HotFragment.HotFragmentCallBack {
        @Override
        public void callback(int flag) {
            switch (flag) {
                case R.id.Menu:
                //显示关闭侧滑栏
                    MainActivity.this.toggle();
                    break;
                case R.id.SendAshamed:
                   /* if (Model.MYUSERINFO != null) { Intent intent = new Intent(MainActivity.this, UploadActivity.class); startActivity(intent); } else { Intent intent = new Intent(MainActivity.this, LoginActivity.class); startActivity(intent); } */
                    break;
                default:
                    break;
            }
        }
    }

   回调的作用，当我们进入了Fragment的时候，其实已经离开了当前的Activity而我们可以通过接口的方式将Activity的方法通过接口的方式添加到Fragment，这样我们就可以在Fragment中调用Activity中的方法了。
   简点的讲述了MainActivity已经SlidingMenu的使用以及回调，书写不好请各位多多包涵，谢谢大家赏脸。