Android выдвигающаяся панель сверху

Выезжающая панель на Android

Вчера мне понадобилось сделать панель наподобие стандартной верхней панели Android, той самой которую вы ежедневно вытаскиваете пальцем из-за верхнего края экрана. Поскольку опыта для написания собственного View подобного рода у меня нет, я начал поиск готовых решений. Оказалось, что сформулировать запрос довольно сложно, но в итоге поиски натолкнули меня на AndroidSlidingUpPanel.

Вообще, я редко пишу и что-то делаю на Андройде, но иногда приходится. Кстати, советую так же почитать про Push уведомления на Android.

Установка

Если вы все еще используете Eclipse, то придется скачать библиотеку и подключить папку library в свой проект (все должно заработать, но я не проверял). Я использую Android Studio и тут все гораздо проще, добавляем зависимость в наш build.gradle и синхронизируем проект:

Как использовать?

Нужно модифицировать наш layout в соответствии с этим:

Параметры задаются у элемента SlidingUpPanelLayout:

• Можно задать параметр dragView, в котором указать id элемента внутри панели за который панель будет таскаться. Иначе можно будет тянуть за всю панель.
• Параметр paralaxOffset задает смещение для создания эффекта параллакса.
• Чтобы сделать панель полу-прозрачной нужно, помимо фона, задать атрибут overlay в true.
• Цвет перекрытия фона при разворачивании панели задается параметром fadeColor.
• Помимо этого можно найти еще кучу всего интересного в описании репозитория.

Использование фрагментов в качестве основного контента

Нельзя просто взять и поставить фрагмент в основной контент. Например, этот фокус не прокатит с GoogleMaps (как в моем случае). Чтобы использовать фрагмент в качестве основного контента нужно обернуть его в RelativeLayout с пустым View в конце. Например у меня получилось так:

Источник

Google Android — это несложно

Добро пожаловать на форум сайта

Выдвигающаяся панель.

Выдвигающаяся панель.

Сообщение Аварский » 19 окт 2014, 13:28

Всем привет. Не могу найти информацию, о том как сделать выдвигающуюся панель. Например, у меня есть главный экран, и на нем слева находится кнопка.

И при нажатии на эту кнопку, а лучше проведя с этой кнопки право пальцем открылась панель.

И при нажатии на кнопку находящееся на этой панели, или проведя пальцем влево закрывать панельку
.

Вот. С помощью каких инструментов можно это сделать. Пробовал DrawableLayout, но он не выдвигает панель на всю ширину экрана. ТОчнее не принимает параметр match_parent.

Re: Выдвигающаяся панель.

Сообщение doter.ua » 19 окт 2014, 13:34

Re: Выдвигающаяся панель.

Сообщение Аварский » 19 окт 2014, 13:47

Re: Выдвигающаяся панель.

Сообщение Foenix » 19 окт 2014, 15:18

Re: Выдвигающаяся панель.

Сообщение mega94 » 21 окт 2014, 11:06

Re: Выдвигающаяся панель.

Сообщение Аварский » 02 ноя 2014, 14:06

Re: Выдвигающаяся панель.

Сообщение парень » 03 ноя 2014, 11:24

Создайте новый проект с NavigationDrawer. Затем найдите в папке layout файл с «разметкой» страницы. Выдвигающийся список — это ListView — ему можно задать ширину. Возможно можно указать на весь экран. Не пробовал.

По мне так это решение проще сделать анимацией. Когда я начинал изучать андроид (первые числа декабря 2013 года ), старался писать с поддержкой 2.х андроид. И наткнулся на библиотеку NineOldAndroid. Предельно простая в использовании.

Примерный алгоритм под Вашу задачу:
Создать layout, который надо выдвигать, с обработчиками нажатий на те места по которым Вы хотите «сворачивать»\»разворачивать». Ширину задать math_parent
Затем в коде:
[syntax=java5]
.
View itemView = inflater.inflate(R.layout.»ваш layout», parent, false); // этого кода много в уроках.
// инициализируем обработчики кликов, для сворачивания\разворачивания.

ViewHelper.setPivotX(itemView, 0); // это уже код связан с библиотекой — экспериментируйте. Или Google.Translate на сайте библиотеки. Точно не вспомню этот ли метод нужен, это вроде для определения координаты X на нашем объекте. Знаю точно — можно и без него обойтись. Но я почему то я его использую )))

ObjectAnimator.ofFloat(itemView, «translationX», xFrom, xTo).start(); // для ItemView запускается анимация движения

xFrom — откуда, xTo — куда. Как узнать ? Я делал так: узнавал ширину экрана. xFrom= -1*ширина экрана. (т.е. за экраном прячем) + » ширина нужной видимой части». xTo=0+ » ширина нужной видимой части». для сворачивания, меняем местами xFrom и xTo

Также можно думаю использовать ViewPager. Смотреть соответствующий урок.

Отформатируйте свой жесткий диск и забудьте о программировании.

ПС. Я тоже не знаю английский. При этом живу в англоговорящей стране, и не хера не понимаю о чем окружающие говорят.

Бьем рекорды русских топов

Могу ответить на любые вопросы по маркетингу и развитию.

