day05_92_尚硅谷_硅谷p2p金融_使用StellarMap组件实现随机显示效果

好嗯，那我们就按照这个顺序接着往下来写啊，随机飞入效果的一个实现，这呢，我们做的就是推荐理财对应的这个fragment。嗯，效果呢，就是这样子的，我们可以先看一下。啊进来投资，诶投资的时候呢，我们这时候一打开它默认加载呢，是我们这个全部理财这个项，诶而全部理财对应的这个fragment呢，是需要联网的，所以刚才看到一个正在加载一个效果，而我们这个推荐理财这一项的话呢，不需要联网，不需要联网的话呢，我一点开它直接呢就加载过来。这呢，就我们看到这样的一些数据啊，随机显示的就是它的这个位置啊，颜色呀，字体大小啊，这个我们都可以让他做一个在一定范围之内的是一个随机。然后的话呢，我这个往上推一下啊，往下这个滑一下，这个可以让它这个效果呢，就进行一个变化啊，就是一个随机显示的啊，点击的时候呢，可以具体给每一个就是一个test view了，去添加这个点击事件。

啊，这都可以。嗯，具体的用户点击的话呢，可以专门看一下他这一项里面是有什么样的这个理财一些产品的说明啊，是这样的一个情况，这呢就是属于一种布局结构了啊哎，热门理财的话呢，这是一个流式布局。一个是我们随后呢，到时候再说这个结构好，那首先呢，我们来看一下这个结构呢，该怎么去实现啊。嗯，这个流失布局的话呢，就是如果我们自己呢，一点点再去定义，再去写，这还是比较复杂的这个流失布局啊，所以这块的话呢，我们就类似于框架一样啊，把它直接拿过来我们去使用一下就可以了。啊，这呢，我们找到这个已经做好的这个项目里边找到这个UI，这个UI下边呢，有一个叫RY layout下边呢有这样的几个类。啊，整个呢，把这个文件夹给它拷贝过来，这呢里边就是都是关于流失布局的啊，不是流失布局这个随机飞入的，这个算是布局或者叫效果的。

粘过来放在我们的这个一下。好，这样这就拿过来了啊，嗯，拿过来以后的话呢，呃说了这也是一种布局效果了，它这呢起个名字叫rh layout啊，随机飞入的一个layta，呃，我们主要要用的它其中的一个，这个自定义的一个视图，谁呢就是这个。叫STEM啊，点击一进来，它呢是继承于frame的。啊，就说白了，它其实还是一个真布局，嗯，在这个真布局上呢，我们去画相应的这些数据啊，行，那这个STEM呢，其实就你就把它可以看成一个现成的一个自定义组件了，那我们就可以在我们的product product recommend推荐理财当中去使用一下。啊，这个呢，我们打开它对应的布局。

这个就是。嗯，这个就是，那我们需要做的呢，就是把它呢做个替换。使用一下我们刚才说的这个tear map。啊，就它宽度充满高度充满设置一个ID。STEM这张是我们的，嗯。我就我这样这样写一下吧。好保存一下，哎，这样的话呢，我们就在布局当中呢，给大家使用上了，嗯，使用上以后的话呢，接着回到我们的对应的这个布局的fragment这个层面，哎，我们在这个位置的auto shape的S一下加载。行加载过来，把现在的这两个呢，就直接干掉了，傅雷中已经声明过，嗯，然后呢，我们看一下该怎么去用啊，这个stand map呢，就是我们刚才看到了就是一个图了啊，或者就是准确的是一个布局了，那这个布局里边呢，需要呈现具体的这样的一些test view。

那你得涉及到去添加这些，看怎么用。那想一想，我们有一个布局，这个布局当中呢，还需要呈现具体的一些组件。我们一般怎么去给这个布局里边去添加组件呢？呃，有爱的是吧，我们在这呢，可以做一个小总结啊，想一下。是吧，哎，如何。那在这个。在布局中这个。加载显示啊，或者叫这样添加啊，这个子视图。哎，如何在布局中添加此视图，就是你有具体的一个可以看得到的一些视图了，那其实大方向上的话呢，算分几种呢。两种，哪两种？呃，一种静态的，一种动态的，其实可以这样是吧，哎，所以在静态的就是直接呢，在布局文件中。

