教你用DrawLayout 实现Android 侧滑菜单

现在的APP越来越注重用户体验，百度视频客户端有一个特效还是挺吸引人的，在主界面手指向右滑动，就可以将菜单展示出来，而主界面会被隐藏大部分，但是仍有左侧的一小部分同菜单一起展示。类似的还有天天动听，人人的客户端。

这个侧滑菜单的实现网上也有很多方法，比如最常用的是开源的SlidingMenu .还有一种实现方式是在一个Activity的布局中分两部分，一个是菜单(menu)的布局，一个是内容(content)的布局。两个布局横向排列，菜单布局在左，内容布局在右。初始化的时候将菜单布局向左偏移，以至于能够完全隐藏，这样内容布局就会完全显示在Activity中。然后通过监听手指滑动事件，来改变菜单布局的左偏移距离，从而控制菜单布局的显示和隐藏。


但是这两种方法都相对比较繁琐，今天给大家介绍一种更为简单的方法。就是直接采用DrawLayout。有关DrawLayout更详细的介绍可以参考API文档：http://developer.android.com/reference/android/support/v4/widget/DrawerLayout.html 。

首先New一个Android工程，依次实现几个布局。先来看两个子布局。

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/drawer_layout"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >         android:id="@+id/listview"       android:layout_width="match_parent"       android:layout_height="match_parent"       android:cacheColorHint="#00000000"       android:divider="@android:color/transparent"/>      android:id="@+id/drawer_layout"      android:layout_width="match_parent"      android:layout_height="match_parent"      android:orientation="vertical" >      android:id="@+id/scrollView1"      android:layout_width="match_parent"      android:layout_height="wrap_content" >           android:id="@+id/textView1"       android:layout_width="wrap_content"       android:layout_height="wrap_content"       android:text="每日一文"       android:textAppearance="?android:attr/textAppearanceLarge"><pre name="code" class="java"></LinearLayout>

主界面布局，注释掉的是右边的侧滑，现在实现的是左边的侧滑。

    

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"   android:id="@+id/drawer_layout"   android:layout_width="fill_parent"   android:layout_height="fill_parent" >        android:id="@+id/fragment_layout"        android:layout_width="fill_parent"        android:layout_height="fill_parent" >           android:id="@+id/menu_layout_left"        android:layout_width="150dp"        android:layout_height="match_parent"        android:layout_gravity="left"        android:background="#FFFFFF" >        android:id="@+id/menu_listView_l"        android:layout_width="match_parent"        android:layout_height="match_parent" ></LinearLayout>

然后创建两个类继承Fragment，把两个子布局塞进去

public class FirstFragment extends Fragment {   @Override    public ViewonCreateView(LayoutInflater inflater, ViewGroup container,          BundlesavedInstanceState) {       // TODOAuto-generated method stub       returninflater.inflate(R.layout.first, null);    }}

再来看看主类：

public class MainActivity extends FragmentActivity {     publicstatic final String[] TITLES = {"first", "second"};    privateDrawerLayout mDrawerLayout;    privateRelativeLayout mLeftLayout;    privateListView mLeftListView;      @Override    protectedvoid onCreate(Bundle savedInstanceState) {      super.onCreate(savedInstanceState);      setContentView(R.layout.activity_main);      findViewById();      mLeftListView.setAdapter(new ArrayAdapter(this,            android.R.layout.simple_expandable_list_item_1, TITLES));       //监听菜单      mLeftListView.setOnItemClickListener(newDrawerItemClickListenerLeft());    }    private voidfindViewById() {       mDrawerLayout = (DrawerLayout)findViewById(R.id.drawer_layout);       mLeftLayout= (RelativeLayout) findViewById(R.id.menu_layout_left);       mLeftListView = (ListView)findViewById(R.id.menu_listView_l);    }    public class DrawerItemClickListenerRight implements OnItemClickListener{        @Override        public void onItemClick(AdapterView<?> parent, View view, int position,                long id) {            // TODO Auto-generated method stub            FragmentTransaction ft = getSupportFragmentManager().beginTransaction();            Fragment fragment = null;                        //according to the click row number decide to start which fragment;            switch (position) {            case 0:                fragment = new FirstFragment();                break;            case 1:                fragment = new SecondFragment();                break;            default:                break;            }            ft.replace(R.id.fragment_layout, fragment);            ft.commit();            mDrawerLayout.closeDrawer(mRightLayout);            }        } }