服务器之家:专注于VPS、云服务器配置技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - Android - Android实现轮播图片展示效果

Android实现轮播图片展示效果

2022-09-21 15:09常利兵 Android

这篇文章主要为大家详细介绍了Android实现轮播图片展示效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了Android轮播图片的展示,供大家参考,具体内容如下

实现逻辑

1.创建XML布局文件,使用ViewPager完成轮播图片

2.初始化ViewPager控件,然后为控件设置适配器,创建出来的适配器实现里面的四个方法

3.四个方法分别是getCount isViewFromObject instantiateItem destroyItem

4.在onCreat方法中,加载图片资源,将图片ID存在集合中,使图片能够在页面中显示,(图片之所以能够在页面中显示,是因为在适配器中的instantiateItem方法中获取了集合中的图片元素)

5.图片下方的文字显示:图片下方之所以会有文字,可以通过初始化控件,在ViewPager监听器中的onPageSelected方法中tv_desc.setText(descs[position]);这样文字就可以跟随者图片进行切换

6.文字下方的小圆点的切换:在XML布局中设置一个Linlayout布局,然后再onCreat方法中设置小圆点,通过LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(10, 10);的方法引入小圆点(具体代码可以参考下方的initDot方法)

7.要想让小圆点随着页面的切换而切换,可以定义下方的changeDots的方法,让此方法在监听器中的onPageSelected方法中进行调用

8.图片的无限轮播的实现:可以使适配器中的getCount返回值设为一个很大很大的值,同时在instantiateItem方法中设置position position = position % imageResIds.length;防止索引越界异常,这样就可以使图片无限轮播,但是此时还有一个问题就是,右边可以无限轮播,但是左边是无法无限轮播的,这个问题的解决办法是在onCreat方法中设置当前选中的条目viewPager.setCurrentItem(count / 2);这样两边都可以实现无限轮播

9.图片自动切换的处理:使用handler机制实现页面的延时更新,同时为了防止内存溢出,需要在页面可见时,也就是activity的onStart方法中发送消息,在页面消失时,也就是onStop方法中删除消息

布局文件

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.a2_.MainActivity">
 
<android.support.v4.view.ViewPager
 android:id="@+id/vp"
 android:layout_width="match_parent"
 android:layout_height="250dp">
</android.support.v4.view.ViewPager>
 
<LinearLayout
 android:orientation="vertical"
 android:gravity="center"
 android:background="#66000000"
 android:layout_alignBottom="@id/vp"
 android:layout_width="match_parent"
 android:layout_height="50dp">
 
 <TextView
  android:id="@+id/desc"
  android:text="描述文本"
  android:textColor="#ffffff"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" />
 
 <LinearLayout
  android:id="@+id/layout_dot"
  android:orientation="horizontal"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content">
 
 </LinearLayout>
</LinearLayout>
</RelativeLayout>

核心代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
package com.example.a2_;
 
import android.os.Handler;
import android.os.Message;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
 
import java.util.ArrayList;
 
public class MainActivity extends AppCompatActivity {
private static final int UPDATE_ITEM = 1;
private ArrayList<ImageView> imageViews = new ArrayList<>();
private int[] imageResIds = {R.mipmap.icon_1, R.mipmap.icon_2, R.mipmap.icon_3,
  R.mipmap.icon_4, R.mipmap.icon_5};
 
private String[] descs = {"为梦想坚持", "我相信我是黑马", "黑马公开课", "Google/IO", "轻松1w+"};
private ViewPager viewPager;
private TextView tv_desc;
private LinearLayout layout_dot;
private int count = 10000000;
private Handler handler = new Handler() {
 @Override
 public void handleMessage(Message msg) {
  switch (msg.what) {
   case UPDATE_ITEM:
    upDataItem();
    break;
  }
  super.handleMessage(msg);
 }
};
 
@Override
protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 
 //初始化控件
 viewPager = (ViewPager) findViewById(R.id.vp);
 tv_desc = (TextView) findViewById(R.id.desc);
 layout_dot = (LinearLayout) findViewById(R.id.layout_dot);
 //给viewPager设置适配器
 viewPager.setAdapter(new MyPagerAdapter());
 //对viewPager设置监听器
 viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
 
