Edited at

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


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. 終わりに

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


更新情報