摘要：無論是跑馬燈新聞標題還是餓了么的導航欄，它們的作用都是一樣的，那就是復用有限的屏幕空間，展示更為豐富的內(nèi)容。最后附上源碼的地址參考文章之的簡單使用仿淘寶首頁的淘寶頭條垂直滾動仿餓了么首頁導航欄

在淘寶App的首頁中間位置，有一塊小小的地方在不知疲倦地循壞滾動著頭條標題（見下圖的紅框區(qū)域），這樣的設計無疑能夠在有限的手機屏幕上展示更豐富的內(nèi)容。而實現(xiàn)這一功能需要用到的控件就是我在上一篇文章中提到的ViewFlipper控件（詳見“參考文章”）。在網(wǎng)上看到一篇博客是用自定義ViewFlipper實現(xiàn)的，但我卻想起了我在實現(xiàn)餓了么導航欄時的思路：既然ViewFlipper的每個視圖最多只有兩個新聞標題，那我們可以先將標題兩兩分組（奇數(shù)的話最后一個多帶帶為一組），每組創(chuàng)建一個視圖，這樣就計算出了需要創(chuàng)建多少個視圖，然后再在每個視圖中加載數(shù)據(jù)就可以了。這樣的話，直接用原生的ViewFlipper就可以做到了。

創(chuàng)建一個MarqueeNewsActivity，其布局文件如下
activity_marquee_news.xml

再創(chuàng)建ViewFlipper的視圖布局，也就是新聞標題的布局。一共兩個線性布局，每個放置一個新聞標題。由于第二個可能需要消失，所以設置ID。
title_view.xml

標簽的背景就是一個紅色的邊框，也很簡單：

編寫完布局之后，下面就來編寫代碼了。

代碼都是按照前面說到的思路寫的，我在必要的地方也加了注釋，相信大家讀起來不難理解。要注意的是新聞標題數(shù)目可能是奇數(shù)，這樣最后一個視圖就只有一個標題。為了美觀，我們需要讓第二個線性布局消失掉，所以要加一個判斷條件。ViewFlipper的視圖進入和退出是通過動畫來設置的，大家也可以根據(jù)需要增加我們需要的動畫效果。
MarqueeNewsActivity

public class MarqueeNewsActivity extends AppCompatActivity {
    private Context context;
    private ViewFlipper viewFlipper;
    private List titles;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        context = this;
        viewFlipper = (ViewFlipper) findViewById(R.id.viewFlipper);
        initData();
        setViews();
    }

    /**
     * 初始化新聞標題數(shù)據(jù)
     */
    private void initData() {
        titles = new ArrayList();
        titles.add("日本老年犯罪嚴重，監(jiān)獄成老人無奈歸宿");
        titles.add("美機闖香港空域");
        titles.add("大學教授亮工資條");
        titles.add("英國空軍轟炸IS");
        titles.add("三連敗收官！柯潔再負AlphaGo，人機大戰(zhàn)遭零封");
        titles.add("女子爬山遭雷劈暈");
        titles.add("電信詐騙現(xiàn)新騙局");
    }

    /**
     * 為每一頁設置視圖
     */
    private void setViews() {
        if (titles.size() > 0) {
            //計算ViewFlipper視圖的數(shù)目
            int viewNum = titles.size() / 2 + 1;
            for (int i = 0; i < viewNum; i++) {
                //每一個視圖的第一個新聞標題中集合中的下標值
                final int position = i * 2;
                View itemView = View.inflate(context, R.layout.item_view, null);
                TextView tvTitle1 = (TextView) itemView.findViewById(R.id.tv_title1);
                TextView tvTitle2 = (TextView) itemView.findViewById(R.id.tv_title2);
                LinearLayout ll = (LinearLayout) itemView.findViewById(R.id.ll_second);
                tvTitle1.setText(titles.get(position));

                //判斷第二行是否有數(shù)據(jù)
                if (position + 1 < titles.size()) {
                    tvTitle2.setText(titles.get(position + 1));
                } else {
                    //表示該視圖的第二個標題沒有數(shù)據(jù)，隱藏第二行布局
                    ll.setVisibility(View.GONE);
                }

                //標題1的點擊事件
                tvTitle1.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(context, titles.get(position), Toast.LENGTH_SHORT).show();
                    }
                });

                //標題2的點擊事件
                tvTitle2.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(context, titles.get(position + 1), Toast.LENGTH_SHORT).show();
                    }
                });

                viewFlipper.addView(itemView);
            }
            //視圖進入動畫
            viewFlipper.setInAnimation(context, R.anim.news_in);
            //視圖退出動畫
            viewFlipper.setOutAnimation(context, R.anim.news_out);
            //自動開始滾動
            viewFlipper.setAutoStart(true);
            //視圖的切換間隔
            viewFlipper.setFlipInterval(3000);
//            viewFlipper.startFlipping();
        }
    }
}

順便放一下動畫文件吧。
new_in.xml

new_out.xml的代碼類似，只需要將fromYDelta的值改為0，toYDelta的值改為-100%p就可以了。

效果如下：

都說編程最重要的是思想，現(xiàn)在就來抽取和總結(jié)一下我學習到的思想，盡管看起來還是很稚嫩，但畢竟也是我前進路上的一個腳印。

無論是跑馬燈新聞標題還是餓了么的導航欄，它們的作用都是一樣的，那就是“復用”有限的屏幕空間，展示更為豐富的內(nèi)容。它們有著以下的共同點：

將一定數(shù)量的數(shù)據(jù)分配在多個視圖（View）中展示；

每個數(shù)據(jù)的類型都是一樣的，比如餓了么導航欄中的每個數(shù)據(jù)單元就是一張圖片和幾個文字；

每一個視圖的內(nèi)容雖然不一樣，但每一個視圖的布局都是一樣的（消失或者隱藏的子布局也算在內(nèi)）；

每一個視圖內(nèi)的最小數(shù)據(jù)單元（item）的布局也是一樣的。

打個比方，就好像我們在信紙上寫作文一樣，每一頁的方格數(shù)目都是固定的，方格的大小也是一樣的，當一頁的方格用完后，就另起一頁再寫。其實這也有點像ListView的分頁加載，可以將每一個視圖都當成一頁，一頁放不下就一頁一頁地加載。這里實際上是復用了View的布局和item的布局了。

思想指導行動，遇到符合上面特征的數(shù)據(jù)時，我們就可以用分頁的思想按照下面的步驟一步步來：

編寫頁面視圖（View）的布局和數(shù)據(jù)單元（item）的布局；

計算item的個數(shù)；

確定每一個View中的item數(shù)目，對item進行分組

根據(jù)View中的item數(shù)目計算需要的View數(shù)目；

創(chuàng)建每一個View（一般使用for循環(huán)）；

將數(shù)據(jù)填充至每一個item中

考慮item數(shù)目（比如單數(shù)與奇數(shù)）對View布局的影響。

大體的步驟就是這樣了，實際運用中可能會稍有不同，不必太過拘泥，只要有這種思想就可以了。

文章到這里就寫完了，這點小小的總結(jié)希望能對大家有點幫助，也希望能拋磚引玉。最后補充一點，如果你需要在項目中多次用到這種效果的話，那么可以看看我在參考文章一節(jié)中列出的博客，使用自定義控件的方法來寫，如果就一兩處用到，那么用原生的ViewFlipper就足夠了。

最后附上源碼的GitHub地址：
ViewFlipperDemo

Android之ViewFlipper的簡單使用
仿淘寶首頁的淘寶頭條View垂直滾動
仿餓了么首頁導航欄（ViewPager）