您的位置:首页 > 移动开发 > Android开发

使用AndroidImageSlider实现轮播

2017-08-22 16:23 127 查看

AndroidImageSlider框架使用方便,效果多样化。

1.地址:https://github.com/daimajia/AndroidImageSlider

2.在AndroidManifest.xml中添加权限

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

3.在项目的gradle添加依赖

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'
}

4.在布局文件中使用控件

custom:pager_animation=”Accordion” 切换动画效果
custom:auto_cycle=”true” 自动播放
custom:indicator_visibility=”visible” 显示指示器
以上是SliderLayout的几个属性

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

<com.daimajia.slider.library.SliderLayout
android:background="@mipmap/ic_launcher"
android:id="@+id/slider"
android:layout_width="match_parent"
android:layout_height="200dp"
/>
<ListView
android:layout_below="@+id/slider"
android:id="@+id/transformers"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>








5.使用系统提供的指示器(PageIndicator)代码中的设置:
package supplier.ztxx.com.myimageslider;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
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.DefaultSliderView;
import com.daimajia.slider.library.SliderTypes.TextSliderView;
import com.daimajia.slider.library.Tricks.ViewPagerEx;

import java.util.ArrayList;
import java.util.HashMap;

import static android.R.attr.name;

public class MainActivity extends AppCompatActivity implements BaseSliderView.OnSliderClickListener, ViewPagerEx.OnPageChangeListener {
private SliderLayout mDemoSlider;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mDemoSlider = (SliderLayout)findViewById(R.id.slider);
ArrayList<String> arrayList=new ArrayList<>();
arrayList.add(0,"http://tvfiles.alphacoders.com/100/hdclearart-10.png");
arrayList.add(1,"http://static2.hypable.com/wp-content/uploads/2013/12/hannibal-season-2-release-date.jpg");
arrayList.add(2,"http://images.boomsbeat.com/data/images/full/19640/game-of-thrones-season-4-jpg.jpg");
//TextSliderView内部其实就是将textview和Imageview封装到一起了。即一个轮播广告对应一个广告标题。
for(String path : arrayList){
//如果轮播图有标题用TextSliderView,如果没有标题就用DefaultSliderView.
// TextSliderView textSliderView = new TextSliderView(this);
//            textSliderView
//               .description(name)//标题
//                    .image(path)
//                    .setScaleType(BaseSliderView.ScaleType.Fit)
//                    .setOnSliderClickListener(this);
DefaultSliderView textSliderView = new DefaultSliderView(this);
textSliderView
.image(path)
.setScaleType(BaseSliderView.ScaleType.Fit)
.setOnSliderClickListener(this);

textSliderView.bundle(new Bundle());
textSliderView.getBundle()
.putString("extra",path);//点击轮播图传给回调方法的参数。
//将图片和标题这个赋值过的对象添加到SliderLayout这个容器中。
mDemoSlider.addSlider(textSliderView);
}
//setPresetTransforms()这方法是页面切换动画,设置默认过渡效果(可在xml中设置),里面有对应各种动画枚举值,选择一个合适的动画即可,
mDemoSlider.setPresetTransformer(SliderLayout.Transformer.Accordion);
//设置indicator指示器的位置。
mDemoSlider.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom);
//setCustomAnimation是描述的显示动画,跟前面方法一样,有丰富的选项提供选择。
mDemoSlider.setCustomAnimation(new DescriptionAnimation());
mDemoSlider.setDuration(4000);
mDemoSlider.addOnPageChangeListener(this);
//条目点击事件
ListView l = (ListView)findViewById(R.id.transformers);
l.setAdapter(new TransformerAdapter(this));
l.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
//改变轮播图的切换效果
mDemoSlider.setPresetTransformer(((TextView) view).getText().toString());
Toast.makeText(MainActivity.this, ((TextView) view).getText().toString(), Toast.LENGTH_SHORT).show();
}
});
}

@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) {
}

@Override
protected void onStop() {
mDemoSlider.stopAutoCycle();
super.onStop();
}
}

以上方法就可以实现轮播效果了

6.也可以自定义指示器
custom:shape=”oval” 或 rect 圆形、矩形。
<!-- style 在lib里面 -->

    <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"

        />
默认提供三种Style
AndroidImageSlider_Corner_Oval_Orange,AndroidImageSlider_Attractive_Rect_Blue,AndroidImageSlider_Magnifier_Oval_Black

代码中给SliderLayout设置指示器,
// 设置自定义指示器(位置自定义)
mDemoSlider.setCustomIndicator((PagerIndicator) findViewById(R.id.custom_indicator));



内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: