android抽屜側滑菜單，android 導航抽屜_Android導航抽屜示例教程

2023-11-19 阅读 23 评论 0

摘要：android 導航抽屜android抽屜側滑菜單？In this tutorial we’ll implement a Navigation Drawer in our android application. Android navigation drawer is a sliding menu and it’s an important UI component. You will see navigation drawer in most of the android a

android 導航抽屜

android抽屜側滑菜單？In this tutorial we’ll implement a Navigation Drawer in our android application. Android navigation drawer is a sliding menu and it’s an important UI component. You will see navigation drawer in most of the android applications, it’s like navigation menu bars in the websites.

在本教程中，我們將在我們的android應用程序中實現一個導航抽屜 。 Android導航抽屜是一個滑動菜單，它是重要的UI組件。您會在大多數android應用程序中看到導航抽屜，就像網站中的導航菜單欄一樣。

Android導航抽屜 (Android Navigation Drawer)

安卓底部抽屜布局。Android Navigation Drawer is a sliding left menu that is used to display the important links in the application. Navigation drawer makes it easy to navigate to and fro between those links. It’s not visible by default and it needs to opened either by sliding from left or clicking its icon in the ActionBar.

Android導航抽屜是一個向左滑動菜單，用于顯示應用程序中的重要鏈接。導航抽屜可輕松在這些鏈接之間來回導航。默認情況下它是不可見的，需要通過向左滑動或在ActionBar中單擊其圖標來打開它。

In broader terms, Navigation Drawer is an overlay panel, which is a replacement of an activity screen which was specifically dedicated to show all the options and links in the application.

從廣義上講，“導航抽屜”是一個覆蓋面板，替代了專門用于顯示應用程序中所有選項和鏈接的活動屏幕。

In this android navigation drawer tutorial we’ll implement the navigation drawer using the Drawer Layout API present in Android Support Library. We’ll show 3 fragment views that can be opened from the drawer items.

在此android導航抽屜教程中，我們將使用Android支持庫中提供的Drawer Layout API來實現導航抽屜。我們將顯示3個可以從抽屜項目中打開的片段視圖。

Android導航抽屜項目結構 (Android Navigation Drawer Project Structure)

Android導航抽屜示例 (Android Navigation Drawer Example)

To implement the Navigation Drawer we first need to add android.support.v4.widget.DrawerLayout as the root of the activity layout as shown below.

要實現導航抽屜，我們首先需要添加android.support.v4.widget.DrawerLayout作為活動布局的根，如下所示。

activity_main.xml

<android.support.v4.widget.DrawerLayout xmlns:android="https://schemas.android.com/apk/res/android"android:id="@+id/drawer_layout"android:layout_width="match_parent"android:layout_height="match_parent" ><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><LinearLayoutandroid:id="@+id/container_toolbar"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"><includeandroid:id="@+id/toolbar"layout="@layout/toolbar" /></LinearLayout><FrameLayoutandroid:id="@+id/content_frame"android:layout_width="match_parent"android:layout_height="match_parent" /></LinearLayout><ListViewandroid:id="@+id/left_drawer"android:layout_width="240dp"android:layout_height="match_parent"android:layout_gravity="start"android:background="#FFFFFF"android:choiceMode="singleChoice"android:divider="@android:color/darker_gray"android:dividerHeight="1dp" /></android.support.v4.widget.DrawerLayout>

The menu options in the navigation drawer are stored in the form of a ListView. Each option opens in the FrameLayout.

導航抽屜中的菜單選項以ListView的形式存儲。每個選項在FrameLayout中打開。

We’ve used a ToolBar in place of an ActionBar here. ToolBar has been introduced since Android 5.0 as a generalisation of ActionBar. It gives us more control and flexibility to modify and its easier to interleave with other views in the hierarchy.

我們在這里使用了ToolBar代替了ActionBar 。從Android 5.0開始，ToolBar作為ActionBar的泛化引入。它為我們提供了更多的控制權和修改的靈活性，并使其更易于與層次結構中的其他視圖進行交錯。

The layout ToolBar is defined in the xml layout given below.

布局工具欄在下面給出的xml布局中定義。

toolbar.xml

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

We need to use the Theme Theme.AppCompat.NoActionBar in the styles.xml when using Toolbars.

