Пример создания Navigation Drawer в Android | Программирование на Java, Android

Navigation Drawer — выдвигающееся меню андроид в Xamarin


Простейший пример создания выдвигающегося бокового меню для андроид в Xamarin Studio на языке C# с использованием Android Design Support Library.
Создаем решение и выбираем Андроид Приложение (Android App), Targets Platform выбираем Maximum Compatibility и тему AppCompat:

Далее идем в диспетчер компонентов (ПКМ по папке Компоненты в менеджере решений -> Получить больше компонентов), ищем и устанавливаем Design Support Library:

Теперь перейдем непосредственно к созданию разметки

1. Разметка главного экрана Main.axml:

<?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:background="@android:color/white" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <!— your content layout —> <android.support.design.widget.NavigationView android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" android:id="@+id/nav_view" app:headerLayout="@layout/drawer_header" app:menu="@menu/nav_menu" /> </android.support.v4.widget.DrawerLayout>

2. Разметка для меню (nav_menu\Menu\nav_menu.axml):

<menu xmlns:android="http://schemas.android.com/apk/res/android"> <group android:checkableBehavior="single"> <item android:id="@+id/nav_home" android:title="Home" /> <item android:id="@+id/nav_messages" android:title="Messages" /> <item android:id="@+id/nav_friends" android:title="Friends" /> <item android:id="@+id/nav_discussion" android:title="Discussion" /> </group> <item android:title="Sub items"> <menu> <item android:title="Sub item 1" /> <item android:title="Sub item 2" /> </menu> </item> </menu>

3. Разметка для верхней части меню (layout\drawer_header.axml):

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="100dp" android:background="#BDBDBD"> <TextView android:id="@+id/textHeader" android:textColor="@android:color/black" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Header" /> </LinearLayout>

4. Исходник MainActivity.cs:

using Android.App; using Android.OS; using Android.Support.Design.Widget; using Android.Util; using Android.Views; using Android.Support.V7.App; using Android.Support.V4.Widget; namespace Design { [Activity(Label = "Design", MainLauncher = true, Icon = "@mipmap/icon")] public class MainActivity : AppCompatActivity { DrawerLayout drawerLayout; NavigationView navigationView; string TAG = "Menu"; protected override void OnCreate(Bundle savedInstanceState) { base.OnCreate(savedInstanceState); SetContentView(Resource.Layout.Main); SupportActionBar.SetHomeAsUpIndicator(Resource.Drawable.ic_menu); SupportActionBar.SetDisplayHomeAsUpEnabled(true); drawerLayout = FindViewById<DrawerLayout>(Resource.Id.drawer_layout); navigationView = FindViewById<NavigationView>(Resource.Id.nav_view); navigationView.NavigationItemSelected += (sender, e) => { e.MenuItem.SetChecked(true); switch (e.MenuItem.ItemId) { case Resource.Id.nav_home: Log.Error(TAG, "nav_home"); break; case Resource.Id.nav_messages: Log.Error(TAG, "nav_messages"); break; } }; } public override bool OnOptionsItemSelected(IMenuItem item) { switch (item.ItemId) { case Android.Resource.Id.Home: drawerLayout.OpenDrawer(Android.Support.V4.View.GravityCompat.Start); return true; } return base.OnOptionsItemSelected(item); } } }

И добавляем иконку ic_menu.png в папку drawable

.

Графические возможности Android Studio

Последнее обновление: 11.02.2017

В прошлой теме мы рассмотрели, как в коде xml и java определять интерфейс. Но надо отметить, что Android Studio имеет довольно продвинутый инструментарий, который облегчает разработку графического интерфейса.

Мы можем открыть файл activity_main.xml и внизу с помощью кнопки Design переключиться в режим дизайнера к графическому представлению интерфейсу в виде эскиза смартфона.

Слева будет находиться панель инструментов, с которой мы можем переносить нужный элемент мышкой на эскиз смартфона. И все перенесенные элементы будут автоматически добавляться в файл activity_main.xml.

С помощью мыши мы можем изменять позиционирование уже добавленных элементов, перенося их в другое место на смартфоне.

Справа будет окно Properties — панель свойств выделенного элемента. Здесь мы можем изменить значения свойств элемента. И опять же после изменения свойств изменится и содержимое файла activity_main.xml.

То есть при любых изменениях в режиме дизайнера будет происходить синхронизация с файлом activity_main.xml. Все равно, что мы вручную изменяли бы код непосредственно в файле activity_main.xml.

Но даже если мы предпочитаем работать с разметкой интерфейса в текстовом виде, то даже здесь мы можем включить предварительный просмотр для файла activity_main.xml. Для этого после переключения в текстовый режим необходимо нажать на вкладку Preview справа в Android Studio:

Это очень удобно, так как сразу позволяет просмотреть, как будет выглядеть приложение. А при любых изменениях область предварительного просмотра будет автоматически синхронизироваться с содержанием файла activity_main.xml.

НазадСодержаниеВперед

Adding a Toolbar and Navigation Drawer Across all Activities of an Android App

21 Jun 2015

