[안드로이드 스튜디오] Carousel(화면회전) 예제 : com.synnapps:carouselview

안드로이드/Android 기능 2017. 10. 31. 16:57

728x90

안드로이드 어플에서 이미지가 수평으로 일정시간후 자동으로 화면이 회전되는 CarouselView 를 검색하여 https://github.com/sayyam/carouselview 이 있는 걸 다운로드 해서 테스트해보고 적어둔다.

위 예제는 Web에 올려진 이미지를 Picasso 이미지 라이브러리를 이용하여 보여주는 것과 Drawable 폴더에 있는 이미지를 보여주는 것을 하나의 화면에서 보여주고 있다.

이미지 라이브러리에 대한 자세한 설명은 http://gun0912.tistory.com/17 와 http://gun0912.tistory.com/19 를 참조하면 도움이 많이 된다.

Web 에서 가져온 이미지의 경우 잔상이 좀 남아서 약간 눈에 거슬려보이기는 하지만 기능은 잘 동작된다.

CarouselView 라이브러리가 기능적으로 편리하게 사용하도록 되어 있는거 같다.

아래 내용은 이해하기 쉽게 용어를 변경하고 기능을 테스트했다.

이미지 롤링 보여주기 용도로는 편하고 좋은거 같은데 달력을 carousel 하기에는 적합하지 않은 거 같아서 다른 걸 추가로 테스트 해보려고 한다.

앱 build.gradle

apply plugin: 'com.android.application'

