Android利用浮动窗口提示用户操作

上次我们实现了利用viewpager实现对新用户的功能性介绍，今天我们来显示利用浮动窗口对用户进行操作的引导。先看效果图。

虽然界面比较丑，但是可以看到我们还是可以实现对用户进行比较好的操作提示，下面介绍怎么实现这种效果。

集成环境

这个项目中，我采用的是tourguide开源项目，可以直接进入github地址进行学习与下载，这里我们只是简单的介绍怎么使用他来实现浮动界面的引导效果。首先是添加引用：
在你的gradle file中添加以下依赖，然后点击sync将依赖添加到自己的项目中就可以直接使用了。

repositories {
 mavencentral()
 maven(){
  url "https://oss.sonatype.org/content/repositories/snapshots"
 }
}
compile ('com.github.worker8:tourguide:1.0.17-snapshot@aar'){
 transitive=true
}

最简单的使用.

button button = (button)findviewbyid(r.id.button);
tourguide mtourguidehandler = tourguide.init(this).with(tourguide.technique.click)
   .setpointer(new pointer())
   .settooltip(new tooltip().settitle("welcome!").setdescription("click on get started to begin..."))
   .setoverlay(new overlay())
   .playon(button);

通过这几行代码就可以实现对引导的效果。下面对其中的参数做一个简答的介绍：

* setpointer() -设置指示器，关于如何改变外观（效果图中那个提示用户去点击的白点），参考我后面的代码，如果不想要pointer，可以直接传入null。
* settooltip - 设置提示的内容，关于如何改变其样式，参考我后面的代码，如果不想要tooltip，可以传入null。
* setoverlay - 设置覆盖层的样式，关于如果改变其样式，参考我后面的代码，如果不想要可以传入null。
* with -目前使用的是 tourguide.technique.click ，以后可以能会去掉。
* mtourguidehandler - 返回的handler类型，用户去掉提示信息。

自定义提示样式

自定义tooltip样式，代码中的注释比较详细，应该可以看懂。

 button button = (button) findviewbyid(r.id.id_but);
  //设置文本的动画效果
  animation animation = new translateanimation(0f, 0f, 200f, 0f);//转化动画
  animation.setduration(1000);//时间间隔
  animation.setfillafter(true);//设置停留在动画完成后的位置
  animation.setinterpolator(new bounceinterpolator());//设置动画变化的速率

  tooltip tooltip = new tooltip()//设置文字提示的风格
    .settitle("欢迎使用")//设置标题
    .setdescription("下面来介绍怎么使用把..")//设置内容提示
    .settextcolor(color.parsecolor("#bdc3c7"))//设置字体颜色
    .setbackgroundcolor(color.parsecolor("#e74c3c"))//设置背景色
    .setshadow(true)//设置是否有阴影效果
    .setgravity(gravity.center)//设置相对于父布局位置
    .setenteranimation(animation);//设置动画效果

  mtourguidehandler1 = tourguide.init(this).with(tourguide.technique.click)
    .setpointer(new pointer())//提示指向的按钮
    .settooltip(tooltip)//设置提示的内容
    .setoverlay(new overlay())//设置覆盖效果
    .playon(button);//设置绑定的控件
  button.setonclicklistener(new view.onclicklistener() {
   @override
   public void onclick(view v) {
    mtourguidehandler1.cleanup();//关闭引导界面
    initsecondebutton();
   }
  });

自定义overlay和pointer样式。

{
  pointer pointer = new
    pointer().setcolor(color.red)//设置指示器的颜色
    .setgravity(gravity.bottom);//设置指示器对于父容器的位置

  overlay overlay = new overlay()
    .setbackgroundcolor(color.parsecolor("#aaff0000"))//设置覆盖层的颜色
    .disableclick(true)//设置不可以点击
    .setstyle(overlay.style.rectangle);//设置覆盖的风格

  button bu2 = (button) findviewbyid(r.id.second_but);
   mtourguidehandler2 = tourguide.init(this).with(tourguide.technique.click)
     .setpointer(pointer)
     .settooltip(new tooltip().settitle("点击他").setdescription("我们继续往下走..."))
     .setoverlay(overlay)
     .playon(bu2);
  bu2.setonclicklistener(new view.onclicklistener() {
   @override
   public void onclick(view v) {
    mtourguidehandler2.cleanup();
   }
  });
 }

