ViewPagerIndcatior 的使用

最新推荐文章于 2018-07-25 17:20:56 发布

原创最新推荐文章于 2018-07-25 17:20:56 发布 · 436 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#viewpager #indicator

Android 专栏收录该内容

114 篇文章

订阅专栏

本文介绍如何使用ViewPagerIndicator库实现页面指示器效果。包括在布局文件中添加TabPageIndicator和ViewPager组件，配置ViewPager适配器，绑定ViewPager与TabPageIndicator，以及通过PagerAdapter自定义页面标题等关键步骤。

ViewPagerIndicator 指示器使用步骤:

布局中引入指示器控件

    <!-- 对应顶部的指针 -->

    <com.viewpagerindicator.TabPageIndicator
        android:id="@+id/indicator"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />
    <!-- 底部的内容界面，顶部指针和底部的viewpager一一对应 -->

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

ViewPager设置适配器

普通控件Textview，
PagerAdapter：getCount、instantiateItem、destoryItem、isViewFromObject

绑定ViewPager
```
indicator.setViewpager(viewpager);
```
设置Indicator的数据
```
重写PagerAdapter的getPageTItle()
```

添加主题样式

android:theme="@style/Theme.PageIndicatorDefaults"

ViewPagerIndcatior 第三方库的下载地址 ViewPagerIndcatior 的下载地址

package com.gao.viewpager_indicator;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import com.viewpagerindicator.TabPageIndicator;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends Activity {

    private TabPageIndicator mIndicator;
    private ViewPager mViewPager;
    private MyViewPager mAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mIndicator = (TabPageIndicator) findViewById(R.id.indicator);
        mViewPager = (ViewPager) findViewById(R.id.pager);

        initData();
        mAdapter = new MyViewPager();

        mViewPager.setAdapter(mAdapter);

        // 记得绑定 viewpage
        mIndicator.setViewPager(mViewPager);
    }

    int i = 0;
//记录每次点击按钮 记录 加1

    /**
     * 刷新 ViewPager 和 mIndicator
     * @param view
     */
    public void add(View view) {
        i++;
        mList.add("new" + i);

        mAdapter.notifyDataSetChanged(); //刷新 ViewPAger
        mIndicator.notifyDataSetChanged(); //刷新 指示器
    }

    public List<String> mList = new ArrayList<>();

    /**
     * 初始化 指针的数据
     */
    private void initData() {
        mList.add("aaa");
        mList.add("bbb");
        mList.add("ccc");
        mList.add("fff");
        mList.add("eee");
        mList.add("ggg");
    }

    class MyViewPager extends PagerAdapter {

        /**
         * 当前pager的标题 mIndicator的数据源
         *
         * @param position
         * @return
         */
        @Override
        public CharSequence getPageTitle(int position) {

            return mList.get(position);
        }

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

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

        /**
         * 初始化 条目
         *
         * @param container
         * @param position
         * @return
         */
        @Override
        public Object instantiateItem(ViewGroup container, int position) {

            TextView textView = new TextView(MainActivity.this);
            textView.setText(mList.get(position));
            textView.setGravity(Gravity.CENTER);
            textView.setTextSize(24);
            container.addView(textView);
            return textView;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {

            container.removeView((View) object);
        }
    }


}

清单文件

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <!-- 对应顶部的指针 -->
        <com.viewpagerindicator.TabPageIndicator
            android:id="@+id/indicator"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            />
<!--用于动态添加 指示器标签-->
        <Button
            android:layout_margin="3dp"
            android:onClick="add"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="+"/>

    </LinearLayout>

    <!-- 底部的内容界面，顶部指针和底部的viewpager一一对应-->
    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        />
</LinearLayout>