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;

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