抽屉原理_Android应用程序和材质设计入门：工具栏和导航抽屉

cunfen0516

于 2021-01-11 18:24:40 发布

阅读量112

点赞数

文章标签： java android python app 移动开发

原文链接：https://www.javacodegeeks.com/2015/10/getting-started-with-android-app-and-material-design-toolbar-and-navigation-drawer.html

版权

抽屉原理

材料设计是Google建立的一套规则，可指导如何开发Android应用。它们不仅可以应用于Android应用程序，还可以应用于网站设计。在开发应用程序的过程中，Android提供了一些库来帮助开发人员实施主要的材料准则。最重要的库是：

com.android.support:appcompat-v7:23.0.1
com.android.support:design:23.0.1

毕竟，当开发人员使用Android Studio启动新项目时，默认情况下会导入这两个库。

应用程序的一个重要方面是颜色架构。材料设计规则描述了如何选择颜色。

让我们假设我们创建了一个简单的Android项目，并遵循主要步骤按照材料设计规则实施Android应用。

材质设计：颜色

第一步是为我们的应用选择颜色架构。为此，有一个很棒的网站可用于根据材料设计规则创建颜色方案。

选择颜色后，我们可以下载colors.xml：

<resources>
    <color name="primary">#3F51B5</color>
    <color name="primary_dark">#303F9F</color>
    <color name="primary_light">#C5CAE9</color>
    <color name="accent">#03A9F4</color>
    <color name="primary_text">#212121</color>
    <color name="secondary_text">#727272</color>
    <color name="icons">#FFFFFF</color>
    <color name="divider">#B6B6B6</color>
</resources>

您可以选择所需的架构。第一个结果如下图所示：

现在是时候创建使用我们之前选择的颜色的主题了。该应用程序不仅应支持运行Lollipop或更高版本的应用程序，还应支持最多数量的智能手机。

因此，有必要为运行Android 5或更高版本的设备以及运行棒棒糖之前版本的设备创建两个主题。

因此，让我们在值下创建两个目录：

风格
风格-v21

第一个文件夹用于所有运行Lollipop之前版本的智能手机，而第二个文件夹用于操作系统从Lollipop开始的智能手机。

在第一个目录中，让我们style.xml：

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">    
        <item name="colorPrimary">@color/primary</item>
        <item name="colorPrimaryDark">@color/primary_dark</item>
        <item name="colorAccent">@color/accent</item>
    </style>
    <style name="MyAppTheme" parent="@style/AppTheme" />
</resources>

而在第二个目录中，我们只需添加：

<resources>
   <style name="MyAppTheme" parent="AppTheme">
     <item name="android:windowContentTransitions">true</item>
     <item name="android:windowAllowEnterTransitionOverlap">true</item>
     <item name="android:windowAllowReturnTransitionOverlap">true</item>
     <item name="android:windowSharedElementEnterTransition">@android:transition/move</item>
     <item name="android:windowSharedElementExitTransition">@android:transition/move</item>
  </style>
</resources>

最后在Manifest.xml修改文件：

<application
        android:theme="@style/MyAppTheme" >
        ...
   </application>

Android工具栏

开发Android应用程序中最重要的组件之一是工具栏。工具栏扮演着Android操作栏之前所扮演的角色。

导航按钮
应用程式图块和字幕
动作菜单
品牌标志

根据材料设计，工具栏具有我们之前选择的原色。如何将其添加到Android应用程序？

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:id="@+id/layout">

   <include layout="@layout/toolbar" />

</RelativeLayout>

toolbar layout为：

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/primary"
    local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    local:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

注意，在第5行，我们使用?attr/actionBarSize设置了工具栏的默认高度，在第6行，使用了工具栏背景。

在活动中，必须设置工具栏：

@Override
protected void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.activity_main);
   setToolBar();
}
...
private void setToolBar() {
    Toolbar tb = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(tb);
    ActionBar ab = getSupportActionBar();
    ab.setHomeAsUpIndicator(R.drawable.ic_menu_white_24dp);
    ab.setDisplayHomeAsUpEnabled(true);
}

运行示例，我们得到：

将操作菜单添加到工具栏

正确配置后，可以添加操作菜单或出现在工具栏上的菜单项，要在res/menu添加一个名为main_menu.xml的文件：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item android:id="@+id/menu_settings"
          android:title="Settings"
          android:icon="@android:drawable/ic_menu_preferences"
          app:showAsAction="always"
          android:orderInCategory="100"/>

    <item android:id="@+id/menu_help"
        android:title="Help"
        android:icon="@android:drawable/ic_menu_help"
        app:showAsAction="ifRoom"
        android:orderInCategory="110" />

    <item android:id="@+id/menu_compass"
        android:title="Compass"
        android:icon="@android:drawable/ic_menu_compass"
        app:showAsAction="never"
        android:orderInCategory="105"/>