Gone are the days of using the sucky actionbar. With the introduction of Android 5.0, the actionbar has been replaced by the toolbar. The Toolbar allows more customization and can be placed anywhere in the UI since it’s just a viewgroup. In order to use the toolbar as an actionbar, you must declare it in your xml and set it as the support action bar in the activity.

But what if you want the toolbar to be constant throughout your app without having to declare it in each one of your activities? In this tutorial, I will show you how to set up the toolbar for all your activities and as an added bonus, we will setup a navigation drawer as well.

Setting up the project

Create a new android project using your preferred method. I will be using Android studio and Gradle for this tutorial and I suggest you do as well.

I’m setting the API level to 16 but you can set yours to any version you like. Since we will be using the support library, you can go back as far as API level 7.

Open the build.gradle file for the main module of your project and add the appcompat v7 support library. Usually, this is under a folder called “app” or “mobile.” The support library might already be in your build.gradle, but if it’s not, add it under dependencies:

Let’s also add the support library v4 and the design support library which we will use to set up the navigation drawer:

If you didn’t create an activity when you created your project, go ahead and create a new blank activity.

Setting up the Toolbar

Open the styles.xml file that should be under and change its content from:

to:

This will disable the old actionbar so that we can add our custom toolbar instead.

Create a new activity called BaseActivity and a corresponding layout called activity_base.xml.

Open the activity_base.xml and replace its content with the following code:

It’s time to set up our base activity.

We will override the setContentView method so we can hijack the view and attach it to our container instead of the android default container.

Open BaseActivity.java and make sure to remove from the method.

Now let’s override the setContentView() method with our own implementation:

Open your main activity and make sure it extends BaseActivity:

Compile and run your app. It should now have a toolbar and look similar to this:

You can also swipe from the left to open the navigation drawer.

Allowing activities to opt-out of having a toolbar

What if you have an activity that doesn’t need a toolbar? Let’s change our base activity to allow its children to not display a toolbar.

Add a new method to BaseActivity called useToolbar that returns true by default:

Modify the setContentView method of the base activity as follows:

Any activity that wants to opt out from having a toolbar just needs to override the useToolbar method and return false.

Gotchas

One of the things to consider when using this approach is that every activity inflates a toolbar. During your activity transitions, the toolbar will animate with your activity. You can get around that by using Shared Element Transitions

©2016 Jose Mateo. All rights reserved.

PopupMenu — Всплывающее меню

Начиная с Android 3.0, в системе появилась возможность создавать всплывающее меню, привязанное к элементу View. Меню реализовано в виде модального окна, которое отображается снизу от родителя меню или в другом месте, если места снизу недостаточно. PopupMenu не нужно путать с контекстным меню. У них разные задачи, хотя поведение весьма схоже. В новых версиях Android использование всплывающих меню предпочтительнее контекстных, которые можно считать устаревшим интерфейсом.

В Android 4.0 добавили новую функциональность, чтобы работать было проще. В частности, всплывающее меню можно получить из XML-файла, используя метод inflate(int), которому следует передать идентификатор ресурса меню. А до этого приходилось использовать отдельный класс MenuInflator с избыточным кодом.

Также появился слушатель PopupMenu.OnDismissListener для работы с закрытием меню. Он срабатывает либо, когда пользователь щёлкает на пункте меню и меню закрывается, либо пользователь щёлкает в другом месте экрана, и меню также закрывается.

Кстати, я обратил внимание, что всплывающее меню может быть прокручиваемым. Когда я щёлкал на изображении, то на экран выводилось только два пункта, и для третьего пункта приходилось прокручивать меню.

Создать всплывающее меню очень просто. По сути мы повторяем шаги по созданию обычного меню. Сначала в ресурсах меню создадим нужный файл:

res/menu/popupmenu.xml

Я постарался использовать всевозможные варианты использования атрибутов, которые отвечают за вывод флажков, доступность и т.д.

Есть и другие атрибуты, о которых читайте в документации.

Далее добавим на экран активности текстовую метку, кнопку и ImageView. При щелчке на каждом из этих компонентов мы будем выводить одинаковое всплывающее меню:

Осталось написать код. Обратите внимание на закомментированный код, который работал в Android 3.0. В Android 4.0 этот код можно не использовать.

Вам надо создать новый экземпляр PopupMenu, указав контекст активности и компонент, к которому будет привязано это меню. Далее загружаете меню из ресурсов и добавляете методы для обработки щелчков. Для отображения на экране вызывается метод show().

Запустив проект, вы можете щёлкать по любому элементу на форме и увидеть всплывающее меню. Единственное, что меня удивило, так это отсутствие значка в меню. В документации я не нашёл указаний, что PopupMenu не поддерживает значки, поэтому вопрос остаётся открытым.

Вдобавок есть ещё классы android.support.v7.widget.PopupMenu и android.support.v4.widget.PopupMenuCompat.

Дополнительное чтение

Обсуждение статьи на форуме.

Реклама

Статья проплачена кошками — всемирно известными производителями котят.

Если статья вам понравилась, то можете поддержать проект.

Добавить комментарий

Закрыть меню