相信代码已经注释的比较清楚了。
最后，将整个项目的代码copy上来。

package students.userfloatdemo;

import android.graphics.color;
import android.os.bundle;
import android.support.v7.app.appcompatactivity;
import android.view.gravity;
import android.view.view;
import android.view.animation.animation;
import android.view.animation.bounceinterpolator;
import android.view.animation.translateanimation;
import android.widget.button;

import tourguide.tourguide.overlay;
import tourguide.tourguide.pointer;
import tourguide.tourguide.tooltip;
import tourguide.tourguide.tourguide;

public class mainactivity extends appcompatactivity {

 private tourguide mtourguidehandler1;
 private tourguide mtourguidehandler2;



 @override
 protected void oncreate(bundle savedinstancestate) {
  super.oncreate(savedinstancestate);
  setcontentview(r.layout.activity_main);


  initfisrtbutton();


 }

 //第二个按钮的
 private void initsecondebutton() {
  pointer pointer = new
    pointer().setcolor(color.red)//设置指示器的颜色
    .setgravity(gravity.bottom);//设置指示器对于父容器的位置

  overlay overlay = new overlay()
    .setbackgroundcolor(color.parsecolor("#aaff0000"))//设置覆盖层的颜色
    .disableclick(true)//设置不可以点击
    .setstyle(overlay.style.rectangle);//设置覆盖的风格

  button bu2 = (button) findviewbyid(r.id.second_but);
   mtourguidehandler2 = tourguide.init(this).with(tourguide.technique.click)
     .setpointer(pointer)
     .settooltip(new tooltip().settitle("点击他").setdescription("我们继续往下走..."))
     .setoverlay(overlay)
     .playon(bu2);
  bu2.setonclicklistener(new view.onclicklistener() {
   @override
   public void onclick(view v) {
    mtourguidehandler2.cleanup();
   }
  });
 }

 private void initfisrtbutton() {
  button button = (button) findviewbyid(r.id.id_but);


  //设置文本的动画效果
  animation animation = new translateanimation(0f, 0f, 200f, 0f);//转化动画
  animation.setduration(1000);//时间间隔
  animation.setfillafter(true);//设置停留在动画完成后的位置
  animation.setinterpolator(new bounceinterpolator());//设置动画变化的速率

  tooltip tooltip = new tooltip()//设置文字提示的风格
    .settitle("欢迎使用")//设置标题
    .setdescription("下面来介绍怎么使用把..")//设置内容提示
    .settextcolor(color.parsecolor("#bdc3c7"))//设置字体颜色
    .setbackgroundcolor(color.parsecolor("#e74c3c"))//设置背景色
    .setshadow(true)//设置是否有阴影效果
    .setgravity(gravity.center)//设置相对于父布局位置
    .setenteranimation(animation);//设置动画效果

  mtourguidehandler1 = tourguide.init(this).with(tourguide.technique.click)
    .setpointer(new pointer())//提示指向的按钮
    .settooltip(tooltip)//设置提示的内容
    .setoverlay(new overlay())//设置覆盖效果
    .playon(button);//设置绑定的控件
  button.setonclicklistener(new view.onclicklistener() {
   @override
   public void onclick(view v) {
    mtourguidehandler1.cleanup();//关闭引导界面
    initsecondebutton();
   }
  });

 }


}

xml文件中的代码

<?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:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical"
 android:paddingbottom="@dimen/activity_vertical_margin"
 android:paddingleft="@dimen/activity_horizontal_margin"
 android:paddingright="@dimen/activity_horizontal_margin"
 android:paddingtop="@dimen/activity_vertical_margin"
 tools:context="students.userfloatdemo.mainactivity">

 <button
  android:id="@+id/id_but"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="第一步"
 />
 <button
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="第二步"
 android:id="@+id/second_but"/>
</linearlayout>

最后的最后，奉上源码：https://github.com/reoger/startuitest

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。