Android 侧边栏，如 facebook 或 firefox

2022-01-19 00:00:00 android android-viewpager java android-view android-side-navigation

有了新的 facebook 应用程序，它带有一个隐藏的侧边栏，我很想在我的应用程序中使用类似的东西.它看起来有点像 firefox mobile 的侧边栏...

With the new facebook app it comes with an hidden sidebar that I would love to use something like that in my applications. It looks kinda like the sidebars that firefox mobile have...

除了重新实现 ViewPager 之外，您知道如何实现它吗?我已经尝试过使用 Horizo​​ntalScrollView 但这也会导致重新实现它...

Do you have any idea how to implement it besides re-implementing the ViewPager? I've tried with an HorizontalScrollView but that would also lead to re-implementation of it...

除了这两个之外，我没有看到任何其他方式......有什么建议吗?

I'm not seeing any other way besides these two... any suggestions?

提前致谢

推荐答案

我想出了一个解决方案...我不知道它是否完美，但它运作良好.

I came up with a solution... I don't know if it is perfect but it is working well.

所以我所做的是一个单一的 FrameLayout，两个布局堆叠在一起，然后我只是动画顶部布局滑动到屏幕的右侧(只需要调用 slideTo 或 scrollBy.基本上就是这样！相当简单有效！(代码虽然不是很漂亮:P)

So what I did was a single FrameLayout with both of the Layouts stacked together and then I just animate the top layout to slide to the right of the screen (just need to call the slideTo or scrollBy. And basically it's that! Quite simple and effective! (the code though is not very pretty :P)

一些代码示例.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#FFF" >

        <include
        android:id="@+id/menu_layout"
            layout="@layout/menu_list"
            android:visibility="invisible"/>

        <include
            android:id="@+id/news_list_parent"
            layout="@layout/main_news_list" 
            />

</FrameLayout>

这是布局xml，很简单.包含的 .xml 是带有标题和列表视图的简单线性布局.

This is the layout xml, quite simpe. The included .xml are simple LinearLayouts with a heading and a listview.

魔法"发生在动画中:

protected void applyTransformation(float interpolatedTime, Transformation t) {
    int newOffset;
    if(expanded) {
        newOffset = 0;
        newOffset = (int)(endOffset*(1-interpolatedTime));
    } else {
        newOffset = (int)(endOffset*(interpolatedTime));
    }
    view.scrollTo(-newOffset, 0);
}

endOffset 是目标移动.我在开始动画之前设置了它，而我想要动画的视图(在本例中是 id=news_list_parent 的视图)在构造函数中设置.

The endOffset is the target movement. I set it before I start the animation, and the View I want to animate (in this case is the view with the id=news_list_parent) it is set on the constructor.

但只是为了理解它是如何工作的，制作一个按钮和它的监听器会做这样的事情:

But just to understand how that works make a button and its listener would do something like this:

if(viewBeneath.getVisibility() == View.INVISIBLE) {
    viewBeneath.setVisibility(View.Visible);
    viewToSlide.slideTo(-(width-50), 0);
}

最后覆盖后退按钮做按钮的反面

And finally override the back button to do the opposite of the button

if(viewBeneath.getVisibility() == View.VISIBLE) {
    viewToSlide.slideTo(0, 0);
    viewBeneath.setVisibility(View.Visible);
}

将此作为伪代码阅读=)这是我一开始所做的，该代码丢失了:P

Read this as pseudo-code =) This is what I did in the beginning, that code is lost :P

相关文章