it-swarm.cn

Android Facebook风格幻灯片

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

任何人都知道如何实现它?

enter image description here

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

enter image description here

YouTube视频

280
Harsha M V

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

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

代码在这里,Launch活动中的底部两个按钮(称为HorzScrollWithListMenu和HorzScrollWithImageMenu)显示了我能想到的最佳菜单:

Android滑动菜单演示

模拟器(中间滚动)的屏幕截图:

Screenshot from emulator (mid-scroll)

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

Screenshot from device (full-scroll)

176
Paul Grime

我在 这个图书馆项目中实现了类似facebook的滑动导航

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

在repo中你可以找到demo-project,以及如何使用lib来实现类似facebook的导航。 这是一个带有演示项目记录的简短视频

此lib也应与此ActionBar模式兼容,因为它基于Activities事务和TranslateAnimations(不是Fragments事务和自定义视图)。

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

祝一切顺利,
亚历

37
AlexKorovyansky

这是 另一个 lib,在我看来似乎是最好的。我没写它..

更新:

这段代码似乎对我来说效果最好,它将整个Actionbar移动到与G + app类似的位置。

Google是如何设法做到这一点的?在Android应用程序中滑动ActionBar

24
Patrick

我认为Facebook应用程序不是用本机代码编写的(我的意思是使用Android中的布局本地代码),但他们使用了webview,并使用了一些javascript ui库,如 sencha 。使用sencha框架可以轻松实现。

enter image description here

22
Sanjay Kumar

这是另一个(非常好的)开源库!

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

这是 github project链接

这是 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中操作栏的大小
  • 支持从2.0及更高版本开始的所有Android SDK版本

有一个限制:

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

最诚挚的问候,史蒂文

17
rude

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

v4支持库

导航抽屉设计模式

16
Wubao Li

做了 现有实现 的综述_并将其转换为库项目加示例应用程序。还添加了XML解析以及可能存在的操作栏的自动检测,因此它可以与本机以及支持操作栏(如ActionBarSherlock)一起使用。

这个也滑动了动作栏!

整个事情是一个图书馆项目和一个示例应用程序,并在 一个Android的滑动菜单,如谷歌和Facebook应用程序 描述。感谢 scirocco 为最初的想法和代码!

SlideMenu on GingerbreadSlideMenu on ICS with ActionBar

15
bk138
10
Edward

我认为图书馆没有提到:

jfeinstein10 / SlidingMenu

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

我找到了一种最简单的方法和它的工作方式。使用简单的导航抽屉并调用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) {

        }
    });
 }
}

enter image description here

谢谢

3
Dalvinder Singh

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

3
se.solovyev

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

设计开发

2
jai_b

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

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

2
jlindenbaum

Facebook Android应用程序可能使用 Fragments 构建。菜单是一个Fragment,深入的Activity(Newsfeed/Events/Friends等)是另一个片段。基本上是手机上的平板电脑“主人和细节”布局。

1
Gunnar Karlsson

有关信息,由于兼容性库从1.6开始,这个Facebook应用程序也在Android 1.5的设备上运行,因此无法使用Fragments完成。

你可以这样做的方法是:创建一个“基础”活动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

在过去的几天里,我一直在玩这个,我最终提出了一个非常简单的解决方案,并且在蜂窝前工作。我的解决方案是动画我想要滑动的视图(对我来说是FrameLayout)并监听动画的结束(此时偏移View的左/右位置)。我在这里粘贴了我的解决方案: 如何设置View的翻译动画

1
Adil Hussain

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

使用不带XML的Java代码实现侧面菜单栏

1
Chao

在2012年6月, Google在Eclipse ADT插件中添加了“模板” ,并且有一个名为“master/detail flow”的模板,它正是这样做的(基于碎片)

0
rds