[안드로이드]뷰페이저+인디케이터 이미지슬라이드쇼를 사용하자 : 라이브러리
오늘소개할것은 Androidimageslider 라는 라이브러리 입니다.
https://github.com/daimajia/AndroidImageSlider
라이브러리 적용법은 저의 블로그에서 찾아서 적용해주세요!
예제 완성 사진입니다. 주어진애니메이션안에 자기마음대로 설정할수있습니다!
물론 이미지도 가능하고요.
library.zip
ChildAnimationExample.javaChildAnimationExample.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); Defaulf 값을 수정하시면됩니다.
댓글