唔，馬上就畢業了，最近回學校做論文畢設，程式碼基本放下了，公司的工作也沒跟著做，最近公司在催我回去，唉，畢業是個事，頭疼啊，只好在學校做開發了。哦了說回正題，今天要做類似淘寶淘搶購的導航欄，先看看淘寶的效果。

紅框裡的就是今天的主角了，在網上一頓好找，根本沒找到，連類似的都沒有，CSDN有一個資源要10積分，呵呵，你怎麼不去搶，看看評論都說垃圾還敢要這麼多積分，只好自己動手做了。事實證明：拿來主義不好做，還是得自己來。自己做也就用了半個多小時。來看看我做的^_^

自己做的也不差吧，下面來說說思路。這個用的是Android自帶的控制元件TabLayout，黑色的背景和紅色帶小三角的都是.9圖，不懂.9圖的可以自行百度。然後寫一個selector

<android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        app:tabBackground="@drawable/tab_background"
        app:tabGravity="center"
        app:tabIndicatorColor="@color/fragment_money_red"
        app:tabIndicatorHeight="0dp"
        app:tabMinWidth="98dp"
        app:tabMode="scrollable"
        app:tabPaddingBottom="3dp"
        app:tabSelectedTextColor="@color/white"
        app:tabTextAppearance="@style/TabLayoutTextStyle"
        app:tabTextColor="@color/white" />
 

下面奉上全部程式碼，先看佈局檔案的：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        app:tabBackground="@drawable/tab_background"
        app:tabGravity="center"
        app:tabIndicatorColor="@color/fragment_money_red"
        app:tabIndicatorHeight="0dp"
        app:tabMinWidth="98dp"
        app:tabMode="scrollable"
        app:tabPaddingBottom="3dp"
        app:tabSelectedTextColor="@color/white"
        app:tabTextAppearance="@style/TabLayoutTextStyle"
        app:tabTextColor="@color/white" />


    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>
 

selector的程式碼：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/tab_selected" android:state_selected="true" />
    <item android:drawable="@drawable/tab_unselected"  android:state_selected="false"/>
</selector>

   <style name="TabLayoutTextStyle">
        <item name="android:textSize">13sp</item>
        <item name="android:lineSpacingExtra">1dp</item>
    </style>

public class MyFragmentPagerAdapter extends FragmentPagerAdapter {

    private List<Fragment> fragmentList;//fragment列表
    private List<String> stringList;//tab名的列表

    public MyFragmentPagerAdapter(FragmentManager fm, List<Fragment> fragmentList, List<String> stringList) {
        super(fm);
        if (fragmentList.size() != stringList.size()) {
            try {
                throw new Exception("fragmentList.size must equals stringList.size!");
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
        this.fragmentList = fragmentList;
        this.stringList = stringList;
    }

    @Override
    public Fragment getItem(int position) {
        return fragmentList.get(position);
    }

    @Override
    public int getCount() {
        return stringList.size();
    }

    //此方法用來顯示tab上的名字
    @Override
    public CharSequence getPageTitle(int position) {
        return stringList.get(position % stringList.size());
    }
}

public class MainActivity extends AppCompatActivity {

    private TabLayout tabLayout;
    private ViewPager viewPager;
    private List<Fragment> fragmentList = new ArrayList<>();//fragment列表
    private List<String> stringList = new ArrayList<>();//tab名的列表
    private MyFragmentPagerAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
        tabLayout = (TabLayout) findViewById(R.id.tabLayout);
        viewPager = (ViewPager) findViewById(R.id.viewPager);

        getData();

        for (int i = 0; i < stringList.size(); i++) {
            tabLayout.addTab(tabLayout.newTab().setText(stringList.get(i)));
        }

        adapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentList, stringList);
        viewPager.setAdapter(adapter);

        tabLayout.setupWithViewPager(viewPager);
    }

    private void getData() {
        fragmentList.add(new TypeFragment());
        fragmentList.add(new TypeFragment());
        fragmentList.add(new TypeFragment());
        fragmentList.add(new TypeFragment());

        stringList.add("16:00\n拍賣結束");
        stringList.add("17:00\n瘋狂搶購中");
        stringList.add("18:00\n即將開始");
        stringList.add("19:00\n即將開始");
    }
}