Android小程序-Walker注册页面（五）

目标效果：

 

在上一个的导航基础上，导航过后进入了主页面，手指向右滑动或者点击左上角的菜单图标，可以显示菜单侧栏，点击某一项可以吐司信息。

素材包：http://pan.baidu.com/s/1i5nRUfV  项目压缩包：http://pan.baidu.com/s/1dEGQfE5

1.素材包中有个SlideMenu.java页面，新建包并保存该包中。

2.新建leftmenu.xml页面，用于存储侧滑菜单的控件信息。

leftmenu.xml页面：

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

    <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/head"
        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:listSelector="#00000000"
	    android:divider="@color/whitesmoke"
	    android:dividerHeight="1dp"/>
</RelativeLayout>

3.activity_main,xml页面包含侧滑菜单的控件。

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" >
 <!-- padding...代表该控件距离空间中内容的边距离，是内边距 -->

    <com.example.walkersimulate.util.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>
    </com.example.walkersimulate.util.SlideMenu>

</RelativeLayout>

4.string.xml页面定义数组保存菜单中的列表信息。

string.xml页面：

<?xml version="1.0" encoding="utf-8"?>
<!-- 设置Text的页面 -->
<resources>

    <string name="app_name">登录</string>
    <string name="action_settings">Settings</string>
    <string name="hello_world">Hello world!</string>
    <string name="tvForgetPass"><u>忘记密码</u></string>
    <string name="etName">请输入用户名</string>
    <string name="etPass">请输入密码</string>
    <string name="btLogin">登录</string>
    <string name="btRegister">注册</string>
    <string name="title_activity_register">RegisterActivity</string>
    <string name="title_activity_login">LoginActivity</string>
    <string name="etAccount">账号</string>
    <string name="etNickname">昵称</string>
    <string name="etAccountPass">密码</string>
    <string name="etMotto">座右铭（不多于8个字）</string>
    <string name="etEmail">邮箱（**@**.com）</string>
    <string name="etCity">城市</string>
    <string name="etFoot">步长（cm）</string>
    <string name="etTall">身高（cm）</string>
    <string name="etWeight">体重（kg）</string>
    <string name="etExercise">希望运动量（步/日）</string>
    <string name="tvShow">终于填完资料了，马上点击注册吧！</string>
    <string name="register">注册</string>
    <string name="title_activity_welcome">WelcomeActivity</string>
    <string name="title_activity_guid">GuidActivity</string>
    <string name="title_activity_giude">GiudeActivity</string>

    <string-array name="menulist">
        <item>用户登录</item>
        <item>运动测试</item>
        <item>个人信息</item>
        <item>行程记录</item>
        <item>天气查询</item>
        <item>健康栏目</item>
        <item>软件设置</item>
        
    </string-array>
</resources>

5.新建Item.java页面，实例ListView中的自定义项目。

Item.java页面：

package com.example.login;

public class Item {
	private int id;
	private String name;
	
	public Item(int id,String name){
		this.id=id;
		this.name=name;
	}

	public int getId() {
		return id;
	}

	public void setId(int id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}
	
}

6.新建menulist_itme.xml页面，用于存储侧滑菜单的自定义控件。

menulist_item.xml页面：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    
    <ImageView
        android:id="@+id/ivImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:src="@drawable/icons_menu_login" />

	<TextView
	    android:id="@+id/tvName"
	    android:layout_marginLeft="5dp"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:layout_gravity="center_vertical"
	    android:textColor="#ffffff"
	    android:text="用户登录" />
    
</LinearLayout>

7.新建itemAdapter.java页面，用于配置控件和数据源。

itemAdapter.java页面：

package com.example.login;

import java.util.List;

