像facebook或firefox这样的Android侧边栏[重复]

Posted

技术标签:

【中文标题】像facebook或firefox这样的Android侧边栏[重复]【英文标题】:Android sidebar like facebook or firefox [duplicate] 【发布时间】:2012-01-17 04:59:00 【问题描述】:

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

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

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

提前致谢

【问题讨论】:

Expanded facebook 灰色布局从左侧扩展:Main view on facebook 在 Firefox 上我们有:firefox - 左侧是“侧边栏” @alextsc 不错!我的 2 天搜索我没有得出那个结果!谢谢 =) 【参考方案1】:

我想出了一个解决方案...我不知道它是否完美,但效果很好。

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

编辑:

一些代码示例。

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_
    android:layout_
    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 是带有标题和列表视图的简单线性布局。

“魔法”发生在动画中:

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

【讨论】:

Baen,你能和我们分享你的代码吗?我正在尝试自己做,到目前为止没有任何成功......谢谢! 我对其进行了编辑以包含。随便问! @baen 我明白你在做什么。你为什么不把它打包成一个库并在 Github 上分享呢? @AmokraneChentir 我有计划这样做,但现在我想尽快结束这个项目,然后我想创建一个自定义视图组来实现这个......现在最好的我可以做的是这个,给你一个例子。希望你能理解;) @baen,我设法让它工作,除了相反的动作(按下后退按钮时)。它确实返回到初始状态(x=0),但没有动画。我用过你的代码。知道是什么原因造成的吗?【参考方案2】:

你可以试试这个。好的例子。检查滑块类..

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

【讨论】:

Thankx。正是我在寻找什么【参考方案3】:

我做了如下的事情:

下面是我的 Facebook 侧边菜单栏之类的代码

    我在框架布局中放置了 2 个视图重叠。底部视图是菜单,顶部视图是内容主体。 然后我将内容主体放入水平滚动视图中。我还在水平滚动视图的内容主体左侧放置了一个视图。并将视图的背景设置为透明。 然后在开始时滚动到内容正文。所以侧边菜单栏被内容主体挡住了。 当单击按钮显示菜单时,我滚动水平滚动视图以显示透明占位符。然后菜单将显示,因为它现在位于透明占位符下方。

我没有使用 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);         
    

【讨论】:

【参考方案4】:

我也为此创建了自己的解决方案,因为许多库存解决方案似乎无法在较旧的 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 上找到:

【讨论】:

我在导航中尝试了几次飞行。但你的导航似乎是迄今为止最好的——而且它很容易在现有项目中实施。我很感激! 感谢您的实施,但您能否发布一个有关如何实施MenuView 类的示例?提前致谢。

以上是关于像facebook或firefox这样的Android侧边栏[重复]的主要内容,如果未能解决你的问题,请参考以下文章

我怎样才能像这样的 Facebook 帖子一样显示专辑图片?

Android 中类似 facebook 的反应按钮

如何使用 PHP 和 Jquery 开发像 facebook 这样的警报系统?

对于像 Facebook 这样的大型社交网站来说,最佳的 RDBMS 解决方案是啥?

facebook喜欢与添加或删除朋友的选项聊天

创建一个像 facebook 和 gmail 这样的线程私人消息系统