it-swarm.com.ru

Android Слайд в стиле Facebook

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

У кого-нибудь есть подсказка, как этого можно добиться?

enter image description here

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

enter image description here

YouTube Video

281
Harsha M V

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

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

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

Android-демонстрация скользящего меню

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

Screenshot from emulator (mid-scroll)

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

Screenshot from device (full-scroll)

176
Paul Grime

Я реализовал слайд-навигацию в стиле Facebook в этот проект библиотеки .

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

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

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

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

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

37
AlexKorovyansky

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

Обновление:

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

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

24
Patrick

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

enter image description here

22
Sanjay Kumar

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

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

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

Вот ссылка Google Play скачать

20
dwbrito

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

Вот пример экрана приложения на основе библиотеки, которую я написал: ActionsContentView Example

Этот пользовательский вид легко использовать как элемент макета 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 и выше

Есть одно ограничение:

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

С наилучшими пожеланиями, Стивен

17
rude

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

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

шаблон оформления ящика навигации

16
Wubao Li

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

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

Все это - библиотечный проект вместе с примером приложения, который описан в Скользящее меню для таких Android, как приложения Google и Facebook . Спасибо Scirocco за первоначальную идею и код!

SlideMenu on GingerbreadSlideMenu on ICS with ActionBar

15
bk138

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

Снимок:

enter image description here

10
Edward

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

jfeinstein1 / SlidingMen

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

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

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

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

anim.setFillAfter(true);

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

app.clearAnimation();

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

8
Fatal1ty2787

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

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

6
Rich

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

enter image description here

enter image description here

4
Mukesh Y

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

Пожалуйста, проверьте исходный код на GitHub:

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

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

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

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

3
Andrius Baruckis

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

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) {

        }
    });
 }
}

enter image description here

Благодарю вас

3
Dalvinder Singh

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

  1. Боковая панель может быть установлена ​​в любое положение: слева, сверху, снизу, справа
  2. Как основной вид, так и скользящий вид кликабельны
  3. Боковая панель может быть частично показана
  4. Стилируемые атрибуты для SideBar упрощают изменение его стиля
  5. Артефакт в репо мавен
  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

3
se.solovyev

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

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

2
jai_b

Я собираюсь сделать некоторые смелые догадки здесь ...

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

2
jlindenbaum

Приложение Facebook Android, возможно, построено с фрагменты . Меню - это один фрагмент, а углубленное действие (лента новостей/события/друзья и т.д.) - это другой фрагмент. В основном макет планшета "Master & Detail" на телефоне.

1
Gunnar Karlsson

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

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

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

1
p4u144

Я не видел удивительного SimonVT/Android-menudrawer, упомянутого выше в ответах. Так вот ссылка

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

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

1
lwegener

Android добавил навигационный ящик. Отослать это

ссылка

1
Deepak Goel

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

1
Adil Hussain

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

реализация боковой строки меню с использованием кода Java без XML

1
Chao

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

0
rds