tsurutanのつぶやき

これが、破壊的イノベーションだっっっ!!

スポンサーリンク

広告

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

f:id:tsurutan:20161006213233p:plain

今回は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"

f:id:tsurutan:20161006215447g:plain

とても綺麗ですね! 

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

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

どうやって使うの?

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

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

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

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

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

  • 作者: 筒井俊祐,里山南人,松田承一,笹城戸裕記,毛受崇洋
  • 出版社/メーカー: SBクリエイティブ
  • 発売日: 2016/06/18
  • メディア: 単行本
  • この商品を含むブログを見る

Android UI Cookbook for 4.0 ICS(Ice Cream Sandwich)アプリ開発術

Android UI Cookbook for 4.0 ICS(Ice Cream Sandwich)アプリ開発術

スポンサーリンク

広告