Android - 如何制作像 facebook、spotify 和 Google + 一样的幻灯片菜单

Question

提问by Gaauwe

I want to add a slide menu to my app like the facebook app. I read alot of things on the internet about librarys but none worked for me. What is the best thing/library that i can use for this and can someone maybe explain me how to use it?

我想向我的应用程序添加一个幻灯片菜单，如 Facebook 应用程序。我在互联网上阅读了很多关于图书馆的内容，但没有一个对我有用。我可以为此使用的最好的东西/库是什么，有人可以解释我如何使用它吗？

EditThis is my layout:

编辑这是我的布局：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" 
    android:background="@drawable/zwemfest" >"



<com.devspark.sidenavigation.SideNavigationView
    android:id="@+id/side_navigation_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <Button
        android:id="@+id/button1"
        android:layout_width="183dp"
        android:layout_height="113dp"
        android:layout_weight="0.91"
        android:text="Button" />

</com.devspark.sidenavigation.SideNavigationView>

</RelativeLayout>

But i don't see any button or background image. Do you know whats going wrong?

但我没有看到任何按钮或背景图像。你知道出了什么问题吗？

Answer 1

回答by Muhammad Babar

Well currently I'm working on a project and came across Sliding menu,i googled but get disappointed to see that no one has given some instructions or hints on how to start making a sliding menu, Every one has given link to some Github's projects/libraries to use, Hence I decided to do it myself and finally i have my own Sliding Menu Ready...

嗯，目前我正在做一个项目，遇到了滑动菜单，我用谷歌搜索但很失望地看到没有人给出一些关于如何开始制作滑动菜单的说明或提示，每个人都提供了一些 Github 项目的链接/要使用的库，因此我决定自己做，最后我准备好了自己的滑动菜单......

I have Spent two days on it

我花了两天时间

1. on making animations of sliding

1.关于制作滑动动画

2. on making it work with all screen resolutions

2. 使其适用于所有屏幕分辨率

Its really easy and simple once you get some idea about Animations, I have read some where, its not sensible to re-invent the Wheel(people who are refering to github source code of sliding menu),but i believe that you should at least once try to make your own so you get a idea how it actually works and function :P

一旦你对动画有了一些想法，它真的很容易和简单，我读过一些地方，重新发明轮子是不明智的（指的是 github 滑动菜单源代码的人），但我相信你至少应该一旦尝试自己制作，您就会了解它的实际工作原理和功能：P

So this is a picture of how my sliding menu will going to work

这是我的滑动菜单将如何工作的图片

1.Find.xml//later in the code it will be refer as findLayout

1.查找.xml//later in the code it will be refer as findLayout

<?xml version="1.0" encoding="utf-8"?>


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <RelativeLayout
        android:id="@+id/find_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <RelativeLayout
        android:id="@+id/header" 
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:padding="2dp"
        android:background="@drawable/main_header">

        <Button 
            android:id="@+id/filter"
            android:layout_width="40dp"
            android:layout_height="30dp"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:background="@drawable/filter_button" />

        <TextView 
            android:id="@+id/city"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/filter"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="3dp"
            android:text="Islamabad"
            android:textSize="22sp"
            android:textStyle="bold"
            android:textColor="@android:color/primary_text_dark"/>

        <RelativeLayout 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/city"
            android:layout_alignLeft="@+id/city">

            <TextView 
                android:id="@+id/interested_in"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:text="Men and Women"
                android:textSize="12sp"
                android:textColor="@android:color/primary_text_dark"/>

            <ImageView 
                android:id="@+id/separator"
                android:layout_width="2dp"
                android:layout_height="18dp"
                android:layout_toRightOf="@+id/interested_in"
                android:layout_marginLeft="4dp"
                android:src="@drawable/separator_1"
                android:layout_centerVertical="true" />

            <TextView 
                android:id="@+id/age"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="4dp"
                android:layout_toRightOf="@+id/separator"
                android:layout_centerVertical="true"
                android:text="18-24 years"
                android:textSize="12sp"
                android:textColor="@android:color/primary_text_dark"/>

            <ImageView
                android:id="@+id/separator_1" 
                android:layout_width="2dp"
                android:layout_height="18dp"
                android:layout_toRightOf="@+id/age"
                android:layout_marginLeft="4dp"
                android:src="@drawable/separator_1"
                android:layout_centerVertical="true" />

            <TextView 
                android:id="@+id/distance"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="4dp"
                android:layout_toRightOf="@+id/separator_1"
                android:layout_centerVertical="true"
                android:text=">30km"
                android:textSize="12sp"
                android:textColor="@android:color/primary_text_dark"/>


        </RelativeLayout>

    </RelativeLayout>

    <GridView 
        android:id="@+id/users_grid"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/header"
        android:numColumns="4">

    </GridView>

    </RelativeLayout>

    <include 
        layout="@layout/filter"/> //here i included the filter.xml, which is on top of find.xml layout and is initially invisible

</RelativeLayout>

enter image description here

在此处输入图片说明

2.Filter.xml//later in code refer as FilterLayout

2.过滤器.xml//later in code refer as FilterLayout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/filter_layout"
    android:visibility="invisible"
    android:layout_width="260dp"
    android:layout_height="match_parent"
    android:background="@drawable/grey_bg" >

    <ImageView 
        android:id="@+id/profile_pic"
        android:layout_width="match_parent"
        android:layout_height="220dp"
        android:src="@drawable/pic"/>

    <RelativeLayout
        android:id="@+id/header" 
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:paddingLeft="10dp"
        android:paddingTop="5dp"
        android:layout_below="@+id/profile_pic"
        android:background="@drawable/light_blue_header">

        <TextView
            android:id="@+id/name" 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="3dp"
            android:text="Raja Babar"
            android:textSize="18sp"
            android:textStyle="bold"
            android:textColor="@android:color/primary_text_dark"/>

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/name"
            android:layout_alignLeft="@+id/name">

            <TextView
                android:id="@+id/gender"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:text="Male"
                android:textSize="12sp"
                android:textColor="@android:color/primary_text_dark" />

            <ImageView 
                android:id="@+id/seperator"
                android:layout_width="2dp"
                android:layout_height="20dp"
                android:layout_toRightOf="@+id/gender"
                android:layout_marginLeft="5dp"
                android:src="@drawable/separator_1"
                android:layout_centerVertical="true" />

            <TextView
                android:id="@+id/age"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@+id/seperator"
                android:layout_marginLeft="5dp"
                android:layout_centerVertical="true"
                android:text="22 years"
                android:textSize="12sp"
                android:textColor="@android:color/primary_text_dark" />

        </RelativeLayout>


    </RelativeLayout>

    <ScrollView 
        android:layout_width="250dp"
        android:layout_height="wrap_content"
        android:layout_below="@+id/header"
        android:layout_marginTop="15dp"
        android:layout_centerHorizontal="true">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    <TextView
            android:id="@+id/filter_options" 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/filter_options"
            android:textSize="18sp"
            android:textStyle="bold"
            android:textColor="@android:color/primary_text_light"/>

    <RelativeLayout
        android:id="@+id/interested_in_layout" 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="15dp"
        android:paddingRight="40dp"
        android:layout_below="@+id/filter_options"
        android:background="@drawable/interested_in_field">

        <TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:text="@string/gender"
            android:textSize="18sp"
            android:textStyle="bold"
            android:textColor="@android:color/primary_text_light"/>

        <TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:text="@string/women_men"
            android:textSize="18sp"
            android:textColor="#33b9cd" />


    </RelativeLayout>
    <RelativeLayout
        android:id="@+id/age_layout" 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="15dp"
        android:paddingRight="40dp"
        android:layout_below="@+id/interested_in_layout"
        android:background="@drawable/age_field_1">

        <TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:text="@string/age"
            android:textSize="18sp"
            android:textStyle="bold"
            android:textColor="@android:color/primary_text_light"/>

        <TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:text="18-24 years"
            android:textSize="18sp"
            android:textColor="#33b9cd"/>


    </RelativeLayout>
    <RelativeLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="15dp"
        android:paddingRight="40dp"
        android:layout_below="@+id/age_layout"
        android:background="@drawable/distance_field">

        <TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:text="@string/distance"
            android:textSize="18sp"
            android:textStyle="bold"
            android:textColor="@android:color/primary_text_light"/>

        <TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:text=">30km"
            android:textSize="18sp"
            android:textColor="#33b9cd"/>


    </RelativeLayout>



    </RelativeLayout>

    </ScrollView>



