Android-стиль слайдов

Новое приложение Facebook и его навигация настолько классные. Я просто пытался понять, как его можно эмулировать в моем приложении.

Кто-нибудь знает, как это можно достичь?

Введите описание изображения здесь

При нажатии на верхнюю левую кнопку отображается слайд страницы и следующий экран:

Введите описание изображения здесь

YouTube видео

Solutions Collecting From Web of "Android-стиль слайдов"

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

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

Код находится здесь, а нижние две кнопки (называемые HorzScrollWithListMenu и HorzScrollWithImageMenu) в действии Launch показывают лучшие меню, которые я мог бы придумать:

Демоверсия меню Android

Снимок экрана с эмулятора (середина прокрутки):

Снимок экрана с эмулятора (середина прокрутки)

Снимок экрана с устройства (полнопрокрутка). Обратите внимание, что мой значок не так широк, как значок меню Facebook, поэтому представление меню и «приложение» не выровнены.

Снимок экрана с устройства (полный прокрутка)

Я реализовал facebook-подобную навигацию в этом проекте библиотеки .

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

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

Также этот lib должен быть совместим с этим шаблоном ActionBar, потому что он основан на транзакциях операций и транзакциях TranslateAnimations (а не на фрагментах и ​​пользовательских представлениях).

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

Всего наилучшего,
Alex

Вот еще один либр и кажется лучшим на мой взгляд. Я этого не писал.

ОБНОВИТЬ:

Этот код работает лучше всего для меня, и он перемещает весь Actionbar, похожий на приложение G +.

Как Google смог это сделать? Слайд ActionBar в приложении для Android

Я думаю, что приложение facebook не написано в собственном коде (с помощью собственного кода, я имею в виду, используя макеты в Android), но они использовали webview для него и использовали некоторые библиотеки javascript ui, такие как sencha . Его можно легко достичь с помощью системы sencha.

Введите описание изображения здесь

Вот еще одна (очень хорошая) библиотека с открытым исходным кодом!

Хорошей особенностью этого является то, что он легко интегрируется с ActionBarSherlock.

Вот ссылка проекта github

Ссылка на скачивание Google Play

Я только что реализовал аналогичный вид для своего собственного проекта. Вы можете проверить это здесь

Вот экран примера приложения на основе библиотеки, который я написал: Примеры действийContentView

Легко использовать это настраиваемое представление как элемент компоновки XML. Вот пример:

  <shared.ui.actionscontentview.ActionsContentView android:id="@+id/content" android:layout_width="match_parent" android:layout_height="match_parent" app:actions_layout="@layout/actions" app:content_layout="@layout/content" /> 

У меня возникнут вопросы об использовании библиотеки ActionsContentView. Я могу написать небольшую статью в проектах Wiki.

Некоторые преимущества этой библиотеки:

  • Возможность просмотра слайдов
  • Легко настроить размер панели действий в XML
  • Поддержка всех версий Android SDK, начиная с версии 2.0 и выше

Существует одно ограничение:

  • Все горизонтальные прокрутки не будут работать на границах этого вида

С уважением, Стивен

С версией пакета поддержки android 13 (возможно, 2013 г.) есть DrawerLayout для создания ящика навигации, который можно вытащить с края окна. И теперь навигационный ящик является шаблоном проектирования.

Библиотека поддержки v4

Схема проектирования ящика навигации

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

Это также удаляет панель действий!

Все это проект библиотеки вместе с примером приложения и описан в скользящем меню для Android, например, в google и facebook . Благодаря scirocco для первоначальной идеи и кода!

SlideMenu на пряникеSlideMenu на ICS с ActionBar

Это просто и элегантно: https://github.com/akotoe/android-slide-out-menu.git

Снимок:

Введите описание изображения здесь

Я думаю, что библиотека не упомянула:

Jfeinstein10 / SlidingMenu

github url: https://github.com/jfeinstein10/SlidingMenu

  • Отлично работает с панелью действий ActionBarSherlock, которая помогает в обратной совместимости !
  • Поддержка правого слайда и не только перемещение по кнопке!

Не могу прокомментировать ответ, данный @Paul Grime, но в любом случае я представил в своем проекте github исправление проблемы мерцания ….

Я отправлю исправление, возможно, кому-то это нужно. Вам просто нужно добавить две строки кода. Первый ниже вызова anim.setAnimationListener:

 anim.setFillAfter(true); 

А второй после вызова app.layout ():

 app.clearAnimation(); 

Надеюсь это поможет 🙂

Я реализовал это с помощью AbsoluteLayout и простого контроллера слайдов, который перемещает представление на отрицательное смещение, чтобы скрыть.

Если кто-то заинтересован, я могу очистить код / ​​макет и отправить сообщение. Я знаю, что AbsoluteLayout устарел, но это была очень простая реализация. «Влево» / «Вправо», а когда «раздвигается», просто сдвиньте левый вид со смещения -X на ширину устройства – все, что вы хотите показать в правом представлении

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

Введите описание изображения здесь

Введите описание изображения здесь

В рамках моей общей библиотеки Android (ACL) я реализовал собственный SideBar. Основные преимущества:

  1. Боковая панель может быть установлена ​​в любое положение: слева, сверху, снизу, справа
  2. Как основной, так и скользящий вид доступны для просмотра
  3. Боковая панель может быть частично показана
  4. Стилируемые атрибуты для SideBar упрощают изменение стиля
  5. Артефакт в maven repo
  6. Часть большой библиотеки

