开源控件ViewPagerIndicator学习

导航条指示器。ViewPagerIndicator

地址 https://github.com/JakeWharton/ViewPagerIndicator

1. 创建Activity,和布局。

    <!-- 指示器 indicator -->
    <com.viewpagerindicator.TabPageIndicator
        android:id="@+id/tpi_Indicator
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#FFFFFF" />

    <!-- 内容 -->

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

2. 绑定数据 。

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

        // 获取到控件
        ViewPager vpPager = (ViewPager) findViewById(R.id.vp_page);
        tabPageIndicator = (TabPageIndicator) findViewById(R.id.tpi_Indicator);
        // 设置数据
        vpPager.setAdapter(new MyFragmentAdapter(getSupportFragmentManager()));
        tabPageIndicator.setViewPager(vpPager);
    }

    private class MyFragmentAdapter extends FragmentPagerAdapter
    {

        public MyFragmentAdapter(FragmentManager fm)
        {
            super(fm);
            framgents.add(new FirstFragment());
            framgents.add(new SencodFragment());
            framgents.add(new ThirdFragment());
            framgents.add(new FourFragment());

            titleList.add("日本");
            titleList.add("美国");
            titleList.add("加拿大");
            titleList.add("芝加哥");
        }

        @Override
        public Fragment getItem(int arg0)
        {
            return framgents.get(arg0);
        }

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

        //设置标题
        @Override
        public CharSequence getPageTitle(int position)
        {
            return titleList.get(position);
        }

    }

3. 设置theme. 和控件的样式。

  <style name="AppBaseTheme" parent="android:Theme.Light">
        <item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item>
    </style>

    <!--  -->
    <!-- <item name="android:divider">@drawable/custom_tab_indicator_divider</item> -->

    <style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator">
        <item name="android:background">@drawable/custom_tab_indicator</item>
        <item name="android:textAppearance">@style/CustomTabPageIndicator.Text</item>
        <item name="android:textColor">#FF555555</item>
        <item name="android:textSize">16sp</item>
        <item name="android:paddingLeft">8dp</item>
        <item name="android:paddingRight">8dp</item>
        <item name="android:fadingEdge">horizontal</item>
        <item name="android:fadingEdgeLength">8dp</item>
    </style>

    <!-- 字体我也那过来 -->
    <style name="CustomTabPageIndicator.Text" parent="android:TextAppearance.Medium">
        <item name="android:typeface">monospace</item>
    </style>

动态添加标题

1. 设置布局
2. 添加事件。动态标题更新。

     */
    public void addTitle(View view)
    {
        framgents.add(new AddFragment());
        titleList.add("新页面");
        // 通过页面刷新
        mAdapter.notifyDataSetChanged();
        // 指示器也要更新
        tabPageIndicator.notifyDataSetChanged();

        // 页面跟踪
        vpPager.setCurrentItem(framgents.size()-1);
    }

Fragment Bug修复。

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        if (rootView == null) {
            rootView = View.inflate(getActivity(), getLayoutId(), null);
            initView(rootView);
        } else {
            // ViewGroup :所有布局的父类
            ViewGroup parent = (ViewGroup) rootView.getParent();
            if (parent != null)// 已经添加
            {
                parent.removeView(rootView);
            }
        }
        return rootView;
    }