在Android上实现类似SKOUT的菜单和通过触摸在视图之间滑动的效果

Question

我想实现一个像 FB 或 G+ 应用程序一样的滑动菜单，我从 FB 菜单演示 和 https://github.com/jfeinstein10/SlidingMenu 找到了一些示例代码，这些可以作为初始代码使用，但我需要更多的功能。比如说目前只能通过点击菜单按钮才能工作，但我希望也可以通过手势来移动它。我希望有这样一种行为：有一个中心视图，在将其向右移动时，会出现一个视图，在将其向左移动时，菜单会出现。比方说有三个视图 A、B、C，当我将 C 向左滑动时，A 就会出现；当我将 C 向右滑动时，B 就会出现。C 位于 A 和 B 的中间。

1.中间视图向右移动 向右移动 2.将中间视图向左侧移动 向左移动 现在我的问题是：开发这种视图的最佳实践是什么？我听说应该使用片段和视图分页器。那么我该如何开发呢？有没有任何人已经实现了样例？任何帮助和建议都会被赞赏。

请参考使用这种滑动视图的应用程序Skout app。

- Naresh Sharma

---

你应该阅读GreenDroid的作者http://android.cyrilmottier.com/?p=701。 - shkschneider

好的，只是在思考，将您的左视图和右视图叠放在一起。在它们上方，添加一个具有3个项目的ViewPager，其中中间一个将是您的中心视图（其他为空白）。一旦用户向左/向右滑动，根据需要切换可见性，然后您想要的视图将出现。 - Sherif elKhatib

滑动菜单是满足上述需求的核心Android API。请参见从左到右的滑动面板。 - Tofeeq Ahmad

Answer 1

最简单的解决方案可能是使用android-undergarment，其内置了基于边框滑动的抽屉功能，根据项目README所述：

用户还可以通过从屏幕左侧进行边框滑动来打开抽屉，然后从右侧进行相同操作以关闭它。如果您想要防止此触摸功能，则可以调用setDrawerEnabled(false)。

- CommonsWare

---

感谢您的回复。我是否必须将其用作库项目？另外，我的目标是有三个视图A、B、C。当我将C视图移动到左侧时，A会出现；如果我将C移动到右侧，则B会出现。到目前为止，我只找到了两个视图的解决方案。请指导我。 - Naresh Sharma

这是一个完美的解决方案...而且简单易懂。 - Devrath

注意：Undergarment已被弃用。请使用位于v4支持库中的官方DrawerLayout实现。https://developer.android.com/training/implementing-navigation/nav-drawer.html - Mir-Ismaili

Answer 2

你可以简单地在希望移动的视图上使用TranslateAnimation，并添加一个淡入淡出的弹出窗口和另一个菜单弹出窗口。我已经在我的应用程序中实现了它，它像魔法一样运行。

代码：

public class SlidingOptionsMenuActivity extends Activity {

    /**
     * Signifies that the menu is already visible
     */
    boolean alreadyShowing = false;
    /**
     * Width of the current window
     */
    private int windowWidth;
    /**
     * Height of the current window
     */
    private int windowHeight;
    /**
     * Reference of the {@link PopupWindow} which dims the screen
     */
    private PopupWindow fadePopup;
    /**
     * The translate animation
     */
    private Animation ta;
    /**
     * The view which needs to be translated
     */
    private RelativeLayout baseView;
    /**
     * Reference of the {@link LayoutInflater}
     */
    LayoutInflater inflater;