import com.example.login.R;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class itemAdapter extends ArrayAdapter<Item> {    // 适配器，泛型表示想要适配的数据类型

	private int resourceId;

	public itemAdapter(Context context, int textViewResourceId,
			List<Item> objects) {                         // 第一个参数是上下文环境，第二个参数是每一项的子布局，第三个参数是数据
		super(context, textViewResourceId, objects);
		resourceId = textViewResourceId;                   //获取子布局
	}

	@Override         //getView方法在每个子项被滚动到屏幕内的时候都会被调用，每次都将布局重新加载一边
	public View getView(int position, View convertView, ViewGroup parent) {//第一个参数表示位置，第二个参数表示缓存布局，第三个表示绑定的view对象
		View view;
		ViewHolder viewHolder;                  //实例ViewHolder，当程序第一次运行，保存获取到的控件，提高效率
		if(convertView==null){  
			viewHolder=new ViewHolder();
			view = LayoutInflater.from(getContext()).inflate(//convertView为空代表布局没有被加载过，即getView方法没有被调用过，需要创建
					resourceId, null);          // 得到子布局，非固定的，和子布局id有关
			viewHolder.ivImage = (ImageView) view.findViewById(R.id.ivImage);//获取控件,只需要调用一遍，调用过后保存在ViewHolder中
			viewHolder.tvName = (TextView) view.findViewById(R.id.tvName);   //获取控件
			view.setTag(viewHolder);
		}else{
			view=convertView;           //convertView不为空代表布局被加载过，只需要将convertView的值取出即可
			viewHolder=(ViewHolder) view.getTag();
		}
		
		Item item = getItem(position);//实例指定位置的水果
		
		viewHolder.ivImage.setImageResource(item.getId());//获得指定位置水果的id
		viewHolder.tvName.setText(item.getName());        //获得指定位置水果的名字
		return view;

	}
} 
class ViewHolder{      //当布局加载过后，保存获取到的控件信息。
	ImageView ivImage;
	TextView tvName;
}

8.编写MainActivity.java页面，处理滑动事件。

MainActivity.java页面：

package com.example.login;

import java.util.ArrayList;
import java.util.List;

import com.example.walkersimulate.util.SlideMenu;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.Toast;

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(icons[i], introductons[i]));
		}
		ListView lvMenuList = (ListView) findViewById(R.id.lvMenuList);
		/*创建适配器*/
		itemAdapter adapter = new itemAdapter(this, R.layout.menulist_item,
				items);
		/*配置适配器*/
		lvMenuList.setAdapter(adapter);
		/*列表某一项的点击事件*/
		lvMenuList.setOnItemClickListener(new OnItemClickListener() {

			@Override
			public void onItemClick(AdapterView<?> adapterView, View view,
					int position, long id) {
				Toast.makeText(MainActivity.this,
						"你点击了" + introductons[position], Toast.LENGTH_SHORT)
						.show();

			}
		});
	}
}

9.values中新建colors.xml页面，存储各种颜色。

