搜索
查看
编辑修改
首页
UNITY
NODEJS
PYTHON
AI
GIT
PHP
GO
CEF3
JAVA
HTML
CSS
搜索
IT小白
这个屌丝很懒,什么也没留下!
关注作者
热门标签
jquery
HTML
CSS
PHP
ASP
PYTHON
GO
AI
C
C++
C#
PHOTOSHOP
UNITY
iOS
android
vue
xml
爬虫
SEO
LINUX
WINDOWS
JAVA
MFC
CEF3
CAD
NODEJS
GIT
Pyppeteer
article
热门文章
1
Mac/iPad/iPhone跨设备复制粘贴失效_mac复制后iphone不能粘贴
2
css3照片特效阴影(曲线投影和翘边投影)_css卡片式边框投影
3
鸿蒙开发之UI框架_鸿蒙ui框架
4
Gradle安装配置_gradle安装与配置
5
蓝桥杯 基础练习 十六进制转十进制_biginteger十六机制转十进制
6
2023年软件测试常见面试题100%问必背全套教程_软件开发的应届生对于面试怎么复习面试题的程序题
7
GridFS 存储文件_gridfs将文件分别存储到哪里
8
【PostgreSQL】PostgreSQL容量相关查询_查询pg库各模式大小
9
WPF浏览器应用程序与JS的互调用(不用WebBrowser)
10
PX30 编译内核问题出错问题解决 extract-cert.c:(.text.startup+0x25): undefined reference to OPENSSL_init_crypto_/tmp/cce5eftv.o: in function `main': extract-cert.
当前位置:
article
> 正文
ViewPager 轮播图(本地图片篇)_uview轮播图使用本地图片
作者:IT小白 | 2024-03-16 17:52:50
赞
踩
uview轮播图使用本地图片
直接贴代码:
MainActivity
[java]
view plain
copy
package
com.cruze.viewpager;
import
android.app.Activity;
import
android.os.Bundle;
import
android.support.v4.view.ViewPager;
import
android.support.v4.view.ViewPager.OnPageChangeListener;
import
android.view.ViewGroup;
import
android.view.ViewGroup.LayoutParams;
import
android.widget.ImageView;
import
android.widget.LinearLayout;
import
com.example.administrator.myapplication.R;
/***
*
* @author Cruze
*
*/
public
class
MainActivity
extends
Activity
implements
OnPageChangeListener{
private
ViewPager vPager;
private
ImageView[] dots;
// 小圆点的数组
private
ImageView[] imageViews;
// 轮播图的数组
private
int
[] img =
new
int
[] { R.drawable.pic1, R.drawable.pic2,
R.drawable.pic3, R.drawable.pic4 };
// 图片 资源
@Override
protected
void
onCreate(Bundle savedInstanceState) {
super
.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
/****
* 初始化页面
*/
private
void
initView() {
ViewGroup group = (ViewGroup) findViewById(R.id.viewGroup);
vPager = (ViewPager) findViewById(R.id.viewPager);
dots =
new
ImageView[img.length];
//将小圆点填充到数组中
for
(
int
i =
0
; i < dots.length; i++) {
ImageView imageView =
new
ImageView(
this
);
imageView.setLayoutParams(
new
LayoutParams(
10
,
10
));
dots[i] = imageView;
if
(i ==
0
) {
dots[i].setBackgroundResource(R.drawable.banner_dian_focus);
}
else
{
dots[i].setBackgroundResource(R.drawable.banner_dian_blur);
}
group.addView(imageView);
}
//将图片填充到数组中
imageViews =
new
ImageView[img.length];
for
(
int
i=
0
; i<imageViews.length; i++){
ImageView imageView =
new
ImageView(
this
);
imageViews[i] = imageView;
imageView.setBackgroundResource(img[i]);
}
//设置Adapter
vPager.setAdapter(
new
MyPagerAdapter(imageViews));
//设置监听,主要是设置点点的背景
vPager.setOnPageChangeListener(
this
);
//设置ViewPager的默认项, 设置为长度的100倍,这样子开始就能往左滑动
vPager.setCurrentItem((imageViews.length) *
100
);
}
@Override
public
void
onPageScrollStateChanged(
int
arg0) {
// TODO Auto-generated method stub
}
@Override
public
void
onPageScrolled(
int
arg0,
float
arg1,
int
arg2) {
// TODO Auto-generated method stub
}
@Override
public
void
onPageSelected(
int
arg0) {
setImageBackground(arg0 % imageViews.length);
}
private
void
setImageBackground(
int
index) {
for
(
int
i=
0
; i<dots.length; i++){
if
(i == index){
dots[i].setBackgroundResource(R.drawable.banner_dian_focus);
}
else
{
dots[i].setBackgroundResource(R.drawable.banner_dian_blur);
}
}
}
}
Adapter
[java]
view plain
copy
package
com.cruze.viewpager;
import
android.support.v4.view.PagerAdapter;
import
android.support.v4.view.ViewPager;
import
android.view.View;
import
android.widget.ImageView;
public
class
MyPagerAdapter
extends
PagerAdapter{
private
ImageView[] imageViews;
// 轮播图的数组
public
MyPagerAdapter(ImageView[] imageViews){
this
.imageViews = imageViews;
}
@Override
public
int
getCount() {
return
Integer.MAX_VALUE;
}
@Override
public
boolean
isViewFromObject(View arg0, Object arg1) {
return
arg0 == arg1;
}
@Override
public
void
destroyItem(View container,
int
position, Object object) {
// ((ViewPager)container).removeView(imageViews[position % imageViews.length]);
}
/**
* 载入图片进去,用当前的position 除以 图片数组长度取余数是关键
*/
@Override
public
Object instantiateItem(View container,
int
position) {
try
{
((ViewPager)container).addView(imageViews[position % imageViews.length],
0
);
}
catch
(Exception e){
//handler something
}
return
imageViews[position % imageViews.length];
}
}
布局文件:
[html]
view plain
copy
<
RelativeLayout
xmlns:android
=
"http://schemas.android.com/apk/res/android"
android:layout_width
=
"fill_parent"
android:layout_height
=
"180dp"
android:orientation
=
"vertical"
>
<
android.support.v4.view.ViewPager
android:id
=
"@+id/viewPager"
android:layout_width
=
"fill_parent"
android:layout_height
=
"wrap_content"
/>
<
LinearLayout
android:id
=
"@+id/viewGroup"
android:layout_width
=
"fill_parent"
android:layout_height
=
"25dp"
android:layout_alignParentBottom
=
"true"
android:gravity
=
"center_horizontal|bottom"
android:orientation
=
"horizontal"
>
</
LinearLayout
>
</
RelativeLayout
>
好了,一个基本读取本地图片的viewPager 就算是成功了
声明:
本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:
https://www.wpsshop.cn/w/IT小白/article/detail/251156
推荐阅读
article
项目基于vue-
uni
app
,使用
color
Ui与
uview
框架,完美支持微信小程序_
uni
-
app
...
介绍:项目说明项目基于Vue-
uni
App,使用
color
Ui与
uview
框架,部分Demo参考
uni
App插件市场等,...
赞
踩
article
UniApp
与uView2.0开发的
管理
端小
程序
_
vue2
+
uview
+
uniapp
+小
程序
开箱即用...
基于若依
管理
平台开发的,
UniApp
+ uView2.0的
管理
端小
程序
。_
vue2
+
uview
+
uniapp
+小
程序
开...
赞
踩
article
【
Straw
-
Uniapp
-
uView
】基于
Uniapp
+
uView
搭建项目基础模板_uni...
文章目录
Straw
-
Uniapp
-
uView
1、项目截图微信公众号
Straw
-
Uniapp
-
uView
基于
Uniapp
...
赞
踩
article
【
u
niapp】
u
view
自定义
tabBar
底部导航栏_
u
view
u
-
tabbar
...
切换调用的钩子函数,参数对应下标;在
u
view
1.x 中,不用在。跳转到对应页面,也需要配置。:对应当前激活的图标;:...
赞
踩
article
uniapp
使用
uview
-
plus
底部
导航
栏(
vue3
项目)_
uniapp
底部
导航
栏...
uniapp
使用
uview
-
plus
底部
导航
栏(
vue3
项目)_
uniapp
底部
导航
栏
uniapp
底部
导航
栏 ...
赞
踩
article
uniapp
uview
头像
裁剪
组件
的问题...
当切换页面频繁进出
头像
裁剪
组件
u-avatar-cropper.vue 获取同一个设备信息时会出现两种不同的高度unia...
赞
踩
article
【
u
niapp/
u
view
】解决
u
-
collapse
展开
折叠
的
小箭头在有些型号
的
手机上不显示...
折叠
面板组件时,需要更改它自带
的
小箭头
的
样式,更改之后在有些型号
的
手机上不显示;观察样式后发现使用
的
是
u
nicode ...
赞
踩
article
u
niapp
Uview
step
步骤图 写自己的样式(如图)_
u
-
step
s
自定义
图片...
u
niapp
Uview
step
步骤图 _
u
-
step
s
自定义
图片
u
-
step
s
自定义
图片 ...
赞
踩
article
u
View
Swiper
轮播图_
u
-
swiper
标题...
自定义指示器data() {ret
u
rn {list5: [],list6: [_
u
-
swiper
标题
u
-
swiper
标...
赞
踩
article
uview
使用
自定义
图标
_
uview
怎么
使用
图片
作为
图标
...
资料准备阿里字体
图标
库查阅文档:uni-app 的自定义
图标
u-icon操作1. 下载svg格式的文件(如果是png等...
赞
踩
article
uniapp
结合
uView
自定义
tabbar
_
uniapp
uview
tabbar
...
只需要在app.vue中添加以下代码即可隐藏原生
tabbar
。注:app可能会导致原生
tabbar
占位问题,如下图所示。...
赞
踩
article
【
样式
】轮播图
样式
u
view
版本 : “
2.0
.31“_
u
view
u
-
swiper
indic...
【代码】【
样式
】轮播图
样式
u
view
版本 : "
2.0
.31"_
u
view
u
-
swiper
indicatorst...
赞
踩
相关标签
项目基于vue-uniapp
vue.js
前端
node.js
uniapp
uview
uni-app
uView
vue
html
javascript
css
html5