android showcase,GitHub - open-android/ShowcaseView: 一分钟实现新手引导界面

欢迎关注微信公众号、长期为您推荐优秀博文、开源项目、视频

微信公众号名称:Android干货程序员

687474703a2f2f75706c6f61642d696d616765732e6a69616e7368752e696f2f75706c6f61645f696d616765732f343033373130352d386637333762353130346464306235642e706e673f696d6167654d6f6772322f6175746f2d6f7269656e742f7374726970253743696d61676556696577322f322f772f31323430

在安卓系统第一次使用的时候,我们会看到类似如下左图的界面,它用一个半透明的图片遮盖住下面的界面,而突出界面中的某一个按钮或者图标,然后在旁边写上若干提示文字,告诉用户某个操作方法。类似的,当我们第一次使用某些软件的时候,也会出现一个半透明的提示界面,比如知乎在第一次查看的时候,会告诉你右划返回,当你以后再进行相同的操作时,这个半透明的提示图片就不会出现了。

f881214fb2b1448806afabe75ae8fafe.png

Holo

"New style"

Material

example2@2x.png

example@2x.png

material.png

使用步骤

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

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

6b82f9b8fde04d2414b5e0ff4a1e89aa.png

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)//setStyle instead of setTarget!

.hideOnTouchOutside()

.build();

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

#663d4353

#25467A

Close

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

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

5.gif

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">

android:id="@+id/username"

android:layout_width="match_parent"

android:layout_height="wrap_content" />

android:id="@+id/password"

android:inputType="textPassword"

android:layout_width="match_parent"

android:layout_height="wrap_content" />

android:id="@+id/register"

android:text="注册"

android:layout_width="match_parent"

android:layout_height="wrap_content" />

/**

* 简单的用户注册引导

*/

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

}

});

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值