【商城开发十】Android淘抢购导航栏

唔，马上就毕业了，最近回学校做论文毕设，代码基本放下了，公司的工作也没跟着做，最近公司在催我回去，唉，毕业是个事，头疼啊，只好在学校做开发了。哦了说回正题，今天要做类似淘宝淘抢购的导航栏，先看看淘宝的效果。

红框里的就是今天的主角了，在网上一顿好找，根本没找到，连类似的都没有，CSDN有一个资源要10积分，呵呵，你怎么不去抢，看看评论都说垃圾还敢要这么多积分，只好自己动手做了。事实证明：拿来主义不好做，还是得自己来。自己做也就用了半个多小时。来看看我做的^_^

自己做的也不差吧，下面来说说思路。这个用的是Android自带的控件TabLayout，黑色的背景和红色带小三角的都是.9图，不懂.9图的可以自行百度。然后写一个selector，设置Tablayout的tabBackground属性,如果想设置字体属性，就要用tabTextAppearance，自己写一个style就行。下面是tablayout的代码

<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的

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

资源方面就这些了，下面是adapter的

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());
    }
}

最后就是MainActivit的了

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即将开始");
    }
}

需要引入V4包和Desig包！ 差不多到这代码就完了，估计看到这的还希望有源代码吧，来给你，源代码要1分，辛苦分，没分的就自己拷贝代码创建工程吧。
代码在这里！！！