Источник

Android: выдвигающийся экран снизу

Данная статья является переводом статьи Emrullah Luleci, а также её продолжения.

Нижний экран (Здесь и далее под «нижним экраном/слоем» будет подразумеваться элемент bottom sheet — прим. пер.) — компонент, выезжающий снизу экрана, который используется для отображения дополнительного контента. Подробнее об этом элементе можно узнать на официальной сайте посвященном материальному дизайну.

Зависимости

Для использования этого элемента, добавьте последние версии библиотек поддержки в свой проект:

Создайте класс наследник от AppCompatActivity:

Создание макетов

Содержимое нижнего экрана

Для удобства воспользуемся макетами. Назовем файл с нижним слоем bottom_sheet.xml.

behavior_peekHeight: Определяет высоту видимой части.

behavior_hideable: Определяет, может ли нижний экран скрываться свайпом вниз.

Container view

Создайте CoordinatorLayout в качестве корневого вью. Добавьте в него прямым наследником bottom_sheet.xml. Элементы app_bar и activity_bottom_sheet_content не имеют прямого отношения к нижнему экрану, поэтому их можно заменить или удалить.

На данном этапе нижний экран должен работать примерно так:

Динамическое управление

Поведением и свойствами нижнего экрана можно также управлять динамически с помощью Java.

Прикрепление элементов к нижнему экрану

Также можно прикрепить вью к нижнему экрану, чтобы прикрепленный элемент перемещался одновременно с нижним слоем.

Добавим Floating Action Button в макет созданный выше. Новый компонент должен являться непосредственным наследником CoordinatorLayout также как и bottom_sheet. Для прикрепления элемента к нижнему экрану необходимо добавить app:layout_anchor с id вью нижнего экрана, а также app:layout_anchorGravity со значением top|end.

Теперь плавающая кнопка закреплена в верхнем углу нашего нижнего экрана и перемещается вместе с ним.

Скрытие плавающей кнопки при скроле

Для скрытия кнопки при скроле необходимо добавить слушатель к нижнему экрану и отображать/скрывать кнопку. Для начала найдем необходимые вью:

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

Результат обоих вариантов можно увидеть ниже:

Источник

Реализация выдвижного меню NavigationDrawer при помощи DrawerLayout, с использованием произвольной разметки

На днях для одного из разрабатываемого нашей командой приложения, заказчик внес правку в дизайн, которая требовала разработать выдвижное меню с довольно не стандартным расположением view компонентов. Хотя на данный момент и существуют различные виды реализации данной задачи, они оказывались либо слишком объемными, либо не предоставляли реализацию нужного функционала.

Обдумав некоторое время данную задачу, я решил реализовать данное меню на основе стандартного компонента DrawerLayout, в основу которого было вложено 2 root элемента — RelativeLayout для основной разметки окна, а также еще один RelativeLayout как контейнер для бокового меню. Хотелось бы добавить, что именно 2 root элемента должно быть внутри DrawerLayout, подробнее об этом контейнере можно прочесть в официальной документации гугла.

Реализация

Xml файл разметки для основной activity

Разметка основной activity готова, теперь приступим к написанию класса, который будет выполнять основную логику. Создадим класс, наследующий RelativeLayout. Данный класс реализует всю логику нашего меню, в том числе устанавливает разметку и определяет все view.

В конструктор следует передать context и parent.

parent — RelativeLayout, который был объявлен в разметке для основной activity ( )

Далее функция initView(final Context context,RelativeLayout parent) — надувает основную разметку, которая будет помещена в выдвижное меню, а также определим тут все view компоненты и их слушатели.

В R.layout.view_drawer_layout для примера я объявил всего одну кнопку.

На данном этапе основная часть готова, осталось лишь добавить наш NavigationLayout при помощи addView к основному parent контейнеру.

Создадим класс, наследующий AppCompactActivity

Данный класс переопределяет стандартный метод setContentView, добавляя в него вызов функции, которая ‘инициализирует’ выдвижное меню. Также здесь мы создаем объект ранее написанного нами NavigationLayout класса и добавляем его при помощи left_drawer.addView(navigationLayout) к родителю, который и является контейнером бокового меню.

Осталось дело за малым — чтобы все заработало, нужно лишь создать экран (activity) и унаследовать ParentNavigationActivity, который мы только что создали.

Таким образом, при наследовании ParentNavigationActivity и вызове функции setContentView, в нашей activity появляется готовое меню.

Хотелось бы добавить, что 2 контейнера, лежащих в основе DrawerLayout, необязательно должны быть RelativeLayout. Вместо них можно использовать constraintlayout, framelayout, linearlayout и другие.

Источник

Android Studio: Как сделать боковое меню с помощью NavigationDrawer

В этой статье давайте разберем, как сделать «крутое» боковое меню с помощью компонента NavigationDrawer.

Создадим новый проект, пусть он называется NavDraw, так как использовать на этот раз будем не Empty Activity а Navigation Drawer Activity, шаблон заготовку изAndroid Studio.

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

Собственно, создание Navigation Drawer меню заключается в изменении существующей заготовки под свои нужды. Этим и займемся сегодня.

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