使用工具欄時，我們需要在styles.xml中使用主題Theme.AppCompat.NoActionBar 。

The layout for the ListView rows in the Navigation Drawer is given below.

下面給出了導航抽屜中ListView行的布局。

list_view_item_row.xml

<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="?android:attr/activatedBackgroundIndicator"android:minHeight="?android:attr/listPreferredItemHeightSmall"android:padding="10dp" ><ImageViewandroid:id="@+id/imageViewIcon"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentLeft="true"android:layout_alignParentTop="true"android:paddingRight="10dp" /><TextViewandroid:id="@+id/textViewName"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerVertical="true"android:layout_toRightOf="@+id/imageViewIcon"android:paddingRight="10dp"android:text="Item Name"android:textColor="@android:color/black"android:textAppearance="?android:attr/textAppearanceListItemSmall"/></RelativeLayout>

The navigation drawer items are put in a string array in the strings.xml file as shown below.

導航抽屜項目放置在strings.xml文件中的字符串數組中，如下所示。

strings.xml

<string-array name="navigation_drawer_items_array"><item>Connect</item><item>Fixtures</item><item>Table</item></string-array>

The DataModel.java class is used to define the objects for the drawer list items.

DataModel.java類用于定義抽屜式列表項的對象。

DataModel.java

package com.journaldev.navigationdrawer;public class DataModel {public int icon;public String name;// Constructor.public DataModel(int icon, String name) {this.icon = icon;this.name = name;}
}

The drawer items are stored in the form of a ListView. Hence we need to use an Adapter Class to provide that data to the activity class.

抽屜項目以ListView的形式存儲。因此，我們需要使用適配器類將數據提供給活動類。

DrawerItemCustomAdapter.java

package com.journaldev.navigationdrawer;import android.app.Activity;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;public class DrawerItemCustomAdapter extends ArrayAdapter<DataModel> {Context mContext;int layoutResourceId;DataModel data[] = null;public DrawerItemCustomAdapter(Context mContext, int layoutResourceId, DataModel[] data) {super(mContext, layoutResourceId, data);this.layoutResourceId = layoutResourceId;this.mContext = mContext;this.data = data;}@Overridepublic View getView(int position, View convertView, ViewGroup parent) {View listItem = convertView;LayoutInflater inflater = ((Activity) mContext).getLayoutInflater();listItem = inflater.inflate(layoutResourceId, parent, false);ImageView imageViewIcon = (ImageView) listItem.findViewById(R.id.imageViewIcon);TextView textViewName = (TextView) listItem.findViewById(R.id.textViewName);DataModel folder = data[position];imageViewIcon.setImageResource(folder.icon);textViewName.setText(folder.name);return listItem;}
}

The MainActivity.java source code is given below.

MainActivity.java源代碼如下。

MainActivity.java

