Android Facebookのようなボタンの実装

今回はFacebookのようなボタンお実装方法について説明します。 使用するのはShineButtonというライブラリーです。

github.com

使用方法

使用方法はとても簡単です。 まずはxmlに

 <com.sackcentury.shinebuttonlib.ShineButton
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_centerInParent="true"
                android:src="@android:color/darker_gray"
                android:id="@+id/po_image2"
                app:btn_color="@android:color/darker_gray"
                app:btn_fill_color="@android:color/holo_green_dark"
                app:allow_random_color="false"
                app:siShape="@raw/smile"/>

と記入します。

btn_colorはボタンが押される前のオリジナルカラーでbtn_fill_colorはボタンが押された後のカラー。

allow_random_colorはボタンクリック直後の輝いている円の色をランダムにするか、siShapeはボタンのリソースを指定できます。

あとはこのようにJavaで呼び出せば完成です。

shineButton = (ShineButton) findViewById(R.id.shine_button);
 shineButton.init(activity);

またxmlではなくjavaから付加情報を記入することができます。

 ShineButton shineButtonJava = new ShineButton(this);
 shineButtonJava.setBtnColor(Color.GRAY);
 shineButtonJava.setBtnFillColor(Color.RED);
 shineButtonJava.setShapeResource(R.raw.heart);
 shineButtonJava.setAllowRandomColor(true);
 LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(100, 100);
 shineButtonJava.setLayoutParams(layoutParams);
 if (linearLayout != null) {
     linearLayout.addView(shineButtonJava);
 }

他にも付加情報があるので表で説明します。

Property	Java method	Description
siShape	void setShapeResource(int)	リソースの指定 (png)
btn_color	void setBtnColor(int)	オリジナルカラーの指定
btn_fill_color	void setBtnFillColor(int)	クリック後のカラーの指定
allow_random_color	void setAllowRandomColor(boolean)	クリック直後の円カラーをランダムにするか指定
shine_animation_duration	void setAnimDuration(int)	輝くアニメーションの間隔を指定
big_shine_color	void setBigShineColor(int)	輝きの円（大）のカラー指定
click_animation_duration	void setClickAnimDuration(int)	ボタン自体のアニメーション間隔の指定
enable_flashing	void enableFlashing(boolean)	フラッシュするアニメーションにするか指定
shine_count	void setShineCount(int)	円の個数をしてい
shine_distance_multiple	void setShineDistanceMultiple(float)	輝きの範囲を指定
shine_turn_angle	void setShineTurnAngle(float)	円の曲がる角度を指定
shine_size	void setShineSize(int)	輝きのサイズをピクセル単位で指定
small_shine_color	void setSmallShineColor(int)	輝きの円（小）のカラー指定
small_shine_offset_angle	void setSmallShineOffAngle(float)	円（大）から円（小）に遷移する方向の指定

そして、このように指定すると

app:shine_turn_angle="20"
app:shine_count="15"
app:allow_random_color="true"
app:enable_flashing="true"

とても綺麗ですね！　

イメージをハートにすればTwitter風のボタンも作ることができますね。

ボタンひとつ変えるだけでUI UXの改善ができるので、是非実装してみてください！

どうやって使うの？

アプリケーションレベルのbuild.gradleに

buildscript {
    repositories {
        mavenCentral()
    }
}
dependencies {
    compile 'com.sackcentury:shinebutton:0.1.6'
}

と記述すれば使用できます！

基本からしっかり身につくAndroidアプリ開発入門 Android Studio 2.x対応 プロが本気で教えるアプリ作りの基本「技」 (ヤフー黒帯シリーズ)

黒帯エンジニアが教えるプロの技術 Android開発の教科書 (ヤフー黒帯シリーズ)

Android UI Cookbook for 4.0 ICS（Ice Cream Sandwich）アプリ開発術