本次主要是对Walker的侧滑菜单的实现
通过点击就可以打开侧滑菜单,再点一下就会收起。
下面是界面效果图:
实现过程
1、引入自定义的SlideMenu 组件,在项目下新建view 子包,拷入自定义的SlideMenu 组件。
2、修改自动生成的 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" >
<!-- 侧滑菜单 -->
<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>
</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>
标题栏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" >
</ImageView>
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="15.0dip"
android:src="@drawable/switch_map"/>
</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>
下面是布局效果:
3、修改MainActivity
public class MainActivity extends Activity {
private SubMenu 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(newOnClickListener(){
@Override
public voidonClick(Viewview){
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=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();
}
});
}
}
这样就可以实现侧滑菜单了。