Android利用浮動(dòng)窗口提示用戶操作

更新時(shí)間：2016年11月06日 09:09:45 作者：Reoger

這篇文章主要為大家詳細(xì)介紹了Android利用浮動(dòng)窗口提示用戶操作的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

上次我們實(shí)現(xiàn)了利用viewpager實(shí)現(xiàn)對(duì)新用戶的功能性介紹，今天我們來顯示利用浮動(dòng)窗口對(duì)用戶進(jìn)行操作的引導(dǎo)。先看效果圖。

雖然界面比較丑，但是可以看到我們還是可以實(shí)現(xiàn)對(duì)用戶進(jìn)行比較好的操作提示，下面介紹怎么實(shí)現(xiàn)這種效果。

集成環(huán)境

這個(gè)項(xiàng)目中，我采用的是TourGuide開源項(xiàng)目，可以直接進(jìn)入github地址進(jìn)行學(xué)習(xí)與下載，這里我們只是簡單的介紹怎么使用他來實(shí)現(xiàn)浮動(dòng)界面的引導(dǎo)效果。首先是添加引用：
在你的gradle file中添加以下依賴，然后點(diǎn)擊sync將依賴添加到自己的項(xiàng)目中就可以直接使用了。

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);

通過這幾行代碼就可以實(shí)現(xiàn)對(duì)引導(dǎo)的效果。下面對(duì)其中的參數(shù)做一個(gè)簡答的介紹：

* setPointer() -設(shè)置指示器，關(guān)于如何改變外觀（效果圖中那個(gè)提示用戶去點(diǎn)擊的白點(diǎn)），參考我后面的代碼，如果不想要pointer，可以直接傳入null。
* setToolTip - 設(shè)置提示的內(nèi)容，關(guān)于如何改變其樣式，參考我后面的代碼，如果不想要tooltip，可以傳入null。
* setOverlay - 設(shè)置覆蓋層的樣式，關(guān)于如果改變其樣式，參考我后面的代碼，如果不想要可以傳入null。
* with -目前使用的是 TourGuide.Technique.Click ，以后可以能會(huì)去掉。
* mTourGuideHandler - 返回的handler類型，用戶去掉提示信息。

自定義提示樣式

自定義ToolTip樣式，代碼中的注釋比較詳細(xì)，應(yīng)該可以看懂。

 Button button = (Button) findViewById(R.id.id_but);
  //設(shè)置文本的動(dòng)畫效果
  Animation animation = new TranslateAnimation(0f, 0f, 200f, 0f);//轉(zhuǎn)化動(dòng)畫
  animation.setDuration(1000);//時(shí)間間隔
  animation.setFillAfter(true);//設(shè)置停留在動(dòng)畫完成后的位置
  animation.setInterpolator(new BounceInterpolator());//設(shè)置動(dòng)畫變化的速率

  ToolTip toolTip = new ToolTip()//設(shè)置文字提示的風(fēng)格
    .setTitle("歡迎使用")//設(shè)置標(biāo)題
    .setDescription("下面來介紹怎么使用把..")//設(shè)置內(nèi)容提示
    .setTextColor(Color.parseColor("#bdc3c7"))//設(shè)置字體顏色
    .setBackgroundColor(Color.parseColor("#e74c3c"))//設(shè)置背景色
    .setShadow(true)//設(shè)置是否有陰影效果
    .setGravity(Gravity.CENTER)//設(shè)置相對(duì)于父布局位置
    .setEnterAnimation(animation);//設(shè)置動(dòng)畫效果

  mTourGuideHandler1 = TourGuide.init(this).with(TourGuide.Technique.Click)
    .setPointer(new Pointer())//提示指向的按鈕
    .setToolTip(toolTip)//設(shè)置提示的內(nèi)容
    .setOverlay(new Overlay())//設(shè)置覆蓋效果
    .playOn(button);//設(shè)置綁定的控件
  button.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View v) {
    mTourGuideHandler1.cleanUp();//關(guān)閉引導(dǎo)界面
    initSecondeButton();
   }
  });

