仿京东，淘宝，顶部自动轮播图

在Android中，顶部的自动轮播图是很常见的组件。 参考了开源项目，再此非常感谢大牛的分享：Refresh，写完再此记录总结分享一下。

效果图

横向轮播图

纵向轮播图

基本思路

自动轮播的Viewpager思路其实很简单，就是将Viewpager中的数据count设置成Integer.Max。然后使用定时器，或者Handle定时去执行。

纵向轮播图原理也很简单，就让做竖直动画，有需要的可以Clone下代码看看。

横向轮播图使用方式

1、在build.gradl中配置

//使用 autoplay viewpager
compile ('com.xyzlf.autoplay.viewpager:viewpager:0.0.3') {
exclude group: 'com.android.support', module: 'appcompat-v7'
}

2、在xml中配置

<!-- 使用默认颜色，大小，间距 -->
<com.xyzlf.autoplay.viewpager.CustomerBanner
android:id="@+id/banner"
android:layout_width="match_parent"
android:layout_height="150dp"/>

<!--自定义颜色，大小，间距-->
<com.xyzlf.autoplay.viewpager.CustomerBanner
android:id="@+id/banner"
android:layout_width="match_parent"
android:layout_height="150dp"
custom:indicator_radius="3dp"
custom:indicator_span="16dp"
custom:indicator_selected_color="#ff0000"
custom:indicator_unselected_color="#00ff00"
custom:indicator_bottommargin="20dp"/>

3、在代码中使用

List<Integer> list = new ArrayList<>();
list.add(R.drawable.pic_1);
list.add(R.drawable.pic_2);
list.add(R.drawable.pic_3);
list.add(R.drawable.pic_4);

CustomerBanner banner = (CustomerBanner) findViewById(R.id.banner);
banner.setAdapter(new AutoPlayPagerAdapter(list));

4、Adapter需要继承  AutoPagerAdapter，完整Adapter代码如下：

public class MyScrollAdapter extends VerticalScrollAdapter<ItemData> {

public MyScrollAdapter(List<ItemData> mDatas) {
super(mDatas);
}

@Override
public View getView(VerticalScrollView parent) {
return LayoutInflater.from(parent.getContext()).inflate(R.layout.layout_item, parent, false);
}

@Override
public void setItem(final View view, final ItemData data) {
TextView tv = (TextView) view.findViewById(R.id.content);
tv.setText(data.content);
TextView tag = (TextView) view.findViewById(R.id.tag);
tag.setText(data.tag);
//你可以增加点击事件
view.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(view.getContext(), data.tag, Toast.LENGTH_SHORT).show();
}
});
}
}

纵向轮播图使用方式

1、在build.gradl中配置

//使用 autoplay viewpager
compile ('com.xyzlf.autoplay.view:verticalplay:0.0.1') {
exclude group: 'com.android.support', module: 'appcompat-v7'
}

2、在xml中配置

<!-- 自定义布局实现 -->
<com.xyzlf.vertical.autoscroll.VerticalScrollView
android:id="@+id/vertical_scroll_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
custom:intervalDuration="4000"
custom:animDuration="1000"/>

<!-- ViewFlipper实现 -->
<ViewFlipper
android:id="@+id/flipper"
android:layout_width="match_parent"
android:layout_height="50dp"
android:flipInterval="4000"
android:inAnimation="@anim/push_up_in"
android:outAnimation="@anim/push_up_out">
<!-- 在这里添加view即可，比较简单 -->
</ViewFlipper>

3、在代码中使用

List<ItemData> datas = new ArrayList<>();
datas.add(new ItemData("瑞士维氏军刀 新品满200-50","最新"));
datas.add(new ItemData("家居家装焕新季，讲199减100！","最火爆"));
datas.add(new ItemData("带上相机去春游，尼康低至477","HOT"));
datas.add(new ItemData("价格惊呆！电信千兆光纤上市","new"));

final MyScrollAdapter adapter = new MyScrollAdapter(datas);
final VerticalScrollView tbView = (VerticalScrollView) findViewById(R.id.vertical_scroll_view);
tbView.setAdapter(adapter);
//开启线程滚东
tbView.start();

4、Adapter需要继承 VerticalScrollAdapter，完整Adapter代码如下：

public class MyScrollAdapter extends VerticalScrollAdapter<ItemData> {

public MyScrollAdapter(List<ItemData> mDatas) {
super(mDatas);
}

@Override
public View getView(VerticalScrollView parent) {
return LayoutInflater.from(parent.getContext()).inflate(R.layout.layout_item, parent, false);
}

@Override
public void setItem(final View view, final ItemData data) {
TextView tv = (TextView) view.findViewById(R.id.content);
tv.setText(data.content);
TextView tag = (TextView) view.findViewById(R.id.tag);
tag.setText(data.tag);
//你可以增加点击事件
view.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(view.getContext(), data.tag, Toast.LENGTH_SHORT).show();
}
});
}
}

完整项目地址

横向轮播组件： https://github.com/xyzlf/AutoPlayViewPager

纵向轮播组件：https://github.com/xyzlf/VerticalAutoScroll