Drawer与Toolbar的简单使用

最新推荐文章于 2024-11-07 16:19:32 发布

原创最新推荐文章于 2024-11-07 16:19:32 发布 · 828 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#toolbar #Drawer

Android之路专栏收录该内容

134 篇文章

订阅专栏

本文介绍如何在Android应用中实现带有个性化主题的抽屉布局，包括修改默认主题颜色、创建抽屉布局XML文件及整合到Activity布局的过程。

学习的路上，顺便记录一下，方便以后回顾
效果图：

1.去styles里修改项目默认的主题：

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/appPrimaryColor</item>
        <item name="colorPrimaryDark">@color/appPrimaryColor</item>
        <item name="colorAccent">@color/appPrimaryColor</item>
    </style>

</resources>

2.新建抽屉布局xml，名为layout_drawer:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:background="@color/drawerColor"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_gravity="center_vertical"
        android:background="@color/appPrimaryColor"
        android:orientation="horizontal"
        android:gravity="center_vertical"
        android:padding="17dp">

        <ImageView
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:src="@mipmap/ic_launcher_round" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:layout_marginLeft="15dp"
            android:text="用户名"
            android:textColor="@color/colorWhite"
            android:textSize="28sp" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:orientation="horizontal"
        android:gravity="center_vertical"
        android:padding="17dp">

        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@mipmap/ic_launcher" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:text="邮箱"
            android:textColor="@color/colorBlack"
            android:textSize="22sp" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:orientation="horizontal"
        android:gravity="center_vertical"
        android:padding="17dp">

        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@mipmap/ic_launcher" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:text="电话"
            android:textColor="@color/colorBlack"
            android:textSize="22sp" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:orientation="horizontal"
        android:gravity="center_vertical"
        android:padding="17dp">

        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@mipmap/ic_launcher" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:text="设置"
            android:textColor="@color/colorBlack"
            android:textSize="22sp" />
    </LinearLayout>
</LinearLayout>

3.activity布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    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="50dp"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        app:contentInsetStart="0dp"
        android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:theme="@style/ThemeOverlay.AppCompat.ActionBar">
        <LinearLayout
            android:gravity="center_vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">
            <TextView
                android:enabled="true"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:singleLine="true"
                android:text="@string/app_name"
                android:textColor="@color/colorWhite"
                android:textSize="19sp"
                android:textStyle="bold" />
            <ImageView
                android:id="@+id/img_notice"
                android:scaleType="centerInside"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:src="@mipmap/ic_launcher"/>
        </LinearLayout>
    </android.support.v7.widget.Toolbar>

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.lotus.drawertoolbar.HomeActivity">

        <LinearLayout
            android:layout_width="200dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:orientation="vertical">

            <include layout="@layout/layout_drawer" />
        </LinearLayout>
    </android.support.v4.widget.DrawerLayout>

</LinearLayout>

4.activity代码：

import android.os.Bundle;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.widget.ImageView;

import butterknife.BindView;
import butterknife.ButterKnife;

public class HomeActivity extends AppCompatActivity {

    @BindView(R.id.img_notice)
    ImageView imgNotice;
    @BindView(R.id.toolbar)
    Toolbar toolbar;
    @BindView(R.id.drawer)
    DrawerLayout drawer;

//    private DrawerArrowDrawable drawerArrow;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_home);
        ButterKnife.bind(this);

        initToolBar();
    }

    /**
     * 初始化菜单栏
     */
    private void initToolBar() {
        setSupportActionBar(toolbar);
        getSupportActionBar().setHomeButtonEnabled(true); //设置返回键可用
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
//        drawerArrow = new DrawerArrowDrawable(this) {
//            @Override
//            public boolean isLayoutRtl() {
//                return false;
//            }
//        };
//        drawerArrow = new DrawerArrowDrawable(this);
        ActionBarDrawerToggle drawerToggle = new ActionBarDrawerToggle(this, drawer,
                toolbar, R.string.drawer_open,
                R.string.drawer_close) {

            public void onDrawerClosed(View view) {
                super.onDrawerClosed(view);
                invalidateOptionsMenu();
            }

            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
                invalidateOptionsMenu();
            }
        };
        // drawerToggle.setAnimateEnabled(true);
        drawerToggle.syncState();
        drawer.setDrawerListener(drawerToggle);
    }

}