Androidアプリで写真をCoverFlow表示する

こんにちは!エンジニアの林と申します! 写真や画像をCoverFlow表示できるとオシャレ感が出ますよね〜 (…

こんにちは!エンジニアの林と申します!

写真や画像をCoverFlow表示できるとオシャレ感が出ますよね〜
(MacのFinderみたいな見せ方です↓)

スクリーンショット 2016-06-23 22.23.42
調べてみると、AndroidのCoverFlowライブラリが公開されてました。( FeatureCoverFlow MIT License)
(しかし、日本語の情報は全然見つかりません…)
カスタマイズも出来るみたいなので、
いろいろ試してみて、その結果を記載していきたいと思います!
とりあえず、今回はアプリへの導入までで、次回は専用パラメータを試していきます。

 

1.環境

開発環境
OS X EI Capitan バージョン 10.11.5
Android Studio 2.2.3

実験環境
Android 6.0.1 (Marshmallow)
 

2.依存性を追加

app配下のbuild.gradleに依存性を追加します。

/app/build.gradle

apply plugin: 'com.android.application'

android {
    compileSdkVersion 23
    buildToolsVersion "23.0.3"
    defaultConfig {
        applicationId "jp.co.supersoftware.coverflowapp"
        minSdkVersion 23
        targetSdkVersion 23
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha3'
    testCompile 'junit:junit:4.12'
    androidTestCompile 'com.android.support.test.espresso:espresso-core:2.2.2'
    androidTestCompile 'com.android.support.test:runner:0.5'
    androidTestCompile 'com.android.support:support-annotations:23.1.0'
    compile 'com.android.support:appcompat-v7:23.1.1' //←これを追加
    compile 'com.github.moondroid.coverflow:library:1.0' //←これを追加
}

 

3.レイアウトを準備

アクティビティのレイアウトにCoverFlowを設置します。

今回、CoverFlow専用パラメータとしては、coverHeightとcoverWidthのみ設定します。

(デフォルトだと画像がかなり小さくなってしまうので)

/app/src/main/res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:coverflow="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="jp.co.supersoftware.coverflowapp.MainActivity">

    <it.moondroid.coverflow.components.ui.containers.FeatureCoverFlow
        android:id="@+id/coverflow"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        coverflow:coverHeight="200dp"
        coverflow:coverWidth="150dp"/>

</android.support.constraint.ConstraintLayout>

 
CoverFlowに表示する画像のレイアウトを作成します。
今回は、とりあえず写真だけ表示したいので、ImageViewのみ設置します。

/app/src/main/res/layout/view_cover_flow.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY" />
</LinearLayout>

 

4.アダプタークラスを作成

/app/src/main/java/jp/co/supersoftware/coverflowapp/CoverFlowAdapter.java

package jp.co.supersoftware.coverflowapp;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;

import java.util.List;

class CoverFlowAdapter extends ArrayAdapter<Integer> {

    private final List<Integer> mDataList;
    private final LayoutInflater mInflater;

    public CoverFlowAdapter(Context context, List<Integer> dataList) {
        super(context, 0);

        mInflater = LayoutInflater.from(context);
        mDataList = dataList;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        convertView = mInflater.inflate(R.layout.view_cover_flow, null);
        ImageView imageView = (ImageView) convertView.findViewById(R.id.imageView);
        imageView.setImageResource(mDataList.get(position));

        return convertView;
    }

    @Override
    public int getCount() {
        return mDataList.size();
    }
}

 

5.アクティビティクラスでCoverFlowを初期化

/app/src/main/java/jp/co/supersoftware/coverflowapp/MainActivity.java

package jp.co.supersoftware.coverflowapp;

import android.app.Activity;
import android.os.Bundle;

import java.util.ArrayList;
import java.util.List;

import it.moondroid.coverflow.components.ui.containers.FeatureCoverFlow;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        List<Integer> dataList = new ArrayList<>();
        dataList.add(R.drawable.image_1);
        dataList.add(R.drawable.image_2);
        dataList.add(R.drawable.image_3);
        dataList.add(R.drawable.image_4);
        dataList.add(R.drawable.image_5);
        dataList.add(R.drawable.image_6);
        dataList.add(R.drawable.image_7);
        dataList.add(R.drawable.image_8);

        FeatureCoverFlow coverflow = (FeatureCoverFlow) findViewById(R.id.coverflow);
        CoverFlowAdapter coverFlowAdapter = new CoverFlowAdapter(this, dataList);
        coverflow.setAdapter(coverFlowAdapter);
    }
}

 

ここまで設定すれば、こんな感じで表示されます!

Screenshot_20160624-000149

 

写真は、うちの愛猫ディアちゃんです(´Д` )!

スコティッシュフォールドの女の子で、先週1歳になりました!

可愛いです(*´∀`*)

普段は全然甘えてきませんが、

猫缶を準備し始めた時だけ、

にゃーにゃースリスリしてくる現金なやつですw

しかし可愛いです(*´∀`*)

 

・・・話がそれましたが、

次回は、レイアウトで設定できるCoverFlow専用パラメータの種類と

設定するとどう変わるのかを試してみたいと思います!