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);

}

}

 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持主机吧

  • 5
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值