##ShowcaseView
チュートリアルで便利なライブラリ
注目した欲しい部分以外にカバーを掛けて、アクションを促すのはよく見るチュートリアルですね。
それを簡単に実現できるライブラリです。
注目してほしい部分の切り出しが円でしかできないのがちょっとネックですが、基本的には使いやすくて便利。
ちょっとしたチュートリアルであれば、自作でカスタムして作らなくてもこれで十分かと。
##ShowcaseViewの種類
HoloShowcase | NewShowcase | MaterialShowcase |
---|---|---|
##利用方法
###Gradle.buildへ追加
compile 'com.github.amlcurran.showcaseview:library:5.4.3'
###簡単な使い方
new ShowcaseView.Builder(this)
.setTarget(new ViewTarget((Button) findViewById(R.id.button)))
.setContentTitle("ShowcaseView")
.setContentText("This is highlighting the button")
.hideOnTouchOutside() // タップしたら消えるように。
.build();
###テーマの変更 style.xml
<style name="CustomShowcaseTheme" parent="ShowcaseView.Light">
<item name="sv_backgroundColor">#3300A621</item>
<item name="sv_showcaseColor">#00801A</item>
<item name="sv_buttonText">Hide</item>
<item name="sv_tintButtonColor">false</item>
<item name="sv_titleTextAppearance">@style/CustomTitle</item>
</style>
<style name="CustomTitle" parent="TextAppearance.ShowcaseView.Title">
<item name="android:textColor">#00801A</item>
</style>
##コード例
public class MainActivity extends AppCompatActivity {
private ShowcaseView view;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button button = (Button) findViewById(R.id.button);
assert button != null;
view = new ShowcaseView.Builder(this)
.setTarget(new ViewTarget(button))
.setContentTitle("ようこそ")
.setContentText("早速、startを押して始めてください。")
.setStyle(R.style.CustomShowcaseTheme)
.withMaterialShowcase()
.doNotBlockTouches() //ShowcaseView下のボタンを触れるように。
.build();
view.hideButton(); // Showcase上のボタンを隠す。
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Log.d("TAG", "start action");
view.hide();
}
});
}
}
テーマ変更後 | 最終版 |
---|---|
##英単語アプリmikanのAndroidでのβ配布始めました。
mikan Android β配信
フィードバックお待ちしております。
(このライブラリはまだ実装されていません。)
#####参考
http://dev.classmethod.jp/smartphone/android/showcaseview-lib/