</RelativeLayout>

enter image description here

在此处输入图片说明

In find.xmli have included filter.xmlinitially which is invisible

在find.xml 中，我最初包含了filter.xml，这是不可见的

Now FilterAnimation.java

现在FilterAnimation.java

package matchat.helpers;

import com.s3.matchat.R;

import android.content.Context;
import android.util.DisplayMetrics;
import android.view.View;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.AnimationUtils;
import android.widget.RelativeLayout;

public class FilterAnimation implements AnimationListener 
{
    Context context;

    RelativeLayout filterLayout, otherLayout;

    private Animation filterSlideIn, filterSlideOut, otherSlideIn, otherSlideOut;

    private static int otherLayoutWidth, otherLayoutHeight;

    private boolean isOtherSlideOut = false;

    private int deviceWidth;

    private int margin;

    public FilterAnimation(Context context) 
    {
        this.context = context;

        DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();

        deviceWidth = displayMetrics.widthPixels; // as my animation is x-axis related so i gets the device width and will use that width,so that this sliding menu will work fine in all screen resolutions
    }

    public void initializeFilterAnimations(RelativeLayout filterLayout)
    {
        this.filterLayout = filterLayout;

        filterSlideIn = AnimationUtils.loadAnimation(context, R.anim.filter_slide_in);

        filterSlideOut = AnimationUtils.loadAnimation(context, R.anim.filter_slide_out);    

    }

    public void initializeOtherAnimations(RelativeLayout otherLayout)
    {       
        this.otherLayout = otherLayout;

        otherLayoutWidth = otherLayout.getWidth();

        otherLayoutHeight = otherLayout.getHeight();


        otherSlideIn = AnimationUtils.loadAnimation(context, R.anim.other_slide_in);
        otherSlideIn.setAnimationListener(this);

        otherSlideOut = AnimationUtils.loadAnimation(context, R.anim.other_slide_out);
        otherSlideOut.setAnimationListener(this);
    }

    public void toggleSliding()
    {
        if(isOtherSlideOut) //check if findLayout is already slided out so get so animate it back to initial position
        {

            filterLayout.startAnimation(filterSlideOut);

            filterLayout.setVisibility(View.INVISIBLE);

            otherLayout.startAnimation(otherSlideIn);

        }
        else //slide findLayout Out and filterLayout In
        {
            otherLayout.startAnimation(otherSlideOut);

            filterLayout.setVisibility(View.VISIBLE);

            filterLayout.startAnimation(filterSlideIn);
        }
    }

    @Override
    public void onAnimationEnd(Animation animation) 
    {
        if(isOtherSlideOut) //Now here we will actually move our view to the new position,because animations just move the pixels not the view
        {
            RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(otherLayoutWidth, otherLayoutHeight);

            otherLayout.setLayoutParams(params);

            isOtherSlideOut = false;
        }
        else
        {   
            margin = (deviceWidth * 80) / 100; //here im coverting device percentage width into pixels, in my other_slide_in.xml or other_slide_out.xml you can see that i have set the android:toXDelta="80%",so it means the layout will move to 80% of the device screen,to work across all screens i have converted percentage width into pixels and then used it



            RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(otherLayoutWidth, otherLayoutHeight);

            params.leftMargin = margin;

            params.rightMargin = -margin; //same margin from right side (negavite) so that our layout won't get shrink


            otherLayout.setLayoutParams(params);

            isOtherSlideOut = true;

            dimOtherLayout();
        }
    }

    @Override
    public void onAnimationRepeat(Animation animation) 
    {

    }

    @Override
    public void onAnimationStart(Animation animation) 
    {

    }

    private void dimOtherLayout()
    {
        AlphaAnimation alphaAnimation = new AlphaAnimation(1.0f, 0.5f);

        alphaAnimation.setFillAfter(true);

        otherLayout.startAnimation(alphaAnimation);
    }

}

Now Find.java

现在查找.java

package main.matchat.activities;

import matchat.helpers.FilterAnimation;
import com.s3.matchat.R;
import android.app.Activity;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.View;
import android.view.ViewTreeObserver;
import android.view.View.OnClickListener;
import android.view.ViewTreeObserver.OnGlobalLayoutListener;
import android.widget.Button;
import android.widget.RelativeLayout;

