Android Facebook风格幻灯片

Question

新的Facebook应用程序及其导航非常酷。我只是想看看如何在我的应用程序中模拟它。

任何人都知道如何实现这一目标？

单击左上角的按钮，页面滑动显示以下屏幕：

YouTube Video

Answer 1

我自己玩过这个游戏，我找到的最好方法是使用FrameLayout并在菜单上放置一个自定义Horizo​​ntalScrollView（HSV）。 HSV内部是您的应用程序视图，但是有一个透明的View作为第一个子视图。这意味着，当HSV零滚动偏移时，菜单将显示（并且仍然可以令人惊讶地点击）。

当应用程序启动时，我们将HSV滚动到第一个可见应用程序View的偏移量，当我们想要显示菜单时，我们向后滚动以通过透明视图显示菜单。

代码在这里，Launch活动中的底部两个按钮（称为HorzScrollWithListMenu和HorzScrollWithImageMenu）显示了我能想出的最佳菜单：

Android sliding menu demo

模拟器（中间滚动）的屏幕截图：

设备截图（全滚动）。请注意，我的图标不像Facebook菜单图标那么宽，因此菜单视图和“应用”视图未对齐。

Answer 2

我在this library project中实现了类似Facebook的幻灯片导航。

您可以轻松地将其构建到您的应用程序，UI和导航中。您只需要实现一个Activity和一个Fragment，让库知道它 - 库将提供所有想要的动画和导航。

在repo中你可以找到demo-project，以及如何使用lib来实现类似facebook的导航。 Here is short video with record of demo project

此lib也应与此ActionBar模式兼容，因为它基于活动事务和TranslateAnimations（不是片段事务和自定义视图）。

目前，最大的问题是让它适用于支持纵向和横向模式的应用程序。如果您有任何反馈意见，请通过github提供。

一切顺利，
亚历

Answer 3

这是another lib，在我看来似乎是最好的。我没有写它..

更新：

这段代码似乎最适合我，它会将整个Actionbar移动到类似于G + app的位置。

How did Google manage to do this? Slide ActionBar in Android application

Answer 4

我认为facebook应用程序不是用本机代码编写的（我的意思是说，使用Android中的布局），但他们使用了webview，并使用了一些javascript ui库，如sencha。使用sencha框架可以很容易地实现它。

Answer 5

这是另一个（非常好的）开源库！

关于这个的一个很好的特点是它很容易与ActionBarSherlock集成。

这是github项目链接

这是Google Play下载链接

Answer 6

我刚刚为自己的项目实现了类似的视图。您可以查看here

这是基于我写的库的示例应用程序的屏幕：

将此自定义视图用作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中操作栏的大小
• 支持从2.0及更高版本开始的所有Android SDK版本

有一个限制：

• 所有水平滚动视图都不适用于此视图的边界

祝你好运， 史蒂芬

Answer 7

使用android支持包修订版13（2013年5月），可以使用DrawerLayout创建可以从窗口边缘拉入的导航抽屉。而且，导航抽屉现在是一种设计模式。

v4 support library

navigation drawer design pattern

Answer 8

对existing implementation进行了综合并将其转换为图书馆项目和示例应用。还添加了XML解析以及可能存在的操作栏的自动检测，因此它可以与本机以及支持操作栏（如ActionBarSherlock）一起使用。

这个也滑动了操作栏！

整个事情是一个图书馆项目和示例应用程序，并在A sliding Menu for Android like google and facebook apps进行了描述。感谢scirocco的初步想法和代码！

Answer 9

我认为图书馆没有提到：

jfeinstein10 / SlidingMenu

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

• 适用于操作栏 ActionBarSherlock ，这有助于向后兼容！
• 支持右侧幻灯片，而不仅仅是通过按钮滑动！

Answer 10

这很简单而优雅：https://github.com/akotoe/android-slide-out-menu.git

快照：

Answer 11

无法评论@Paul Grime给出的答案，无论如何，我已经在他的github项目上提交了针对闪烁问题的修复....

我会在这里发布修复，也许有人需要它。您只需添加两行代码即可。 anim.setAnimationListener调用下面的第一个：

anim.setFillAfter(true);

