【Android】【Library】「Before After animation」というアニメーションライブラリを使ってみました。

7337 ワード
android開発 Android ライブラリ Java Kotlin Java テキストリンク

1. はじめに

「Before After animation」というKotlinで記述されたアニメーションライブラリが、Android Example 365の「Before After animation library write in Kotlin」で公開されていましたので、試しに使ってみました。

2. 使用イメージ

スライドを左から右に移動させると画像が徐々に切り替わります。

  • 移動前

1lmitbduqj.png

  • 移動後

vke0vpixjy.png

3. 事前準備

以下を事前に準備しておいてください。

・KotlinプラグインがインストールされたAndroid Studio

4. セットアップ手順

4.1 build.gradleの編集

プロジェクトのbuild.gradleに対し、以下を追記します。

allprojects {
    repositories {
        google()
        jcenter()
        maven { url 'https://jitpack.io' }   //  追記
}

モジュールのbuild.gradleに対し、以下を追記します。

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation"org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
    // Before After animation library                                         // 追記
    implementation 'com.github.fevziomurtekin:BeforeAfterView:1.0.0'          // 追記
}

4.2 Activityの記述

MainActivityを記述します。

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

4.3 Layoutファイルの記述

res/layout/activitymain.xmlに以下を記述します。

  <com.fevziomurtekin.beforeafterview.BeforeAfterView
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           app:bgColor="@android:color/black"
           app:sliderTintColor="@android:color/white"
           app:sliderIconTint="@android:color/white"
           app:afterSrc="@drawable/after"
           app:beforeSrc="@drawable/before"
           app:imageHeightPercent="0.5"
           app:sliderWidthPercent="0.75"
   />

属性は以下のように編集できます。

ATTRIBUTE DESCRIPTION
bgColor The color in int of the background color (by default @android:color/black)
sliderTintColor The color int of the slider tint color (by default @android:color/white)
sliderIconTint The size in int of the slider icon color (by default @android:color/white)
afterSrc The resource in int of the imageview src
beforeSrc The resource in int of the imageview src
imageHeightPercent The height percent of the imageView (by default 0.55f)
sliderWidthPercent The width percent of the sliderView (by default 0.65f)

4.4 画像ファイルの準備

res/drawable配下に、レイアウトで指定した画像ソースのafter.jpg、before.jpgを格納します。画像は用意しておいてください。ただし、サイズの大きな画像ファイルの場合は、読み込み時にエラーとなります。

5. ソース

ソースはGithubに公開されています。

zxicx39v2q.pngfevziomurtekin/BeforeAfterView

The Apache License 2.0 ライセンスです。

6. 終わりに

以上で簡単に画像アニメーションが作成できます。プロジェクトに組み込んで使用したり、アニメーションをカスタマイズしたりして是非試してみては如何でしょうか。

更新情報