web-dev-qa-db-ja.com

Android FacebookやFirefoxのようなサイドバー

新しいFacebookアプリには、アプリケーションでそのようなものを使用したい隠しサイドバーが付属しています。それは、FirefoxMobileが持っているサイドバーのように見えます...

ViewPagerを再実装する以外に、それを実装する方法について何か考えがありますか？私はHorizo​​ntalScrollViewを試してみましたが、それはまたそれの再実装につながるでしょう...

私はこれらの2つ以外に他の方法を見ていません...何か提案はありますか？

前もって感謝します

javaandroidandroid-viewpagerandroid-viewandroid-side-navigation
17
baen

私は解決策を思いついた...それが完璧かどうかはわかりませんが、うまく機能しています。

つまり、両方のレイアウトを積み重ねた単一のFrameLayoutを作成し、上部のレイアウトをアニメーション化して画面の右側にスライドさせます（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

23
baen

あなたはこれを試すことができます。良い例え。スライダークラスを確認してください。

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

6
user1701593

私は以下のようなことをしました： enter image description here

enter image description here

以下は、Facebookのサイドメニューバーのようなものの私のコードです

  1. フレームレイアウトに2つのビューを重ねて配置しました。底面図はメニュー、上面図はコンテンツ本文です。
  2. そして、コンテンツ本体を水平スクロールビューに配置します。また、水平スクロールビューのコンテンツ本文の左側にビューを配置しました。そして、ビューの背景を透明に設定します。
  3. 次に、最初にコンテンツ本文までスクロールします。そのため、サイドメニューバーはコンテンツ本文によってブロックされます。
  4. ボタンをクリックしてメニューを表示するとき、水平スクロールビューをスクロールして、透明なプレースホルダーを表示します。透明なプレースホルダーの下にあるため、メニューが表示されます。

インターフェイスにXMLを使用しませんでした。以下のコードですべてを作成します。読みやすく、Eclipseに入れるのは簡単なはずだと思います。

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
Chao

多くのストックソリューションが古いAndroidバージョンでは機能しないか、機能させるための適切な手順が不足しているため、これについても独自のソリューションを作成しました。

私のソリューションには次の機能があります。

  • ビューをスライドさせて、その下にあるメニューを表示するためのサポートを提供します
  • メニューは任意のカスタムビューにすることができます
  • 上記のビューは、任意のカスタムビューにすることもできます
  • 古いAndroidバージョンでサポートされています（少なくともAndroid 2.2）で動作することがテストされています）

このソリューションでは、SlidingMenuLayoutと呼ばれるカスタムレイアウトを使用しており、2つのビューを追加する必要があります。追加する最初のビューはメニューで、2番目はメインビューです。

既存のプロジェクトにレイアウトを追加する最も簡単な方法は、アクティビティの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プロジェクトにあります ページ ：

3
arendjr