Файл nav_header_main.xml

Вот конкретно в этом файле nav_header_main мы сейчас изменим название. Я напишу название на свой лад «NavDraw — боковое меню» в этом textview, в следующим TextView указан адрес android studio, но я напишу название своего сайта.

Картинку я пока менять не буду я не нашел честно говоря, но вы можете в принципе аналогичным образом прописать в папки drawable новую иконку. Они тут расположены в png формате, есть некоторые в xml.

Можно в принципе использовать либо такие, либо такие, но я пока просто покажу вам где она находится если захотите, будете менять уже под свои нужды. Давайте перезапустим наше приложение и посмотрим, что у нас получится.

По идее, данные должны обновиться, так работает большинство приложений, кто собирает на Android Studio.

И в принципе не надо здесь все с нуля как бы переписывать создавать, все уже готово.

Вот кстати, здесь отличие -меню будет работать, которое находится в правом углу, (три точки) без всяких шаманств, изощрений, не как в прошлый раз. В прошлом видео я вам показывал: прописываете кучу стиле и прочего.

Файл activity_main_drawer

Так давайте теперь найдем в папке меню

Вот непосредственно наши пункты, как видите, здесь схалтурили разработчики этого шаблона — они прописали хардкорно пункт android title прямо в теле xml.

А в strings.xml ничего не прописано, но мы не будем сейчас создавать новые пункты в strings.xml

Давайте просто я напишу по-русски так как я вижу, как я понимаю эти пункты, просто и наглядно.

Большинство людей так и делают, если есть пункт, если есть его айдишник — меняем название и дальше можно будет к нему прицепиться и использовать его для обработчика нажатия на этот пункт.

Как видите, перевод произошел, я не готовил специально тоже иконки, пока оставим как есть, хотя если вы создадите новый пункт, вам можно будет подобрать иконку, картинку либо вообще ее удалить.

Удалив просто строку android icon пропадет картинка хотя в принципе лучше конечно что-то подготовить. Давайте продублируем предыдущий пункт, внесем изменения в его ID.

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

Я перемещу ее в блок, который видите отделен в отдельном пункте, вот так она выглядит, мы иконку менять не буду, опять же вам уже об этом говорил. Захотите подготовить свой какой-то проект, можете нарисовать свои иконки либо поискать в интернете.

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

Естественно сейчас он не обрабатывает нажатие на кнопку

Давайте сейчас напишем небольшую процедуру, в которой вместо текста «Hello Word!» будет написано, какая кнопка, какой пункт был нажат.

Файл content_main.xml

Для этого в TextView добавим ID, чтобы можно было к нему обращаться программно, я назову его nav_tv.

В файле MainActivity.java мы объявим переменную TextView tv перед функцией onCreate, также нам нужно будет найти ее через findViewById() и я надеюсь вы уже знаете, как это делается и объяснять вам не надо.

теперь найдем конструкцию onNavigationItemSelected и в конструкцию if..else допишем

и укажем текст который будет появляться в центре нашего приложения по нажатию на кнопку.

Соответственно, для пункта nav_camera, который мы назвали почему-то импорт, потому как на иконке изображен фотоаппарат, мы назовем это действие «Нажата кнопка: Камера», «Нажата кнопка: Галерея»

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

Потому здесь достаточно богатое поле для деятельности, вспомните хотя бы приложение для aliexpress, сколько там пунктов находится всевозможных: магазин, купите, избранное, поделиться и настройки. Кстати, тут есть — инструменты это в принципе почти как настройки.

Обратите внимание — я добавил функцию finish() , она закроет приложение по нажатию на этот пункт.

Перезапустили проект и теперь как вы видите при нажатии на пункты меню,(исправлю камера на импорт)можно будет видеть, что наше боковое меню реагирует на воздействие нажмем на выход и приложение закрылось.

Сейчас немного займемся настройкой декоративного элемента, который у нас отвечает за рисунок и за градиент.

Градиент в side_nav_bar

В файле side_nav_bar прописан градиент который находится как background возле картинки.

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

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

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

Так изменим угол 135 градусов на 90, и через некоторое время некоторой задержкой обновляется наш градиент и вот сейчас картинка у нас под наклоном, и соответственно, обновилось приложение, и наше меню, изменился в макете наш градиент.

В принципе, можете подобрать любой переход, от светлого тона к тёмному цвету, либо посередине, чтобы барьер был.

Можно в принципе поиграться с углом наклона, у вас изменится вид этой шапки, или сделать однотонный цвет, допустим красный — red или #FF0000

Необязательно использовать градиент, можно указать начальный и конечный одинаковый цвет.

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

Перезапустим наше приложение, обновилось нашими меню, так оно аккуратно, компактно, если у вас пока много пунктов нет – можете ограничиться небольшим списком.

Смотрите видео Android Studio: Как сделать боковое меню с помощью NavigationDrawer:

Рекомендуем смотреть видео в полноэкранном режиме, в настойках качества выбирайте 1080 HD, не забывайте подписываться на канал в YouTube, там Вы найдете много интересного видео, которое выходит достаточно часто. Приятного просмотра!

Источник