2013-10-24 15 views
0

您必須使用facebook android應用。我想要實現與facebook使用的相同的導航,例如: 左側打開菜單並右移,顯示聊天列表。中間的活動和佈局不斷變化。但我很困惑如何做出這樣的導航。 (最值得注意的是,當左側或右側完成翻轉時,中間頁面顯示爲一半)。facebook應用正在使用的導航

回答

1

你有兩個不錯的選擇。

  1. 抽屜式導航:http://developer.android.com/design/patterns/navigation-drawer.html
  2. 滑動抽屜:https://github.com/jfeinstein10/SlidingMenu

您可以爲您的使用情況下,多個導航抽屜。

+0

我也想抽屜佈局。但在這個抽屜打開當前佈局,而不是將其滑動到左邊(無論) –

+0

任何想法,使其同樣的Facebook導航。 –

+0

問題:在滑動抽屜中,沒有後退導航,因爲只顯示在一個佈局上。如何解決它? –

1

我在一個小時前安裝了FB應用程序。當您點擊主內容右上角的圖標時,主要內容向左移動以顯示右側的內容。顯示的內容保持不變,並在移動過程中隱藏主要內容。

我寫了一個基於上述分析這種輕質抽象:

package org.yourdomain.app; 

import android.animation.Animator; 
import android.animation.ValueAnimator; 
import android.app.Activity; 
import android.os.Bundle; 
import android.util.Log; 
import android.view.KeyEvent; 
import android.view.LayoutInflater; 
import android.view.ViewGroup; 
import android.widget.FrameLayout; 
import android.widget.RelativeLayout; 

abstract public class NavigatorActivity extends Activity { 
    static public final String TAG = "NavigatorActivity"; 
    static public final Boolean DEBUG_LIFECYCLE = false; 

    /** 
    * True when menu is on and vice versa 
    */ 
    private boolean mToggled; 
    /** 
    * Percentage of the main content to keep shown 
    */ 
    private float mDistance; 
    /** 
    * Navigator listener 
    */ 
    private NavigatorListener mListener; 
    /** 
    * Content view 
    */ 
    private ViewGroup mContentLayout; 
    /** 
    * Menu frame 
    */ 
    private FrameLayout mMenuLayout; 
    /** 
    * Main frame 
    */ 
    private FrameLayout mMainLayout; 
    /** 
    * Speed of toggle animation 
    */ 
    private long mSpeed; 
    /** 
    * Width of the content view 
    */ 
    private int mContentWidth; 
    /** 
    * Height of the content view 
    */ 
    private int mContentHeight; 
    /** 
    * The current distance to slide the main frame 
    */ 
    private int mToggleDistance; 

    /** 
    * 
    */ 
    public NavigatorActivity() { 
     mToggled = false; 
     mDistance = 80; 
     mSpeed = 300l; 
    } 

    /** 
    * Speed setter. 
    * 
    * Controls how fast the menu frame is revealed. 
    * 
    * @param speed 
    */ 
    public void setSpeed(long speed) { 
     mSpeed = speed; 
    } 

    /** 
    * Distance setter. 
    * 
    * The distance is the % of the oriented screen to pull the main frame in order to reveal the 
    * menu frame. 
    * 
    * @param distance 
    */ 
    public void setDistance(float distance) { 
     mDistance = distance; 
    } 