public class Find extends Activity implements OnClickListener
{
    RelativeLayout filterLayout, findLayout;

    Button btFilter;

    FilterAnimation filterAnimation;

    @Override
    protected void onCreate(Bundle savedInstanceState) 
    {       
        super.onCreate(savedInstanceState);
        setContentView(R.layout.find);

        filterLayout = (RelativeLayout)findViewById(R.id.filter_layout);

        findLayout = (RelativeLayout)findViewById(R.id.find_layout);

        btFilter = (Button)findViewById(R.id.filter);
        btFilter.setOnClickListener(this);

        filterAnimation = new FilterAnimation(this);

        initializeAnimations(); 
    }

    private void initializeAnimations()
    {   //Setting GlobolLayoutListener,when layout is completely set this function will get called and we can have our layout onbject with correct width & height,else if you simply try to get width/height of your layout in onCreate it will return 0

        final ViewTreeObserver filterObserver = filterLayout.getViewTreeObserver();

        filterObserver.addOnGlobalLayoutListener(new OnGlobalLayoutListener() 
        {

            @Override
            public void onGlobalLayout() 
            {
                filterLayout.getViewTreeObserver().removeGlobalOnLayoutListener(this);

                DisplayMetrics displayMetrics = getResources().getDisplayMetrics();

                int deviceWidth = displayMetrics.widthPixels;

                int filterLayoutWidth = (deviceWidth * 80) / 100; //here im coverting device percentage width into pixels, in my other_slide_in.xml or other_slide_out.xml you can see that i have set the android:toXDelta="80%",so it means the layout will move to 80% of the device screen,to work across all screens i have converted percentage width into pixels and then used it

                RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(filterLayoutWidth, RelativeLayout.LayoutParams.MATCH_PARENT);

                filterLayout.setLayoutParams(params);//here im setting the layout params for my filter.xml because its has width 260 dp,so work it across all screen i first make layout adjustments so that it work across all screens resolution 

                filterAnimation.initializeFilterAnimations(filterLayout);

            }
        });

        final ViewTreeObserver findObserver = findLayout.getViewTreeObserver();

        findObserver.addOnGlobalLayoutListener(new OnGlobalLayoutListener() 
        {

            @Override
            public void onGlobalLayout() 
            {
                findLayout.getViewTreeObserver().removeGlobalOnLayoutListener(this);

                filterAnimation.initializeOtherAnimations(findLayout);
            }
        });

    }

    @Override
    public void onClick(View v) 
    {
        int id = v.getId();

        switch(id)
        {

        case R.id.filter:

            filterAnimation.toggleSliding();

            break;
        }
    } 

}

Here are the animations res/anim

这是动画 res/anim

1.filter_slide_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:interpolator="@android:anim/decelerate_interpolator">

    <translate 
        android:fromXDelta="-100%"
        android:toXDelta="0%"
        android:duration="1000"
        android:fillEnabled="true" />

</set>

2.filter_slide_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:interpolator="@android:anim/decelerate_interpolator">

    <translate 
        android:fromXDelta="0%"
        android:toXDelta="-100%"
        android:duration="1000"/>

</set>

3.other_slide_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:interpolator="@android:anim/decelerate_interpolator" >

    <translate 
        android:fromXDelta="0%"
        android:toXDelta="-80%"
        android:duration="1000"
        android:fillEnabled="true"/>

</set>

4.other_slide_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:interpolator="@android:anim/decelerate_interpolator">

    <translate 
        android:fromXDelta="0%"
        android:toXDelta="80%"
        android:duration="1000"
        android:fillEnabled="true"/>

</set>

There you go a complete working and functional Sliding Menu, and you can customized it to meet your requirements,if any one still have some problems setting up,feel free to ask,i feel pleasure to help you out :)

那里有一个完整的工作和功能滑动菜单，您可以自定义它以满足您的要求，如果任何人在设置时仍然遇到问题，请随时询问，我很高兴为您提供帮助:)

Answer 2

回答by I?igo

https://github.com/johnkil/SideNavigation

I have been using this library these days and it works pretty well. Indeed, its usage is very straightforward.

