Android5.0系统:Material风格以及DrawerLayout抽屉效果

本文介绍如何使用DrawerLayout和Toolbar创建具有导航抽屉和工具栏的Android应用界面。通过XML布局配置和Java代码实现了基本的功能,并设置了Material设计风格。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

先上效果图:
抽屉关闭
抽屉打开
主要组件:

  1. DrawerLayout
  2. Toolbar

首先,配置文件代码:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app= "http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView android:text="@string/hello_world" android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:minHeight="?attr/actionBarSize"
        android:elevation="10dp"
        app:contentInsetLeft="72dp"
        app:contentInsetStart = "72dp"
        android:background="?attr/colorPrimary">

    </android.support.v7.widget.Toolbar>
    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer"
        android:layout_below="@id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:padding="10dp">
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/button"
                android:text="New Button"
                android:layout_marginTop="55dp"/>
            <CheckBox
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New CheckBox"
                android:id="@+id/checkbox"
                android:layout_marginTop="51dp"
                />
            <Switch
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Switch"
                android:id="@+id/switch1"/>

            <ProgressBar
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/progressBar"
                android:layout_marginTop="55dp"
                android:indeterminate="false" />

        </LinearLayout>
        <LinearLayout
            android:id="@+id/menu_frame"
            android:layout_gravity="left"
            android:layout_marginEnd="10dp"
            android:background="#087654"
            android:layout_marginRight="10dp"
            android:orientation="vertical"
            android:paddingTop="48dp"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        </LinearLayout>
    </android.support.v4.widget.DrawerLayout>

</RelativeLayout>

使用DrawerLayout时需注意:DrawerLayout中需要放两个Layout,在收起的Layout中一定要设置:

android:layout_gravity="left"

Activity代码:

package com.demo.monty.materialdemo;

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

public class MainActivity extends AppCompatActivity {

    private DrawerLayout mDrawerLayout;
    private ActionBarDrawerToggle mDrawerToggle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);


        Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
        setSupportActionBar(toolbar); 
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);


        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer);
        mDrawerToggle = new ActionBarDrawerToggle(this,mDrawerLayout,toolbar,R.string.open,R.string.close){
            @Override
            public void onDrawerClosed(View drawerView) {
                super.onDrawerClosed(drawerView);
            }

            @Override
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
            }
        };
        mDrawerLayout.setDrawerListener(mDrawerToggle);
        mDrawerToggle.syncState();

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

下面是设置Material风格的界面:

Material风格自定义
配置文件如下,styles.xml:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:colorPrimary">#675634</item>
        <item name="android:colorPrimaryDark">#993309</item>
        <item name="android:colorAccent">#7767ff</item>
        <item name="android:textColorPrimary">#ffff33</item>
        <item name="android:textColor">#3a3e55</item>
        <item name="android:background">#3e3d38</item>
        <item name="android:actionBarSize">30dp</item>
        <item name="android:navigationBarColor">#3a3e55</item>
    </style>
</resources>

其中部分属性在5.0以下操作系统中无法生效:

<item name="android:navigationBarColor">#3a3e55</item> //在5.0以下无法生效,以及华为手机Mate S 5.1系统中也无法生效,其他机器目前没有验证。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值