新手引导界面ShowcastView

作者: 小怪兽打葫芦娃 | 来源:发表于2017-06-06 10:41 被阅读2982次

Android程序员面试宝典

自定义控件

联网

工具

数据库

源码分析相关面试题

Activity相关面试题

Service相关面试题

与XMPP相关面试题

与性能优化相关面试题

与登录相关面试题

与开发相关面试题

与人事相关面试题


先看最终实现的效果 ,当我们第一次使用某些软件的时候,也会出现一个半透明的提示界面,比如知乎在第一次查看的时候,会告诉你右划返回,当你以后再进行相同的操作时,这个半透明的提示图片就不会出现了。

使用步骤

1. 在Module的build.gradle添加依赖

compile 'com.github.amlcurran.showcaseview:library:5.4.3'

2. 假设在Activity中有一个按钮,你想突出它(如上面三张图片),在Activity的onCreate()方法中添加如下代码:

 Button get_src_bn = (Button)findViewById(R.id.get_source_bn);

 new ShowcaseView.Builder(this)
         .setTarget(new ViewTarget(get_src_bn))//设置button为突出的目标
         .setContentTitle("我的微信公众号")
         .setContentText("Android干货程序员")
         .hideOnTouchOutside()
         .build();

这就是使用ShowcaseView的默认方法,很简单吧,你想突出什么,就以什么为Target。

3. 在Activity中,你不想突出任何一个按钮或者View,你只是想像第一张图片一样显示一个半透明图片告诉用户某种手势操作,那么你的代码应该是这样的:

 ShowcaseView showcaseView = new ShowcaseView.Builder(this)
                             .setStyle(R.style.Custom_semi_transparent_demo)
                             .hideOnTouchOutside()
                             .build();

你没有target任何一个view,而是使用了setStyle来手动的设置一个背景主题,那么这个背景主题就是关键了,Custom_semi_transparent_demo的代码如下:

 <style name="Custom_semi_transparent_demo" parent="ShowcaseView.Light">
     <item name="sv_backgroundColor">#663d4353</item>
     <item name="sv_showcaseColor">#25467A</item>
     <item name="sv_buttonText">Close</item>
 </style>

可以看到这个背景主题是继承了ShowcaseView.Light主题,然后修改了背景颜色、字体颜色和按钮文字。设置完正确的style之后,还需要马上设置背景图片,这个例子中的背景图片是R.drawable.swipe_back_en,图片必须是png格式的透明图片。

4. 在Activity中,想实现用户注册引导界面,如下图,代码如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.lavor.showcaseviewdemo.MainActivity">

    <EditText
        android:id="@+id/username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <EditText
        android:id="@+id/password"
        android:inputType="textPassword"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <Button
        android:id="@+id/register"
        android:text="注册"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>
 /**
    * 简单的用户注册引导
    */
   public  void registerGuide(){
       this.register = (Button) findViewById(R.id.register);
       this.password = (EditText) findViewById(R.id.password);
       this.username = (EditText) findViewById(R.id.username);
       usernameTarget = new ViewTarget(username);
       passwordTarget = new ViewTarget(password);
       registerTarget = new ViewTarget(register);
       final Button usernameButton=new Button(this);
       usernameButton.setText("下一步");
       final Button passwordButton=new Button(this);
       passwordButton.setText("下一步");
       final Button registerButton=new Button(this);
       registerButton.setText("明白了");
       usernameShowcaseView=new ShowcaseView.Builder(this)
               .withHoloShowcase()
               .setTarget(usernameTarget)
               .setContentTitle("第一步")
               .setContentText("请输入用户名")
               .replaceEndButton(usernameButton)
               .build();
       passwordShowcaseView=new ShowcaseView.Builder(MainActivity.this)
               .withHoloShowcase()
               .setTarget(passwordTarget)
               .setContentTitle("第二步")
               .setContentText("请输入密码")
               .replaceEndButton(passwordButton)
               .build();
       passwordShowcaseView.hide();
       registerShowcaseView=new ShowcaseView.Builder(MainActivity.this)
               .withHoloShowcase()
               .setTarget(registerTarget)
               .setContentTitle("第三步")
               .setContentText("请点击注册按钮")
               .replaceEndButton(registerButton)
               .build();
       registerShowcaseView.hide();
       usernameButton.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View v) {
               usernameShowcaseView.hide();
               passwordShowcaseView.show();
           }
       });
       passwordButton.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View v) {
               passwordShowcaseView.hide();
               registerShowcaseView.show();
           }
       });
       registerButton.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View v) {
               registerShowcaseView.hide();
           }
       });
   }

相关文章

  • 新手引导界面ShowcastView

    Android程序员面试宝典 自定义控件 一分钟实现新手引导页 一分钟实现轮播图 一分钟实现GridView拖拽 ...

  • 无标题文章

    UI界面自适应 多语言 新手引导 热更新 Tag修改之后的文件在 ProjectSetting - TagMana...

  • 一款ubuntu 桌面版16.10开机引导主题

    新手在安装ubuntu时,那个启动引导界面真d超级丑,然后网上有很多引导主题,但是我装d时最新的16.10的版本,...

  • iOS新手引导--GuideImageView(二)

    iOS新手引导--GuideImageView(一)iOS新手引导--GuideImageView(二)iOS新手...

  • 引导界面

  • 联想--次留影响因素

    1、新手引导 新手引导的分节点流失统计 不同新手引导方案的次留比较 2、机型适配 次日流失用户的机型分布 3、美术...

  • iOS中镂空效果

    最近开发的app增加了一个新手引导的需求。为了实现这个需求需要界面镂空掉一部分。现在就说下iOS中实现界面镂空的...

  • tribe-提前预期

    体验新爱啪啪,新手引导后立即要注册登录(瓦特,竟然没有游客浏览模式) 咦再注意看,这个注册界面提醒 #it's s...

  • 妄想之后,还需靠数据说话

    笔者近期在做一个快递单打印产品的新手引导改版,有同学提问,“整个流程那么简单有必要新手引导吗?”,“即使有新手引导...

  • ViewPager欢迎界面到引导界面的的实现之一

    ViewPager欢迎界面到引导界面的的实现 打开软件,弹出一个动画,动画结束到引导界面 先来实现欢迎界面动画的实...

网友评论

  • 王人冉:博主,Android程序员面试宝典 这个 apk有源码吗?
  • 王人冉:楼主 一分钟实现新手引导页 链接有问题

本文标题:新手引导界面ShowcastView

本文链接:https://www.haomeiwen.com/subject/kejgfxtx.html