Android完美实现平滑过渡的ViewPager广告条
作者:郭朝 发布时间:2023-10-01 13:05:31
我们经常会看到有一些app的banner界面可以实现循环播放多个广告图片和手动滑动循环的效果。看到那样的效果,相信大家都会想到ViewPager,但是ViewPager并不支持循环翻页,所以要实现循环还得需要自己去动手。最后还有一个问题就是翻页到最后一页如何平滑过渡到首页的问题。这些都源于有人私信问我ViewPager广告条如何平滑过渡的问题,出于这个问题,我想着亲自实现并分享下吧,本篇就是为了解决这些问题而写的。
1.初始化布局
我们先来写一个ViewPager广告条的布局:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="@+id/vp"
android:layout_width="match_parent"
android:layout_height="210dp"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="@id/vp"
android:background="#55000000"
android:gravity="center_horizontal"
android:orientation="vertical"
android:padding="5dp">
<TextView
android:id="@+id/tv_img_desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="这里是广告标题"
android:textColor="#ffffff"
android:textSize="16sp"/>
<!-- 动态添加小圆点,用一个水平的线性布局 -->
<LinearLayout
android:id="@+id/ll_dot_group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"/>
</LinearLayout>
</RelativeLayout>
此时的效果如下,是不是已经有了点模样:
2.Activity实现
接下来进入到关键的实现代码,当然,Activity实现也难不倒我们,其中ViewPager数据,为了方便,本篇就直接用本地数据进行模拟了。而在实际项目开发数据大都来自网络。
public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {
private List<ImageView> vpLists;
private LinearLayout ll_dot_group; //用来添加小圆点
private String[] imageDescArrs;
private TextView tv_img_desc;
private ViewPager vp;
private boolean isSwitchPager = false; //默认不切换
private int previousPosition = 0; //默认为0
private Handler handler = new Handler() {
public void handleMessage(android.os.Message msg) {
//更新当前viewpager的 要显示的当前条目
vp.setCurrentItem(vp.getCurrentItem() + 1);
}
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
/**
* 初始化view
*/
private void initView() {
vp = (ViewPager) findViewById(R.id.vp);
ll_dot_group = (LinearLayout) findViewById(R.id.ll_dot_group);
tv_img_desc = (TextView) findViewById(R.id.tv_img_desc);
initViewPagerData();
vp.setAdapter(new ViewpagerAdapter());
//设置当前viewpager要显示第几个条目
int item = Integer.MAX_VALUE / 2 - (Integer.MAX_VALUE / 2 % vpLists.size());
vp.setCurrentItem(item);
//把第一个小圆点设置为白色,显示第一个textview内容
ll_dot_group.getChildAt(previousPosition).setEnabled(true);
tv_img_desc.setText(imageDescArrs[previousPosition]);
//设置viewpager滑动的监听事件
vp.addOnPageChangeListener(this);
//实现自动切换的功能
new Thread() {
public void run() {
while (!isSwitchPager) {
SystemClock.sleep(3000);
//拿着我们创建的handler 发消息
handler.sendEmptyMessage(0);
}
}
}.start();
}
/**
* 初始化ViewPager的数据
*/
private void initViewPagerData() {
imageDescArrs = new String[]{"标题1", "标题2", "标题3", "标题4", "标题5"};
vpLists = new ArrayList<ImageView>();
int imgIds[] = {R.drawable.a, R.drawable.b, R.drawable.c, R.drawable.d, R.drawable.e};
ImageView iv;
View dotView;
for (int i = 0; i < imgIds.length; i++) {
iv = new ImageView(this);
iv.setBackgroundResource(imgIds[i]);
vpLists.add(iv);
//准备小圆点的数据
dotView = new View(getApplicationContext());
dotView.setBackgroundResource(R.drawable.selector_dot);
//设置小圆点的宽和高
LayoutParams params = new LayoutParams(15, 15);
//设置每个小圆点之间距离
if (i != 0) {
params.leftMargin = 15;
}
dotView.setLayoutParams(params);
//设置小圆点默认状态
dotView.setEnabled(false);
//把dotview加入到线性布局中
ll_dot_group.addView(dotView);
}
}
/**
* 定义数据适配器
*/
private class ViewpagerAdapter extends PagerAdapter {
@Override
public int getCount() {
return Integer.MAX_VALUE;
}
//是否复用当前view对象
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
//初始化每个条目要显示的内容
@Override
public Object instantiateItem(ViewGroup container, int position) {
//拿着position位置 % 集合.size
int newposition = position % vpLists.size();
//获取到条目要显示的内容imageview
ImageView iv = vpLists.get(newposition);
//要把 iv加入到 container 中
container.addView(iv);
return iv;
}
//销毁条目
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
//移除条目
container.removeView((View) object);
}
}
//当新的页面被选中的时候调用
@Override
public void onPageSelected(int position) {
//拿着position位置 % 集合.size
int newposition = position % vpLists.size();
//取出postion位置的小圆点 设置为true
ll_dot_group.getChildAt(newposition).setEnabled(true);
//把一个小圆点设置为false
ll_dot_group.getChildAt(previousPosition).setEnabled(false);
tv_img_desc.setText(imageDescArrs[newposition]);
previousPosition = newposition;
}
@Override
protected void onDestroy() {
//当Activity销毁的时候 把是否切换的标记置为true
isSwitchPager = true;
super.onDestroy();
}
@Override
public void onPageScrollStateChanged(int state) {
}
//当页面开始滑动
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
}
如上我们就解决了平滑过渡的问题,关键的地方就是ViewpagerAdapter:
getCount方法我们返回Integer.MAX_VALUE
public int getCount() {
return Integer.MAX_VALUE;
}
初始化每个条目要显示的内容,我们拿着position位置 % 集合.size
@Override
public Object instantiateItem(ViewGroup container, int position) {
//拿着position位置 % 集合.size
int newposition = position % vpLists.size();
//获取到条目要显示的内容imageview
ImageView iv = vpLists.get(newposition);
//要把 iv加入到 container 中
container.addView(iv);
return iv;
}
此时我们发现已经最后一个广告可以平滑过渡了,但是还有一个问题就是,那从第一张开始,我们往左滑呢?其实也很容易解决,就是设置第一个条目为Integer.MAX_VALUE的中间位置就可以了,我们来到initView方法中,设置当前viewpager要显示第几个条目:
int item = Integer.MAX_VALUE / 2 - (Integer.MAX_VALUE / 2 % vpLists.size());
vp.setCurrentItem(item);
问题完美解决。
用到的Shape相关资源如下:
selector_dot.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/dot_enable" android:state_enabled="true"></item>
<item android:drawable="@drawable/dot_normal" android:state_enabled="false"></item>
</selector>
dot_enable.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<corners android:radius="5dp"/>
<solid android:color="@android:color/white"/>
</shape>
dot_normal.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<corners android:radius="5dp"/>
<solid android:color="@android:color/darker_gray"/>
</shape>
来看看效果图:
到此,一个平滑过渡的ViewPager广告条已经完美实现了。
来源:http://blog.csdn.net/smartbetter/article/details/53083816
猜你喜欢
- 一、Bundle进行IPC介绍四大组件中的三大组件(Activity、Service、Receiver)都是支持在Intent中传递Bund
- 很多App都有这种效果,特别一些电商类的App,顶部每隔几秒钟会向右翻页显示下张图片,用来作推广或者内容展示用的。今天来简单地模仿一下,还自
- 概述: 当希望能直接在数据库语言中只检索符合条件的记录,不需要再通过程序对其做处理时,SQL语句分页
- 双向顺序队列ArrayDeque和双向链式队列LinkedList,JDK已经包含,在此略。ArrayDeque包括顺序栈和顺序队列,Lin
- 要想使Java运行,我们可以设计一个面向Java语言特性的虚拟机,并通过编译器将Java程序转换为它可以识别的指令序列,也称为Java字节码
- jpa EntityManager复杂查询概念EntityManager:EntityManager是JPA中用于增删改查的接口,它的作用相
- 前言目前Flutter三大主流状态管理框架分别是provider、flutter_bloc、getx,三大状态管理框架各有优劣,本篇文章将介
- 整理文档,java 动态增加定时任务示例,直接上代码。import org.apache.tools.ant.util.DateUtils;
- 最近学习Spring,一直不太明白Srping的切面编程中的的argNames的含义,经过学习研究后,终于明白,分享一下需要监控的类:pac
- 最近看spring的JDBCTemplete的模板方式调用时,对模板和回调产生了浓厚兴趣,查询了一些资料,做一些总结。回调函数:所谓回调,就
- mybatis plus新增(insert)数据获取主键id在我们执行insert操作的时候,往往会需要拿到新插入数据的主键id做下一步操作
- 前言:文件的上传和下载在日常开发中很是常见,那么这一功能是如何实现的呢,下面我给大家介绍一下实现条件:1、需要一个form标签,method
- iOS定位 - 普通定位(没有地图) - 反地理编码(得到具体位置),下面通过代码给大家详解,代码如下:#import <CoreLo
- InputStreamReader 类1、概述转换流 java.io.InputStreamReader ,是Reader的子类,是从字节流
- 应用场景有些时候项目中会用到很多路径,并且很可能多个路径在同一个根目录下,那为了方便配置的修改,达到只修改根目录即可达到一改全改的效果,此时
- 已知字符串“aabbbcddddeeffffghijklmnopqrst”编程找出出现最多的字符和次数,要求时间复杂度小于O(n^2)/**
- 图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码目前限chrome浏览器使用首先以um-edit
- 昨天有朋友在公众号发消息说看不懂await,async执行流,其实看不懂太正常了,因为你没经过社会的毒打,没吃过牢饭就不知道自由有多重要,没
- 近日于LeetCode看题遇1114 按序打印,获悉一解法使用了Semaphore,顺势研究,记心得于此。此解视Semaphore为锁,以保
- “Java is still not dead—and people are starting to figure that out.”本教