    /*
     * (non-Javadoc)
     * 
     * @see android.app.Activity#onCreate(android.os.Bundle)
     */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        Display display = getWindowManager().getDefaultDisplay();
        windowWidth = display.getWidth();
        windowHeight = display.getHeight();
        inflater = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        findViewById(R.id.btnOptions).setOnClickListener(new OnClickListener() {

            /*
             * (non-Javadoc)
             * 
             * @see android.view.View.OnClickListener#onClick(android.view.View)
             */
            @Override
            public void onClick(View v) {
                if(!alreadyShowing){
                    alreadyShowing = true;
                    openSlidingMenu();
                }
            }
        });
    }


    /**
     * Fades the entire screen, gives a dim background
     */
    private void showFadePopup() {
        final View layout = inflater.inflate(R.layout.fadepopup, (ViewGroup) findViewById(R.id.fadePopup));
        fadePopup = new PopupWindow(layout, windowWidth, windowHeight, false);
        fadePopup.showAtLocation(layout, Gravity.NO_GRAVITY, 0, 0);
    }

    /**
     * Opens the sliding Menu
     */
    private void openSlidingMenu() {
        showFadePopup();
        // The amount of view which needs to be moved out. equivalent to the
        // width of the menu
        int width = (int) (windowWidth * 0.6f);
        translateView((float) (width));
        int height = LayoutParams.FILL_PARENT;
        // creating a popup
        final View layout = inflater.inflate(R.layout.option_popup_layout,(ViewGroup) findViewById(R.id.popup_element));

        final PopupWindow optionsPopup = new PopupWindow(layout, width, height, true);
        optionsPopup.setBackgroundDrawable(new PaintDrawable());

        optionsPopup.showAtLocation(layout, Gravity.NO_GRAVITY, 0, 0);

        optionsPopup.setOnDismissListener(new PopupWindow.OnDismissListener() {

            public void onDismiss() {
                //Removing the fade effect
                fadePopup.dismiss();    
                //to clear the previous animation transition in
                cleanUp();
                //move the view out
                translateView(0);
                //to clear the latest animation transition out
                cleanUp();
                //resetting the variable
                alreadyShowing = false;
            }
        });
    }

    /**
     * This method is responsible for view translation. It applies a translation
     * animation on the root view of the activity
     * 
     * @param right The position to translate to
     */
    private void translateView(float right) {

        ta = new TranslateAnimation(0f, right, 0f, 0f);
        ta.setDuration(300);
        ta.setFillEnabled(true);
        ta.setFillAfter(true);

        baseView = (RelativeLayout) findViewById(R.id.baseView);
        baseView.startAnimation(ta);
        baseView.setVisibility(View.VISIBLE);
    }

    /**
     * Basic cleanup to avoid memory issues. Not everything is release after
     * animation, so to immediately release it doing it manually
     */
    private void cleanUp(){
        if (null != baseView) {
            baseView.clearAnimation();
            baseView = null;
        }
        if (null != ta) {
            ta.cancel();
            ta = null;
        }
        fadePopup = null;
    }
} //END of Class
//END of file

希望这能有所帮助。

- Abhishek Nandi

---

我必须实现类似Skout应用的功能。视图可以通过手势和按钮点击在左右两侧移动。你能提供给我演示吗？ - Naresh Sharma

我会创建一个演示并回复您。 - Abhishek Nandi

@Naresh：如果你在这方面遇到了困难，请告诉我。 - Abhishek Nandi

Answer 3

我发现另一个非常好的开源库是SlidingMenu，它与你的需要很相符，因为你可以通过“菜单”点击和边缘滑动来打开和关闭抽屉。在将其与像ActionBarSherlock或johannilsson的android-actionbar库这样的Actionbar库集成时，只需在库项目中更改一两行代码。SlidingMenu库的自述文件说明了如何与ABSherlock库集成。

值得注意的一件事是，SlidingMenu示例项目展示了许多不同的抽屉打开-关闭动画。这些是我见过的最好的这种菜单/导航风格的动画之一。

- vwmattr

Answer 4

有一种官方方式...有用且轻量级（通过使用v4支持库）：

创建导航抽屉：

https://developer.android.com/training/implementing-navigation/nav-drawer.html

- Mir-Ismaili

---

欢迎提供解决方案的链接，但请确保你的答案即使没有链接也是有用的：在链接周围添加上下文，以便您的同行用户对其有一些了解并知道为什么要添加链接，然后引用您要链接到的页面中最相关的部分，以防目标页面不可用。 仅包含链接的答案可能会被删除。 - Bugs