新的Facebook应用程序和它的导航太酷了。我只是想看看如何在我的应用程序中模仿它。
有人知道怎么实现吗?
点击左上角按钮,页面滑动,显示如下画面:
YouTube视频
新的Facebook应用程序和它的导航太酷了。我只是想看看如何在我的应用程序中模仿它。
有人知道怎么实现吗?
点击左上角按钮,页面滑动,显示如下画面:
YouTube视频
我在这里做一些大胆的猜测……
我假设它们有一个表示不可见的菜单的布局。当点击菜单按钮时,它们会在顶部移动布局/视图,并简单地启用菜单布局的可见性。我没有想过这会在视图中引起任何类型的z索引问题,或者他们如何控制它。
我认为facebook应用程序不是用原生代码(我指的是在Android中使用布局的原生代码)编写的,但他们使用了webview,并使用了一些javascript ui库,如sencha。使用sencha框架可以很容易地实现。
我自己也玩过这个,我能找到的最好的方法是使用FrameLayout,并在菜单顶部放置一个自定义的HorizontalScrollView (HSV)。在HSV内部是应用程序视图,但是有一个透明的视图作为第一个子视图。这意味着,当HSV有零滚动偏移时,菜单将显示(并且仍然是可点击的)。
当应用程序启动时,我们将HSV滚动到第一个可见应用程序视图的偏移量,当我们想要显示菜单时,我们向后滚动以通过透明视图显示菜单。
代码在这里,底部的两个按钮(称为HorzScrollWithListMenu和HorzScrollWithImageMenu)在启动活动中显示了我能想出的最好的菜单:
Android滑动菜单演示
模拟器截图(中间滚动):
来自设备的截图(全滚动)。注意,我的图标没有Facebook菜单图标宽,所以菜单视图和“应用程序”视图并不对齐。
我用AbsoluteLayout和一个简单的滑动控制器实现了这一点,它可以将视图移动到一个负偏移来隐藏。
如果有人感兴趣,我可以清理代码/布局和发布。我知道AbsoluteLayout被弃用了,但它是一个非常直接的实现。左视图/右视图,当“滑动打开”时,只需将左视图从- x偏移量移出到设备的宽度-任何你想显示的右视图
我在这个库项目中实现了类似facebook的滑出导航。
你可以很容易地将它构建到你的应用程序、UI和导航中。你只需要实现一个活动和一个片段,让库知道它-库将提供所有想要的动画和导航。
在repo中,你可以找到demo-project,以及如何使用库来实现类似facebook的导航。这是演示项目的短视频。
此外,这个库应该兼容这个ActionBar模式,因为它是基于Activities事务和TranslateAnimations(而不是Fragments事务和自定义视图)。
目前,最大的问题是如何让它在支持纵向和横向模式的应用程序中很好地工作。如果你有任何反馈,请通过github提供。
愿一切都好! 亚历克斯
Facebook Android应用可能是使用Fragments构建的。菜单是一个片段,深度活动(Newsfeed/Events/Friends等)是另一个片段。基本上是手机上的平板电脑“master & detail”布局。
对于信息,因为兼容性库开始1.6和这个facebook应用程序也运行在设备与Android 1.5,它不能用碎片。
The way you could do it, is : Create a "base" activity BaseMenuActivity where you put all the logic for the onItemClickListener for your menu list and defines the 2 animation ("open" and "close"). At the end/beginning of the animations, you show/hide the layout of the BaseMenuActivity (lets call it menu_layout). The layout for this activity is simple, its only a list with items + a transparent part at the right of your list. This part will be clickable and its width will be the same width as your "move button". With that, you'll be able to click on this layout to start the animation to let the content_layout slide to the left and take the whole screen. For each option (i.e. item of the menu list), you create a "ContentActivity" which extends the BaseMenuActivity. Then when you click on an item of the list, you start your ItemSelectedContentActivity with the menu visible (which you'll close as soon as your activity starts). The layouts for each ContentActivity are FrameLayout and includes the and . You just need to move the content_layout and make the menu_layout visible when you want.
这是一种方法,我希望我讲得够清楚了。
不能评论@Paul Grime给出的答案,无论如何,我已经在他的github项目上提交了闪烁问题的修复....
我会在这里发布修正,也许有人需要它。您只需要添加两行代码。动画下面的第一个。setAnimationListener电话:
anim.setFillAfter(true);
在app.layout()调用之后的第二个函数:
app.clearAnimation();
希望这对你有所帮助。
这是另一个lib,在我看来似乎是最好的。不是我写的。
更新:
这段代码似乎最适合我,它移动整个动作栏类似于G+应用程序。
谷歌是如何做到这一点的?在Android应用程序中滑动动作栏
我在过去的几天里一直在玩这个,我已经提出了一个解决方案,这是相当直接的,在pre-Honeycomb。我的解决方案是动画我想要滑动的视图(FrameLayout为我),并监听动画的结束(在这一点上抵消视图的左/右位置)。我在这里粘贴了我的解决方案:如何动画一个视图的翻译
我刚刚为我自己的项目实现了类似的视图。你可以在这里查看
下面是基于我写的库的示例应用程序的屏幕:
使用这个自定义视图作为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版本
但有一个限制:
所有水平滚动视图都不能在此视图的边界上工作
最好的问候, 史蒂文
做了一个现有的实现,并把它变成一个库项目加上示例应用程序。还添加了XML解析以及自动检测可能出现的动作栏,所以它与本机以及支持动作栏,如ActionBarSherlock。
这个也会滑动操作栏!
整个事情是一个图书馆项目与一个示例应用程序,并在一个滑动菜单为Android像谷歌和facebook应用程序的描述。感谢scirocco最初的想法和代码!
经过几个小时的搜索,我发现保罗·格里姆的解决方案可能是最好的。但是它有太多的功能。因此,对于初学者来说,学习汉语可能很难。所以我想提供我的实现,它来自Paul的想法,但它更简单,应该更容易阅读。
通过使用java代码实现侧菜单栏,没有XML
我在上面的回答中没有看到令人惊叹的SimonVT/android-menudrawer。这里有一个链接
https://github.com/SimonVT/android-menudrawer
它非常容易使用,你可以把它放在左边,右边,上面或下面。非常好的文档,包括示例代码和Apache 2.0许可证。
我想图书馆没有提到:
jfeinstein10 / SlidingMenu
github的url: https://github.com/jfeinstein10/SlidingMenu。
与动作栏ActionBarSherlock一起工作很好,这有助于向后兼容! 支持右滑,而不仅仅是通过按钮滑!
作为我的Android公共库(ACL)的一部分,我实现了自己的侧边栏。 主要优点:
侧栏可以设置为任何位置:左,上,下,右 主视图和滑动视图都是可点击的 侧栏可以部分显示 侧边栏的可样式属性更容易更改它的样式 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支持包修订版13(2013年5月),有了用于创建导航抽屉的DrawerLayout,可以从窗口边缘拉入。导航抽屉现在是一种设计模式。
V4支持库
导航抽屉设计模式
最近我在开发我的滑动菜单实现版本。它使用流行的J.Feinstein Android库SlidingMenu。
请在GitHub上查看源代码:
https://github.com/baruckis/Android-SlidingMenuImplementation
直接下载app到设备上尝试:
https://play.google.com/store/apps/details?id=com.baruckis.SlidingMenuImplementation
由于注释,代码应该是自解释的。希望对大家有所帮助!;)
我找到了一个最简单的方法。使用简单的导航抽屉并调用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) {
}
});
}
}
谢谢你!