一.前言
今天实现开发者头条APP的首页。是本系列的第三篇文章,效果图如下:
从gif动态效果图中我们可以看出,最外层有三个tab(精选,订阅,发现),在精选界面顶部有一个轮播的图片广告,广告下面是一个精选文章列表。
二.外层三个tab实现
我这里用Viewpager实现的,可以左右滑动,灵活的隐藏下面fragment的显示隐藏。
1.布局文件
布局文件比较简单,上面包涵三个TextView的RelativeLayout + 下面的ViewPager
<code class="hljs xml has-numbering"><span class="hljs-pi"><?xml version="1.0" encoding="utf-8"?></span> <span class="hljs-tag"><<span class="hljs-title">RelativeLayout</span> <span class="hljs-attribute">xmlns:android</span>=<span class="hljs-value">"http://schemas.android.com/apk/res/android"</span> <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"match_parent"</span> <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"match_parent"</span> <span class="hljs-attribute">android:background</span>=<span class="hljs-value">"@color/white_normal"</span>></span> <span class="hljs-tag"><<span class="hljs-title">RelativeLayout </span> <span class="hljs-attribute">android:id</span>=<span class="hljs-value">"@+id/ll_title"</span> <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"match_parent"</span> <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"44dp"</span> ></span> <span class="hljs-tag"><<span class="hljs-title">LinearLayout </span> <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"match_parent"</span> <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"match_parent"</span> <span class="hljs-attribute">android:background</span>=<span class="hljs-value">"@color/main_color"</span> <span class="hljs-attribute">android:orientation</span>=<span class="hljs-value">"horizontal"</span> ></span> <span class="hljs-tag"><<span class="hljs-title">TextView </span> <span class="hljs-attribute">android:id</span>=<span class="hljs-value">"@+id/tv_selected"</span> <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"0dp"</span> <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"wrap_content"</span> <span class="hljs-attribute">android:layout_gravity</span>=<span class="hljs-value">"center_vertical"</span> <span class="hljs-attribute">android:layout_weight</span>=<span class="hljs-value">"1"</span> <span class="hljs-attribute">android:gravity</span>=<span class="hljs-value">"center_horizontal"</span> <span class="hljs-attribute">android:text</span>=<span class="hljs-value">"精选"</span> <span class="hljs-attribute">android:textColor</span>=<span class="hljs-value">"@drawable/main_title_txt_sel"</span> /></span> <span class="hljs-tag"><<span class="hljs-title">TextView </span> <span class="hljs-attribute">android:id</span>=<span class="hljs-value">"@+id/tv_subscribe"</span> <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"0dp"</span> <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"wrap_content"</span> <span class="hljs-attribute">android:layout_gravity</span>=<span class="hljs-value">"center_vertical"</span> <span class="hljs-attribute">android:layout_weight</span>=<span class="hljs-value">"1"</span> <span class="hljs-attribute">android:gravity</span>=<span class="hljs-value">"center_horizontal"</span> <span class="hljs-attribute">android:text</span>=<span class="hljs-value">"订阅"</span> <span class="hljs-attribute">android:textColor</span>=<span class="hljs-value">"@drawable/main_title_txt_sel"</span> /></span> <span class="hljs-tag"><<span class="hljs-title">TextView </span> <span class="hljs-attribute">android:id</span>=<span class="hljs-value">"@+id/tv_find"</span> <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"0dp"</span> <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"wrap_content"</span> <span class="hljs-attribute">android:layout_gravity</span>=<span class="hljs-value">"center_vertical"</span> <span class="hljs-attribute">android:layout_weight</span>=<span class="hljs-value">"1"</span> <span class="hljs-attribute">android:gravity</span>=<span class="hljs-value">"center_horizontal"</span> <span class="hljs-attribute">android:text</span>=<span class="hljs-value">"发现"</span> <span class="hljs-attribute">android:textColor</span>=<span class="hljs-value">"@drawable/main_title_txt_sel"</span> /></span> <span class="hljs-tag"></<span class="hljs-title">LinearLayout</span>></span> <span class="hljs-tag"><<span class="hljs-title">View </span> <span class="hljs-attribute">android:id</span>=<span class="hljs-value">"@+id/view_indicator"</span> <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"15dp"</span> <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"2dp"</span> <span class="hljs-attribute">android:layout_alignParentBottom</span>=<span class="hljs-value">"true"</span> <span class="hljs-attribute">android:background</span>=<span class="hljs-value">"@color/white_normal"</span> /></span> <span class="hljs-tag"></<span class="hljs-title">RelativeLayout</span>></span> <span class="hljs-tag"><<span class="hljs-title">android.support.v4.view.ViewPager </span> <span class="hljs-attribute">android:id</span>=<span class="hljs-value">"@+id/viewpager_home"</span> <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"match_parent"</span> <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"match_parent"</span> <span class="hljs-attribute">android:layout_below</span>=<span class="hljs-value">"@+id/ll_title"</span>/></span> <span class="hljs-tag"></<span class="hljs-title">RelativeLayout</span>></span></code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li><li>60</li><li>61</li><li>62</li></ul><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li><li>60</li><li>61</li><li>62</li></ul>
2.初始化三个Fragment 并且填充到ViewPager,给ViewPager设置改变监听。
<code class="hljs avrasm has-numbering"> vPager = (ViewPager) rootView<span class="hljs-preprocessor">.findViewById</span>(R<span class="hljs-preprocessor">.id</span><span class="hljs-preprocessor">.viewpager</span>_home)<span class="hljs-comment">;</span> SelectedFragment selectedFragment=new SelectedFragment()<span class="hljs-comment">;</span> SubscribeFragment subscribeFragment=new SubscribeFragment()<span class="hljs-comment">;</span> FindFragment findFragment=new FindFragment()<span class="hljs-comment">;</span> list<span class="hljs-preprocessor">.add</span>(selectedFragment)<span class="hljs-comment">;</span> list<span class="hljs-preprocessor">.add</span>(subscribeFragment)<span class="hljs-comment">;</span> list<span class="hljs-preprocessor">.add</span>(findFragment)<span class="hljs-comment">;</span> adapter = new FragmentAdapter(getActivity()<span class="hljs-preprocessor">.getSupportFragmentManager</span>(),list)<span class="hljs-comment">;</span> vPager<span class="hljs-preprocessor">.setAdapter</span>(adapter)<span class="hljs-comment">;</span> vPager<span class="hljs-preprocessor">.setOffscreenPageLimit</span>(<span class="hljs-number">2</span>)<span class="hljs-comment">;</span> vPager<span class="hljs-preprocessor">.setCurrentItem</span>(<span class="hljs-number">0</span>)<span class="hljs-comment">;</span> vPager<span class="hljs-preprocessor">.setOnPageChangeListener</span>(pageChangeListener)<span class="hljs-comment">;</span></code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li></ul><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li></ul>
3.FragmentAdapter.java
继承FragmentStatePagerAdapter,Viewpager填充适配器,实现起来很简单。
<code class="hljs java has-numbering"><span class="hljs-javadoc">/** * ViewPager适配器 *<span class="hljs-javadoctag"> @author</span> ansen *<span class="hljs-javadoctag"> @create</span> time 2016-04-18 */</span> <span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">FragmentAdapter</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">FragmentStatePagerAdapter</span> {</span> <span class="hljs-keyword">private</span> List<Fragment> list; <span class="hljs-keyword">public</span> <span class="hljs-title">FragmentAdapter</span>(FragmentManager fm, List<Fragment> list) { <span class="hljs-keyword">super</span>(fm); <span class="hljs-keyword">this</span>.list = list; } <span class="hljs-keyword">public</span> <span class="hljs-title">FragmentAdapter</span>(FragmentManager fm) { <span class="hljs-keyword">super</span>(fm); } <span class="hljs-annotation">@Override</span> <span class="hljs-keyword">public</span> Fragment <span class="hljs-title">getItem</span>(<span class="hljs-keyword">int</span> arg0) { <span class="hljs-keyword">return</span> list.get(arg0); } <span class="hljs-annotation">@Override</span> <span class="hljs-keyword">public</span> <span class="hljs-keyword">int</span> <span class="hljs-title">getCount</span>() { <span class="hljs-keyword">return</span> list.size(); } }</code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li></ul><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li></ul>
4.指示器初始化
当我们Viewpager滑动的时候需要滑动指示器,并且指示器的宽度占屏幕的三分之一,所以我们需要在activity创建的时候给指示器赋值哦,并且移动到起始位置。
<code class="hljs cs has-numbering"> <span class="hljs-keyword">private</span> <span class="hljs-keyword">void</span> <span class="hljs-title">initCursorPosition</span>(){ LayoutParams layoutParams=viewIndicator.getLayoutParams(); layoutParams.width=screenWidth/<span class="hljs-number">3</span>; viewIndicator.setLayoutParams(layoutParams); TranslateAnimation animation = <span class="hljs-keyword">new</span> TranslateAnimation(-screenWidth/<span class="hljs-number">3</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0</span>); animation.setFillAfter(<span class="hljs-keyword">true</span>); viewIndicator.startAnimation(animation); }</code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul>
5.Viewpager切换时应该做什么?
1).移动指示器
2).改变文字颜色
3).设置当前选中,指示器移动的时候需要用到。
<code class="hljs java has-numbering"> <span class="hljs-keyword">private</span> OnPageChangeListener pageChangeListener=<span class="hljs-keyword">new</span> OnPageChangeListener() { <span class="hljs-annotation">@Override</span> <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onPageSelected</span>(<span class="hljs-keyword">int</span> index){ translateAnimation(index);<span class="hljs-comment">//移动指示器</span> changeTextColor(index);<span class="hljs-comment">//改变文字颜色</span> currentIndex=index;<span class="hljs-comment">//设置当前选中</span> } <span class="hljs-annotation">@Override</span> <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onPageScrolled</span>(<span class="hljs-keyword">int</span> arg0, <span class="hljs-keyword">float</span> arg1, <span class="hljs-keyword">int</span> arg2) {} <span class="hljs-annotation">@Override</span> <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onPageScrollStateChanged</span>(<span class="hljs-keyword">int</span> arg0) {} };</code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li></ul><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li></ul>
6.指示器移动方法translateAnimation
传入一个下标判断当前位置,然后判断上次的位置,知道从哪里移动到哪个位置,然后开启Android自带的移动动画。
<code class="hljs cs has-numbering"> <span class="hljs-keyword">private</span> <span class="hljs-keyword">void</span> <span class="hljs-title">translateAnimation</span>(<span class="hljs-keyword">int</span> index){ TranslateAnimation animation = <span class="hljs-keyword">null</span>; <span class="hljs-keyword">switch</span> (index){ <span class="hljs-keyword">case</span> <span class="hljs-number">0</span>:<span class="hljs-comment">//订阅->精选</span> animation=<span class="hljs-keyword">new</span> TranslateAnimation((screenWidth/<span class="hljs-number">3</span>),<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0</span>); <span class="hljs-keyword">break</span>; <span class="hljs-keyword">case</span> <span class="hljs-number">1</span>:<span class="hljs-comment">//</span> <span class="hljs-keyword">if</span>(<span class="hljs-number">0</span>==currentIndex){<span class="hljs-comment">//精选->订阅</span> animation=<span class="hljs-keyword">new</span> TranslateAnimation(<span class="hljs-number">0</span>,screenWidth/<span class="hljs-number">3</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0</span>); }<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span>(<span class="hljs-number">2</span>==currentIndex){<span class="hljs-comment">//发现->订阅</span> animation=<span class="hljs-keyword">new</span> TranslateAnimation((screenWidth/<span class="hljs-number">3</span>)*<span class="hljs-number">2</span>,screenWidth/<span class="hljs-number">3</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0</span>); } <span class="hljs-keyword">break</span>; <span class="hljs-keyword">case</span> <span class="hljs-number">2</span>:<span class="hljs-comment">//订阅-》发现</span> animation=<span class="hljs-keyword">new</span> TranslateAnimation(screenWidth/<span class="hljs-number">3</span>,(screenWidth/<span class="hljs-number">3</span>)*<span class="hljs-number">2</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0</span>); <span class="hljs-keyword">break</span>; } animation.setFillAfter(<span class="hljs-keyword">true</span>); animation.setDuration(<span class="hljs-number">300</span>); viewIndicator.startAnimation(animation); }</code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li></ul><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li></ul>
7.获取屏幕宽高
我这边把方法写在activity里面,在工作中大家最好把他放到工具类里面。
<code class="hljs cs has-numbering"> <span class="hljs-keyword">private</span> <span class="hljs-keyword">void</span> <span class="hljs-title">getScreenSize</span>(Activity context) { DisplayMetrics dm = <span class="hljs-keyword">new</span> DisplayMetrics(); context.getWindowManager().getDefaultDisplay().getMetrics(dm); screenWidth = dm.widthPixels; screenHeight = dm.heightPixels; }</code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul>
三.”精选” Fragment实现
从整体来看,就是一个ListView,顶部轮播是ListView的头部。头部轮播也是用的ViewPager实现,起始这里跟我们第一篇文章讲的开发者头条APP启动页实现原理很相似。然后再加一个定时器隔一段时间设置ViewPager的当前页面即可。
说明:我们这里的图片用的是静态的,一个商业APP轮播图片肯定是从服务器获取的,开发者头条app就是从服务器获取。
1.头布局文件
就是一个ViewPager+装载点点点的LinearLayout 然后外层布局设置一个高度200dp
<code class="hljs xml has-numbering"><span class="hljs-pi"><?xml version="1.0" encoding="utf-8"?></span> <span class="hljs-tag"><<span class="hljs-title">LinearLayout</span> <span class="hljs-attribute">xmlns:android</span>=<span class="hljs-value">"http://schemas.android.com/apk/res/android"</span> <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"match_parent"</span> <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"match_parent"</span> <span class="hljs-attribute">android:orientation</span>=<span class="hljs-value">"vertical"</span> ></span> <span class="hljs-tag"><<span class="hljs-title">RelativeLayout </span> <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"wrap_content"</span> <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"200dp"</span> ></span> <span class="hljs-tag"><<span class="hljs-title">android.support.v4.view.ViewPager </span> <span class="hljs-attribute">android:id</span>=<span class="hljs-value">"@+id/viewpager"</span> <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"match_parent"</span> <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"match_parent"</span> /></span> <span class="hljs-tag"><<span class="hljs-title">TextView </span> <span class="hljs-attribute">android:id</span>=<span class="hljs-value">"@+id/tv_content"</span> <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"wrap_content"</span> <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"wrap_content"</span> <span class="hljs-attribute">android:layout_alignParentBottom</span>=<span class="hljs-value">"true"</span> <span class="hljs-attribute">android:layout_marginBottom</span>=<span class="hljs-value">"10dp"</span> <span class="hljs-attribute">android:layout_marginLeft</span>=<span class="hljs-value">"5dp"</span> <span class="hljs-attribute">android:text</span>=<span class="hljs-value">"公众号:ansen_666"</span> /></span> <span class="hljs-tag"><<span class="hljs-title">RelativeLayout </span> <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"fill_parent"</span> <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"wrap_content"</span> <span class="hljs-attribute">android:orientation</span>=<span class="hljs-value">"vertical"</span> ></span> <span class="hljs-tag"><<span class="hljs-title">LinearLayout </span> <span class="hljs-attribute">android:id</span>=<span class="hljs-value">"@+id/viewGroup"</span> <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"fill_parent"</span> <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"wrap_content"</span> <span class="hljs-attribute">android:layout_alignParentBottom</span>=<span class="hljs-value">"true"</span> <span class="hljs-attribute">android:layout_marginBottom</span>=<span class="hljs-value">"5dp"</span> <span class="hljs-attribute">android:gravity</span>=<span class="hljs-value">"center_horizontal"</span> <span class="hljs-attribute">android:orientation</span>=<span class="hljs-value">"horizontal"</span>/></span> <span class="hljs-tag"></<span class="hljs-title">RelativeLayout</span>></span> <span class="hljs-tag"></<span class="hljs-title">RelativeLayout</span>></span> <span class="hljs-tag"></<span class="hljs-title">LinearLayout</span>></span></code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li></ul><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li></ul>
2.可滑动的静态图片实现
初始化轮播的Viewpager,初始化点点点View,并且加入线性布局,最后把整个布局加入ListView头部。
<code class="hljs avrasm has-numbering">viewPager = (ViewPager)headView<span class="hljs-preprocessor">.findViewById</span>(R<span class="hljs-preprocessor">.id</span><span class="hljs-preprocessor">.viewpager</span>)<span class="hljs-comment">;</span> selectedPagerAdapter=new SelectedPagerAdapter(getActivity(),carousePagerSelectView)<span class="hljs-comment">;</span> viewPager<span class="hljs-preprocessor">.setOffscreenPageLimit</span>(<span class="hljs-number">2</span>)<span class="hljs-comment">;</span> viewPager<span class="hljs-preprocessor">.setCurrentItem</span>(<span class="hljs-number">0</span>)<span class="hljs-comment">;</span> viewPager<span class="hljs-preprocessor">.setOnPageChangeListener</span>(onPageChangeListener)<span class="hljs-comment">;</span> viewPager<span class="hljs-preprocessor">.setAdapter</span>(selectedPagerAdapter)<span class="hljs-comment">;</span> ViewGroup group = (ViewGroup) headView<span class="hljs-preprocessor">.findViewById</span>(R<span class="hljs-preprocessor">.id</span><span class="hljs-preprocessor">.viewGroup</span>)<span class="hljs-comment">;// 初始化底部显示控件</span> tips = new ImageView[<span class="hljs-number">3</span>]<span class="hljs-comment">;</span> for (int i = <span class="hljs-number">0</span><span class="hljs-comment">; i < tips.length; i++){</span> ImageView imageView = new ImageView(getActivity())<span class="hljs-comment">;</span> if (i == <span class="hljs-number">0</span>) { imageView<span class="hljs-preprocessor">.setBackgroundResource</span>(R<span class="hljs-preprocessor">.drawable</span><span class="hljs-preprocessor">.page</span>_indicator_focused)<span class="hljs-comment">;</span> } else { imageView<span class="hljs-preprocessor">.setBackgroundResource</span>(R<span class="hljs-preprocessor">.drawable</span><span class="hljs-preprocessor">.page</span>_indicator_unfocused)<span class="hljs-comment">;</span> } tips[i] = imageView<span class="hljs-comment">;</span> LinearLayout<span class="hljs-preprocessor">.LayoutParams</span> layoutParams = new LinearLayout<span class="hljs-preprocessor">.LayoutParams</span>(new ViewGroup<span class="hljs-preprocessor">.LayoutParams</span>(LayoutParams<span class="hljs-preprocessor">.WRAP</span>_CONTENT,LayoutParams<span class="hljs-preprocessor">.WRAP</span>_CONTENT))<span class="hljs-comment">;</span> layoutParams<span class="hljs-preprocessor">.leftMargin</span> = <span class="hljs-number">10</span><span class="hljs-comment">;// 设置点点点view的左边距</span> layoutParams<span class="hljs-preprocessor">.rightMargin</span> = <span class="hljs-number">10</span><span class="hljs-comment">;// 设置点点点view的右边距</span> group<span class="hljs-preprocessor">.addView</span>(imageView, layoutParams)<span class="hljs-comment">;</span> } listView=(ListView) rootView<span class="hljs-preprocessor">.findViewById</span>(R<span class="hljs-preprocessor">.id</span><span class="hljs-preprocessor">.list</span>)<span class="hljs-comment">;</span> listView<span class="hljs-preprocessor">.addHeaderView</span>(headView)<span class="hljs-comment">;</span></code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li></ul><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li></ul>
3.如何实现轮播效果
我这边是用Timer+Handler实现,Timer用来计时,Handler用来更新UI。
注意事项:
1).在轮播的时候需要判断是否已经最后一页
2).更新UI需要在主线程。
<code class="hljs java has-numbering"> <span class="hljs-keyword">private</span> Timer timer; <span class="hljs-keyword">private</span> <span class="hljs-keyword">final</span> <span class="hljs-keyword">int</span> CAROUSEL_TIME = <span class="hljs-number">3000</span>;<span class="hljs-comment">//滚动间隔</span></code><ul class="pre-numbering" style=""><li>1</li><li>2</li></ul><ul class="pre-numbering" style=""><li>1</li><li>2</li></ul>
<code class="hljs cs has-numbering">timer = <span class="hljs-keyword">new</span> Timer(<span class="hljs-keyword">true</span>);<span class="hljs-comment">//初始化计时器</span> timer.schedule(task, <span class="hljs-number">0</span>, CAROUSEL_TIME);<span class="hljs-comment">//延时0ms后执行,3000ms执行一次 </span></code><ul class="pre-numbering" style=""><li>1</li><li>2</li></ul><ul class="pre-numbering" style=""><li>1</li><li>2</li></ul>
<code class="hljs cs has-numbering"> TimerTask task = <span class="hljs-keyword">new</span> TimerTask() { <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">run</span>() { handler.sendEmptyMessage(CAROUSEL_TIME); } };</code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
<code class="hljs cs has-numbering"> <span class="hljs-keyword">private</span> Handler handler=<span class="hljs-keyword">new</span> Handler(){ <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">handleMessage</span>(Message msg) { <span class="hljs-keyword">switch</span> (msg.what) { <span class="hljs-keyword">case</span> CAROUSEL_TIME: <span class="hljs-keyword">if</span>(currentIndex>=tips.length-<span class="hljs-number">1</span>){<span class="hljs-comment">//已经滚动到最后,从第一页开始</span> viewPager.setCurrentItem(<span class="hljs-number">0</span>); }<span class="hljs-keyword">else</span>{<span class="hljs-comment">//开始下一页</span> viewPager.setCurrentItem(currentIndex+<span class="hljs-number">1</span>); } <span class="hljs-keyword">break</span>; } }; };</code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li></ul><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li></ul>
4.其他
还有精品列表ListView列表的适配器,还有三个Tab点击改变文字颜色,还有显示圆形头像自定义的View,还有其他的一些布局文件的代码我就不一一贴出来了。。。有需要的自行下载源码.
四.源码下载
五.相关文章
带你实现开发者头条(一) 启动页实现
带你实现开发者头条(二) 实现左滑菜单
带你实现开发者头条APP(三) 首页实现
带你实现开发者头条APP(四) 首页优化(加入design包)
带你实现开发者头条APP(五)–RecyclerView下拉刷新上拉加载
推荐下自己创建的Android开发 QQ群: 202928390欢迎大家的加入.
如果你想第一时间看我们的后期文章,扫码关注公众号,每周不定期推送Android开发实战教程文章,你还等什么,赶快关注吧,学好技术,出任ceo,赢取白富美。。。。
Android开发666 - 安卓开发技术分享
扫描二维码加关注