Слайд в стиле Facebook для Android
Новое приложение Facebook и его навигация так круты. Я просто пытался увидеть, как это может быть воспроизведено в моем приложении.
У кого-нибудь есть подсказка, как этого можно добиться?
При нажатии на верхнюю левую кнопку отображается слайд страницы и следующий экран:
25 ответов
Я сам поиграл с этим, и лучший способ, который я смог найти, - это использовать FrameLayout и положить пользовательский HorizontalScrollView (HSV) поверх меню. Внутри HSV находятся ваши приложения Views, но есть прозрачный View как первый дочерний элемент. Это означает, что когда HSV имеет нулевое смещение прокрутки, меню будет отображаться на экране (и все равно будет удивительно активным).
Когда приложение запускается, мы прокручиваем HSV до смещения первого видимого приложения View, и когда мы хотим показать меню, мы прокручиваем назад, чтобы открыть меню через прозрачный View.
Код здесь, и две нижние кнопки (называемые HorzScrollWithListMenu и HorzScrollWithImageMenu) в действии Launch показывают лучшие меню, которые я мог придумать:
Android-демонстрация скользящего меню
Снимок экрана с эмулятора (средняя прокрутка):
Скриншот с устройства (полная прокрутка). Обратите внимание, что мой значок не такой широкий, как значок меню Facebook, поэтому вид меню и вид приложения не совпадают.
В этом проекте библиотеки я реализовал слайд-навигацию в стиле Facebook.
Вы можете легко встроить его в свое приложение, интерфейс и навигацию. Вам нужно будет реализовать только одно действие и один фрагмент, сообщить об этом библиотеке - и библиотека обеспечит все необходимые анимации и навигацию.
Внутри репозитория вы можете найти демо-проект, в котором рассказывается, как использовать lib для реализации навигации в стиле Facebook. Вот короткое видео с записью демо-проекта.
Также эта библиотека должна быть совместима с этим шаблоном ActionBar, потому что она основана на транзакциях операций и TranslateAnimations (не на транзакциях фрагментов и пользовательских представлениях).
В настоящее время основная проблема заключается в том, чтобы заставить его хорошо работать для приложений, которые поддерживают как портретный, так и ландшафтный режим. Если у вас есть какие-либо отзывы, пожалуйста, предоставьте их через github.
Всего наилучшего,
Alex
Вот еще одна библиотека и, кажется, лучшая на мой взгляд. Я не писал это..
ОБНОВИТЬ:
Этот код, кажется, работает лучше всего для меня, и он перемещает всю панель действий, как приложение G+.
Как Google удалось это сделать? Слайд ActionBar в приложении Android
Я думаю, что приложение facebook не написано в нативном коде (я имею в виду нативный код, используя макеты в Android), но они использовали для него webview и использовали некоторые библиотеки javascript ui, такие как sencha. Это может быть легко достигнуто с помощью Sencha Framework.
Вот еще одна (очень хорошая) библиотека с открытым исходным кодом!
Хорошая особенность этого в том, что он легко интегрируется с ActionBarSherlock.
Вот ссылка на проект GitHub
Вот ссылка на скачивание Google Play
Я только что реализовал аналогичное представление для моего собственного проекта. Вы можете проверить это здесь
Вот пример экрана приложения на основе библиотеки, которую я написал:
Этот пользовательский вид легко использовать как элемент макета 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 и выше
Есть одно ограничение:
- все горизонтальные виды прокрутки не будут работать в границах этого вида
С наилучшими пожеланиями, Стивен
С версией 13 пакета поддержки Android (май 2013 г.) есть DrawerLayout для создания Навигационного Ящика, который можно вытянуть из края окна. И навигационный ящик - теперь образец дизайна.
Сделал обзор существующей реализации и превратил ее в проект библиотеки плюс пример приложения. Также добавлен синтаксический анализ XML, а также автоопределение, возможно, существующей панели действий, поэтому она работает как со встроенной, так и со вспомогательной панелью действий, такой как ActionBarSherlock.
Этот также сдвигает панель действий!
Все это - библиотечный проект вместе с примером приложения, который описан в "Скользящем меню для Android", как приложения Google и Facebook. Спасибо Scirocco за первоначальную идею и код!
Я думаю, что библиотека не упоминается:
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-библиотеку J.Feinstein SlidingMenu.
Пожалуйста, проверьте исходный код на GitHub:
https://github.com/baruckis/Android-SlidingMenuImplementation
Загрузите приложение прямо на устройство, чтобы попробовать:
https://play.google.com/store/apps/details?id=com.baruckis.SlidingMenuImplementation
Код должен быть понятен из-за комментариев. Я надеюсь, что это будет полезно!;)
Я нашел самый простой способ для этого и его работы. Используйте простой навигационный ящик и вызовите 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) {
}
});
}
}
Благодарю вас
Как часть моей общей библиотеки Android (ACL) я реализовал собственный SideBar. Основные преимущества:
- Боковую панель можно установить в любую позицию: слева, сверху, снизу, справа
- Как основной вид, так и скользящий вид являются интерактивными
- Боковая панель может быть частично показана
- Стилируемые атрибуты для SideBar упрощают изменение его стиля
- Артефакт в репо Maven
- Часть большой библиотеки
Исходный код: 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, не нужно добавлять неофициальную внешнюю библиотеку. Подойдет только библиотека поддержки Android. Найти ссылки здесь.
Я собираюсь сделать некоторые смелые предположения здесь...
Я предполагаю, что у них есть макет, который представляет меню, которое не видно. При нажатии кнопки меню они анимируют макет / вид сверху, чтобы убрать его с дороги, и просто обеспечивают видимость макета меню. Я не думал о том, чтобы это вызывало какие-либо проблемы с z-индексами в представлениях или как они это контролируют.
Android добавил навигационный ящик. Отослать это
Я не видел удивительного SimonVT/android-menudrawer, упомянутого в ответах выше. Так вот ссылка
https://github.com/SimonVT/android-menudrawer
Его очень легко использовать, и вы можете положить его слева, справа, сверху или снизу. Очень хорошо документировано с примером кода и лицензией Apache 2.0.
Android-приложение Facebook, возможно, построено из фрагментов. Меню - это один фрагмент, а углубленное действие (лента новостей / события / друзья и т. Д.) - это другой фрагмент. В основном макет планшета "мастер и детализация" на телефоне.
Для информации: поскольку библиотека совместимости начинается с версии 1.6, а это приложение для Facebook также работает на устройствах с Android 1.5, это невозможно сделать с помощью фрагментов.
Это можно сделать следующим образом: создать "базовое" действие BaseMenuActivity, в которое вы помещаете всю логику для onItemClickListener для списка меню и определяете 2 анимации ("открыть" и "закрыть"). В конце / начале анимации вы показываете / скрываете макет BaseMenuActivity (назовем его menu_layout). Макет для этого действия прост, это всего лишь список с элементами + прозрачная часть справа от вашего списка. Эта часть будет кликабельной, и ее ширина будет равна ширине вашей кнопки перемещения. С этим вы сможете нажать на этот макет, чтобы запустить анимацию, чтобы content_layout скользил влево и занимал весь экран. Для каждого параметра (т. Е. Элемента списка меню) вы создаете "ContentActivity", которое расширяет BaseMenuActivity. Затем, когда вы нажимаете на элемент списка, вы запускаете ItemSelectedContentActivity с видимым меню (которое вы закроете, как только начнете свою деятельность). Макеты для каждого ContentActivity являются FrameLayout и включают в себя и. Вам просто нужно переместить content_layout и сделать menu_layout видимым, когда вы хотите.
Это способ сделать это, и я надеюсь, что я достаточно ясно.
После нескольких часов поиска я обнаружил, что решение Пола Грайма, вероятно, является лучшим. Но в нем слишком много функциональности. Так что это может быть трудно учиться для начинающих. Поэтому я хотел бы представить свою реализацию, основанную на идее Пола, но она более проста и должна легко читаться.
реализация боковой строки меню с использованием кода Java без XML
Я играл с этим последние несколько дней, и я придумал решение, которое в конечном итоге довольно простое и работает до соты. Мое решение состояло в том, чтобы оживить Представление, которое я хочу скользить (FrameLayout для меня) и прослушать конец анимации (в какой момент сместить левую / правую позицию вида). Я вставил свое решение здесь: Как оживить перевод View
В июне 2012 года Google добавил "шаблоны" в плагин Eclipse ADT, и есть шаблон, называемый "поток основных / подробных данных", который делает именно это (на основе фрагментов)