android {
    compileSdkVersion 23
    buildToolsVersion "25.0.0"

    defaultConfig {
        applicationId "com.tistory.link2me.carouselview"
        minSdkVersion 19
        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:appcompat-v7:23.2.1'
    compile 'com.android.support.constraint:constraint-layout:1.0.2'
    compile 'com.synnapps:carouselview:0.0.9'
    compile 'com.squareup.picasso:picasso:2.5.2' // 이미지 라이브러리
    compile 'com.android.support:recyclerview-v7:23.2.1' // ListView 개선 버전
    compile "com.android.support:cardview-v7:23.2.1"

}

AndroidManifest.xml 에 추가할 사항

<uses-permission android:name="android.permission.INTERNET" />

Layout xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:app="http://schemas.android.com/apk/res-auto"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

    <com.synnapps.carouselview.CarouselView
        android:id="@+id/webCarouselView"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="#444"
        app:animateOnBoundary="true"
        app:autoPlay="true"
        app:fillColor="#FFFFFFFF"
        app:indicatorGravity="top"
        app:pageColor="#00000000"
        app:pageTransformInterval="1500"
        app:pageTransformer="depth"
        app:radius="6dp"
        app:slideInterval="3000"
        app:strokeColor="#FF777777"
        app:strokeWidth="1dp"/>

    <TextView
        android:id="@+id/webCarouselLabel"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/webCarouselView"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="15dp"
        android:fontFamily="sans-serif-light"
        android:gravity="center_horizontal"
        android:text="Web Images"
        android:textColor="@android:color/black"
        android:textSize="18sp"/>

    <com.synnapps.carouselview.CarouselView
        android:id="@+id/localCarouselView"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_below="@+id/webCarouselLabel"
        android:layout_marginTop="20dp"
        app:disableAutoPlayOnUserInteraction="true"
        app:fillColor="#FFFFFFFF"
        app:pageColor="#00000000"
        app:radius="6dp"
        app:strokeColor="#FF777777"
        app:strokeWidth="1dp"/>

    <TextView
        android:id="@+id/localCarouselLabel"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/localCarouselView"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="15dp"
        android:fontFamily="sans-serif-light"
        android:gravity="center_horizontal"
        android:text="Drawable Image Views"
        android:textColor="@android:color/black"
        android:textSize="18sp"/>

    <Button
        android:id="@+id/pauseButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/localCarouselLabel"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="15dp"
        android:fontFamily="sans-serif-light"
        android:gravity="center"
        android:text="Pause"
        android:textAllCaps="false"
        android:textColor="@android:color/black"
        android:textSize="16sp"/>

</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center">

    <ImageView
        android:id="@+id/fruitImageView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="centerCrop" />

    <TextView
        android:id="@+id/labelTextView"
        style="@style/TextView.Label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>

MainActivity.java

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.Gravity;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;

import com.squareup.picasso.Picasso;
import com.synnapps.carouselview.CarouselView;
import com.synnapps.carouselview.ImageListener;
import com.synnapps.carouselview.ViewListener;

public class MainActivity extends AppCompatActivity {
    CarouselView localCarouselView;
    TextView localCarouselLabel;
    String[] TitleNames = {"Orange", "Grapes", "Strawberry", "Cherry", "Apricot"};
    int[] localImages = {R.drawable.image_1,
                          R.drawable.image_2,
                          R.drawable.image_3,
                          R.drawable.image_4,
                          R.drawable.image_5
   };

    CarouselView webCarouselView;
    TextView webCarouselLabel;
    String[] webImageURLs = {
            Value.IPADDRESS + "/img_01.jpg",
            Value.IPADDRESS + "/img_02.jpg",
            Value.IPADDRESS + "/img_03.jpg",
            Value.IPADDRESS + "/img_04.jpg",
            Value.IPADDRESS + "/img_05.jpg"
    };

    Button pauseButton;

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

        initView();
    }

    private void initView(){

        webCarouselLabel = (TextView) findViewById(R.id.webCarouselLabel);
        // Web 서버 URL 이미지 롤링배너로 보여주기
        webCarouselView = (CarouselView) findViewById(R.id.webCarouselView);
        webCarouselView.setPageCount(webImageURLs.length);
        webCarouselView.setImageListener(new ImageListener() {
            @Override
            public void setImageForPosition(int position, ImageView imageView) {
                Picasso.with(getApplicationContext())
                        .load(webImageURLs[position])
                        .placeholder(localImages[0])
                        .error(localImages[3])
                        .fit().centerCrop()
                        .into(imageView);
            }
        });
        webCarouselView.setIndicatorGravity(Gravity.CENTER_HORIZONTAL|Gravity.BOTTOM);

        localCarouselLabel = (TextView) findViewById(R.id.localCarouselLabel);
        // drawable 이미지 롤링배너 보여주기
        localCarouselView = (CarouselView) findViewById(R.id.localCarouselView);
        localCarouselView.setPageCount(localImages.length);
        localCarouselView.setSlideInterval(4000);
        localCarouselView.setViewListener(new ViewListener() {
            @Override
            public View setViewForPosition(int position) {
                View customView = getLayoutInflater().inflate(R.layout.view_custom, null);

                TextView labelTextView = (TextView) customView.findViewById(R.id.labelTextView);
                ImageView fruitImageView = (ImageView) customView.findViewById(R.id.fruitImageView);

                fruitImageView.setImageResource(localImages[position]);
                labelTextView.setText(TitleNames[position]);

                localCarouselView.setIndicatorGravity(Gravity.CENTER_HORIZONTAL|Gravity.TOP);

                return customView;
            }
        });

        pauseButton = (Button) findViewById(R.id.pauseButton);
        pauseButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                webCarouselView.pauseCarousel();
                localCarouselView.reSetSlideInterval(0);
            }
        });
    }
}

위 테스트에 사용한 소스코드중에서 필요한 것만 발췌했다.

carouselview_ex1.zip

저작자표시 비영리

'안드로이드 > Android 기능' 카테고리의 다른 글

WindowManager 주요 Flag (0)	2018.02.24
Transparent Activity floating/draggable on Homscreen (0)	2018.01.30
[Android] TextUtils (null 또는 값이 비어있는지 검사) (0)	2017.10.24
[안드로이드 스튜디오] SearchView 숫자검색 추가 (0)	2017.10.17
[안드로이드 스튜디오] SearchView 자동 포커스 막기 (0)	2017.10.17

Link2Me