スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Tipsやチュートリアルの作り方

アプリの説明を、アプリ自体にチュートリアル(Tips)として入れたい場合のやり方です。
オーバーレイででレイヤー的に画像を差し込んで、ボタンの上に吹き出しを描画します。

画像の準備(吹き出し・グレーアウト用)
吹き出しに使う画像と、実際の画面をグレーで覆うための画像です。
グレーで覆うといっても、真っ黒な四角の図形を透過させているだけです。

以下の画像をRes\Drawableに保存してください。

グレーアウト用(以下の小さい黒いぽちっとした点の画像です)
blk.png

吹き出し用
注意!FC2の仕様で、ファイル名にピリオドが打てないため、以下の吹き出しをダウンロード後、ファイル名を次のように変えてください。
small_fukidashi_ul_9.png -> small_fukidashi_ul.9.png
small_fukidashi_dl_9.png -> small_fukidashi_dl.9.png

small_fukidashi_ul_9.png
small_fukidashi_dl_9.png

レイアウトの変更
複数の画像を重ねて表示するため、FrameLayoutに変更します。
注意1:実際の画面はLinearLayoutなどで囲まれているかと思いますが、このLinearLayoutは残します。残さないと、すべてが左端にギューッと集まってしまいます。

FrameLayout
  → その中にLinearLayout → その中に画面
  → グレーアウト用画像
  → 吹き出し
といった構造です。

注意2:グレーの幕を画面一杯に出すため、FrameLayoutは「fill_parent」を指定しています。
また、小さい画像を画面いっぱいに広げるため、スケールタイプをfixXYにしています。
android:scaleType="fitXY"
また、画像を透過させるため、アルファ値を0.5にしています。
android:alpha="0.5"

注意3:吹き出しは、TextViewです。



具体的には、以下のような感じ。
112aaa.png




<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>

<!-- 実際の画面・・・LinearLayoutで囲む -->
<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>

<Button
android:id="@+id/btn1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="ボタン"
/>
</LinearLayout>

<!-- グレーアウト用画像 -->
<ImageView
android:id="@+id/blk"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:alpha="0.5"
android:src="@drawable/blk"
/>

<!-- 吹き出し:テキストビューです -->
<TextView
android:id="@+id/tips01"
android:layout_marginLeft="50dp"
android:layout_marginTop="30dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ココをタップしてね"
android:textAppearance="?android:attr/textAppearanceSmall"
android:background="@drawable/small_fukidashi_ul"
android:textColor="#ff0000ff"
/>
</FrameLayout>


MainActivityの修正
吹き出しがタップされたら画像を消すためのコードです。
OnCreateを次のように変えます。




@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

// Tisp制御:01
TextView tv01 = (TextView) findViewById(R.id.tips01);
tv01.setOnClickListener(new View.OnClickListener(){
@Override
public void onClick(View v) {
((TextView) findViewById(R.id.tips01)).setVisibility(View.GONE);
((ImageView) findViewById(R.id.blk)).setVisibility(View.GONE);
}
});

((ImageView) findViewById(R.id.blk)).setVisibility(View.VISIBLE);
((TextView) findViewById(R.id.tips01)).setVisibility(View.VISIBLE);
}


以上です。
スポンサーサイト

トラックバック

コメント

コメントを残す

Secret



上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。