啊，然后呢，以这种是不是标签的方式去添加呀。这也是我们非常常见的list view呢，里边有几个子示图，哎，我们直接呢，就在布局文件当中给你添加起来，呃，这呢都可以看成叫类似于我们像前面说的，呃，静态加载，动态加载，像昨天分享fragment啊，这呢你就可以看成是静态的。啊，静态的方式啊，啊，第二种呢，那就是动态的方式。那那我们就可以在在Java代码中。嗯，通过相应的一些方法，咱们去给他设置了啊，在Java代中呢，我们动态的去添加子视图。啊，那这呢，我们一般怎么用啊。哎，大家想就是是不是牛啊啊，其实这里边呢，我们还可以再分成两种情况，一种情况的话呢，既然你要添加此视图，说明你一定是一个布局了，所以呢，我们就可以是不是通过I的view的方式去添加了。

呃，因为and本身，哎，或者说一定会有这个方法吗。差差不多呀。嗯，一定会有，为什么一定会有。一个接口是吧，哎，对这我们前面的话呢，就是带大家也看过这个源码了啊，哎，你这个布局的话呢，一定直接或间接的继承于VIVO group。谁不替一下，首先呢，它一定直接或间接的就跑到这个view group，这呃，View group呢，又实现了这个view manager。那view manager里边呢，它就有一个爱的方法。所以说呢，只要你是一个布局，就一定会有ADD view的方法，可以去添加这个具体的测试图。啊，所以呢，我们这里边第一种方，第一个具体的细节的啊，第一个方式就是还可以通过ADD view的方式呢，去一个一个的添加。

行，那除了这种方式之外，你想一想，你还用过别的方式，也是在或者说类似于是在这个代码层面啊，而不是在我们这个布局文件当中去写明的。还有其他什么方式啊。诶对哈，就是你像我们说Lisa view当中使用的话呢，你这个数据就特别多了，你要是自己一个一个ADD view，像一个新闻类的里边，你往下摔，可能几万条新闻，你自己一个一个view，那就累死了。所以呢，我们说ADD view呢，自己可以加没问题，那能不能说呃，有一些整个这个布局结构比较类似的，诶我们就设置设置一个机制，然后让他自动的帮我们这样去填。这其实就像Li view里边我们使用的是不是doctor一样。

哎，所以说我们还有一种方式去添加这个子示图呢，就是像list view啊，Great view啊，乃至于说这个recycle view啊，这个里边呢，我们可以通过去就是设置啊adapter这个方式啊，包括理包括这个view是吧？呃，设置adapt这个方式。然后呢，是不是其实就像是一个批量的添加法。或者要批量的装配数据。能理解吧？嗯，就是这里边呢，你像我们上面你添加一个视图，我可以呢，现在加一个test，一会呢，我又加一个imagine view。就你的这个视图呢，你想加什么就加什么。啊，只要你是个will，那就都可以加。啊，但是下边这个单这种批量加的话呢，它有一个要求。什么要求啊？对，就是你加的这一项一项这个类型是不是得一样啊。哎，都是这个布局，这其实就是我们说的那个item的那个layout了，嗯，然后数据呢，也全都是针对于这个布局的这个数据，所以呢，我们就可以呃批量的让他去往里边这样去装，嗯，你可以先告诉我这个数据呢，有几合中有多少条，那我就给你装这么多，当然不是说一下就装好了，那你你不可见到可见的时候呢，我才给你装，不可见的那些呢，你从来不出现，我也就不帮你装，所以呢，就还可以通过data这样设置的方式呢去装数据。

那其实的话呢，我们也就这么几种情况。啊，这就后边的，包括我们以前讲过的，总结一下，怎么呢，其实就是这样，好，那回归到我们这个问题当中啊，这个问题当中呢，我们这个叫start map STEM map呢，想呈现的效果呢，就是这样一个情况啊，那首先呢，我们没有在这个布局文件当中去添加。啊，因为布局文件中添加往往这个数据呢，相当于就是写死了。是这意思吧？布局文件中你写的这个结构，比如我写了四个子示图。那回头你改也改不了了，顶多你把这四个子视图的这个属性呢，可以动一动啊，那就是四个了，那这里边的话呢，我们就不在这个补给文件当中去声明这个子视图。

