Слайд у стилі Android на Facebook

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

У когось є поняття, як цього можна досягти?

При натисканні на верхню ліву кнопку відображається сторінка, і відображається наступний екран:

YouTube Video

Я сам зіткнувся з цим, і найкращий спосіб, який я міг знайти, - це використовувати FrameLayout і закласти спеціальний HorizontalScrollView (HSV) у верхній частині меню. Всередині HSV переглядаються ваші програми, але є прозорий погляд як першої дитини. Це означає, що коли HSV має нульове зміщення прокрутки, меню відобразиться (і все-таки на диво можна натискати).

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

Код тут, а два нижніх кнопки (під назвою HorzScrollWithListMenu та HorzScrollWithImageMenu) у програмі Launch показують найкращі меню, які я міг придумати:

Демонстраційна демонстрація меню Android

Знімок екрана з емулятора (середина прокрутки):

Знімок екрана з пристрою (повний прокруток). Зауважте, що моя піктограма не така широка, як піктограма меню Facebook, тому перегляд меню та перегляд "програми" не вирівнюються.

У цьому проекті бібліотеки я впровадив навігацію, що нагадує фейсбук .

Ви можете легко вбудувати його у свою програму, інтерфейс користувача та навігацію. Вам потрібно буде реалізувати лише одну діяльність та один фрагмент, повідомити про це бібліотеку - і бібліотека забезпечить усі потрібні анімації та навігацію.

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

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

Зараз найбільш проблемою є те, щоб він працював добре для додатків, які підтримують як портретний, так і альбомний режим. Якщо у вас є відгуки, будь ласка, надайте їх через github.

Все найкраще,
Алекс

Ось ще одна лайка і, здається, найкраща на мою думку. Я цього не писав ..

ОНОВЛЕННЯ:

Цей код, здається, працює найкраще для мене, і він переміщує всю панель дій, аналогічну додатку G +.

Як Google встиг це зробити? Слайд ActionBar в додатку Android

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

Ось ще одна (дуже приємна) бібліотека з відкритим кодом!

Хорошою особливістю цього є те, що він легко інтегрується з 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 і вище

Є одне обмеження:

• усі горизонтальні види прокрутки не будуть працювати в межах цього подання

З найкращими побажаннями, Стівен

З версією пакета підтримки Android, версія 13 (травень 2013 р.), Існує DrawerLayout для створення навігаційного ящика, який можна витягнути з краю вікна. І навігаційний ящик - це модель дизайну зараз.

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

шаблон дизайну навігаційного ящика

Зробив перелік існуючої реалізації та перетворив її на проект бібліотеки плюс приклад програми. Також додано XML-синтаксичний розбір, а також автоматичне виявлення можливої ​​наявної панелі дій, тому вона працює як з рідною, так і з панеллю підтримки підтримки, наприклад ActionBarSherlock.

Цей також відсуває панель дій геть!

Вся справа в бібліотечному проекті разом із прикладом програми та описана в розсувному меню для Android, як додатки google та facebook . Дякуємо scirocco за початкову ідею та код!

Це просто і елегантно: 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 до ширини пристрою - все, що ви хочете показати у правій подачі

Привіт, це найкращий зразковий демонстраційний додаток, який забезпечує фейсбук, як слайд-меню. Перевірте код тут

Як частина моєї спільної бібліотеки 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 FlidinsMenu J.Feinstein.

Перевірте вихідний код на 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-індексами у представленнях або як вони це контролюють.

Android додав ящик для навігації. Зверніться до цього

посилання

Ось керівництво по розробці та розробці, знайдене в офіційній документації на Android, не потрібно додавати неофіційну зовнішню бібліотеку. Тільки бібліотека підтримки для Android буде робити. Знайдіть посилання тут.

проектувати та розробляти .

Додаток Facebook для Android, можливо, створюється за допомогою фрагментів . Меню - один фрагмент, поглиблена діяльність (Newsfeed / події / друзі тощо) - інший. В основному планшет "головний і детальний" макет на телефоні.

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

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

Це спосіб це зробити, і я сподіваюся, що я був досить зрозумілий.

Я грав з цим останні кілька днів, і придумав рішення, яке в кінцевому підсумку є досить простим, і яке працює попередньо сотовим. Моє рішення полягало в анімації Перегляду, який я хочу просунути ( FrameLayoutдля мене) і прослуховування кінця анімації (в який момент змістити положення Вліво / Вправо Погляду). Тут я вставив своє рішення: Як оживити переклад перегляду

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

реалізація бічної панелі меню з використанням коду Java без XML

Я не бачив дивовижного SimonVT / android-menudrawer, згаданого ніде у вищезазначених відповідях. Тож ось посилання

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

Його супер простий у використанні, і ви можете розмістити його зліва, справа, вгорі або внизу. Дуже добре документований зразок коду та ліцензія Apache 2.0.

У червні 2012 року Google додав "шаблони" в плагін Eclipse ADT , і є шаблон під назвою "master / деталь потоку", який робить саме це (на основі fragmets)