第一步：在build中dependence相应的以来（导入的包在build中也有相应的依赖）
第二部：设置权限
第三部：在布局文件中加入<sliderLayout></sliderLayout>
第四部：在Activity中实例化对象
第五步：在Activty中使用封装好了的slider，在里面添加图片还有文字说明，还可以设置slider的属性
下面为代码：
1.
//andoirdimageslider的依赖 dependencies { compile "com.android.support:support-v4:+" compile 'com.squareup.picasso:picasso:2.3.2' compile 'com.nineoldandroids:library:2.4.0' compile 'com.daimajia.slider:library:1.1.5@aar' }
2.
<!-- androidimageslider的权限if you want to load images from the internet --> <uses-permission android:name="android.permission.INTERNET" /> <!-- androidimageslider的权限if you want to load images from a file OR from the internet --> <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
3.
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <com.daimajia.slider.library.SliderLayout android:id="@+id/slider" android:layout_width="match_parent" app:pager_animation="Accordion" app:auto_cycle="true" app:indicator_visibility="visible" app:pager_animation_span="1100" android:layout_height="150sp"/> </LinearLayout>
4.这个不是activity,是独立的类
package zuo.com.ui.fragment; import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import com.daimajia.slider.library.Animations.DescriptionAnimation; import com.daimajia.slider.library.SliderLayout; import com.daimajia.slider.library.SliderTypes.TextSliderView; import zuo.com.ui.R; /** * Created by Administrator on 2016/10/6. */ public class HomeFragment extends Fragment { private SliderLayout sliderLayout; @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view=inflater.inflate(R.layout.fragment_home,container,false); sliderLayout= (SliderLayout) view.findViewById(R.id.slider); initSlider(); return view; } private void initSlider() { TextSliderView textSliderView = new TextSliderView(this.getActivity()); textSliderView .description("新品男装") .image(R.mipmap.slider_mani); TextSliderView textSliderView1 = new TextSliderView(this.getActivity()); textSliderView1 .description("潮流女装") .image(R.mipmap.slider_woman); TextSliderView textSliderView2 = new TextSliderView(this.getActivity()); textSliderView2 .description("时尚男装") .image(R.mipmap.slider_man); TextSliderView textSliderView3 = new TextSliderView(this.getActivity()); textSliderView3 .description("青春女装") .image(R.mipmap.slider_yu); sliderLayout.addSlider(textSliderView); sliderLayout.addSlider(textSliderView1); sliderLayout.addSlider(textSliderView2); sliderLayout.addSlider(textSliderView3); sliderLayout.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom); //设置下标的点，所在的位置在底部正中间 sliderLayout.setCustomAnimation(new DescriptionAnimation()); sliderLayout.setPresetTransformer(SliderLayout.Transformer.RotateUp); //设置转动模式，下面的文字说明自动出来 sliderLayout.setDuration(3000); //设置动画效果3秒自动转动 } }
效果图：
二：修改sliderview中的indicator:
1.首先从github上copy代码，地址为：https://github.com/daimajia/AndroidImageSlider/wiki/Custom-Indicators，放入到layout布局中
2.然后在Activity中创建indicator的对象
3.设置indicator的属性setcoustomIndaicator();
代码：
1.
<!--设置slider中indicator即下标的效果--> <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:selected_drawable="@drawable/bird" custom:shape="oval" custom:selected_padding_left="6dp" custom:selected_padding_right="6dp" custom:unselected_padding_left="2dp" custom:unselected_padding_right="2dp" custom:selected_width="6dp" custom:selected_height="6dp" custom:unselected_width="6dp" custom:unselected_height="6dp" />
2.
public class HomeFragment extends Fragment { private SliderLayout sliderLayout; private PagerIndicator pagerIndicator; @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view=inflater.inflate(R.layout.fragment_home,container,false); sliderLayout= (SliderLayout) view.findViewById(R.id.slider); pagerIndicator= (PagerIndicator) view.findViewById(R.id.custom_indicator); initSlider(); return view; }
3.
sliderLayout.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom); //这个为默认的indicator // sliderLayout.setCustomIndicator(pagerIndicator); //设置下标的点，所在的位置在底部正中间 sliderLayout.setCustomAnimation(new DescriptionAnimation()); //动画效果 sliderLayout.setPresetTransformer(SliderLayout.Transformer.RotateUp); //设置转动模式，下面的文字说明自动出来 sliderLayout.setDuration(3000); //设置动画效果3秒自动转动
三、sliderLayout的点击事件和监听事件
1.sliderLayout的监听事件
sliderLayout.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom); //这个为默认的indicator // sliderLayout.setCustomIndicator(pagerIndicator); //设置下标的点，所在的位置在底部正中间 sliderLayout.setCustomAnimation(new DescriptionAnimation()); //动画效果 sliderLayout.setPresetTransformer(SliderLayout.Transformer.RotateUp); //设置转动模式，下面的文字说明自动出来 sliderLayout.setDuration(3000); //设置动画效果3秒自动转动 //sliderLayout的监听事件，这个监听事件 sliderLayout.addOnPageChangeListener(new ViewPagerEx.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { Log.d(TAG,"onPageScrolled"); } @Override public void onPageSelected(int position) { Log.d(TAG,"onPageSelected"); } @Override public void onPageScrollStateChanged(int state) { Log.d(TAG,"onPageScrollStateChanged"); } });
2.textSliderView的点击事件
TextSliderView textSliderView = new TextSliderView(this.getActivity()); textSliderView.description("新品男装").image(R.mipmap.slider_mani); textSliderView.setOnSliderClickListener(new BaseSliderView.OnSliderClickListener() { @Override public void onSliderClick(BaseSliderView slider) { Toast.makeText(getContext(),"新品男装",Toast.LENGTH_SHORT).show(); } });
效果图：
源代码：
package zuo.com.ui.fragment; import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.util.Log; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.Toast; import com.daimajia.slider.library.Animations.DescriptionAnimation; import com.daimajia.slider.library.Indicators.PagerIndicator; 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 zuo.com.ui.R; /** * Created by Administrator on 2016/10/6. */ public class HomeFragment extends Fragment { private SliderLayout sliderLayout; private PagerIndicator pagerIndicator; private String TAG="SliderView"; @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view=inflater.inflate(R.layout.fragment_home,container,false); sliderLayout= (SliderLayout) view.findViewById(R.id.slider); pagerIndicator= (PagerIndicator) view.findViewById(R.id.custom_indicator); initSlider(); return view; } private void initSlider() { TextSliderView textSliderView = new TextSliderView(this.getActivity()); textSliderView.description("新品男装").image(R.mipmap.slider_mani); textSliderView.setOnSliderClickListener(new BaseSliderView.OnSliderClickListener() { @Override public void onSliderClick(BaseSliderView slider) { Toast.makeText(getContext(),"新品男装",Toast.LENGTH_SHORT).show(); } }); TextSliderView textSliderView1 = new TextSliderView(this.getActivity()); textSliderView1.description("潮流女装").image(R.mipmap.slider_woman); textSliderView1.setOnSliderClickListener(new BaseSliderView.OnSliderClickListener() { @Override public void onSliderClick(BaseSliderView slider) { Toast.makeText(getContext(),"潮流女装",Toast.LENGTH_SHORT).show(); } }); TextSliderView textSliderView2 = new TextSliderView(this.getActivity()); textSliderView2.description("时尚男装").image(R.mipmap.slider_man); textSliderView2.setOnSliderClickListener(new BaseSliderView.OnSliderClickListener() { @Override public void onSliderClick(BaseSliderView slider) { Toast.makeText(getContext(),"时尚男装",Toast.LENGTH_SHORT).show(); } }); TextSliderView textSliderView3 = new TextSliderView(this.getActivity()); textSliderView3.description("青春女装").image(R.mipmap.slider_yu); textSliderView3.setOnSliderClickListener(new BaseSliderView.OnSliderClickListener() { @Override public void onSliderClick(BaseSliderView slider) { Toast.makeText(getContext(),"青春女装",Toast.LENGTH_SHORT).show(); } }); sliderLayout.addSlider(textSliderView); sliderLayout.addSlider(textSliderView1); sliderLayout.addSlider(textSliderView2); sliderLayout.addSlider(textSliderView3); sliderLayout.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom); //这个为默认的indicator // sliderLayout.setCustomIndicator(pagerIndicator); //设置下标的点，所在的位置在底部正中间 sliderLayout.setCustomAnimation(new DescriptionAnimation()); //动画效果 sliderLayout.setPresetTransformer(SliderLayout.Transformer.RotateUp); //设置转动模式，下面的文字说明自动出来 sliderLayout.setDuration(3000); //设置动画效果3秒自动转动 //sliderLayout的监听事件，这个监听事件 sliderLayout.addOnPageChangeListener(new ViewPagerEx.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { Log.d(TAG,"onPageScrolled"); } @Override public void onPageSelected(int position) { Log.d(TAG,"onPageSelected"); } @Override public void onPageScrollStateChanged(int state) { Log.d(TAG,"onPageScrollStateChanged"); } }); } }
五、修改后的build中的dependence,只有修改了这个才能使用sliderlayout的监听事件
//andoirdimageslider的依赖 dependencies { compile "com.android.support:appcompat-v7:23.0.1" compile 'com.squareup.picasso:picasso:2.3.2' compile 'com.nineoldandroids:library:2.4.0' compile 'com.daimajia.slider:library:1.1.5@aar' }
六、架构图
1453
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
