[안드로이드]뷰페이저+인디케이터 이미지슬라이드쇼를 사용하자 : 라이브러리

프로그래밍/Android 2016.05.18 댓글 12 Plorence
반응형

[안드로이드]뷰페이저+인디케이터 이미지슬라이드쇼를 사용하자 : 라이브러리


오늘소개할것은 Androidimageslider 라는 라이브러리 입니다.

https://github.com/daimajia/AndroidImageSlider


라이브러리 적용법은 저의 블로그에서 찾아서 적용해주세요!


예제 완성 사진입니다. 주어진애니메이션안에 자기마음대로 설정할수있습니다!

물론 이미지도 가능하고요.



library.zip

ChildAnimationExample.java


ChildAnimationExample.java 는 자바에 추가해주세요!


라이브러리 파일을 다운받으셔서 압축을푸신후, 폴더째로 라이브러리 추가하시면 됩니다.


Activity_Main.xml


<LinearLayout

    xmlns:tools="http://schemas.android.com/tools"
xmlns:custom="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="plorence.user.chungmums.MainActivity"
android:orientation="horizontal">







<com.daimajia.slider.library.SliderLayout
android:id="@+id/slider"
android:layout_width="match_parent"
custom:pager_animation="Default"
custom:auto_cycle="true"
custom:indicator_visibility="visible"
custom:pager_animation_span="1100"
android:layout_height="200dp"/>

<com.daimajia.slider.library.Indicators.PagerIndicator
android:id="@+id/custom_indicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
custom:selected_color="#0095BF"
custom:unselected_color="#55333333"
custom:shape="oval"
custom:selected_padding_left="5dp"
custom:selected_padding_right="5dp"
custom:unselected_padding_left="5dp"
custom:unselected_padding_right="5dp"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
custom:selected_width="6dp"
custom:selected_height="6dp"
custom:unselected_width="6dp"
custom:unselected_height="6dp"
android:layout_marginBottom="20dp"
/>
<com.daimajia.slider.library.Indicators.PagerIndicator
android:id="@+id/custom_indicator2"
style="@style/AndroidImageSlider_Corner_Oval_Orange"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:layout_marginBottom="20dp"
/>




</LinearLayout>

이거 복사하셔서 써주세요.


MainActivity.class



import android.content.DialogInterface;
import android.content.res.Configuration;
import android.os.Bundle;
import android.support.design.widget.Snackbar;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AlertDialog;
import android.support.v7.widget.Toolbar;
import android.util.Log;
import android.view.KeyEvent;
import android.view.MenuItem;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;

import com.daimajia.slider.library.Animations.DescriptionAnimation;
import com.daimajia.slider.library.SliderLayout;
import com.daimajia.slider.library.SliderTypes.BaseSliderView;
import com.daimajia.slider.library.SliderTypes.TextSliderView;
import com.daimajia.slider.library.Tricks.ViewPagerEx;
import com.nineoldandroids.view.ViewHelper;

import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;



public class MainActivity extends ActionBarActivity implements BaseSliderView.OnSliderClickListener, ViewPagerEx.OnPageChangeListener{


private SliderLayout mDemoSlider;


private Toolbar toolbar;
private DrawerLayout Drawer;
private ActionBarDrawerToggle mDrawerToggle;


private ObservableScrollView mScrollView;
private int mParallaxImageHeight;


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

mScrollView = (ObservableScrollView) findViewById(R.id.blescroll);
mScrollView.setScrollViewCallbacks((ObservableScrollViewCallbacks) this);



mDemoSlider = (SliderLayout) findViewById(R.id.slider);

HashMap<String, String> url_maps = new HashMap<String, String>();
url_maps.put("main", "");
url_maps.put("Big Bang Theory", "http://tvfiles.alphacoders.com/100/hdclearart-10.png");


HashMap<String, Integer> file_maps = new HashMap<String, Integer>();
file_maps.put("main", R.drawable.game_of_thrones);
file_maps.put("Big Bang Theory", R.drawable.house);


for (String name : file_maps.keySet()) {
TextSliderView textSliderView = new TextSliderView(this);
// initialize a SliderLayout
textSliderView
.description(name)
.image(file_maps.get(name))
.setScaleType(BaseSliderView.ScaleType.Fit)
.setOnSliderClickListener(this);

//add your extra information
textSliderView.bundle(new Bundle());
textSliderView.getBundle()
.putString("extra", name);

mDemoSlider.addSlider(textSliderView);





}
mDemoSlider.setPresetTransformer(SliderLayout.Transformer.Default);
mDemoSlider.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom);
mDemoSlider.setCustomAnimation(new DescriptionAnimation());
mDemoSlider.setDuration(4000);
mDemoSlider.addOnPageChangeListener(this);



}




@Override
protected void onStop() {
// To prevent a memory leak on rotation, make sure to call stopAutoCycle() on the slider before activity or fragment is destroyed
mDemoSlider.stopAutoCycle();
super.onStop();
}

@Override
public void onSliderClick(BaseSliderView slider) {
Toast.makeText(this, slider.getBundle().get("extra") + "", Toast.LENGTH_SHORT).show();
}


@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}

@Override
public void onPageSelected(int position) {
Log.d("Slider Demo", "Page Changed: " + position);
}

@Override
public void onPageScrollStateChanged(int state) {
}



}

우리가 자주 수정해야할 부분은 빨간색으로 표시해놨습니다!

file_maps.put("main", R.drawable.game_of_thrones);

drawable안에 사진을 이용하여 이미지를 추가하는것입니다.

"main" 이거는 한줄사진소개 같은겁니다.

R.drawable.game_of_thrones 사진이 위치하고있는곳 을 쓰시면됩니다. 대부분 drawable 이라는 폴더입니다


소스는길지만 사용하기 매우쉽습니다.

mDemoSlider.setPresetTransformer(SliderLayout.Transformer.Default);

이건 사진이넘어갈때 사용할 애니메이션입니다. 여러가지이지만 저는 기본을 쓰기때문에 놔둡니다.

mDemoSlider.setPresetTransformer(SliderLayout.Transformer.Default); Defaulf 값을 수정하시면됩니다.


반응형

댓글

12

혹시 자바 파일 추가는 app폴더에있는 자바에 넣나요 라이브러리폴더에 있는 자바에 넣나요?

2016.09.06 14:01
Alive

app폴더에넣습니다.

2016.09.06 17:31 신고

observablescrollview에 오류가 나는데 observablescrollview라이브러리도 추가 해야하나요??

2016.09.06 23:14
Alive

아니요 그부분은지우세요

2016.09.06 23:18 신고

저 ObservableScrollView도 추가 하고싶은데 라이브러리만 추가하면 될까요?? blescroll은 뭔가요??

2016.09.07 15:40
Alive

잘모르겠습니다 라이브러리만 추가한다고 되는게 아닙니다

2016.09.07 15:50 신고

다운받으면 폴더내에 app폴더가 없는데 어디에 있나요 ?

2016.09.11 17:06
anjung

app폴더로이름된게아닙니다.
구별가능해요

2016.09.11 19:32 신고

ObservableScrollView도 적용하는법을 알려주실 수 있을까요??

2016.09.24 23:32
aria

다음포스팅에올리겠습니다

2016.09.25 00:03 신고

ParallaxScrollView&toolbar로 이미지슬라이더랑 되게 강좌 해주시면 감사하겠습니다ㅎㅎ

2016.09.27 13:24
aira

사진 한줄소개 애니메이션 변경은 어디서 하나요!??

2016.09.29 01:43
ks