</menu>

现在在活动中有：

@Override
public boolean onCreateOptionsMenu(Menu menu) {
  getMenuInflater().inflate(R.menu.main_menu, menu);
  return true;
}

运行示例的应用程序如下所示：

当用户选择此项目之一时，应用应检测到该问题并采取正确的操作，要执行此操作，有必要重写一种方法：

@Override
public boolean onOptionsItemSelected(MenuItem item) {
   int itemId = item.getItemId();
   String btnName = null;

   switch(itemId) {
     case R.id.menu_settings:
        btnName = "Settings";
        break;
     case R.id.menu_compass:
        btnName = "Compass";
        break;
    case R.id.menu_help:
        btnName = "Help";
        break;
     
  }

  Snackbar.make(layout, "Button " + btnName, Snackbar.LENGTH_SHORT).show();
  return true;
}

在这种情况下，我们仅使用Snackbar显示一条信息消息。

Android导航抽屉

导航抽屉是Google在开发Android应用程序时引入的最重要的UI模式之一。 导航抽屉是一个侧菜单，可帮助组织应用内部的导航。这是在应用程序内部访问不同页面和信息的统一方式。您可以参考Google的官方页面以了解更多信息。实现非常简单。表示导航抽屉的自定义视图必须是布局中的第一个元素：

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity"
    app:headerLayout="@layout/header">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <include layout="@layout/toolbar" />

        <!-- Let's add fragment -->
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/frame"/>

    </LinearLayout>
    


    <android.support.design.widget.NavigationView
        android:id="@+id/navigation"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/nav_items" />
    
    
</android.support.v4.widget.DrawerLayout>

在这种情况下，工具栏位于LinearLayout内部，但应用程序处理它的方式与之前所示的相同。在这种情况下，有一个FrameLayout可以保存通过片段显示的页面内容。 NavigationView是我们应用程序的“真实”菜单。菜单项写在nav_items 。

<?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/fab"
              android:title="Floating Action Button"
              android:icon="@drawable/ic_action_fab" />

        <item android:id="@+id/star"
            android:title="Star"
            android:icon="@drawable/ic_action_star" />

        <item android:id="@+id/uploadr"
            android:title="Star"
            android:icon="@drawable/ic_action_upload" />
    </group>
</menu>

要处理用户单击某项时的操作非常简单，有必要编写以下内容：

private void setNavigationDrawer() {
        dLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        NavigationView navView = (NavigationView) findViewById(R.id.navigation);
        navView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem menuItem) {

                Fragment frag = null;
                int itemId = menuItem.getItemId();

                if (itemId == R.id.fab) {
                   frag = new Fragment1();
                }
                else if (itemId == R.id.star) {
                    frag = new Fragment2();
                }

                if (frag != null) {
                    FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();

                    transaction.replace(R.id.frame, frag);
                    transaction.commit();
                    dLayout.closeDrawers();
                    return true;
                }

                return false;
            }
        });
    }

我们只需添加一个侦听器即可知道用户何时按下菜单项之一，然后设置正确的片段。最后一步是当用户单击主页图标时打开抽屉：

@Override
   public boolean onOptionsItemSelected(MenuItem item) {
        int itemId = item.getItemId();
        String btnName = null;

        switch(itemId) {
            ...
            // Android home
            case android.R.id.home: {
                dLayout.openDrawer(GravityCompat.START);
                return true;
            }
        }
      .....
    }

运行示例应用程序，我们有：

android_material_design_navigation_drawer

在本文的最后，您知道如何根据材料设计指南使用Android导航抽屉和工具栏

翻译自: https://www.javacodegeeks.com/2015/10/getting-started-with-android-app-and-material-design-toolbar-and-navigation-drawer.html

抽屉原理

cunfen0516

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
抽屉原理_Android应用程序和材质设计入门：工具栏和导航抽屉

抽屉原理材料设计是Google建立的一套规则，可指导如何开发Android应用。它们不仅可以应用于Android应用程序，还可以应用于网站设计。在开发应用程序的过程中，Android提供了一些库来帮助开发人员实施主要的材料准则。最重要的库是： com.android.support:appcompat-v7:23.0.1 com.android.support:design:23...
复制链接

扫一扫