colors.xml页面：

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <color name="screen_background">#333</color>
    <color name="display_background">#000</color>
    <color name="white">#ffffff</color>
 <!-- 白色 -->
    <color name="ivory">#fffff0</color>
 <!-- 象牙色 -->
    <color name="lightyellow">#ffffe0</color>
 <!-- 亮黄色 -->
    <color name="yellow">#ffff00</color>
 <!-- 黄色 -->
    <color name="snow">#fffafa</color>
 <!-- 雪白色 -->
    <color name="floralwhite">#fffaf0</color>
 <!-- 花白色 -->
    <color name="lemonchiffon">#fffacd</color>
 <!-- 柠檬绸色 -->
    <color name="cornsilk">#fff8dc</color>
 <!-- 米绸色 -->
    <color name="seaShell">#fff5ee</color>
 <!-- 海贝色 -->
    <color name="lavenderblush">#fff0f5</color>
 <!-- 淡紫红 -->
    <color name="papayawhip">#ffefd5</color>
 <!-- 番木色 -->
    <color name="blanchedalmond">#ffebcd</color>
 <!-- 白杏色 -->
    <color name="mistyrose">#ffe4e1</color>
 <!-- 浅玫瑰色 -->
    <color name="bisque">#ffe4c4</color>
 <!-- 桔黄色 -->
    <color name="moccasin">#ffe4b5</color>
 <!-- 鹿皮色 -->
    <color name="navajowhite">#ffdead</color>
 <!-- 纳瓦白 -->
    <color name="peachpuff">#ffdab9</color>
 <!-- 桃色 -->
    <color name="gold">#ffd700</color>
 <!-- 金色 -->
    <color name="pink">#ffc0cb</color>
 <!-- 粉红色 -->
    <color name="lightpink">#ffb6c1</color>
 <!-- 亮粉红色 -->
    <color name="orange">#ffa500</color>
 <!-- 橙色 -->
    <color name="lightsalmon">#ffa07a</color>
 <!-- 亮肉色 -->
    <color name="darkorange">#ff8c00</color>
 <!-- 暗桔黄色 -->
    <color name="coral">#ff7f50</color>
 <!-- 珊瑚色 -->
    <color name="hotpink">#ff69b4</color>
 <!-- 热粉红色 -->
    <color name="tomato">#ff6347</color>
 <!-- 西红柿色 -->
    <color name="orangered">#ff4500</color>
 <!-- 红橙色 -->
    <color name="deeppink">#ff1493</color>
 <!-- 深粉红色 -->
    <color name="fuchsia">#ff00ff</color>
 <!-- 紫红色 -->
    <color name="magenta">#ff00ff</color>
 <!-- 红紫色 -->
    <color name="red">#ff0000</color>
 <!-- 红色 -->
    <color name="oldlace">#fdf5e6</color>
 <!-- 老花色 -->
    <color name="lightgoldenrodyellow">#fafad2</color>
 <!-- 亮金黄色 -->
    <color name="linen">#faf0e6</color>
 <!-- 亚麻色 -->
    <color name="antiquewhite">#faebd7</color>
 <!-- 古董白 -->
    <color name="salmon">#fa8072</color>
 <!-- 鲜肉色 -->
    <color name="ghostwhite">#f8f8ff</color>
 <!-- 幽灵白 -->
    <color name="mintcream">#f5fffa</color>
 <!-- 薄荷色 -->
    <color name="whitesmoke">#f5f5f5</color>
 <!-- 烟白色 -->
    <color name="beige">#f5f5dc</color>
 <!-- 米色 -->
    <color name="wheat">#f5deb3</color>
 <!-- 浅黄色 -->
    <color name="sandybrown">#f4a460</color>
 <!-- 沙褐色 -->
    <color name="azure">#f0ffff</color>
 <!-- 天蓝色 -->
    <color name="honeydew">#f0fff0</color>
 <!-- 蜜色 -->
    <color name="aliceblue">#f0f8ff</color>
 <!-- 艾利斯兰 -->
    <color name="khaki">#f0e68c</color>
 <!-- 黄褐色 -->
    <color name="lightcoral">#f08080</color>
 <!-- 亮珊瑚色 -->
    <color name="palegoldenrod">#eee8aa</color>
 <!-- 苍麒麟色 -->
    <color name="violet">#ee82ee</color>
 <!-- 紫罗兰色 -->
    <color name="darksalmon">#e9967a</color>
 <!-- 暗肉色 -->
    <color name="lavender">#e6e6fa</color>
 <!-- 淡紫色 -->
    <color name="lightcyan">#e0ffff</color>
 <!-- 亮青色 -->
    <color name="burlywood">#deb887</color>
 <!-- 实木色 -->
    <color name="plum">#dda0dd</color>
 <!-- 洋李色 -->
    <color name="gainsboro">#dcdcdc</color>
 <!-- 淡灰色 -->
    <color name="crimson">#dc143c</color>
 <!-- 暗深红色 -->
    <color name="palevioletred">#db7093</color>
 <!-- 苍紫罗兰色 -->
    <color name="goldenrod">#daa520</color>
 <!-- 金麒麟色 -->
    <color name="orchid">#da70d6</color>
 <!-- 淡紫色 -->
    <color name="thistle">#d8bfd8</color>
 <!-- 蓟色 -->
    <color name="lightgray">#d3d3d3</color>
 <!-- 亮灰色 -->
    <color name="lightgrey">#d3d3d3</color>
 <!-- 亮灰色 -->
    <color name="tan">#d2b48c</color>
 <!-- 茶色 -->
    <color name="chocolate">#d2691e</color>
 <!-- 巧可力色 -->
    <color name="peru">#cd853f</color>
 <!-- 秘鲁色 -->
    <color name="indianred">#cd5c5c</color>
 <!-- 印第安红 -->
    <color name="mediumvioletred">#c71585</color>
 <!-- 中紫罗兰色 -->
    <color name="silver">#c0c0c0</color>
 <!-- 银色 -->
    <color name="darkkhaki">#bdb76b</color>
 <!-- 暗黄褐色 -->
    <color name="rosybrown">#bc8f8f</color>
 <!-- 褐玫瑰红 -->
    <color name="mediumorchid">#ba55d3</color>
 <!-- 中粉紫色 -->
    <color name="darkgoldenrod">#b8860b</color>
 <!-- 暗金黄色 -->
    <color name="firebrick">#b22222</color>
 <!-- 火砖色 -->
    <color name="powderblue">#b0e0e6</color>
 <!-- 粉蓝色 -->
    <color name="lightsteelblue">#b0c4de</color>
 <!-- 亮钢兰色 -->
    <color name="paleturquoise">#afeeee</color>
 <!-- 苍宝石绿 -->
    <color name="greenyellow">#adff2f</color>
 <!-- 黄绿色 -->
    <color name="lightblue">#add8e6</color>
 <!-- 亮蓝色 -->
    <color name="darkgray">#a9a9a9</color>
 <!-- 暗灰色 -->
    <color name="darkgrey">#a9a9a9</color>
 <!-- 暗灰色 -->
    <color name="brown">#a52a2a</color>
 <!-- 褐色 -->
    <color name="sienna">#a0522d</color>
 <!-- 赭色 -->
    <color name="darkorchid">#9932cc</color>
 <!-- 暗紫色 -->
    <color name="palegreen">#98fb98</color>
 <!-- 苍绿色 -->
    <color name="darkviolet">#9400d3</color>
 <!-- 暗紫罗兰色 -->
    <color name="mediumpurple">#9370db</color>
 <!-- 中紫色 -->
    <color name="lightgreen">#90ee90</color>
 <!-- 亮绿色 -->
    <color name="darkseagreen">#8fbc8f</color>
 <!-- 暗海兰色 -->
    <color name="saddlebrown">#8b4513</color>
 <!-- 重褐色 -->
    <color name="darkmagenta">#8b008b</color>
 <!-- 暗洋红 -->
    <color name="darkred">#8b0000</color>
 <!-- 暗红色 -->
    <color name="blueviolet">#8a2be2</color>
 <!-- 紫罗兰蓝色 -->
    <color name="lightskyblue">#87cefa</color>
 <!-- 亮天蓝色 -->
    <color name="skyblue">#87ceeb</color>
 <!-- 天蓝色 -->
    <color name="gray">#808080</color>
 <!-- 灰色 -->
    <color name="grey">#808080</color>
 <!-- 灰色 -->
    <color name="olive">#808000</color>
 <!-- 橄榄色 -->
    <color name="purple">#800080</color>
 <!-- 紫色 -->
    <color name="maroon">#800000</color>
 <!-- 粟色 -->
    <color name="aquamarine">#7fffd4</color>
 <!-- 碧绿色 -->
    <color name="chartreuse">#7fff00</color>
 <!-- 黄绿色 -->
    <color name="lawngreen">#7cfc00</color>
 <!-- 草绿色 -->
    <color name="mediumslateblue">#7b68ee</color>
 <!-- 中暗蓝色 -->
    <color name="lightslategray">#778899</color>
 <!-- 亮蓝灰 -->
    <color name="lightslategrey">#778899</color>
 <!-- 亮蓝灰 -->
    <color name="slategray">#708090</color>
 <!-- 灰石色 -->
    <color name="slategrey">#708090</color>
 <!-- 灰石色 -->
    <color name="olivedrab">#6b8e23</color>
 <!-- 深绿褐色 -->
    <color name="slateblue">#6a5acd</color>
 <!-- 石蓝色 -->
    <color name="dimgray">#696969</color>
 <!-- 暗灰色 -->
    <color name="dimgrey">#696969</color>
 <!-- 暗灰色 -->
    <color name="mediumaquamarine">#66cdaa</color>
 <!-- 中绿色 -->
    <color name="cornflowerblue">#6495ed</color>
 <!-- 菊兰色 -->
    <color name="cadetblue">#5f9ea0</color>
 <!-- 军兰色 -->
    <color name="darkolivegreen">#556b2f</color>
 <!-- 暗橄榄绿 -->
    <color name="indigo">#4b0082</color>
 <!-- 靛青色 -->
    <color name="mediumturquoise">#48d1cc</color>
 <!-- 中绿宝石 -->
    <color name="darkslateblue">#483d8b</color>
 <!-- 暗灰蓝色 -->
    <color name="steelblue">#4682b4</color>
 <!-- 钢兰色 -->
    <color name="royalblue">#4169e1</color>
 <!-- 皇家蓝 -->
    <color name="turquoise">#40e0d0</color>
 <!-- 青绿色 -->
    <color name="mediumseagreen">#3cb371</color>
 <!-- 中海蓝 -->
    <color name="limegreen">#32cd32</color>
 <!-- 橙绿色 -->
    <color name="darkslategray">#2f4f4f</color>
 <!-- 暗瓦灰色 -->
    <color name="darkslategrey">#2f4f4f</color>
 <!-- 暗瓦灰色 -->
    <color name="seagreen">#2e8b57</color>
 <!-- 海绿色 -->
    <color name="forestgreen">#228b22</color>
 <!-- 森林绿 -->
    <color name="lightseagreen">#20b2aa</color>
 <!-- 亮海蓝色 -->
    <color name="dodgerblue">#1e90ff</color>
 <!-- 闪兰色 -->
    <color name="midnightblue">#191970</color>
 <!-- 中灰兰色 -->
    <color name="aqua">#00ffff</color>
 <!-- 浅绿色 -->
    <color name="cyan">#00ffff</color>
 <!-- 青色 -->
    <color name="springgreen">#00ff7f</color>
 <!-- 春绿色 -->
    <color name="lime">#00ff00</color>
 <!-- 酸橙色 -->
    <color name="mediumspringgreen">#00fa9a</color>
 <!-- 中春绿色 -->
    <color name="darkturquoise">#00ced1</color>
 <!-- 暗宝石绿 -->
    <color name="deepskyblue">#00bfff</color>
 <!-- 深天蓝色 -->
    <color name="darkcyan">#008b8b</color>
 <!-- 暗青色 -->
    <color name="teal">#008080</color>
 <!-- 水鸭色 -->
    <color name="green">#008000</color>
 <!-- 绿色 -->
    <color name="darkgreen">#006400</color>
 <!-- 暗绿色 -->
    <color name="blue">#0000ff</color>
 <!-- 蓝色 -->
    <color name="mediumblue">#0000cd</color>
 <!-- 中兰色 -->
    <color name="darkblue">#00008b</color>
 <!-- 暗蓝色 -->
    <color name="navy">#000080</color>
 <!-- 海军色 -->
    <color name="black">#000000</color>
 <!-- 黑色 -->
    <color name="transparent">#00000000</color>
 <!-- 透明色 -->
    <color name="reveal_color">#1b000000</color>
    <color name="graywhite">#F7F9F8</color>
    <color name="gray_a">#F7F7F7</color>
    <color name="bantransparent">#05000000</color>
 <!-- 半透明色 -->

</resources>

10.程序运行就可以显示滑动菜单的功能了。