Android – Как сделать меню слайдов, как facebook, spotify и Google +

Я хочу добавить слайд-меню в мое приложение, как приложение facebook. Я много читал в Интернете о библиотеках, но никто не работал для меня. Какая лучшая вещь / библиотека, которую я могу использовать для этого, и может ли кто-нибудь объяснить мне, как ее использовать?

Редактировать Это мой макет:

"  

Но я не вижу ни кнопки, ни фонового изображения. Вы знаете, что происходит не так?

В настоящее время я работаю над проектом и сталкивался с раздвижным меню, я искал googled, но разочарован тем, что никто не дал никаких инструкций или намеков на то, как начать создавать скользящее меню. Каждый дал ссылку на некоторые проекты Github / библиотеки для использования, поэтому я решил сделать это сам, и, наконец, у меня есть собственное меню раздвижных …

Я потратил два дня на это

1. по созданию анимации скольжения

2. при работе с разрешением экрана

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

Итак, это изображение того, как мое скользящее меню будет работать

1.Find.xml //later in the code it will be refer as findLayout

                   //here i included the filter.xml, which is on top of find.xml layout and is initially invisible  

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

2.Filter.xml //later in code refer as FilterLayout

                              

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

В find.xml я включил filter.xml изначально, что невидимо

Теперь FilterAnimation.java

 package matchat.helpers; import com.s3.matchat.R; import android.content.Context; import android.util.DisplayMetrics; import android.view.View; import android.view.animation.AlphaAnimation; import android.view.animation.Animation; import android.view.animation.Animation.AnimationListener; import android.view.animation.AnimationUtils; import android.widget.RelativeLayout; public class FilterAnimation implements AnimationListener { Context context; RelativeLayout filterLayout, otherLayout; private Animation filterSlideIn, filterSlideOut, otherSlideIn, otherSlideOut; private static int otherLayoutWidth, otherLayoutHeight; private boolean isOtherSlideOut = false; private int deviceWidth; private int margin; public FilterAnimation(Context context) { this.context = context; DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics(); deviceWidth = displayMetrics.widthPixels; // as my animation is x-axis related so i gets the device width and will use that width,so that this sliding menu will work fine in all screen resolutions } public void initializeFilterAnimations(RelativeLayout filterLayout) { this.filterLayout = filterLayout; filterSlideIn = AnimationUtils.loadAnimation(context, R.anim.filter_slide_in); filterSlideOut = AnimationUtils.loadAnimation(context, R.anim.filter_slide_out); } public void initializeOtherAnimations(RelativeLayout otherLayout) { this.otherLayout = otherLayout; otherLayoutWidth = otherLayout.getWidth(); otherLayoutHeight = otherLayout.getHeight(); otherSlideIn = AnimationUtils.loadAnimation(context, R.anim.other_slide_in); otherSlideIn.setAnimationListener(this); otherSlideOut = AnimationUtils.loadAnimation(context, R.anim.other_slide_out); otherSlideOut.setAnimationListener(this); } public void toggleSliding() { if(isOtherSlideOut) //check if findLayout is already slided out so get so animate it back to initial position { filterLayout.startAnimation(filterSlideOut); filterLayout.setVisibility(View.INVISIBLE); otherLayout.startAnimation(otherSlideIn); } else //slide findLayout Out and filterLayout In { otherLayout.startAnimation(otherSlideOut); filterLayout.setVisibility(View.VISIBLE); filterLayout.startAnimation(filterSlideIn); } } @Override public void onAnimationEnd(Animation animation) { if(isOtherSlideOut) //Now here we will actually move our view to the new position,because animations just move the pixels not the view { RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(otherLayoutWidth, otherLayoutHeight); otherLayout.setLayoutParams(params); isOtherSlideOut = false; } else { margin = (deviceWidth * 80) / 100; //here im coverting device percentage width into pixels, in my other_slide_in.xml or other_slide_out.xml you can see that i have set the android:toXDelta="80%",so it means the layout will move to 80% of the device screen,to work across all screens i have converted percentage width into pixels and then used it RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(otherLayoutWidth, otherLayoutHeight); params.leftMargin = margin; params.rightMargin = -margin; //same margin from right side (negavite) so that our layout won't get shrink otherLayout.setLayoutParams(params); isOtherSlideOut = true; dimOtherLayout(); } } @Override public void onAnimationRepeat(Animation animation) { } @Override public void onAnimationStart(Animation animation) { } private void dimOtherLayout() { AlphaAnimation alphaAnimation = new AlphaAnimation(1.0f, 0.5f); alphaAnimation.setFillAfter(true); otherLayout.startAnimation(alphaAnimation); } } 

Теперь Find.java

 package main.matchat.activities; import matchat.helpers.FilterAnimation; import com.s3.matchat.R; import android.app.Activity; import android.os.Bundle; import android.util.DisplayMetrics; import android.view.View; import android.view.ViewTreeObserver; import android.view.View.OnClickListener; import android.view.ViewTreeObserver.OnGlobalLayoutListener; import android.widget.Button; import android.widget.RelativeLayout; public class Find extends Activity implements OnClickListener { RelativeLayout filterLayout, findLayout; Button btFilter; FilterAnimation filterAnimation; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.find); filterLayout = (RelativeLayout)findViewById(R.id.filter_layout); findLayout = (RelativeLayout)findViewById(R.id.find_layout); btFilter = (Button)findViewById(R.id.filter); btFilter.setOnClickListener(this); filterAnimation = new FilterAnimation(this); initializeAnimations(); } private void initializeAnimations() { //Setting GlobolLayoutListener,when layout is completely set this function will get called and we can have our layout onbject with correct width & height,else if you simply try to get width/height of your layout in onCreate it will return 0 final ViewTreeObserver filterObserver = filterLayout.getViewTreeObserver(); filterObserver.addOnGlobalLayoutListener(new OnGlobalLayoutListener() { @Override public void onGlobalLayout() { filterLayout.getViewTreeObserver().removeGlobalOnLayoutListener(this); DisplayMetrics displayMetrics = getResources().getDisplayMetrics(); int deviceWidth = displayMetrics.widthPixels; int filterLayoutWidth = (deviceWidth * 80) / 100; //here im coverting device percentage width into pixels, in my other_slide_in.xml or other_slide_out.xml you can see that i have set the android:toXDelta="80%",so it means the layout will move to 80% of the device screen,to work across all screens i have converted percentage width into pixels and then used it RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(filterLayoutWidth, RelativeLayout.LayoutParams.MATCH_PARENT); filterLayout.setLayoutParams(params);//here im setting the layout params for my filter.xml because its has width 260 dp,so work it across all screen i first make layout adjustments so that it work across all screens resolution filterAnimation.initializeFilterAnimations(filterLayout); } }); final ViewTreeObserver findObserver = findLayout.getViewTreeObserver(); findObserver.addOnGlobalLayoutListener(new OnGlobalLayoutListener() { @Override public void onGlobalLayout() { findLayout.getViewTreeObserver().removeGlobalOnLayoutListener(this); filterAnimation.initializeOtherAnimations(findLayout); } }); } @Override public void onClick(View v) { int id = v.getId(); switch(id) { case R.id.filter: filterAnimation.toggleSliding(); break; } } } 

Вот анимация res / anim

1.filter_slide_in.xml

     

2.filter_slide_out.xml

     

3.other_slide_in.xml

     

4.other_slide_out.xml

     

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

https://github.com/johnkil/SideNavigation

Я использую эту библиотеку в эти дни, и она работает очень хорошо. Действительно, его использование очень простое.

Вы просто объявляете side_navigation.xml в папке вашего меню:

         

Затем в вашем макете деятельности вы добавите навигацию. Вид:

  

И в вашей деятельности вы связываете их оба:

 SideNavigationView sideNavigationView = (SideNavigationView)findViewById(R.id.side_navigation_view); sideNavigationView.setMenuItems(R.menu.side_navigation); 

РЕДАКТИРОВАТЬ:

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

 @Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case android.R.id.home: sideNavigationView.toggleMenu(); return true; default: return super.onOptionsItemSelected(item); } } 

