实战 Walker 之侧滑菜单的实现分析



一、界面效果图

点击 展开侧滑菜单，再次点击关闭侧滑菜单。
二、实现过程
1、引入自定义的SlideMenu 组件，在项目下新建view 子包，拷入自定义的SlideMenu 组件。 （分析 SlideMenu 类的实现，阅读代码，加入详细的注释）

 2、修改自动生成的 activity_main.xml 文件

<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> 
<cn.edu.bztc.walkersimulate.view.SlideMenu
    android:id="@+id/slideMenu"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
 <!-- 侧滑菜单 -->

    <includelayout
        layout=""
        leftmenu="" />
 <!-- 主界面 -->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <includelayout
            layout=""
            main_layout_titlebar="" />

        <includelayout
            layout=""
            main_layout_content="" />
    </LinearLayout>

</cn.edu.bztc.walkersimulate.view.SlideMenu><RelativeLayout>

</RelativeLayout>

其中leftmenu.xml 布局文件，主要代码如下：

<?xml version="1.0"encoding="utf-8"?>
<RelativeLayoutxmlns:android xmlns:app="http://schemas.android.com/apk/res/cn.edu.bztc.walkersimulate"
    android:layout_width="200dp"
    android:layout_height="match_parent"
    android=""
    apk=""
    res=""
    schemas.android.com=""
    android:background="@drawable/leftmenu_bg"
    http:="" >

    <com.makeramen.roundedimageview.RoundedImageView
        android:id="@+id/rivUserPhoto"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:src="@drawable/test_photo"
        app:riv_oval="true" />

    <TextView
        android:id="@+id/tvMotto"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/rivUserPhoto"
        android:layout_marginBottom="24dp"
        android:layout_marginLeft="5dp"
        android:layout_toRightOf="@+id/rivUserPhoto"
        android:text="奔跑无止境"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="@color/white" />

    <ListView
        android:id="@+id/lvMenuList"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/tvMotto"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:divider="@color/whitesmoke"
        android:dividerHeight="1dp"
        android:listSelector="#00000000" >
    </ListView>

    <RelativeLayout>
    </RelativeLayout>

标题栏main_layout_titlebar 布局文件主要代码如下：

<?xml version="1.0"encoding="utf-8"?>
<RelativeLayoutxmlns:android
    android:layout_width="fill_parent"
    android:layout_height="45.0dip"
    android=""
    apk=""
    res=""
    schemas.android.com=""
    android:background="@drawable/titlebar_bg"
    android:gravity="center_vertical"
    http:="" >

    <ImageView
        android:id="@+id/switch_slidemenu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="3.0dip"
        android:gravity="center"
        android:src="@drawable/switch_silidemenu" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:text="Walker"
        android:textColor="@color/white"
        android:textSize="22sp" />

    <ImageView
        android:id="@+id/switch_map"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="15.0dip"
		android:src="@drawable/switch_map" />

    <RelativeLayout>
    </RelativeLayout>

内容区域main_layout_content 布局文件主要代码如下：

<RelativeLayoutxmlns:android
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android=""
        apk=""
        res=""
        schemas.android.com=""
        android:background="@drawable/main_content_bg"
        http:="" >

        <TextView
            android:id="@+id/tvCity"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:text="滨州市"
            android:textAppearance="?android:attr/textAppearanceLarge" />

        <TextView
            android:id="@+id/tvTemperature"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignRight="@+id/tvCity"
            android:layout_below="@+id/tvCity"
            android:layout_marginRight="26dp"
            android:layout_marginTop="40dp"
            android:text="temperature"
            android:textAppearance="?android:attr/textAppearanceMedium" />

        <TextView
            android:id="@+id/tvDay"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/tvTemperature"
            android:layout_below="@+id/tvTemperature"
            android:layout_marginTop="20dp"
            android:text="星期日"
            android:textAppearance="?android:attr/textAppearanceMedium" />

        <TextView
            android:id="@+id/tvWeather"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/tvDay"
            android:layout_below="@+id/tvDay"
            android:layout_marginTop="24dp"
          
            android:text="晴"
            android:textAppearance="?android:attr/textAppearanceMedium" />

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignTop="@+id/tvTemperature"
            android:layout_marginLeft="24dp"
            android:layout_toRightOf="@+id/tvTemperature"
            android:background="#00000000"
            android:src="@drawable/monkey" />

        <RelativeLayout>
        </RelativeLayout>

布局效果如下图所示:

3、修改MainActivity

public class MainActivity extendsActivity{
	privateSlideMenu slideMenu; privateImageViewivSwitchSlideMenu;
	@Override protected void onCreate(Bundle savedInstanceState){
		super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_main);

      initMenuList();
slideMenu=(SlideMenu)findViewById(R.id.slideMenu);
ivSwitchSlideMenu=(ImageView)findViewById(R.id.switch_slidemenu);
ivSwitchSlideMenu.setOnClickListener(newOnClickListener(){ 
	@Override 
	public voidonClick(Viewview){ 
		if(slideMenu.isMainScreenShowing()){
			slideMenu.openMenu(); }else{ slideMenu.closeMenu(); 
			} } });
}
privatevoid initMenuList(){
	int[]icons={R.drawable.icons_menu_login, R.drawable.icons_menu_sport,R.drawable.icons_menu_inform, R.drawable.icons_menu_history,R.drawable.icons_menu_weather, R.drawable.icons_menu_health,R.drawable.icons_menu_setting }; finalString[]introductons =getResources().getStringArray(R.array.menulist);
	List<Item> items=newArrayList<Item>();
	for(inti=0;i<icons.length;i++){
		items.add(new Item(introductons[i],icons[i]));
		}
	ListViewlvMenuList=(ListView)findViewById(R.id.lvMenuList); 
	ItemAdapteritemAdapter=newItemAdapter(this, R.layout.menulist_item, items); 
	lvMenuList.setAdapter(itemAdapter); 
	lvMenuList.setOnItemClickListener(newOnItemClickListener(){
		@Override 
		public voidonItemClick(AdapterView<?>adapterView,Viewview,int position, long id){
			Toast.makeText(MainActivity.this," 你 点 击 了 "+introductons[position], Toast.LENGTH_LONG).show(); 
			} });
}
}