这些天我一直在使用这个库，它运行得很好。事实上，它的用法非常简单。

You just declare a side_navigation.xml under your menu folder:

您只需在您的菜单文件夹下声明一个 side_navigation.xml：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" >

    <item
        android:id="@+id/side_navigation_menu_chart"
        android:icon="@drawable/icon_kitsch_gray"
        android:title="@string/navigation_chart"/>
    <item
        android:id="@+id/side_navigation_menu_info"
        android:icon="@drawable/ic_menu_info_details"
        android:title="@string/navigation_info"/>
    <item
        android:id="@+id/side_navigation_menu_gallery"
        android:icon="@drawable/ic_menu_gallery"
        android:title="@string/navigation_photos"/>
    <item
        android:id="@+id/side_navigation_menu_signin"
        android:icon="@drawable/ic_menu_login"
        android:title="@string/navigation_signin"/>
    <item
        android:id="@+id/side_navigation_menu_settings"
        android:icon="@drawable/ic_menu_preferences"
        android:title="@string/navigation_settings"/>

</menu>

Then, in your activity layout, you add the navigation View:

然后，在您的活动布局中，添加导航视图：

<com.devspark.sidenavigation.SideNavigationView
    android:id="@+id/side_navigation_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

And, in your activity, you link both of them:

并且，在您的活动中，您将两者联系起来：

SideNavigationView sideNavigationView = (SideNavigationView)findViewById(R.id.side_navigation_view);
sideNavigationView.setMenuItems(R.menu.side_navigation);

EDIT:

编辑：

To trigger the side navigation panel, is a good option to call it when the user presses the home icon in the ActionBar. For example:

要触发侧边导航面板，当用户按下 ActionBar 中的主页图标时调用它是一个不错的选择。例如：

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case android.R.id.home:
            sideNavigationView.toggleMenu();
            return true;

        default:
            return super.onOptionsItemSelected(item);
    }
}

Answer 3

回答by Srikanth

Use the official version. Google released the Navigation Drawer pattern at I/O 2013 and has updated the version 4 support library to include this. :)

使用正式版。Google 在 I/O 2013 上发布了 Navigation Drawer 模式，并更新了第 4 版支持库以包含它。:)

http://developer.android.com/design/patterns/navigation-drawer.html

Answer 4

回答by hungary54

You can also use www.scringo.com. It's an SDK that allows you to add this kind of side menu with practically just this piece of code:

您也可以使用www.scringo.com。它是一个 SDK，允许您几乎只使用以下代码即可添加这种侧边菜单：

Scringo scringo = new Scringo();
scringo.init();

There's a lot of configuration you can do later on from the site (menu direction, colors, etc...) and can also add built-in features to the menu such as inbox, find/invite friends, radar, etc...

您可以稍后从站点进行很多配置（菜单方向、颜色等...），还可以向菜单添加内置功能，例如收件箱、查找/邀请朋友、雷达等...

Answer 5

回答by Leonardo Salles

Here's a simple sliding menu developed by me, check the project in github, very simple to implement http://github.com/leonardosalles/shipp-sliding-menu

下面是我自己开发的一个简单的滑动菜单，查看github中的项目，实现很简单 http://github.com/leonardosalles/shipp-sliding-menu

Answer 6

回答by GBouerat

You can read this 3 articles about it :

你可以阅读这 3 篇关于它的文章：

http://android.cyrilmottier.com/?p=658

http://android.cyrilmottier.com/?p=701

http://android.cyrilmottier.com/?p=717

to get an idea :)

得到一个想法:)

Navigation Drawer (Google+ vs. YouTube)

导航抽屉（Google+ 与 YouTube）

Answer 7

回答by Iven Zhang

Slide menuTECHNICAL IMPLEMENTATION

滑动菜单技术实现

The side navigation is included in the Android SDK now. http://developer.android.com/design/patterns/navigation-drawer.html

侧边导航现在包含在 Android SDK 中。http://developer.android.com/design/patterns/navigation-drawer.html

A quick search in github does reveal one project that has implemented the UI pattern.

在 github 中快速搜索确实会发现一个实现了 UI 模式的项目。

android-fb-like-slideout-navigation at github There's also a video demonstrating the library at work.

github 上的 android-fb-like-slideout-navigation 还有一段视频演示了该库的工作原理。

EDIT: Here's another library project: https://github.com/darvds/RibbonMenuThanks Mr BuBBLs in comments!

编辑：这是另一个图书馆项目：https: //github.com/darvds/RibbonMenu感谢 BuBBLs 先生的评论！

More library project:

更多图书馆项目：

Cyril Mottierhas also written about implementing this pattern in his blog. These posts are very much worth reading:

Cyril Mottier在他的博客中也写过关于实现这种模式的文章。这些帖子非常值得一读：

See also the Prixing app on the Google Play to try out the side navigation implemented by Cyril.

另请参阅 Google Play 上的 Prixing 应用程序以试用 Cyril 实现的侧边导航。

Answer 8

回答by onmyway133

If you want to make your own Sliding menu instead of using other libraries, for better understand on how things work, then read my articles here

如果您想制作自己的滑动菜单而不是使用其他库，以便更好地了解工作原理，请在此处阅读我的文章

Make your own sliding menu on Android tutorial – Part 1

在 Android 教程中制作自己的滑动菜单 - 第 1 部分

Make your own sliding menu on Android tutorial – Part 2

在 Android 教程中制作自己的滑动菜单 – 第 2 部分

enter image description here

在此处输入图片说明

To achieve sliding effect, you can move the menu, or the content view, or both, all depend on your desire.

要实现滑动效果，您可以移动菜单，或内容视图，或两者兼而有之，一切都取决于您的愿望。

Te idea is to rely on 2 methods offsetLeftAndRight()and layout()to update the view position. You 'll also need Scrollerto facilitate animation

这个想法是依靠 2 个方法offsetLeftAndRight()和layout()来更新视图位置。您还需要Scroller来促进动画

Answer 9

回答by cafebabe1991

Try this method. Two relative layouts in the xml.

试试这个方法。xml 中的两个相对布局。

CONTENT(initially gone)

HEADER

Header initially occupies all the width and content is to the left of header but is currently set to Visibility=GONE.

标题最初占据所有宽度，内容在标题的左侧，但当前设置为 Visibility=GONE。

So when click happens on the header or any button on the header layout

因此，当单击标题或标题布局上的任何按钮时

Just set the width of your content layout to screen_width/2 (fraction will depend on your requirement).

只需将内容布局的宽度设置为 screen_width/2（分数取决于您的要求）。

public void onCreate(){
    RelativeLayout header=(RelativeLayout)findViewById(R.id.header);
    RelativeLayout content=(RelativeLayout)findViewById(R.id.content);
    Display display = getWindowManager().getDefaultDisplay(); 
    int width = display.getWidth(); // deprecated 
    int height = display.getHeight(); // deprecated

    //on some event

    content.setVisibility(View.VISIBLE);
    //margin(left,right,bottom,top)
    content.setMargin(width/3,0,0,0);

    //if already opened,close the door
    content.setVisibility(View.GONE);
}

If you want some good opening animations jus use translate animation on the layouts.
And make sure to make a lyout having two relative lYouts side by side with initial configuration as mentioned at the top of my answer.

如果您想要一些好的开场动画，请在布局上使用翻译动画。
并确保将两个相关的 lYout 与我的答案顶部提到的初始配置并排放置。

Android - 如何制作像 facebook、spotify 和 Google + 一样的幻灯片菜单

提问by Gaauwe

回答by Muhammad Babar

回答by I?igo

回答by Srikanth

回答by hungary54

回答by Leonardo Salles

回答by GBouerat

回答by Iven Zhang

回答by onmyway133

回答by cafebabe1991

相关推荐

最近更新

标签

Android - 如何制作像 facebook、spotify 和 Google + 一样的幻灯片菜单

提问by Gaauwe

回答by Muhammad Babar

回答by I?igo

回答by Srikanth

回答by hungary54

回答by Leonardo Salles

回答by GBouerat

回答by Iven Zhang

回答by onmyway133

回答by cafebabe1991

相关推荐

Android 无法解析目标“Google Inc.:Google APIs:15”

Android sdk 下载/更新失败

Android：将元素放在另一个元素下方并在屏幕底部对齐

Android 如何打开apk文件

相关推荐

最近更新

标签