带你实现开发者头条APP(三) 首页实现

来源：互联网发布：网络招聘软件编辑：程序博客网时间：2024/04/27 22:25

一.前言

今天实现开发者头条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 - 安卓开发技术分享            扫描二维码加关注

Android开发666

0 0