2013年3月6日水曜日

ボタンの上で画像をクルクルさせる

友達に見せてソレどーやるの!??と言ってもらえて嬉しかったのをメモ(*'ω'*)♫

これはキャラクター選択画面でボタンを押すと
星の輪っかがクルクル回るという仕掛けです。

選択している方のボタンだけに出るので、Viewの表示・非表示も使ってます。

これはいろんなことに応用できるので知らなかった方はぜひ使ってみてください★
ペンギンさんを作ったのは私じゃないので、その内差し替えるかも。
まぁ多分作者さんは優しい方なので気にしないでしょう(*´ω`*)
このヒット数ならなおさらw

月曜日に報告をしなさい、私。('ω')ノ

まずViewの重ね方

layoutファイルですが、
普通にLinearLayoutやTableLayoutの中でボタンを置きたいところに
ボタン→重ねるImageの順に書いてRelativeLayoutで囲みます。
        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

                <ImageButton
                    android:id="@+id/btn_Penguin"
                    android:layout_width="130px"
                    android:layout_height="130px"
                    android:background="@drawable/penguin"/>
                <ImageView
                    android:id="@+id/iv_circle"
                    android:layout_width="130px"
                    android:layout_height="130px"
                    android:background="@drawable/circle"/>
            </RelativeLayout>

RelativeLayoutはその範囲の中で左上を起点にViewを重ねてくれるLayoutです。
文字を重ねたり、といろいろ便利。
私は自作のアプリに大体1回は出てくるほど気に入って使ってます。

続いてViewの表示・非表示

ACTIVITY側で行います。
使い方は簡単で、ImageViewで用意した変数に
「.setVisibility(View.INVISIBLE);」(非表示)
           と
「.setVisibility(View.VISIBLE);」(表示)

で切り替えるだけです。
まずImageButtonやImageViewを宣言したあとに、
私はLayoutファイルで画像の指定をしているので
○○.setVisibility(View.INVISIBLE);とImageViewの方を非表示にします。

続いてButtonを押されたら
       a_circle.setVisibility(View.VISIBLE);
       b_circle.setVisibility(View.INVISIBLE);
もう片方は消すという処理を、書いておきます。

こうすると、もう一つが選ばれたときペンギンの方は再度消えるという仕組みです。

お次はクルクル回すアニメーション処理

まずanimフォルダにanimationを定義したファイルを作ります。
res>anim>好きな名前.xmlで作成。私はrotate.xmlという名前で作りました。

内容はこんな感じ

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
     android:duration="200"
     android:fromDegrees="0"
     android:toDegrees="360"
     android:pivotX="50%" 
     android:pivotY="50%"

     android:interpolator="@android:anim/linear_interpolator"
     android:repeatCount="2"/>

 オレンジ部分が起点をどこにするか、というものなのだけど、
今回ボタンと同じ大きさのViewを用意しているので
50% ・ 50%で丁度真ん中、という感じです。

durationはms。これは0.2秒で1回転します。
2回回ったら終了、という設定です。

アニメーショんはJavaファイルでも指定が必要です、が超簡単。
       Animation anim = AnimationUtils.loadAnimation(this, R.anim.rotate);
       iv_circle.startAnimation(anim);

これをボタン押した処理の中でa_circle.setVisibility(View.VISIBLE);の後に追加!
それだけです。

知識がそんな無くてもAndroid用に用意されている物だけで
結構かわいく&華やかになるものですなぁ(*´ω`*)

そして解説時は何故か「です、ます調」になる私。


0 件のコメント:

コメントを投稿