前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >App Intro相关

App Intro相关

作者头像
用户3004328
发布2018-09-06 17:12:49
2640
发布2018-09-06 17:12:49
举报
文章被收录于专栏:增长技术增长技术

https://github.com/PaoloRotolo/AppIntro

AppIntro is an Android Library that helps you make a cool intro for your app, like the ones in Google apps.

##How to use Add this to your build.gradle:

代码语言:javascript
复制
repositories {
    mavenCentral()
}

dependencies {
  compile 'com.github.paolorotolo:appintro:4.0.0'
}

Create a new Activity that extends AppIntro:

代码语言:javascript
复制
public class MyIntro extends AppIntro {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // Add your slide's fragments here.
        // AppIntro will automatically generate the dots indicator and buttons.
        addSlide(first_fragment);
        addSlide(second_fragment);
        addSlide(third_fragment);
        addSlide(fourth_fragment);

        // Instead of fragments, you can also use our default slide
        // Just set a title, description, background and image. AppIntro will do the rest.
        addSlide(AppIntroFragment.newInstance(title, description, image, background_colour));

        // OPTIONAL METHODS
        // Override bar/separator color.
        setBarColor(Color.parseColor("#3F51B5"));
        setSeparatorColor(Color.parseColor("#2196F3"));

        // Hide Skip/Done button.
        showSkipButton(false);
        setProgressButtonEnabled(false);

        // Turn vibration on and set intensity.
        // NOTE: you will probably need to ask VIBRATE permisssion in Manifest.
        setVibrate(true);
        setVibrateIntensity(30);
    }

    @Override
    public void onSkipPressed(Fragment currentFragment) {
        super.onSkipPressed(currentFragment);
        // Do something when users tap on Skip button.
    }

    @Override
    public void onDonePressed(Fragment currentFragment) {
        super.onDonePressed(currentFragment);
        // Do something when users tap on Done button.
    }

    @Override
    public void onSlideChanged(@Nullable Fragment oldFragment, @Nullable Fragment newFragment) {
        super.onSlideChanged(oldFragment, newFragment);
        // Do something when the slide changes.
    }
}

Finally, declare the activity in your Manifest like so:

代码语言:javascript
复制
<activity android:name="com.example.example.intro"
    android:label="@string/app_intro" />

Do not declare the intro as your main app launcher unless you want the intro to launch every time your app starts. Refer to the wiki for an example of how to launch the intro once from your main activity.

Layout 2

If you want to try new layout (as seen in Google’s Photo app), just extend AppIntro2 in your Activity. That’s all :)

代码语言:javascript
复制
public class MyIntro extends AppIntro2 {
    [...]
}

Easy implementation of Slide Fragments

As you can see, things have changed in AppIntro 3.0.0. Now it’s so easy to add new slides to AppIntro. For example:

  • Copy the class SampleSlide from my example project.
  • Add a new slide with addSlide(SampleSlide.newInstance(R.layout.your_slide_here));

There’s no need to create one class for fragment anymore. :)

I’ve never used fragments…

No problem, just use this method and AppIntro will generate a new slide for you.

代码语言:javascript
复制
addSlide(AppIntroFragment.newInstance(title, description, image, background_colour));

Animations

AppIntro comes with some pager animations. Choose the one you like and then active it with:

代码语言:javascript
复制
// Put this method in init()
setFadeAnimation();

Available animations:

代码语言:javascript
复制
setFadeAnimation()
setZoomAnimation()
setFlowAnimation()
setSlideOverAnimation()
setDepthAnimation()

If you want to create nice parallax effect or your own custom animation, create your own PageTransformer and call:

代码语言:javascript
复制
// Put this method in init()
setCustomTransformer(transformer);

Click here to see how I did it in the example app.

Android 6.0 ready

Android 6.0 introduced a new permissions model for developers. Now all your apps have to request permissions which can be a tedious thing to implement.

However, AppIntro simplifies this down to one single line of code!

代码语言:javascript
复制
// Put this in init()
askForPermissions(new String[]{Manifest.permission.CAMERA}, 2); // OR

// This will ask for the camera permission AND the contacts permission on the same slide.
// Ensure your slide talks about both so as not to confuse the user.
askForPermissions(new String[]{Manifest.permission.CAMERA, Manifest.permission.READ_CONTACTS}, 2);

NOTE: It is advised that you only put one permission in the String array unless you want the app to ask for multiple permissions on the same slide.

Example

See example code here on Github. You can also see it live. Download this app from Google Play..

Real life examples

Do you need inspiration? A lot of apps are using AppIntro out there:

Planets

Hermes - Material IRC Client

Paper Onboarding for Android

Animation
Animation

Requirements

  • Android 5.0 Lollipop (API lvl 21) or greater
  • Your favorite IDE

Installation

​ Just download the package from here and add it to your project classpath, or just use the maven repo: ​ Gradle:

代码语言:javascript
复制
'com.ramotion.paperonboarding:paper-onboarding:1.0.0'

SBT:

代码语言:javascript
复制
libraryDependencies += "com.ramotion.paperonboarding" % "paper-onboarding" % "1.0.0"

Maven:

代码语言:javascript
复制
<dependency>
    <groupId>com.ramotion.paperonboarding</groupId>
    <artifactId>paper-onboarding</artifactId>
    <version>1.0.0</version>
    <type>aar</type>
</dependency>

Basic usage

Paper Onboarding is a simple and easy to use onboarding slider for your app. You just need to provide content for each slider page - a main icon, text, and small round icon for the bottom.

1 Use PaperOnboardingPage to prepare your data for slider:

代码语言:javascript
复制
PaperOnboardingPage scr1 = new PaperOnboardingPage("Hotels",
	"All hotels and hostels are sorted by hospitality rating",
        Color.parseColor("#678FB4"), R.drawable.hotels, R.drawable.key);
PaperOnboardingPage scr2 = new PaperOnboardingPage("Banks",
	"We carefully verify all banks before add them into the app",
        Color.parseColor("#65B0B4"), R.drawable.banks, R.drawable.wallet);
PaperOnboardingPage scr3 = new PaperOnboardingPage("Stores",
	"All local stores are categorized for your convenience",
        Color.parseColor("#9B90BC"), R.drawable.stores, R.drawable.shopping_cart);

ArrayList<PaperOnboardingPage> elements = new ArrayList<>();
elements.add(scr1);
elements.add(scr2);
elements.add(scr3);

2 Create a fragment from PaperOnboardingFragment and provide your data.

代码语言:javascript
复制
PaperOnboardingFragment onBoardingFragment = PaperOnboardingFragment.newInstance(elements);

3 Done! Now you can use this fragment as you want in your activity, for example :

代码语言:javascript
复制
FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
fragmentTransaction.add(R.id.fragment_container, onBoardingFragment);
fragmentTransaction.commit();

4 Extra step : You can add event listeners to fragments with your logic, like replacing this fragment to another when the user swipes next from the last screen:

代码语言:javascript
复制
onBoardingFragment.setOnRightOutListener(new PaperOnboardingOnRightOutListener() {
    @Override
    public void onRightOut() {
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
        Fragment bf = new BlankFragment();
        fragmentTransaction.replace(R.id.fragment_container, bf);
        fragmentTransaction.commit();
    }
});

Currently, there are three listeners that cover all events - onRightOut, onLeftOut and onChange; see code examples and usage in the repo.

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016-07-21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Layout 2
  • Easy implementation of Slide Fragments
  • Animations
  • Android 6.0 ready
  • Example
  • Real life examples
  • Paper Onboarding for Android
    • Requirements
      • Installation
        • Basic usage
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档