Android侧边栏,如facebook或firefox

时间:2011-12-10 00:17:37

标签: java android android-viewpager android-view android-side-navigation

使用新的Facebook应用程序,它带有一个隐藏的侧边栏,我很乐意在我的应用程序中使用类似的东西。它看起来有点像firefox移动设备的侧边栏......

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

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

提前致谢

4 个答案:

答案 0 :(得分:23)

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

所以我做的是一个FrameLayout,两个Layouts堆叠在一起,然后我只是动画顶部布局滑动到屏幕右侧(只需要调用slideTo或scrollBy。基本上就是这样!相当!简单而有效!(代码虽然不是很漂亮: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是带有标题和列表视图的简单LinearLayouts。

“魔术”发生在动画中:

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的视图)它在构造函数上设置。

但只是为了理解它是如何工作的,按钮及其监听器会做这样的事情:

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

最后覆盖后退按钮以执行与按钮相反的操作

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

将其读作伪代码=)这是我在开始时所做的,代码丢失了:P

答案 1 :(得分:6)

你可以尝试一下。好例子。检查滑块类..

https://github.com/gitgrimbo/android-sliding-menu-demo

答案 2 :(得分:4)

我做了类似下面的事情: enter image description here

enter image description here

下面是我的代码,比如facebook侧面菜单栏

  1. 我在帧布局中放置了2个视图重叠。底部视图是菜单,顶视图是内容体。
  2. 然后我将内容正文放入一个水平的滚动视图中。我还在horizantal滚动视图中的内容正文的左侧放置了一个视图。并将视图的背景设置为透明。
  3. 然后在开始时滚动到内容正文。因此,侧面菜单栏被内容正文阻止。
  4. 单击按钮显示菜单时,我滚动水平滚动视图以显示透明占位符。然后菜单将显示,因为它现在位于透明占位符下。
  5. 我没有使用XML作为界面。我在下面的代码中创建了所有内容。我认为应该很容易阅读并投入你的日食。

    package com.chaoshen.androidstudy.facebooklikesidemenubar;
    
    
    import android.os.Bundle;
    import android.app.Activity;
    import android.graphics.Color;
    import android.view.Display;
    import android.view.MotionEvent;
    import android.view.View;
    import android.view.View.OnClickListener;
    import android.view.ViewGroup.LayoutParams;
    import android.widget.Button;
    import android.widget.FrameLayout;
    import android.widget.HorizontalScrollView;
    import android.widget.LinearLayout;
    import android.widget.TextView;
    
    public class MainActivity extends Activity{
    
        private boolean Menu_Displayed=false;
    
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
    
            Display display = getWindowManager().getDefaultDisplay();
            final int width = display.getWidth();
    
            // menu:
            LinearLayout li_menu = new LinearLayout(this);
            li_menu.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));  
            li_menu.setOrientation(1);//1 is vertical
            li_menu.setBackgroundColor(Color.GREEN);
    
            Button btn1 = new Button(this);
            btn1.setText("button 1");
            btn1.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));  
    
            li_menu.addView(btn1);
    
            //body:
            final HorizontalScrollView hsv = new HorizontalScrollView(this){
                @Override
                // do not let hsv consume the click itself. Then the view under the hsv will also consume the click
                //so that the menu will be clicked
                //when menu is not showed up, let hsv be the only view to consume the click.
                //so that the menu will not be clicked
                public boolean onTouchEvent(MotionEvent ev) {
                    if(Menu_Displayed){
                        return false;
                    }
                    else{
                        return true;
                    }
                }
            };
            hsv.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));  
            hsv.setBackgroundColor(Color.TRANSPARENT);
            hsv.setHorizontalFadingEdgeEnabled(false);
            hsv.setVerticalFadingEdgeEnabled(false);
    
            final LinearLayout li_body = new LinearLayout(this);
            li_body.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.FILL_PARENT));  
            li_body.setOrientation(0);//0 is horizantal
            li_body.setBackgroundColor(Color.TRANSPARENT);
    
            hsv.addView(li_body);
    
            //body: place holder transparent
            TextView placeholder = new TextView(this);
            placeholder.setTextColor(Color.TRANSPARENT); 
            placeholder.setLayoutParams(new LayoutParams(width-100, LayoutParams.FILL_PARENT));  
            placeholder.setVisibility(View.INVISIBLE);
            li_body.addView(placeholder);
    
            //body: real content
            LinearLayout li_content = new LinearLayout(this);
            li_content.setLayoutParams(new LayoutParams(width, LayoutParams.FILL_PARENT));  
            li_content.setOrientation(1);//1 is vertical
            li_content.setBackgroundColor(Color.CYAN);
    
            TextView tv1 = new TextView(this);  
            tv1.setText("txt 1");  
            tv1.setTextSize(40);  
            tv1.setTextColor(Color.BLACK);  
    
            TextView tv2 = new TextView(this);  
            tv2.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));  
            tv2.setTextSize(50);  
            tv2.setText("txt 2");  
            tv2.setTextColor(Color.WHITE);  
    
            //use this button to scroll
            Button btn_showMenu = new Button(this);
            btn_showMenu.setText("Menu");
            btn_showMenu.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
            btn_showMenu.setOnClickListener(new OnClickListener() {
    
                @Override
                public void onClick(View v) {
                    hsv.post(new Runnable() {
    
                        @Override
                        public void run() {
                            if(Menu_Displayed){
                                hsv.smoothScrollTo(width-100, 0);
                            }
                            else{
                                hsv.smoothScrollTo(0, 0);
                            }
                            Menu_Displayed = !Menu_Displayed;
                        }
                    });
                }
            });
    
            li_content.addView(tv1);
            li_content.addView(tv2);
            li_content.addView(btn_showMenu);
    
            li_body.addView(li_content);
    
            //add menu and body in to frame
            FrameLayout mainFrame = new FrameLayout(this);  
            mainFrame.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));  
            mainFrame.addView(li_menu);  
            mainFrame.addView(hsv);  
    
            //scroll to the body real content to block the menu
            hsv.post(new Runnable() {
    
                @Override
                public void run() {
                    hsv.scrollBy(width-100, 0);             
                }
            });
    
            setContentView(mainFrame);         
        }
    }
    

答案 3 :(得分:3)

我也为此创建了自己的解决方案,因为许多股票解决方案似乎无法在较旧的Android版本上运行,或者没有关于如何使其工作的正确说明。

我的解决方案具有以下功能:

  • 支持滑动视图以显示位于其下方的菜单
  • 菜单可以是任何自定义视图
  • 上面的视图也可以是任何自定义视图
  • 支持旧的Android版本(经测试至少在Android 2.2上运行)

该解决方案使用名为SlidingMenuLayout的自定义布局,您需要添加2个视图。您添加的第一个视图是菜单,第二个是主视图。

将布局添加到现有项目的最简单方法是覆盖Activity的setContentView()方法:

@Override
public void setContentView(View view) {

    SlidingMenuLayout layout = new SlidingMenuLayout(this);
    layout.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
        ViewGroup.LayoutParams.MATCH_PARENT, 0.0F));

    layout.addView(new MenuView(this));

    layout.addView(view);

    super.setContentView(layout);
}

在此示例中,MenuView是实际显示菜单的视图。由您来实现此视图。

最后,您可以添加一个按钮(通常位于主视图的左上角),根据需要在布局上调用openMenu()closeMenu()

SlidingMenuLayout的代码可在GitHub项目page找到: