【问题标题】:How to implement first launch tutorial like Android Lollipop apps: Like Sheets, Slides app?如何实现 Android Lollipop 应用程序之类的首次启动教程:例如 Sheets、Slides 应用程序?
【发布时间】:2015-01-13 06:35:15
【问题描述】:

我的 Nexus 5 中闪现了 Android 5.0 最终版本。我注意到它在首次启动时以非常漂亮、干净和优雅的方式显示教程。 “表格”、“幻灯片”等应用。

我们如何在与 Android L 兼容的应用中实现这一点?

此外,应用程序会从第一个启动屏幕淡出,然后显示教程。

【问题讨论】:

  • 我很确定这不是公共框架的一部分。您可能必须自己实现它。

标签: android android-5.0-lollipop


【解决方案1】:

有一个很好的库可以模拟这些首次运行的教程: https://github.com/PaoloRotolo/AppIntro

点击查看大图

【讨论】:

  • 我认为这是最好的。如果不是,您可以提出其他建议吗?
【解决方案2】:

首先,没有秘密。插图的质量是获得这个漂亮结果的关键。所以除非你自己是设计师,否则你必须为他们找到一个好的设计师。

除此之外,我可以看到几种接近这一点的方法。

  1. 首先,插图上有一个非常微妙的视差效果。您可以使用this ParallaxTransformPage gist 来实现它。我用过,效果很好。

  2. 另外,切换页面时here's a lib that let you smoothly change the screen's background color

  3. 对于闪屏淡出动画,你可以这样做:

    final ImageView launchScreen = (ImageView) context.findViewById(R.id.launch_screen_view);
    new Handler().postDelayed(new Runnable()
    {
        @Override
        public void run()
        {
            Animation animation = AnimationUtils.loadAnimation(context, android.R.anim.fade_out);
            animation.setAnimationListener(new Animation.AnimationListener()
            {
                // ...
    
                @Override
                public void onAnimationEnd(Animation animation)
                {
                    launchScreen.setVisibility(View.GONE);
                }
            });
            launchScreen.startAnimation(animation);
        }
    }, 2000);
    
  4. 关注linkas's answer,了解ViewPagerIndicator 的使用方法以及如何仅在用户首次启动应用时启动教程。

【讨论】:

  • 这看起来很接近。谢谢。我会实施并告知。
  • 当用户尝试在最后一页上滑动(向左(向前)滑动)时,您是否也知道如何完成活动(带有淡出动画),就像谷歌一样表格应用? Thisthis 是相关的。
  • @GerritHoekstra 你可以做的只是将你的ViewPager 放在与你的主屏幕相同的布局中(在主屏幕的其余部分的顶部),并首先显示/膨胀ViewPager发射。您向ViewPager 添加了第 5 个“假”空白页面。当用户滑动到第 5 页时,您会更改 ViewPager 的 alpha,直到最终当用户松开手指时将其可见性设置为 GONE。
  • @MathieuMaree 谢谢!我已经成功实现了,现在唯一的事情是如何从CirclePageIndicator 隐藏假视图,因为当我有例如 4 个视图和 1 个假视图时,它显示 5 个圆圈而不是 4 个(我想要的),你呢知道如何解决吗?
  • @MathieuMaree 没关系,我已将 CirclePageIndicator 更改为仅显示 4 个圆圈。此外,我已经按照here 的描述使我的活动透明,这样我就不必将“教程布局”放在与我的主屏幕相同的布局中。在 onPageScrolled 中使用第二个参数 (positionOffset) 计算和更改 alpha。谢谢你的帮助!非常感谢。
【解决方案3】:

这个 git 应该可以帮助你实现你想要的: https://github.com/spongebobrf/MaterialIntroTutorial,

这个 android 库演示了一个材料介绍教程,就像您提到的 Google 表格上的教程一样。

另外,这个库为每个页面设置了背景颜色,当在两个页面之间滚动时,两种颜色会相互淡入

这里还有一些可以帮助你的介绍性 git:

  1. https://github.com/HeinrichReimer/material-intro
  2. https://github.com/PaoloRotolo/AppIntro

【讨论】:

  • 这些看起来真的很棒!
【解决方案4】:

我在这里找到了这个库:

CircleIndicator Library

它使用这些圆圈创建一个类似于棒棒糖的 ViewPager。只需格式化布局以使其适合您的应用程序,然后就可以了。它不包含动画,但我认为这是一个开始。

【讨论】:

    【解决方案5】:

    您可以在此处使用 ViewPagerIndicator:http://viewpagerindicator.com/#download。然后,您应该定义 SharedPreferences,以仅显示 ViewPager 一次。你可以写:

    public class MainActivity extends Activity {
        public static final String MyPrefs = "MyPrefs";
        ...
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            SharedPreferences sp = getSharedPreferences(MyPrefs, Context.MODE_PRIVATE);
            if (!sp.getBoolean("first", false)) {
                SharedPreferences.Editor editor = sp.edit();
                editor.putBoolean("first", true);
                editor.commit();
                Intent intent = new Intent(this, SampleCirclesDefault.class); //call your ViewPager class
                startActivity(intent);
            }
        }
    }
    

    【讨论】:

      【解决方案6】:

      也许您想使用 Roman Nurik 解决方案之一:https://github.com/romannurik/Android-WizardPager

      【讨论】:

        【解决方案7】:

        如果您不想使用库,这很简单。我以前使用过一个库,但我开始实现一个自定义版本。您所要做的就是使用选项卡式视图和视图寻呼机。然后将教程中的所有这些页面设计为片段。这些片段可以有任何按钮,在任何位置,以及您喜欢的不同样式,因为您自己实现每个片段。这并不难。最后,只需使用共享首选项,检查它是否是第一次运行。如果它是如何拥有所有片段的活动。否则不显示该活动。

        【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2016-03-06
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2020-07-25
        • 1970-01-01
        • 1970-01-01
        • 2013-11-19
        相关资源
        最近更新 更多