UGUI实现ScrollView无限滚动效果

抽空做了一个ugui的无限滚动的效果。只做了一半(向下无限滚动)。网上也看了很多教程,感觉还是按照自己的思路来写可能比较好。搭建如下:

content节点不添加任何组件。布局组件默认是会重新排版子节点的,所以如果子节点的位置变化,会重新排版,不能达到效果。size fitter组件也不加,自己写代码调整size大小(不调整大小,无法滑动)。

最主要的实现过程就是用queue来搬运cell。在向下滚动的过程中(鼠标上滑),顶部滑出view port的cell被搬运到底部续上。这点类似于queue的先见先出原则,再把dequeue出来的元素添加到末尾,就很类似于scrollview的无限滚动的原理了。在鼠标上滑的过程中,content的posy值是一直增加的,所以触发滚动的条件就可以设定为位移之差大于cell的高度值即可。

数据的刷新,数据到头之后,不能再次进行滚动轮换了,这里用一组值来记录初始化的一组cell显示的是数据的哪一段。例如headnum和tainum。比如用20个cell显示100条数据。初始化后,headnum就是0,tailnum就是19。上滑一行数据后,headnum=4,tailnum=23(这里假设是20个cell排成4列)。

下面是完整代码:

?

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

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

public class uiscrollviewtest : monobehaviour {

public recttransform content;

public gameobject cell;

// cell的初始化个数

public int cellamount = 0;

// 鼠标上滑时,存储cell的queue。正序存储

public queue f_cellquee = new queue();

// 鼠标下滑时,存储cell的queue。到序存储

public queue b_cellquee = new queue();

// cell的size

public vector2 cellsize = new vector2(100,100);

// cell的间隔

public vector2 celloffset = new vector2(0,0);

// 列数

public int columncount = 0;

private int rowcount;

// 上一次content的位置

public float lastpos;

// 滚动的次数

public int loopcount = 0;

// cell显示的数据段的开头和结尾序号

public int headnum = 0;

public int tailnum;

public sprite[] sp;

public list<sprite> data;

void start()

{

for (int i = 0; i < sp.length; i++)

{

data.add(sp[i]);

}

initialscrollview(data);

tailnum = cellamount-1;

lastpos = content.localposition.y;

//debug.logerror("行数是:::" + rowcount);

//debug.logerror("+++++++++++++++++ " + (5>>3));

}

void update()

{

// 触发滚动。

if (content.localposition.y - lastpos > cellsize.y && data.count - cellamount - loopcount*columncount >0)

{

//debug.logerror("11111111111 " + (data.count - cellamount - loopcount * columncount));

loopscrolview(data);

lastpos = content.localposition.y;

}

}

// 初始化cell

void initialscrollview(list<sprite> data)

{

for (int i = 0; i < cellamount; i++)

{

gameobject obj = instantiate(cell.gameobject);

obj.transform.setparent(content);

obj.name = "cell0" + i.tostring();

obj.transform.getchild(0).getcomponent<text>().text = "cell0"+i.tostring();

// 显示默认的数据

obj.getcomponent<image>().sprite = data[i];

}

// 初始化queue

for (int i = content.childcount-1; i >= 0; i--)

{

b_cellquee.enqueue(content.getchild(i).gameobject);

}

for (int i = 0; i < content.childcount; i++)

{

f_cellquee.enqueue(content.getchild(i).gameobject);

}

// 计算行数

if (cellamount % columncount >0)

{

rowcount = cellamount / columncount + 1;

} else {

rowcount = cellamount / columncount;

}

// 排列cell的位置

int index = 0;

for (int r = 1; r <= rowcount; r++)

{

for (int c = 1; c <= columncount; c++)

{

if (index < cellamount)

{

vector2 pos = new vector2(cellsize.x / 2 + (cellsize.x + celloffset.x) * (c-1), -cellsize.y / 2 - (celloffset.y + cellsize.y) * (r-1));

content.getchild(index).getcomponent<recttransform>().setinsetandsizefromparentedge(recttransform.edge.top, 0, 100);

content.getchild(index).getcomponent<recttransform>().setinsetandsizefromparentedge(recttransform.edge.left, 0, 100);

content.getchild(index).getcomponent<recttransform>().anchoredposition = pos;

index++;

}

}

}

vector2 v = content.sizedelta;

// 初始化content的size

content.sizedelta = new vector2(v.x, rowcount * cellsize.y + celloffset.y*(rowcount-1));

}

/// 保持content的大小,这里是保持大小为在cell的行数基础上,向下多出bottomcount行的距离

void setcontentsize(int uppercount, int bottomcount)

{

if (content.sizedelta != new vector2(content.sizedelta.x, content.sizedelta.y + bottomcount * (cellsize.y + celloffset.y)))

{

content.sizedelta = new vector2(content.sizedelta.x, content.sizedelta.y + bottomcount*(cellsize.y + celloffset.y));

}

}

// 计算顶部的cell轮换到底部时的位置。以当前最后一行的最后一个cell的位置为基准计算。

void setbottomcellposition(int index, recttransform rect, vector2 pos)

{

vector2 v = vector2.zero;

if (cellamount % columncount == 0) // 整除。每一行都满的情况。

{

float x = pos.x - cellsize.x * (columncount - index-1) - celloffset.x * (columncount-index-1);

float y = pos.y - cellsize.y - celloffset.y;

v = new vector2(x,y);

}

// 出现不满行的情况。例如数据有103个,可以用23个cell来轮换。这样就会出现不满行的情况。

// 这种情况下是顶部的一行cell顺次接到底部不满的行。例如23号cell后面接1号和2号cell,3号和4号cell填充到第“7”行

else if (cellamount % columncount + index+1<=columncount)

{

float x = pos.x + cellsize.x * (index+1) + celloffset.x * (index+1);

float y = pos.y;

v = new vector2(x, y);

}

else

{

float x = pos.x - cellsize.x * (columncount - index-1) - celloffset.x * (columncount - index-1);

float y = pos.y - cellsize.y - celloffset.y;

v = new vector2(x, y);

}

//debug.logerror("++++++++++++++ " + pos+ " "+ v);

rect.anchoredposition = v;

rect.setaslastsibling();

}

// 计算底部的cell轮换到顶部是的位置,基准位置是当前行的第一个cell。

void setuppercellposition(int index, recttransform rect, vector2 pos)

{

vector2 v = vector2.zero;

if (cellamount % columncount == 0) // 整除

{

float x = pos.x + cellsize.x * index + celloffset.x * index;

float y = pos.y + cellsize.y + celloffset.y;

v = new vector2(x, y);

}

//else if (cellamount % columncount + index + 1 <= columncount)

//{

// float x = pos.x + cellsize.x * (index + 1) + celloffset.x * (index + 1);

// float y = pos.y;

// v = new vector2(x, y);

//}

//else

//{

// float x = pos.x - cellsize.x * (columncount - index - 1) - celloffset.x * (columncount - index - 1);

// float y = pos.y - cellsize.y - celloffset.y;

// v = new vector2(x, y);

//}

//debug.logerror("++++++++++++++ " + pos+ " "+ v);

rect.anchoredposition = v;

rect.setasfirstsibling();

}

// 鼠标上滑时,显示当前cell的数据。同时记录数据段的序号递增。

void showrestcelldata(image cell, int index)

{

if (tailnum< data.count-1)

{

debug.logerror("当前的序号是::::" + tailnum);

tailnum++;

headnum++;

cell.sprite = data[tailnum];

}

}

void showpreviouscelldata(image cell, int index)

{

if (headnum > 0)

{

debug.logerror("当前的序号是::::" + headnum);

tailnum--;

headnum--;

cell.sprite = data[headnum];

}

}

// 轮换的函数。每次乱换一行的cell。

void loopscrolview(list<sprite> data)

{

setcontentsize(0, 1);

loopcount++;

recttransform rect2 = content.getchild(content.childcount - 1).getcomponent<recttransform>();

for (int i = 0; i < columncount; i++)

{

gameobject obj = f_cellquee.dequeue() as gameobject;

recttransform rect = obj.getcomponent<recttransform>();

showrestcelldata(obj.getcomponent<image>(), i);

setbottomcellposition(i, rect, rect2.anchoredposition);

f_cellquee.enqueue(obj);

}

}

}

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

原文链接:https://blog.csdn.net/Tong1993222/article/details/80163764

本文链接:https://my.lmcjl.com/post/8961.html

展开阅读全文

4 评论

留下您的评论.