app.layout（）之后的第二个调用：

app.clearAnimation();

希望这会有所帮助：）

Answer 12

我用AbsoluteLayout和一个简单的滑动控制器实现了这个功能，它将视图移动到负偏移以隐藏。

如果有人有兴趣，我可以清理代码/布局并发布。我知道AbsoluteLayout已被弃用，但这是一个非常直接的实现。左视图/右视图，当“滑动打开”时，只需将左视图从-X偏移移动到设备的宽度 - 无论您想要显示右视图

Answer 13

  

你好这是最好的示例演示应用程序，提供像幻灯片一样的facebook   菜单。检查代码here

Answer 14

我找到了一种最简单的方法和它的工作方式。使用简单的导航抽屉并调用drawer.setdrawerListner（）并在下面的drawerSlide方法中使用mainView.setX（）方法或复制我的代码。

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

        }
    });
 }
}

谢谢

Answer 15

最近我参与了我的滑动菜单实现版本。它使用流行的J.Feinstein Android库SlidingMenu。

请检查GitHub上的源代码：

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

将应用程序直接下载到设备上以尝试：

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

由于评论，代码应该是不言自明的。我希望它会有所帮助！ ;）

Answer 16

作为我的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

Answer 17

以下是官方android文档中的设计和开发指南，无需添加非官方外部库。只有android支持库才能做到。在这里找到链接。

design和develop。

Answer 18

我将在这里做一些大胆的猜测......

我认为他们有一个代表不可见菜单的布局。当点击菜单按钮时，它们会为顶部的布局/视图设置动画以移开方向，并简单地启用菜单布局的可见性。我没有想过这会导致视图中出现任何类型的z-index问题，或者它们如何控制它。

Answer 19

我没有看到上面答案中提到的神奇的SimonVT / android-menudrawer。所以这是一个链接

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

它超级易用，你可以把它放在左，右，上或下。有关示例代码和Apache 2.0许可证的详细记录。

Answer 20

经过几个小时的搜索，我发现Paul Grime的解决方案可能是最好的解决方案。但它的功能太多了。所以对初学者来说可能很难学习。所以我想提供我的实现，这是来自保罗的想法，但它更简单，应该易于阅读。

implementation of side menu bar by using java code without XML

Answer 21

过去几天我一直在玩这个，我最终提出了一个非常简单的解决方案，它在蜂窝前工作。我的解决方案是为我想要滑动的视图（FrameLayout为我设置动画）并监听动画的结束（此时偏移View的左/右位置）。我在这里粘贴了我的解决方案：How to animate a View's translation

Answer 22

有关信息，由于兼容性库以1.6开头，而且此Facebook应用程序也在使用Android 1.5的设备上运行，因此无法使用Fragments完成。

你能做到的方式是： 创建一个“基础”活动BaseMenuActivity，其中为菜单列表放置onItemClickListener的所有逻辑，并定义2动画（“打开”和“关闭”）。 在动画的结尾/开始，您显示/隐藏BaseMenuActivity的布局（让我们称之为menu_layout）。 此活动的布局很简单，只有列表中包含项目+列表右侧的透明部分。这部分是可点击的，其宽度与“移动按钮”的宽度相同。这样，您就可以单击此布局来启动动画，让content_layout向左滑动并占据整个屏幕。 对于每个选项（即菜单列表的项目），您创建一个“ContentActivity”，它扩展了BaseMenuActivity。然后，当您单击列表中的某个项目时，可以启动ItemSelectedContentActivity并显示菜单（一旦您的活动开始，您就会关闭该菜单）。 每个ContentActivity的布局都是FrameLayout，包括和。您只需移动content_layout并在需要时使menu_layout可见。

这是一种方法，我希望我已经足够清楚了。

Answer 23

Facebook Android应用可能会使用Fragments构建。菜单是一个Fragment，深入的Activity（Newsfeed / Events / Friends等）是另一个片段。基本上是平板电脑的主人＆amp;电话上的详细布局。

Answer 24

Android添加了导航抽屉。请参阅此

link

Answer 25

2012年6月，Google has added "templates" in the Eclipse ADT plugin，并且有一个名为“主/详细流程”的模板，它正是这样做的（基于碎片）