Toolbar与抽屉菜单DrawerLayout

来源:互联网 发布:海岛奇兵机枪升级数据 编辑:程序博客网 时间:2024/06/05 13:22


(一)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了。有错误的地方欢迎指出,水平有限写不出什么好文章,以此记录自己的学习。