Android利用浮動窗口提示用戶操作
上次我們實(shí)現(xiàn)了利用viewpager實(shí)現(xiàn)對新用戶的功能性介紹,今天我們來顯示利用浮動窗口對用戶進(jìn)行操作的引導(dǎo)。先看效果圖。
雖然界面比較丑,但是可以看到我們還是可以實(shí)現(xiàn)對用戶進(jìn)行比較好的操作提示,下面介紹怎么實(shí)現(xiàn)這種效果。
集成環(huán)境
這個(gè)項(xiàng)目中,我采用的是TourGuide開源項(xiàng)目,可以直接進(jìn)入github地址進(jìn)行學(xué)習(xí)與下載,這里我們只是簡單的介紹怎么使用他來實(shí)現(xiàn)浮動界面的引導(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)對引導(dǎo)的效果。下面對其中的參數(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 ,以后可以能會去掉。
* mTourGuideHandler - 返回的handler類型,用戶去掉提示信息。
自定義提示樣式
自定義ToolTip樣式,代碼中的注釋比較詳細(xì),應(yīng)該可以看懂。
Button button = (Button) findViewById(R.id.id_but); //設(shè)置文本的動畫效果 Animation animation = new TranslateAnimation(0f, 0f, 200f, 0f);//轉(zhuǎn)化動畫 animation.setDuration(1000);//時(shí)間間隔 animation.setFillAfter(true);//設(shè)置停留在動畫完成后的位置 animation.setInterpolator(new BounceInterpolator());//設(shè)置動畫變化的速率 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è)置相對于父布局位置 .setEnterAnimation(animation);//設(shè)置動畫效果 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è)置指示器對于父容器的位置 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è)置指示器對于父容器的位置 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è)置文本的動畫效果 Animation animation = new TranslateAnimation(0f, 0f, 200f, 0f);//轉(zhuǎn)化動畫 animation.setDuration(1000);//時(shí)間間隔 animation.setFillAfter(true);//設(shè)置停留在動畫完成后的位置 animation.setInterpolator(new BounceInterpolator());//設(shè)置動畫變化的速率 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è)置相對于父布局位置 .setEnterAnimation(animation);//設(shè)置動畫效果 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
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android組合式自定義控件實(shí)現(xiàn)購物車加減商品操作
這篇文章主要介紹了Android組合式自定義控件實(shí)現(xiàn)購物車加減商品操作,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-11-11android 調(diào)用系統(tǒng)的照相機(jī)和圖庫實(shí)例詳解
android手機(jī)有自帶的照相機(jī)和圖庫,我們做的項(xiàng)目中有時(shí)用到上傳圖片到服務(wù)器,今天做了一個(gè)項(xiàng)目用到這個(gè)功能,所以把我的代碼記錄下來和大家分享,有需求的朋友可以參考下2012-12-12Android TextView的TextWatcher使用案例詳解
這篇文章主要介紹了Android TextView的TextWatcher使用案例詳解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-08-08Android 中出現(xiàn)java.net.BindException: bind failed: EADDRINUSE 問
這篇文章主要介紹了Android 中出現(xiàn)java.net.BindException: bind failed: EADDRINUSE 問題解決辦法的相關(guān)資料,需要的朋友可以參考下2017-04-04Android自定義FloatingText仿點(diǎn)贊+1特效
這篇文章主要為大家詳細(xì)介紹了Android自定義FloatingText仿點(diǎn)贊+1特效,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-03-03Android 沉浸式改變小米魅族狀態(tài)欄顏色的實(shí)例代碼
這篇文章主要介紹了Android 沉浸式改變小米魅族狀態(tài)欄顏色的實(shí)例代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02Android 動態(tài)顯示和隱藏狀態(tài)欄詳解及實(shí)例
這篇文章主要介紹了Android 動態(tài)顯示和隱藏狀態(tài)欄的相關(guān)資料,需要的朋友可以參考下2017-06-06Android基準(zhǔn)配置文件Baseline?Profile方案提升啟動速度
這篇文章主要為大家介紹了Android基準(zhǔn)配置文件Baseline?Profile方案提升啟動速度示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02