自定義overlay和pointer樣式。

{
  Pointer pointer = new
    Pointer().setColor(Color.RED)//設(shè)置指示器的顏色
    .setGravity(Gravity.BOTTOM);//設(shè)置指示器對(duì)于父容器的位置

  Overlay overlay = new Overlay()
    .setBackgroundColor(Color.parseColor("#AAFF0000"))//設(shè)置覆蓋層的顏色
    .disableClick(true)//設(shè)置不可以點(diǎn)擊
    .setStyle(Overlay.Style.Rectangle);//設(shè)置覆蓋的風(fēng)格

  Button bu2 = (Button) findViewById(R.id.second_but);
   mTourGuideHandler2 = TourGuide.init(this).with(TourGuide.Technique.Click)
     .setPointer(pointer)
     .setToolTip(new ToolTip().setTitle("點(diǎn)擊他").setDescription("我們繼續(xù)往下走..."))
     .setOverlay(overlay)
     .playOn(bu2);
  bu2.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View v) {
    mTourGuideHandler2.cleanUp();
   }
  });
 }

相信代碼已經(jīng)注釋的比較清楚了。
最后，將整個(gè)項(xiàng)目的代碼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();


 }

 //第二個(gè)按鈕的
 private void initSecondeButton() {
  Pointer pointer = new
    Pointer().setColor(Color.RED)//設(shè)置指示器的顏色
    .setGravity(Gravity.BOTTOM);//設(shè)置指示器對(duì)于父容器的位置

  Overlay overlay = new Overlay()
    .setBackgroundColor(Color.parseColor("#AAFF0000"))//設(shè)置覆蓋層的顏色
    .disableClick(true)//設(shè)置不可以點(diǎn)擊
    .setStyle(Overlay.Style.Rectangle);//設(shè)置覆蓋的風(fēng)格

  Button bu2 = (Button) findViewById(R.id.second_but);
   mTourGuideHandler2 = TourGuide.init(this).with(TourGuide.Technique.Click)
     .setPointer(pointer)
     .setToolTip(new ToolTip().setTitle("點(diǎn)擊他").setDescription("我們繼續(xù)往下走..."))
     .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);


  //設(shè)置文本的動(dòng)畫效果
  Animation animation = new TranslateAnimation(0f, 0f, 200f, 0f);//轉(zhuǎn)化動(dòng)畫
  animation.setDuration(1000);//時(shí)間間隔
  animation.setFillAfter(true);//設(shè)置停留在動(dòng)畫完成后的位置
  animation.setInterpolator(new BounceInterpolator());//設(shè)置動(dòng)畫變化的速率

  ToolTip toolTip = new ToolTip()//設(shè)置文字提示的風(fēng)格
    .setTitle("歡迎使用")//設(shè)置標(biāo)題
    .setDescription("下面來介紹怎么使用把..")//設(shè)置內(nèi)容提示
    .setTextColor(Color.parseColor("#bdc3c7"))//設(shè)置字體顏色
    .setBackgroundColor(Color.parseColor("#e74c3c"))//設(shè)置背景色
    .setShadow(true)//設(shè)置是否有陰影效果
    .setGravity(Gravity.CENTER)//設(shè)置相對(duì)于父布局位置
    .setEnterAnimation(animation);//設(shè)置動(dòng)畫效果

  mTourGuideHandler1 = TourGuide.init(this).with(TourGuide.Technique.Click)
    .setPointer(new Pointer())//提示指向的按鈕
    .setToolTip(toolTip)//設(shè)置提示的內(nèi)容
    .setOverlay(new Overlay())//設(shè)置覆蓋效果
    .playOn(button);//設(shè)置綁定的控件
  button.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View v) {
    mTourGuideHandler1.cleanUp();//關(guān)閉引導(dǎo)界面
    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