    /** 
    * Navigator listener setter. 
    * 
    * @param listener 
    */ 
    public void setNavigatorListener(NavigatorListener listener) { 
     mListener = listener; 
    } 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     if (DEBUG_LIFECYCLE) Log.v(TAG, "onCreate " + this + ": " + savedInstanceState); 
     initContentLayout(); 
     setContentView(mContentLayout); 
     initMenuLayout(); 
     mContentLayout.addView(mMenuLayout); 
     initMainLayout(); 
     mContentLayout.addView(mMainLayout); 
    } 

    /** 
    * Initializes the main frame. 
    */ 
    private void initMainLayout() { 
     int hw = RelativeLayout.LayoutParams.MATCH_PARENT; 
     mMainLayout = new FrameLayout(this) { 
      @Override 
      protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
       super.onMeasure(widthMeasureSpec, heightMeasureSpec); 
       setMeasuredDimension(mContentWidth, mContentHeight); 
      } 
     }; 
     RelativeLayout.LayoutParams p = new RelativeLayout.LayoutParams(hw, hw); 
     p.addRule(RelativeLayout.ALIGN_PARENT_TOP); 
     p.addRule(RelativeLayout.ALIGN_PARENT_LEFT); 
     mMainLayout.setLayoutParams(p); 
    } 

    /** 
    * Initializes the menu frame. 
    */ 
    private void initMenuLayout() { 
     int hw = RelativeLayout.LayoutParams.MATCH_PARENT; 
     mMenuLayout = new FrameLayout(this); 
     RelativeLayout.LayoutParams p = new RelativeLayout.LayoutParams(hw, hw); 
     p.addRule(RelativeLayout.ALIGN_PARENT_TOP); 
     p.addRule(RelativeLayout.ALIGN_PARENT_RIGHT); 
     mMenuLayout.setLayoutParams(p); 
    } 

    /** 
    * Initialize the activity's content layout. 
    */ 
    private void initContentLayout() { 
     final int hw = RelativeLayout.LayoutParams.MATCH_PARENT; 
     mContentLayout = new RelativeLayout(this) { 
      @Override 
      protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
       super.onMeasure(widthMeasureSpec, heightMeasureSpec); 
       mContentWidth = MeasureSpec.getSize(widthMeasureSpec); 
       mContentHeight = MeasureSpec.getSize(heightMeasureSpec); 
       setMeasuredDimension(mContentWidth, mContentHeight); 
       mToggleDistance = Math.round((mDistance/100f) * (float) mContentWidth); 
      } 
     }; 
     mContentLayout.setLayoutParams(new RelativeLayout.LayoutParams(hw, hw)); 
    } 

    /** 
    * Inflates two project XML layout and adds them to the menu and main layout frames. 
    * 
    * @param menuLayoutResId 
    * @param mainLayoutResId 
    */ 
    protected void setContentViews(int menuLayoutResId, int mainLayoutResId) { 
     final LayoutInflater inflater = getLayoutInflater(); 
     inflater.inflate(menuLayoutResId, mMenuLayout); 
     inflater.inflate(mainLayoutResId, mMainLayout); 
    } 

    /** 
    * Toggle the menu frame. 
    */ 
    final public void toggleNavigator() { 
     final boolean isToggled = mToggled = !mToggled; 
     if (DEBUG_LIFECYCLE) Log.v(TAG, "toggleNavigatorMenu " + this); 
     RelativeLayout.LayoutParams menuParams = (RelativeLayout.LayoutParams) mMenuLayout.getLayoutParams(); 
     menuParams.setMargins(mContentWidth - mToggleDistance, 0, 0, 0); 
     final RelativeLayout.LayoutParams mainParams = (RelativeLayout.LayoutParams) mMainLayout.getLayoutParams(); 
     ValueAnimator animator = ValueAnimator.ofInt(mainParams.leftMargin, mToggled ? -mToggleDistance : 0); 
     animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { 
      @Override 
      public void onAnimationUpdate(ValueAnimator valueAnimator) { 
       mainParams.leftMargin = (Integer) valueAnimator.getAnimatedValue(); 
       mMainLayout.requestLayout(); 
      } 
     }); 
     animator.addListener(new Animator.AnimatorListener() { 

      @Override 
      public void onAnimationStart(Animator animation) {} 

      @Override 
      public void onAnimationEnd(Animator animation) { 
       if (mListener != null) { 
        mListener.onNavigatorToggled(isToggled); 
       } 
      } 

      @Override 
      public void onAnimationCancel(Animator animation) {} 

      @Override 
      public void onAnimationRepeat(Animator animation) {} 
     }); 
     animator.setDuration(mSpeed); 
     animator.start(); 
    } 

    public static interface NavigatorListener { 
     public void onNavigatorToggled(boolean isToggled); 
    } 

    @Override 
    public boolean onKeyUp(int keyCode, KeyEvent event) { 
     if (keyCode == KeyEvent.KEYCODE_MENU) { 
      toggleNavigator(); 
     } 
     return super.onKeyUp(keyCode, event); 
    } 
} 

實例:

package org.yourdomain.project; 

import android.os.Bundle; 
import org.yourdomain.app.NavigatorActivity; 

public class YourActivity extends NavigatorActivity { 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setDistance(80); // will leave 20% of the main content in view 
     setNavigatorListener(new NavigatorListener() { 
      @Override 
      public void onNavigatorToggled(boolean isToggled) { 
       // Load content dynamically, like FB does? 
      } 
     }); 
     setContentViews(R.layout.layout_menu, R.layout.activity_your); 
    } 
} 
  • compileSdkVersion 20
  • 的minSdkVersion 16
  • targetSdkVersion 20

單擊Android設備上的物理菜單按鈕將切換導航器。

我打算在自己的幾個啓動項目中使用它。

讓我知道如果您有任何問題。我希望這可以幫助你。