ViewPager翻页的时候下面的小圆点跟着滑动如何实现。

来源：互联网发布：星空地图软件编辑：程序博客网时间：2024/05/16 08:33

这个效果的实现方法有很多种，网上有很多好的开源项目，这里我是自己以前写的一个实现方法，整理一下分享一下，方便以后有需要的时候参考。

还是先看一下效果图：

实现原理：先设置布局外层是fragment，里面放着viewPager和LinearLayout，设置linearLayout在底部，这样就是叠加的关系，linearLayout里面放的是这个三个view,通过设置这三个view的背景色，来区分当前跳到了第几页。背景色(小圆点)通过shape来定义。

代码：

ShowActivity.java

package com.example.viewpagerbottompoint;import java.util.ArrayList;import java.util.List;import android.app.Activity;import android.os.Bundle;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;public class ShowActivity extends Activity {private ArrayList<View> dots;private ViewPager mViewPager;private ViewPagerAdapter adapter;private View view1, view2, view3;private int oldPosition = 0;// 记录上一次点的位置private int currentItem; // 当前页面private List<View> viewList = new ArrayList<View>();// 把需要滑动的页卡添加到这个list中@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_show);// 添加当前Acitivity到ancivitylist里面去，为了方便统一退出// 显示的点dots = new ArrayList<View>();dots.add(findViewById(R.id.dot_1));dots.add(findViewById(R.id.dot_2));dots.add(findViewById(R.id.dot_3));// 得到viewPager的布局LayoutInflater lf = LayoutInflater.from(ShowActivity.this);view1 = lf.inflate(R.layout.viewpager_item1, null);view2 = lf.inflate(R.layout.viewpager_item2, null);view3 = lf.inflate(R.layout.viewpager_item3, null);viewList.add(view1);viewList.add(view2);viewList.add(view3);// 找到点击进入那个按钮mViewPager = (ViewPager) findViewById(R.id.vp);adapter = new ViewPagerAdapter();mViewPager.setAdapter(adapter);dots.get(0).setBackgroundResource(R.drawable.dot_focused);mViewPager.setOnPageChangeListener(new OnPageChangeListener() {@Overridepublic void onPageSelected(int position) {// TODO Auto-generated method stubdots.get(oldPosition).setBackgroundResource(R.drawable.dot_normal);dots.get(position).setBackgroundResource(R.drawable.dot_focused);oldPosition = position;currentItem = position;}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic void onPageScrollStateChanged(int arg0) {}});}private class ViewPagerAdapter extends PagerAdapter {public ViewPagerAdapter() {super();// TODO Auto-generated constructor stub// 得到viewpager切换的三个布局，并把它们加入到viewList里面,记得view用打气筒生成，否则容易出现空指针异常}@Overridepublic int getCount() {// TODO Auto-generated method stubreturn viewList.size();}// 是否是同一张图片@Overridepublic boolean isViewFromObject(View view, Object object) {// TODO Auto-generated method stubreturn view == object;}@Overridepublic void destroyItem(ViewGroup view, int position, Object object) {((ViewPager) view).removeView(viewList.get(position));}@Overridepublic Object instantiateItem(ViewGroup view, int position) {((ViewPager) view).addView(viewList.get(position));return viewList.get(position);}}@Overrideprotected void onStart() {// TODO Auto-generated method stubsuper.onStart();}@Overrideprotected void onStop() {// TODO Auto-generated method stubsuper.onStop();finish();}}

主布局文件，activity_show.xml

<RelativeLayout 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" >    <FrameLayout        android:layout_width="match_parent"        android:layout_height="match_parent" >        <android.support.v4.view.ViewPager            android:id="@+id/vp"            android:layout_width="match_parent"            android:layout_height="match_parent" />        <LinearLayout            android:layout_width="match_parent"            android:layout_height="35dip"            android:layout_gravity="bottom"            android:gravity="center"            android:orientation="vertical" >            <LinearLayout                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_marginTop="3dip"                android:orientation="horizontal" >                <View                    android:id="@+id/dot_1"                    android:layout_width="10dip"                    android:layout_height="10dip"                    android:layout_marginLeft="2dip"                    android:layout_marginRight="2dip"                    android:background="@drawable/dot_normal" />                <View                    android:id="@+id/dot_2"                    android:layout_width="10dip"                    android:layout_height="10dip"                    android:layout_marginLeft="2dip"                    android:layout_marginRight="2dip"                    android:background="@drawable/dot_normal" />                <View                    android:id="@+id/dot_3"                    android:layout_width="10dip"                    android:layout_height="10dip"                    android:layout_marginLeft="2dip"                    android:layout_marginRight="2dip"                    android:background="@drawable/dot_normal" />            </LinearLayout>        </LinearLayout>    </FrameLayout></RelativeLayout>

设置那三个点选中和未选中的样子，通过shape来定义：

这里放在drawable文件夹下。

dot_focused.xml

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="oval" >    <corners android:radius="5dip" /><!-- 背景的填充颜色 -->      <solid android:color="#aaFFFFFF" /><!-- 边角圆弧的半径 -->  </shape>

dot_normal.xml

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="oval" >    <corners android:radius="5dip" />    <solid android:color="#55000000" /></shape>

下面是VIewPager里面放的三个view的布局文件

viewpager_item1.xml

<RelativeLayout 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:background="#0000ff"    tools:context=".MainActivity" >    <TextView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:gravity="center"        android:text="第一页"        android:textColor="#ffffff"        android:textSize="50dp" /></RelativeLayout>

viewpager_item2.xml

<RelativeLayout 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:background="#00eeff"tools:context=".MainActivity" > <TextView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:textSize="50dp"        android:gravity="center"        android:textColor="#ffffff"        android:text="第二页"         /></RelativeLayout>

viewpager_item3.xml

<RelativeLayout 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:background="#008855"    tools:context=".MainActivity" >    <TextView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:textSize="50dp"        android:gravity="center"        android:textColor="#ffffff"        android:text="第三页" /></RelativeLayout>

点击下载源码

0 0