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

引入自定义的SlideMenu 组件，在项目下新建view 子包，拷入自定义的SlideMenu 组件，修改自动生成的activity_main.xml 文件，代码如下：

<RelativeLayout xmlns: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" >

<!-- 侧滑菜单 -->

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

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

<include layout="@layout/main_layout_titlebar" />

<include layout="@layout/main_layout_content" />
</LinearLayout>
</cn.edu.bztc.walkersimulate.view.SlideMenu>

</RelativeLayout>

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

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

<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>

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

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

<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>

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

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

<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" />

布局效果如下图所示：

public class MainActivity extends Activity {

private SlideMenu slideMenu;
private ImageView ivSwitchSlideMenu;

@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(new OnClickListener() {
@Override
public void onClick(View view) {
if (slideMenu.isMainScreenShowing()) {
slideMenu.openMenu();
} else {
slideMenu.closeMenu();
}
}
});
}

private void 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 };
final String[] introductons = getResources().getStringArray(
R.array.menulist);
List<Item> items = new ArrayList<Item>();
for (int i = 0; i < icons.length; i++) {
items.add(new Item(introductons[i], icons[i]));
}
ListView lvMenuList = (ListView) findViewById(R.id.lvMenuList);
ItemAdapter itemAdapter = new ItemAdapter(this, R.layout.menulist_item,
items);
lvMenuList.setAdapter(itemAdapter);
lvMenuList.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view,
int position, long id) {
Toast.makeText(MainActivity.this,
" 你点击了" + introductons[position], Toast.LENGTH_LONG)
.show();
}
});
}
}

最后的界面：