那就在Java代码里边，Java代码里边呢，那你要么呢，是不是就拿着这哥们一个一个的去艾特呀。哎，第二，哎，要不呢，你就这样一个人去艾特，那有几个呢，你就艾特几角形，那很显然我们这里边是不是都是t view。都是没有呢，你就想是不是这哥们儿可以批量的去加一下呀。哎，你看它确实呢，是设置了这个adapt。啊，其实呢，就是有这么个套路，你说stemma STEM map，这不是他定义好的吗？以后呢，如果你也有兴趣说我也定一些自定义的一些布局效果，那如果你这些数据呢，基本上都是一个套路的，你自己也可以就通过这种方式呢去设置。啊。好，这呢我去下了一个这个adapt，那我呢就需要传入一个adaptor，那这个adapter呢，到底是继承于谁，哪个adaptor得看一下F2。

那这里说你得记成一叫start map里边的。哎，继乘以人家啊，人家呢是一个接口行，那你这块呢，你就得往下边这呢，我就不写到那个单里了啊，我就说明到这个内部了，提供一个。哎，这个大会的一个时间类。OK啊好，那我这就写了class一个。Stella。嗯。And implement。Map点。嗯，这个啊。好，实验接口，重写接口当中的抽样方法。啊还不少呢，这就都给人家加过来啊，加过来以后呢，我们先把这个结构呢，来用一下啊，写到我们这个上面啊，就在这个位置。

哎，然后呢，这个单CTRLC啊，往这一扔CTRLS，嗯，这就可以了啊好，那设置的时候呢，就是为了告诉这个编译器，或者这个运行的时候啊呃，解析的时候呢，我应该怎么帮你去把数据装到这里边。啊，就是这样个问题，那只要涉及到这个待ER我们说了哈，你这样主要目的呢，还是为了加载这个子势图呢，这个子势图的话呢，你有界面中的一个呈现效果，那肯定会有一些数据在这里边的，那这个呢也是一样的道理，好搭这个作用呢，就是将数据。抓到具体的你要显示的这个视图当中。啊，那在我们这个问题当中呢，那就是text view。装到这个猜测里边，那你得有数据，哎，所以这个数据的话呢，我们就提前呢，先提供好。CTRLC。这样呢，我就把这个数据呢，占到最上面啊，相当于是提供装配的数据。

哎，数据有了，然后下边呢，就是你得有这个具体的这一个一个item，就是我们说的text view了，那接着我们就可以往下去重写这些方法，哎重写这些方法的话呢，这里边这个结构大概一看，发现好像也不是特别熟，那我们就一个一个来分析分析。首先第一个叫get group count。这一看，方小明是不是也差不多能够猜出来他的意思啊？就是获取一下你这个组的一个个数吧。嗯，这个什么意思呢？就是你看一下我们做好的这个这呢里边应该是有八个啊。这八项，然后呢，这个内容你大概看一下，然后我再划一下呢，这也是有八个，这个内容跟刚才这八个不一样。然后呢，再画。是不是就是刚才那个第一次显示的这bug了。哎，这呢，我们一共是有16个具体的test view，其实就两组。

啊，就是你这时候切换的时候呢，这两组之间不停的这样去去做一个切换了啊行，那我们这里边呢，跟他做的效果呢一样，我们呢也分成两组。啊，所以呢，就是获取组的个数啊。行，然后下一个。嗯，下一个的话呢，就是我每一个组里边有几项。对吧，那在我们这个问题中，如果嗯，期间你知道说这里边一共是16个了，那我就平均分一下，你要非常简单，期间这是不是直接存个八就可以了。当然你这个相当于跟你上面这个数据就相当于是给给写死了哈，那要不写死的话呢，你可以这样来写，比如说呢，呃，我们的如果啊，这个group是第一组。第一组的话呢，我们就return一下上面这个基数组呢，叫data塔啊，它的一个lengths属性再除以个二。就显示一半。

嗯，但是的话呢，这个一半有可能，你这个数组是不是是一个奇数啊长度。比如说15个。15个这个反过来是一个七吧。那那你这个是不是应该显示八个呀，那这怎么去表达，剩下的部分全部由第二组来显示啊。嗯，它点LA减去，哎，得塔点2S除以二，这样啊，嗯，好，这里边呢，就是返回每组中显示的数据的个数。诶这个呢也不困难啊，就这块儿呢，最好是这种动态的方式呢去描述。啊，你要偶数的话呢，像这16个就是八八，你要是15个，那就是七八这样的，好下一个。哎，下一个这个方法呢，是不是就比较眼熟了啊，是不是就是我们最关心的这个方法。

返回的是一个view，那就是你真正要呈现在这个布局界面上这具体的这样一个效果了。嗯，返回具体的一个view，那就是涉及到我们就像list view里边装备数据的这个view方法。好，这个呢，应该是我们最重头的一个方法了，这个我们可以等一下来写，先把后边这两个写一写。后边这两个的话呢，先第一个叫get next group on pen。一看就没见过。哎，没见过的话呢，这个F2下解释呢也有限，那你这个时候能做的事呢。百度一下。啊，百度的话呢，你就查查呢，你就可以查查这个TE map，像这个呢STEM map虽然是自定义的啊，但是一般情况下呢，大家都这么叫，就跟你说那个view holder一样，那view holder，其实你说我就叫holder，那也没人有意义，但家一般情况下大家都习惯叫这个view holder的啊，所以你关于这块呢，你可以说为安卓这个叫那叫。嗯，Steelar map，哎，关于它的使用，这就可以查一下啊，大家都叫steelar ma。

啊，你都可以这样去用，或者你看它这个英文特别多，因为你这写的都是英文，你可以写这个的使用。这个时候基本上你查的就都是中文的。那这是算小技巧嘛，是吧，你写作英文，它有时候就这个爬虫查到英文的数据就给你优先的给你推送了，哎，怎么去写飞猪的效果。是吧，是不是就跟咱们做的这个效果一样了。嗯。啊，哎，这个的话呢，我们就直接来说一下吧，Get next group on pen，它的这个意思，当然有的时候你网上查的时候呢，你发现其实有好多人写的是不对的啊。当然他不是说故意的，就他也不太清楚，嗯，可能在哪看到的，然后呢，就写上去了，你多看几个。哎，你加上你的这种强大的辨别能力是吧，挑一个这个这个最好最最正确的啊，它的意思呢，就是嗯，叫返回。

呃，下一组显示平移动画的这个组别。啊，叫下一组显示平移动画组别，但是这个方法的话呢，我们看到这个相应的深入到它这个源码里边，发现这个方法呢，从来没有在其他位置被调用过。就是不用不掉，就像是我们这个写这个listen view。哎，它的这个A单里边呢，不是也有个那个角开item ID吗。是吧，还记得吧，就是我们这个单贝不是有四个方法要重写吗？第三个那个。我们是不是一般也不用啊。哎，这个跟它一样啊，哎，就是这呢，我们通过就要查看源码，发现说此方法从未被调用。啊，对，所以呢。

就可以不重写了。不用管了。啊，那我这直接零了下一个。它呢就是返回呃，下一组显示，呃，这个呢，叫叫一个缩放了哈，显示缩放这个动画的组别。显示缩放。呃，动画的一个组别，他这个是什么情况呢？嗯，你比如说我这个进来。接下来你看我我这个呢，就我滑动一下啊，这其实就像是一个一开始是比较大的一个一个一个效果，突然就变成一个小的这个效果了，这就看成是一个缩放了，嗯，然后呢，就是呃，我现在一划。就变成那组，我再一发，这就是the next是什么？嗯。那你这时候应该什么呀。只要是零，不对。那就成了，我下一组就显示第零组啊，第零组你再划一下，下一组还显示第零组。

那你就切换不了了啊。那那就是说，如果你当前的这个group。哎，你要是第零组，我是不是就显示第一组啊，啊L的话呢，你就显示第零组呗。那就这样就行啊，就是让这两组呢，相互之间切换起来。哎，这样来写。好，那回过来我们重点呢，来说一下这个get view方法。嗯，Get view方法的话呢，就是返回具体的这样的一个view了，那在我们这个问题当中呢，咱们用的全是test view，所以这呢，我需要去创建一下这个test view啊。嗯，Text view，我现在在fragment当中get一下看提嘛。TV行，然后最终呢，我们需要返回的就是这个TV。那现在关键呢，就是给这个TV呢，去设置一些属性。

嗯，比如说TV啊，就像我们刚才看到的这样一个效果啊，首先考虑到的是不是设置它的这个文本数据啊。哎，文本数据呢，就来自于我们的这个集合数据数组。那这个数组的话呢，到底取哪一个。是不是取这个啊。来取它啊，哎，这里边这个position需要给大家说一下。因为我们这个问题当中呢，涉及到两组数据。两组数据，那第一组。那第一组这个数据应该就是我们从这个数数组当中，比如我们这儿呢，就是有16个啊，那第一组有八个。啊，那第二组的时候呢，那就是又八个，嗯，那如果我要显示第一组，那这个position当然大家应该比较清楚，是不是就从零到七啊，嗯，那我要这个图，如果是第二组呢。可能有同学就想着，这个position是不是就成了八到15了。

嗯，是确实从这个数组取的话呢，是八到15这一段，但是如果你这个要是第二组啊，这个仍然是从零到七的啊。啊，仍然是从零到七的，就是你每一组不同的这个组别的组的这个元素都是从零开始的交标，这个得注意一下，所以你这个时候写这个T吧，你你直接你写一下，说我这样写说data是点，嗯，怎么着呢，它不是点了啊，就是position。这样写行吗？是不是就不行了，哎，因为你每一个不同的组别position都是从零到七，那你这块写的其实相当于你第二组是不是显示的还是跟第一组一样的数据了，哎，所以这标示一下啊说嗯，不同的这个组别。嗯，这个position。都是从零开始的。其实也也也是应该是这样子的。

啊，那我第假设我这个第二组我想调第二个元素，那我肯定是position，我写的是一，你也不可能说我第二组想调第二个元素，我让你看一下第一组写了几个。那不太合适是吧，那相当于两个组是有点相关性了哈，那不对。嗯，那既然这样的话呢，那需要我们把这个集合，呃数组这个数据呢，给它拆成两个组，拆成两个组，然后呢，各自组别呢，用各自的这个组的这个数组数据。那就这样了啊，我们呢，在一上来的时候。啊，这呢，就声明两个具体的数组。呃，两个，这个叫子数组吧。Private。类型的。啊，这个呢，我们说负二叫万吧，哎，万。给他。贝塔等于又一个。

那四针这个数组这个长度的话呢，我就用这个叫贝塔斯点X除以二。然后再来一个。嗯，这个呢，应该用。是不是这个整个长度减去你这个一半的这个数据啊。就剩下的呗。要么呢是八八，要是奇数的话呢，就像七八这样的情况，哎，这两个里边呢，没有数据。我们可以在一开始上来的时候。就是应该初始化我们这个此数组的数据啊。在这啊，就是相当于我们从这个大的数组当中，把数据呢，都给它放到这个小的里面。这个怎么写？电力吧。It点。Les。近来。然后哎，如果你这个得塔是点less小于。

哎，不是给他点单词吗？哎，小于。点，但是不要。嗯，这个是不是你第一组的这个范围啊，从零到不能等于它的这个值。就是它的前一个值，哎，那我们这呢，就是呃，One贝塔I吧，等于。哎，贝塔，哎。对吧，那else。嗯，Else呢，就是我们第二个了。就是这这这这写错了。这个是兔。然后这个呢，我们怎么写这个I呢。或者练习爱情吗？Are you。这个I的话呢，人家这个数组你是不是应该从零开始啊，这个一上来这个I是不是就整的就比较大了。

不能让他写I这个，你要按照这个顺序来讲，就是当我这个I呢，等于这个LA除以二的时候，是不是才轮到你这呢？那你这个I上来，其实第一个数值最小的是应该就是它吧，那我应该怎么着啊。让你这个I是减去一下这个。这样的话呢，你这个这个数组第一个元素是不是就零了。对吧，嗯，然后后边等于。这有哪些？这9I吗？嗯，就这样啊啊，那你这个I的最后一个值是这个贝塔点lesss减一，就是你可以等到的最后一个值，嗯，得塔点lesss减一，你再减去这个数啊，那其实呢，就是这个集合里边就是对应的这个元素，当然是这个元素，这个是它的长度啊。你这不是塔点减去它。嗯，然后它的长度是这么多，那你这个最后一个角标不就是这正好有个减一吗。

哎，就正好是最后一个元素，哎，所以通过这样的方式呢，我就给这两个数组呢，都附上值了。啊，那附上值以后的话呢，再回到这个层面。嗯，我这呢需要设置这个文本内容这儿呢咋写。这你是不是要用哪个数组，全取决于你这个group呀。如果你是一个零，这就是第一组呗，Else，我们这就两组啊，所以我就一了。嗯，这个里边呢，TV.set test，这我们就从这个one这个数组里边取这个位置。啊，这儿呢。Test to。数组里边去和这位置，这是不是就设置这个文本呗。

来设置文本的一个内容。啊，那除了设置文本内容之外呢，还有其他的，比如说设置嗯字体的呃一个大小。设置字体的颜色啊，有这样的一些需求，那我们这呢，也可以去做一些这个设置TV.set字体的大小，Test size。嗯，Test size，嗯，T size的话呢，希望它这个字体大小呢有点区别，嗯，所以我们就可以做一个随机，嗯，随机的话呢，我们，呃其他方面呢，也可能会用，所以我呢就给它生命成一个属性了。Private。啊，等于另一个。好造好这样一个随机。嗯，随机的话呢，我们这儿看一下该怎么去写这个字体大小，如果完全的随机的话呢，可能这个字呢特别小，所以我可以先给它一个值。

先给个值，就是或者说呢，它是基于这个值的，你可以这个值的，你也可以直接呢在体现，它是跟具体的这个手机密度无关了啊对，我可以先这样一下，然后在这个基础之上。嗯，再怎么写呢，我就UI求点在DP这个，然后呢，我们使用这个RHYTHM.next一下，这比如我写一个。字体大小这样是不是整的字太大了？就写个五吧。结合。能理解这个意思吧？哎，这呢，这不取了一个是五以内的这个一个in的形的值啊。啊，然后呢，五再加上就是你这个最小是不是五啊。对，不至于说你直接光写这个，把这个删掉，这写个十，那可能这个字太小了，就嗯嗯，再接着设置字体的颜色，TV.set test color需要一个int型的color值，颜色呢应该各不相同，我们可以调color类中的这个方法。

2DB。随机的给我们设置进来三个颜色的随机数。然后拼接一下形成一种颜色，在这呢，最好就是随机一下啊。哎，RH这个对象点next in。嗯，这里边儿呢，就涉及到每一个颜色的这个取值范围。从多少到多少。对，你要是从那个16进制的这个角度呢，就是从零，零到FF，那从那个十进制的角度呢，就是从零到。255。嗯，FF呢，正好就是255。行，那这块我写的话呢，其实你可以写255，那写255的话呢，就怕它这个数量有点偏大。你要RDB都是写255的话呢，这个数要偏大的话呢，最后整合到一起。数越大越怎么着？

颜色就越重了，但是三个颜色如果都比较大的话呢，倾向于什么颜色就。哎，就白色了，所以这个字呢就不太清楚了，所以这个位置你可以稍微给它小一点，比如说写211。我这也写个211。或者说的话呢，你希望希望呢，整个这个色调呢，偏红色一点，那你就这个数写大一点，这些数呢，都可以设置的小一点，那整体随机出来的就偏向于红色。OK，然后呢，在我们这2DB方法中调一下。嗯，这样的就行。啊，这是设置这个颜色的，嗯，行，那我们就先考虑到呢，就是做这样的三个设置，那设置完以后呢，我们return一下这个TV。啊，那这时候呢，就相当于是返回了它了，那这个呢，又在我们这个adapt中写的，通过我们这个STEM呢，去调查这个adapt，那应该就可以显示了。

看一下能不能显示。那这时候呢，我们点击一下，然后看一下这个第二项。没有。按正常来讲的话呢，比如像一个list view，那只要设置这个，而且呢，大会都重启了，应该就没问题了，但是发现此时还不行啊，因为要想能够正确显示，还得再去调两个方法。哎，先把这个我们先停一下啊。