(一)toolbar用来替代Actionbar,也就是标题栏。
首先打开res/values/styles.xml
将AppTheme的主题的parent主题改为
Theme.AppCompat.Light.NoActionBar
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#FF4081</item>
<item name="colorPrimaryDark">#FF4081</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
其中加Light代表单色出题,不要Light则代表深色主题。
AppTheme各项属性如下:
2.接着修改activity_main中的代码
<android.support.v7.widget.Toolbar
android:id="@+id/toobar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:navigationIcon="@drawable/ic_drawer_home"
app:popupTheme="@style/Theme.AppCompat.Light">
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/logo"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginLeft="0dp"
android:src="@drawable/m" />
</android.support.v7.widget.Toolbar>
在中间我添加一个圆形的图片。
3.接下来在标题栏添加action按钮,新建一个menu文件夹,创建一个toolbar.xml文件,代码如下
<?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_home"
android:icon="@drawable/ic_home_black_24dp"
android:title="首页"/>
<item
android:id="@+id/nav_vip"
android:icon="@drawable/ic_nav_vip"
android:title="我的大会员"/>
<item
android:id="@+id/nav_download"
android:icon="@drawable/ic_file_download_black_24dp"
android:title="离线缓存"/>
<item
android:id="@+id/nav_shoucang"
android:icon="@drawable/ic_star_black_24dp"
android:title="我的收藏"/>
<item
android:id="@+id/nav_time"
android:icon="@drawable/ic_history_black_24dp"
android:title="历史记录"/>
<item
android:id="@+id/nav_setting"
android:icon="@drawable/ic_settings_black_24dp"
android:title="设置与帮助"/>
</group>
</menu>
,showAsAction有集中值可以选
always代表永远显示,ifRoom代表空间足够则显示,never代表从来不显示
4.修改MainActivity
public boolean onCreateOptionsMenu(Menu menu){
getMenuInflater().inflate(R.menu.toolbar,menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item){
switch (item.getItemId()){
case android.R.id.home:
mDrawerLayout.openDrawer(GravityCompat.START);
break;
case R.id.download:
Toast.makeText(this,"You clicked download",Toast.LENGTH_SHORT).show();
break;
default:
}
return true;
}
在onCreateOption中夹在toolbar.xml菜单文件
然后处理按钮点击事件。
(二)滑动菜单
使用DrawerLayout。他是一个布局,在布局中放入两个子空间,第一个子空间是主屏幕中显示的内容,第二个子控件是滑动菜单中的显示的内容。同时在导航栏最左边添加一个按钮,点击则打开滑动菜单。
<?xml version="1.0" encoding="utf-8"?>
<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">
<android.support.v7.widget.Toolbar
android:id="@+id/toobar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:navigationIcon="@drawable/ic_drawer_home"
app:popupTheme="@style/Theme.AppCompat.Light">
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/logo"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginLeft="0dp"
android:src="@drawable/m" />
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:tabIndicatorColor="@android:color/white"
app:tabSelectedTextColor="@android:color/white"></android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
></android.support.v4.view.ViewPager>
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="250sp"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/nav_header"
app:menu="@menu/nav_menu" />
</android.support.v4.widget.DrawerLayout>
上面代码中有个NavigationView,需要引入complie ’com.android.support:design:24.2.1'
其中nav_menu和nav_head代表头部和身体
<?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_home"
android:icon="@drawable/ic_home_black_24dp"
android:title="首页"/>
<item
android:id="@+id/nav_vip"
android:icon="@drawable/ic_nav_vip"
android:title="我的大会员"/>
<item
android:id="@+id/nav_download"
android:icon="@drawable/ic_file_download_black_24dp"
android:title="离线缓存"/>
<item
android:id="@+id/nav_shoucang"
android:icon="@drawable/ic_star_black_24dp"
android:title="我的收藏"/>
<item
android:id="@+id/nav_time"
android:icon="@drawable/ic_history_black_24dp"
android:title="历史记录"/>
<item
android:id="@+id/nav_setting"
android:icon="@drawable/ic_settings_black_24dp"
android:title="设置与帮助"/>
</group>
</menu>
<?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:padding="10dp"
android:background="?attr/colorPrimary">
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/icon_image"
android:layout_width="70dp"
android:layout_height="70dp"
android:src="@drawable/ic_drawer_home"
android:layout_centerInParent="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="秘术师"
android:textColor="#FFF"
android:textSize="20sp"/>
</RelativeLayout>
接着在MainActivity中处理点击事件
NavigationView navigationView=(NavigationView)findViewById(R.id.nav_view);
navigationView.setCheckedItem(R.id.nav_home);
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener(){
@Override
public boolean onNavigationItemSelected(MenuItem item){
mDrawerLayout.closeDrawers();
return true;
}
});
以上就是滑动菜单和Toolbar了。有错误的地方欢迎指出,水平有限写不出什么好文章,以此记录自己的学习。