ViewPagerIndicator的使用

l只攻城狮

于 2017-10-28 22:36:10 发布

阅读量450

点赞数

CC 4.0 BY-SA版权

分类专栏： Android

本文链接：https://blog.youkuaiyun.com/yizhixiaoshizi/article/details/78380226

Android 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用ViewPagerIndicator库实现视图页面指示器效果。主要内容包括：集成步骤、自定义样式及示例代码。通过示例代码展示了如何设置ViewPager适配器、TabPageIndicator关联ViewPager以及重写getPageTitle方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一次写博客,只是记录下自己学习的东西.以免忘记.还望各位大神多多指教

下载地址: [https://github.com/JakeWharton/ViewPagerIndicator.git

注意

TabPageIndicator要和ViewPager一起使用

集成步骤

    1. 布局中引入 标签指针 TabPageIndicator
    2. Viewpager设置适配器
    3. indicator关联viewpager 
    4. 重写适配器的getPageTitle()方法  --indicator的数据源
    5. 在相对应的Activity添加主题
       android:theme="@style/Theme.PageIndicatorDefaults"

TabPageIndicator布局:

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


    <com.viewpagerindicator.TabPageIndicator
        android:id="@+id/indicator"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </com.viewpagerindicator.TabPageIndicator>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
 </android.support.v4.view.ViewPager>

代码

public class MainActivity extends Activity {


    @InjectView(R.id.viewpager)
    ViewPager viewpager;
    @InjectView(R.id.indicator)
    TabPageIndicator indicator;
    private List<String> data = new ArrayList<>();
    private String [] city = {"北京","天津","上海","重庆","石家庄","郑州","武汉",
            "长沙","南京","沈阳"};
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.inject(this);
        for (int i = 0;i<city.length;i++){
            data.add(city[i]);
        }
        //设置适配器
        viewpager.setAdapter(new MyAdapter());
        //关联viewpager
        indicator.setViewPager(viewpager);
    }

    class MyAdapter extends PagerAdapter {

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

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            TextView textView = new TextView(MainActivity.this);
            textView.setText(data.get(position));
            container.addView(textView);
            return textView;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return object == view;
        }

        /**
         *indicator  数据源 如果不加Tab不会有数据
         * @param position
         * @return
         */
        @Override
        public CharSequence getPageTitle(int position) {
            return data.get(position);
        }
    }


}

效果图

这里写图片描述

TabPageIndicator样式

可以修改成自己所需的样式

<style name="Widget.TabPageIndicator" parent="Widget">
        <item name="android:gravity">center</item>
        <item name="android:background">@drawable/vpi__tab_indicator</item>
        <item name="android:paddingLeft">22dip</item>
        <item name="android:paddingRight">22dip</item>
        <item name="android:paddingTop">12dp</item>
        <item name="android:paddingBottom">12dp</item>
        <item name="android:textAppearance">@style/TextAppearance.TabPageIndicator</item>
        <item name="android:textSize">12sp</item>
        <item name="android:maxLines">1</item>
    </style>

    <style name="TextAppearance.TabPageIndicator" parent="Widget">
        <item name="android:textStyle">bold</item>
        <item name="android:textColor">@android:color/white</item>
    </style>