首先我在这里拿出一张图片来说一下这篇博客要说的内容。
这个功能也很常见,就是当你用手机左右滑动屏幕两端,会出现另外一个页面,一般情况下,这个页面都会放置自己的个人信息。
那么,这个功能该如何实现呢?
首先,我们要知道使用了Material Design中的哪几个控件。这里我们要说下DrawerLayout布局,这个布局里面可以放置两个直接控件。
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
<com.baidu.mapapi.map.MapView
android:id="@+id/bmapView"
android:layout_below="@id/toolbar"
android:layout_width="match_parent"
android:layout_height="550dp"
/>
</RelativeLayout>
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="@menu/nav_menu"
app:headerLayout="@layout/nav_header"/>
</android.support.v4.widget.DrawerLayout>
这里,我们要好好说下是如何设置这个布局的。我们首先是在DrawerLayout布局里面放置了RelativeLayout子布局和NavigationView控件,其中Navigation控件就是我们左右滑动时出现的另一个页面。然后在RelativeLayout布局里面,放置了Toolbar控件和百度地图的MapView控件。
不过另外一个页面可不会平白无故的出现内容的,我们可以观察到:
app:menu="@menu/nav_menu"
app:headerLayout="@layout/nav_header"
这说明在Navigation里面我们放置了另外两个小的xml布局。
这样大家就明白了吧。
剩下的就是写这两个小布局了,我们首先写下面的布局,在menu下面新建一个nav_menu.xml.然后在这里再写几个item.
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="@+id/nav_photo"
android:icon="@drawable/nav_call"
android:title="照相机"/>
<item
android:id="@+id/nav_friends"
android:icon="@drawable/nav_friends"
android:title="相册"/>
<item
android:id="@+id/nav_location"
android:icon="@drawable/nav_location"
android:title="位置"/>
<item
android:id="@+id/nav_mail"
android:icon="@drawable/nav_mail"
android:title="邮箱"/>
<item
android:id="@+id/nav_task"
android:icon="@drawable/nav_task"
android:title="Task"/>
</group>
</menu>
其中item放在了group里面,注意我们使用android:checkableBehavior=”single”来设置这里的item只能是单选状态。
另外一个布局我们在layout下面写,新建一个nav_header.xml
,在这个布局里,我们要注意使用了CircleImageView控件,这个控件可以把图片变成圆形,就是头像部分。不过要是用这个控件,我们需要添加依赖库,在build.gradle里面添加
compile 'de.hdodenhof:circleimageview:2.1.0'
这个说明完了之后,我们就直接贴出代码,毕竟没什么难点可说
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="180dp"
android:background="?attr/colorPrimary">
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="70dp"
android:layout_height="70dp"
android:src="@drawable/nav_icon"
android:layout_centerInParent="true"/>
<TextView
android:id="@+id/mail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="1**08***[email protected]"
android:textColor="#FFF"
android:textSize="18sp"
/>
<TextView
android:id="@+id/nav_username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/mail"
android:text="张**"
android:textColor="#FFF"
android:textSize="18sp"
/>
</RelativeLayout>
建议这里使用RelativeLayout布局。
布局到这里就可以结束了,剩下的就是在活动里面做修改了。
一,实例化DrawerLayout,NavigationView对象。
二,为Navigation添加点击事件。(这里我就先不说自己添加的点击事件了,毕竟我添加的点击事件,大多都是复习旧的知识点)
private DrawerLayout mDrawerLayout;
mDrawerLayout=(DrawerLayout)findViewById(R.id.drawer_layout);
NavigationView navigationView=(NavigationView)findViewById(R.id.nav_view);
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener(){
@Override
public boolean onNavigationItemSelected(MenuItem item){
switch (item.getItemId()){
case R.id.nav_photo:
********
break;
case R.id.nav_location:
*******
break;
*******
*******
default:
break;
}
return true;
}
});
好了,到这里,我们就写完了,不过现在我们点击NavigationView里面的任何一项,都不会有响应事件。
后续我还会很根据自己的想法来写一些点击后的逻辑事件。鉴于本人目前仍是小白一枚,如果大家感觉我有那个地方写的不对,我们可以一起探讨。