  //当页面滚动时触发的时间
  @Override
  public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
 
  }
 
  //当页面被选中时触发的方法
  @Override
  public void onPageSelected(int position) {
   //对position进行处理
   position = position % imageViews.size();
   //当页面被选中的时候,改变描述文本
   tv_desc.setText(descs[position]);
   changeDots(position);
  }
 
  //当页面状态滚动状态发生改变时触发的事件
  @Override
  public void onPageScrollStateChanged(int state) {
   //当页面空闲状态被改变的时候
   if (state == viewPager.SCROLL_STATE_IDLE) {
    handler.sendEmptyMessageDelayed(UPDATE_ITEM, 3000);
   } else {
    handler.removeMessages(UPDATE_ITEM);
   }
  }
 });
 
 
 //初始化图片
 initImage();
 //初始化文字下方的点
 initDot();
 //当加载页面的时候,默认让第一个文本加载出来
//  initDescFirst();
 
 //使两边都可以无限轮播
 viewPager.setCurrentItem(count / 2);
//页面加载时更新
 upDataItem();
}
 
private void upDataItem() {
 int index = viewPager.getCurrentItem();
 viewPager.setCurrentItem(++index);
 handler.sendEmptyMessageDelayed(UPDATE_ITEM, 3000);
}
 
//选中对应的原点
private void changeDots(int position) {
 //先把所有的点恢复为白色
 for (int i = 0; i < layout_dot.getChildCount(); i++) {
  View view = layout_dot.getChildAt(i);
  view.setSelected(false);
 }
 //获取当前被选中的条目 设置为选中状态
 layout_dot.getChildAt(position).setSelected(true);
 
}
 
//初始化文字下方的点
private void initDot() {
 LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(10, 10);
 layoutParams.setMargins(4, 4, 4, 4);
 for (int i = 0; i < imageViews.size(); i++) {
  View view = new View(this);
  view.setBackgroundResource(R.drawable.seletor_dot);
  view.setLayoutParams(layoutParams);
  layout_dot.addView(view);
 }
}
 
//当加载页面的时候,默认让第一个文本加载出来
private void initDescFirst() {
 tv_desc.setText(descs[0]);
 changeDots(0);
}
 
//添加图片,准备一个ImageView集合,用来交给instantiateItem添加到页面
private void initImage() {
 for (int i = 0; i < imageResIds.length; i++) {
  //创建出ImageView对象
  ImageView imageView = new ImageView(getApplicationContext());
  imageView.setImageResource(imageResIds[i]);
  imageViews.add(imageView);
 }
}
 
private class MyPagerAdapter extends PagerAdapter {
 
 @Override
 public int getCount() {
  return count;
 }
 
 @Override
 public boolean isViewFromObject(View view, Object object) {
  //判断这个view是不是通过instantiateItem创建出来的
  return view == object;
 }
 
 //用来创建条目
 @Override
 public Object instantiateItem(ViewGroup container, int position) {
  position = position % imageResIds.length;
  //获取条目
  ImageView imageView = imageViews.get(position);
  container.addView(imageView);
  return imageView;
 }
 
 //用来销毁条目,,且最多会创建出三个条目,多出来的条目将会被销毁
 @Override
 public void destroyItem(ViewGroup container, int position, Object object) {
 
  //销毁创建的条目
  container.removeView((View) object);
 }
}
 
@Override
protected void onStart() {
 super.onStart();
 //当页面显示的时候,更新轮播图
 handler.sendEmptyMessageDelayed(UPDATE_ITEM, 3000);
}
 
@Override
protected void onStop() {
 super.onStop();
 //当页面不可见时,停止更新
 handler.removeCallbacksAndMessages(null);
}
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。

原文链接:https://blog.csdn.net/qq_32890771/article/details/72817268

延伸 · 阅读

精彩推荐