Вы также можете использовать http://www.scringo.com . Это SDK, который позволяет вам добавлять это боковое меню практически с помощью этого fragmentа кода:

 Scringo scringo = new Scringo(); scringo.init(); 

Существует много настроек, которые вы можете сделать позже с сайта (направление меню, цвета и т. Д.), А также добавить встроенные функции в меню, такие как входящие, найти / пригласить друзей, радар и т. Д.

Используйте официальную версию. Google опубликовал шаблон ящика навигации в I / O 2013 и обновил библиотеку поддержки версии 4, чтобы включить это. 🙂

http://developer.android.com/design/patterns/navigation-drawer.html

Вот простое раздвижное меню, разработанное мной, проверьте проект в github, очень просто реализовать http://github.com/leonardosalles/shipp-sliding-menu

Вы можете прочитать об этом 3 статьях:

http://android.cyrilmottier.com/?p=658

http://android.cyrilmottier.com/?p=701

http://android.cyrilmottier.com/?p=717

получить представление 🙂

Ящик навигации (Google+ и YouTube)

Меню «Слайд» ТЕХНИЧЕСКОЕ ОСУЩЕСТВЛЕНИЕ

Теперь боковая навигация включена в Android SDK. http://developer.android.com/design/patterns/navigation-drawer.html

