android viewpager添加选中页标志

1，如图，对于进入软件的引导页往往需要为viewpager添加当前页面的标志。

2，xml布局

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

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

    <RelativeLayout
        android:id="@+id/relativeLayout"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="450dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/textView_point1_guide"
            android:layout_marginRight="15dp"
            android:background="@drawable/bg_gray_corner"
            android:layout_width="30dp"
            android:layout_height="8dp" />

        <TextView
            android:id="@+id/textView_point2_guide"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:layout_toRightOf="@+id/textView_point1_guide"
            android:background="@drawable/bg_gray_corner"
            android:layout_width="30dp"
            android:layout_height="8dp" />

        <TextView
            android:id="@+id/textView_point3_guide"
            android:layout_marginLeft="15dp"
            android:layout_toRightOf="@+id/textView_point2_guide"
            android:background="@drawable/bg_gray_corner"
            android:layout_width="30dp"
            android:layout_height="8dp" />

        <TextView
            android:id="@+id/textView_point4_guide"
            android:background="@drawable/bg_red_corner"
            android:layout_width="30dp"
            android:layout_height="8dp" />

    </RelativeLayout>

    <TextView
        android:id="@+id/textView_guide_ignore"
        android:text="立即体验"
        android:textColor="@color/white"
        android:textSize="22sp"
        android:background="@drawable/bg_red_big_corner"
        android:paddingTop="@dimen/border_middle"
        android:paddingBottom="@dimen/border_middle"
        android:paddingLeft="30dp"
        android:paddingRight="30dp"
        android:layout_centerHorizontal="true"
        android:layout_below="@+id/relativeLayout"
        android:layout_marginTop="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</RelativeLayout>

3，添加监听

package com.shilian.yibo;

import android.os.Build;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewTreeObserver;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;

import com.shilian.yibo.adapter.GuidePagerAdapter;
import com.shilian.yibo.base.BaseFragment;

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

import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.OnClick;

/**
 * 引导页
 * Created by Burn on 2017/6/1.
 */
public class GuideFragment extends BaseFragment {

    @BindView(R.id.viewPager_guide)
    ViewPager vp_guide;
    @BindView(R.id.textView_point1_guide)
    TextView tv_point1;
    @BindView(R.id.textView_point2_guide)
    TextView tv_point2;
    @BindView(R.id.textView_point4_guide)
    TextView tv_point4;

    private int dis;//圆点之间的距离
    private List<View> res_list;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_guide, container,false);
        unbinder=ButterKnife.bind(this, view);
        init();
        set_adapter();
        set_listener();
        return view;
    }

    /**
     * 控件和对象的初始化
     */
    private void init() {
       。。。。。
        tv_point4.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                dis=tv_point2.getLeft()-tv_point1.getLeft();
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
                    tv_point4.getViewTreeObserver().removeOnGlobalLayoutListener(this);
                }
            }
        });
    }

    /**
     * 设置适配器
     */
    public void set_adapter() {
        GuidePagerAdapter gpa = new GuidePagerAdapter(res_list);
        vp_guide.setAdapter(gpa);
    }

    /**
     * 设置监听器
     */
    public void set_listener() {
        //添加点击事件监听
        vp_guide.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) tv_point4.getLayoutParams();
                layoutParams.leftMargin = (int) (dis * positionOffset + dis * position);
                tv_point4.setLayoutParams(layoutParams);
            }
            @Override
            public void onPageSelected(int position) {
            }
            @Override
            public void onPageScrollStateChanged(int state) {
            }
        });
    }

    @OnClick(R.id.textView_guide_ignore)
    public void onClick() {
        openActivity(MainActivity.class);
        mActivity.finish();
    }
}

3，使用第三方框架viewpageindicator，实习viewpa的原点下标

导入框架

在app的build.gradle文件中添加依赖

dependencies {
    。。。。
    compile 'com.inkapplications.viewpageindicator:library:2.4.3'
}

xml布局，控制下标所在位置

<RelativeLayout
                android:padding="@dimen/border_big"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

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

                <com.viewpagerindicator.CirclePageIndicator
                    android:id="@+id/indicator_frag_home_page"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_alignParentBottom="true"
                    android:paddingBottom="@dimen/border_big"
                    app:centered="true"
                    app:fillColor="#ffffff"当前页面圆点的填充色
                    app:pageColor="#99ffffff"非当前页面圆点的填充色
                    app:strokeColor="#99ffffff"圆点外围边框的填充色
                    app:strokeWidth="2dp"圆点外围边框的宽度
                    app:radius="5dp" />圆点的半径

            </RelativeLayout>

代码设置：indicator.setViewPager(viewpager);