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

时间：2021-03-19 20:44:33

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

还是先看一下效果图：

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

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

实现原理：先设置布局外层是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中

@Override
public 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() {

@Override
public void onPageSelected(int position) {
// TODO Auto-generated method stub

dots.get(oldPosition).setBackgroundResource(
R.drawable.dot_normal);
dots.get(position)
.setBackgroundResource(R.drawable.dot_focused);

oldPosition = position;
currentItem = position;
}

@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {

}

@Override
public void onPageScrollStateChanged(int arg0) {
}
});
}

private class ViewPagerAdapter extends PagerAdapter {

public ViewPagerAdapter() {
super();
// TODO Auto-generated constructor stub
// 得到viewpager切换的三个布局，并把它们加入到viewList里面,记得view用打气筒生成，否则容易出现空指针异常

}

@Override
public int getCount() {
// TODO Auto-generated method stub
return viewList.size();
}

// 是否是同一张图片
@Override
public boolean isViewFromObject(View view, Object object) {
// TODO Auto-generated method stub
return view == object;
}

@Override
public void destroyItem(ViewGroup view, int position, Object object) {
((ViewPager) view).removeView(viewList.get(position));

}

@Override
public Object instantiateItem(ViewGroup view, int position) {
((ViewPager) view).addView(viewList.get(position));
return viewList.get(position);
}
}

@Override
protected void onStart() {
// TODO Auto-generated method stub
super.onStart();
}

@Override
protected void onStop() {
// TODO Auto-generated method stub
super.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>


点击下载源码


标签：

相关文章