Быстрый поиск в github показывает один проект, который реализовал шаблон пользовательского интерфейса.

android-fb-like-slideout-navigation в github. Также есть видео, демонстрирующее работу библиотеки.

EDIT: Вот еще один проект библиотеки: https://github.com/darvds/RibbonMenu Спасибо г-ну BuBBLs в комментариях!

Больше проекта библиотеки:

Кирилл Моттье также написал о реализации этого шаблона в своем блоге. Эти сообщения очень стоит прочитать:

  1. Создание Prixing # 1: меню приложений Fly-in
  2. Создание Prixing # 2: Прокрутка меню приложения fly-in
  3. Создание Prixing # 3: Полировка меню скользящих приложений

См. Также приложение Prixing в Google Play, чтобы попробовать боковую навигацию, реализованную Кирилом.

Если вы хотите создать свое собственное меню «Слайдинг» вместо использования других библиотек, чтобы лучше понять, как все работает, прочитайте мои статьи здесь

Создайте собственное скользящее меню в учебнике Android – часть 1

Создайте собственное скользящее меню в учебнике Android – часть 2

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

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

Идея состоит в том, чтобы полагаться на 2 метода offsetLeftAndRight () и layout (), чтобы обновить позицию представления. Вам также понадобится Скроллер для облегчения анимации

Попробуйте этот метод. Два относительных макета в xml.

 CONTENT(initially gone) HEADER 

Заголовок первоначально занимает всю ширину, а содержимое находится слева от заголовка, но в настоящее время установлено значение Видимость = GONE.

Поэтому, когда клик происходит в заголовке или любой кнопке в макете заголовка

Просто установите ширину вашего макета контента на screen_width / 2 (фракция будет зависеть от вашего требования).

 public void onCreate(){ RelativeLayout header=(RelativeLayout)findViewById(R.id.header); RelativeLayout content=(RelativeLayout)findViewById(R.id.content); Display display = getWindowManager().getDefaultDisplay(); int width = display.getWidth(); // deprecated int height = display.getHeight(); // deprecated //on some event content.setVisibility(View.VISIBLE); //margin(left,right,bottom,top) content.setMargin(width/3,0,0,0); //if already opened,close the door content.setVisibility(View.GONE); } 

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

  • Ошибка: выполнение выполнено для задачи ': app: transformClassesWithDexForDebug'
  • Ошибка типа 3 Ошибка: class действия {} не существует
  • Как получить контакты из родной телефонной книги в Android
  • Уведомление о облачных сообщениях Firebase, которое не получено устройством
  • ServerTimestamp всегда имеет значение null для Firebase Firestore
  • Android: Как resize CheckBox?
  • ExpandableListView в проблеме fragmentа
  • Размещение текстового поля поверх изображения в андроиде
  • Как добавить банку в внешние библиотеки в студии android
  • aapt не найден по правильному пути
  • Использование Alarmmanager для запуска службы в определенное время
  • Давайте будем гением компьютера.