Исходный код: https://github.com/serso/android-common/tree/master/views/src/main/java/org/solovyev/android/view/sidebar

Использование: https://github.com/serso/android-common/blob/master/samples/res/layout/acl_view_layout.xml

Недавно я работал над моей версией реализации скользящего меню. Он использует популярную библиотеку Android. SlidingMenu.

Проверьте исходный код в GitHub:

https://github.com/baruckis/Android-SlidingMenuImplementation

Загрузите приложение прямо на устройство, чтобы попробовать:

https://play.google.com/store/apps/details?id=com.baruckis.SlidingMenuImplementation

Кодекс должен быть понятным из-за комментариев. Надеюсь, это будет полезно! 😉

Я нашел простейший способ для этого и его работы. Используйте простой ящик навигации и вызовите drawer.setdrawerListner () и используйте метод mainView.setX () в методе drawerSlide ниже или скопируйте мой код.

Xml-файл

  <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#000000" > <RelativeLayout android:id="@+id/content_frame" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#ffffff"> <ImageView android:layout_width="40dp" android:layout_height="40dp" android:id="@+id/menu" android:layout_alignParentTop="true" android:layout_alignParentLeft="true" android:layout_marginTop="10dp" android:layout_marginLeft="10dp" android:src="@drawable/black_line" /> </RelativeLayout> <RelativeLayout android:id="@+id/left_drawer" android:layout_width="200dp" android:background="#181D21" android:layout_height="match_parent" android:layout_gravity="start" > </RelativeLayout> </android.support.v4.widget.DrawerLayout> 

Java-файл

  public class MainActivity extends AppCompatActivity { DrawerLayout drawerLayout; RelativeLayout mainView; ImageView menu; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); menu=(ImageView)findViewById(R.id.menu); drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout); mainView=(RelativeLayout)findViewById(R.id.content_frame); menu.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { drawerLayout.openDrawer(Gravity.LEFT); } }); drawerLayout.setDrawerListener(new DrawerLayout.DrawerListener() { @Override public void onDrawerSlide(View drawerView, float slideOffset) { mainView.setX(slideOffset * 300); } @Override public void onDrawerOpened(View drawerView) { } @Override public void onDrawerClosed(View drawerView) { } @Override public void onDrawerStateChanged(int newState) { } }); } } 

Введите описание изображения здесь

Спасибо

Я собираюсь сделать смелые предположения здесь …

Я предполагаю, что у них есть макет, который представляет меню, которое не видно. Когда кнопка меню нажата, они оживляют макет / представление сверху, чтобы уйти с пути, и просто включите видимость макета меню. Я не думал об этом, вызывая какие-либо проблемы с z-index в представлениях или как они это контролируют.

Вот руководство по разработке и разработке, которое содержится в официальной документации по Android, не нужно добавлять неофициальную внешнюю библиотеку. Будет работать только библиотека поддержки Android. Найдите ссылки здесь.

Дизайна и разработки .

Android-приложение Facebook возможно построено с помощью фрагментов . Меню – это один фрагмент, глубина активности (Newsfeed / Events / Friends и т. Д.) – это другой фрагмент. В основном планшет «мастер и детализация» на телефоне.

Для информации, поскольку библиотека совместимости начинается с 1.6, и это приложение facebook также работает на устройствах с Android 1.5, это невозможно сделать с помощью фрагментов.

Вы можете сделать так: создать базовую активность BaseMenuActivity, где вы поместите всю логику для onItemClickListener для своего списка меню и определите 2 анимации («открыть» и «закрыть»). В конце / начале анимации вы показываете / скрываете макет BaseMenuActivity (разрешаете его menu_layout). Макет для этого действия прост, его единственный список с элементами + прозрачная часть справа от вашего списка. Эта часть будет кликабельна, и ее ширина будет такой же, как и ваша кнопка перемещения. При этом вы сможете щелкнуть этот макет, чтобы запустить анимацию, чтобы позволить content_layout скользить влево и снимать весь экран. Для каждой опции (т.е. пункта списка меню) вы создаете «ContentActivity», который расширяет BaseMenuActivity. Затем, когда вы нажимаете на элемент списка, вы начинаете свой ItemSelectedContentActivity с видимым меню (которое вы закроете, как только начнется ваша активность). Макеты для каждого ContentActivity являются FrameLayout и включают в себя и. Вам просто нужно переместить content_layout и сделать menu_layout видимым, когда захотите.

Это способ сделать это, и я надеюсь, что я был достаточно ясен.

Я играю с этим в последние несколько дней, и я придумал решение, которое довольно простое в конце, и которое работает до сота. Мое решение состояло в том, чтобы оживить представление, которое я хочу FrameLayout ( FrameLayout для меня), и прослушать конец анимации (в этот момент для смещения левой или правой позиции View). Я вставил свое решение здесь: Как оживить перевод View

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

Реализация боковой панели меню с помощью java-кода без XML

Я не видел, как удивительный SimonVT / android-menudrawer упоминается где-либо в приведенных выше ответах. Итак, вот ссылка

https://github.com/SimonVT/android-menudrawer

Его супер проста в использовании, и вы можете поместить его слева, справа, сверху или снизу. Очень хорошо документирован пример кода и лицензия Apache 2.0.

Android добавил навигационный ящик. См.

ссылка

В июне 2012 года Google добавила «шаблоны» в плагин Eclipse ADT , и есть шаблон, называемый «поток master / detail», который делает именно это (на основе fragmets)