package com.journaldev.navigationdrawer;import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.util.Log;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;public class MainActivity extends AppCompatActivity {private String[] mNavigationDrawerItemTitles;private DrawerLayout mDrawerLayout;private ListView mDrawerList;Toolbar toolbar;private CharSequence mDrawerTitle;private CharSequence mTitle;android.support.v7.app.ActionBarDrawerToggle mDrawerToggle;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mTitle = mDrawerTitle = getTitle();mNavigationDrawerItemTitles= getResources().getStringArray(R.array.navigation_drawer_items_array);mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);mDrawerList = (ListView) findViewById(R.id.left_drawer);setupToolbar();DataModel[] drawerItem = new DataModel[3];drawerItem[0] = new DataModel(R.drawable.connect, "Connect");drawerItem[1] = new DataModel(R.drawable.fixtures, "Fixtures");drawerItem[2] = new DataModel(R.drawable.table, "Table");getSupportActionBar().setDisplayHomeAsUpEnabled(false);getSupportActionBar().setHomeButtonEnabled(true);DrawerItemCustomAdapter adapter = new DrawerItemCustomAdapter(this, R.layout.list_view_item_row, drawerItem);mDrawerList.setAdapter(adapter);mDrawerList.setOnItemClickListener(new DrawerItemClickListener());mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);mDrawerLayout.setDrawerListener(mDrawerToggle);setupDrawerToggle();}private class DrawerItemClickListener implements ListView.OnItemClickListener {@Overridepublic void onItemClick(AdapterView<?> parent, View view, int position, long id) {selectItem(position);}}private void selectItem(int position) {Fragment fragment = null;switch (position) {case 0:fragment = new ConnectFragment();break;case 1:fragment = new FixturesFragment();break;case 2:fragment = new TableFragment();break;default:break;}if (fragment != null) {FragmentManager fragmentManager = getSupportFragmentManager();fragmentManager.beginTransaction().replace(R.id.content_frame, fragment).commit();mDrawerList.setItemChecked(position, true);mDrawerList.setSelection(position);setTitle(mNavigationDrawerItemTitles[position]);mDrawerLayout.closeDrawer(mDrawerList);} else {Log.e("MainActivity", "Error in creating fragment");}}@Overridepublic boolean onOptionsItemSelected(MenuItem item) {if (mDrawerToggle.onOptionsItemSelected(item)) {return true;}return super.onOptionsItemSelected(item);}@Overridepublic void setTitle(CharSequence title) {mTitle = title;getSupportActionBar().setTitle(mTitle);}@Overrideprotected void onPostCreate(Bundle savedInstanceState) {super.onPostCreate(savedInstanceState);mDrawerToggle.syncState();}void setupToolbar(){toolbar = (Toolbar) findViewById(R.id.toolbar);setSupportActionBar(toolbar);getSupportActionBar().setDisplayShowHomeEnabled(true);}void setupDrawerToggle(){mDrawerToggle = new android.support.v7.app.ActionBarDrawerToggle(this,mDrawerLayout,toolbar,R.string.app_name, R.string.app_name);//This is necessary to change the icon of the Drawer Toggle upon state change.mDrawerToggle.syncState();}
}

In the above code getSupportActionBar().setDisplayHomeAsUpEnabled(false); is used to hide the default back button.

在上面的代碼中， getSupportActionBar().setDisplayHomeAsUpEnabled(false); 用于隱藏默認的后退按鈕。

In this code we’ve used a DrawerItemClickListener Class that loads the respective fragment of the list item clicked using a FragmentManager. Also the the title of the ToolBar is changed to the list item clicked using setTitle(mNavigationDrawerItemTitles[position]);.

在此代碼中，我們使用了DrawerItemClickListener類， DrawerItemClickListener加載使用FragmentManager單擊的列表項的相應片段。同樣，將工具欄的標題更改為使用setTitle(mNavigationDrawerItemTitles[position]);單擊的列表項setTitle(mNavigationDrawerItemTitles[position]); 。

The fragment classes and their respective layouts are given below.

片段類及其各自的布局如下。

ConnectFragment.java

package com.journaldev.navigationdrawer;import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;public class ConnectFragment extends Fragment {public ConnectFragment() {}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {View rootView = inflater.inflate(R.layout.fragment_connect, container, false);return rootView;}}

The layout of the above fragment is defined below.

以上片段的布局定義如下。

fragment_connect.xml

<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"xmlns:tools="https://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><TextViewandroid:id="@+id/label"android:layout_alignParentTop="true"android:layout_marginTop="100dp"android:layout_width="fill_parent"android:layout_height="wrap_content"android:gravity="center_horizontal"android:textSize="45dp"android:text="Connect"android:textStyle="bold"/><TextViewandroid:layout_below="@id/label"android:layout_centerInParent="true"android:layout_width="fill_parent"android:layout_height="wrap_content"android:textSize="12dp"android:layout_marginTop="10dp"android:gravity="center_horizontal"android:text="Edit fragment_connect.xml to change the appearance"android:id="@+id/textView2" /></RelativeLayout>

The other two items are defined in exactly the same way as above hence we’re skipping it here.

其他兩個項目的定義與上面完全相同，因此我們在這里跳過。

導航抽屜Android示例輸出 (Navigation Drawer Android Example Output)

Below is the output produced by our navigation drawer android example application.

以下是我們的導航抽屜android示例應用程序產生的輸出。

This brings an end to android navigation drawer example tutorial. You can download the final Android Navigation Drawer Project from the below link.

這結束了android導航抽屜示例教程。您可以從下面的鏈接下載最終的Android導航抽屜項目 。

Download Android Navigation Drawer Example Project下載Android導航抽屜示例項目