Android中ViewPager在底部生成小圆点

首先在XML文件中创建一个ViewPager

<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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">
//这里调用javaV4包需要全名调用
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v4.view.ViewPager>
    <LinearLayout
        android:id="@+id/viewpager_linerlayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_alignParentBottom="true"
        android:gravity="center"
        android:layout_marginBottom="30dp">
    </LinearLayout>
</RelativeLayout>

引用V4包的时候要全名调用，另外在ViewPager下边定义了一个LinearLayout用来放置页面焦点的小圆点。

利用XML生成三个带图片的简单界面

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@mipmap/one"/>
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@mipmap/two"/>
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@mipmap/three"/>
</LinearLayout>

接下来定义一个ViewPager的适配器ViewPagerAdapter类

package com.example.administrator.myviewpagertest.adapter;

import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;

import java.util.List;

/**
 * Created by Administrator on 2015/9/1.
 */
public class ViewPagerAdapter extends PagerAdapter {
private List<View> mViews;

public ViewPagerAdapter(List<View> mViews) {
this.mViews = mViews;
    }

@Override
public int getCount() {
//返回一个ViewPager中页面的数量
return mViews.size();
    }

@Override
public void destroyItem(ViewGroup container, int position, Object object) {
//当某个页面被划出屏幕时，销毁
         View view=mViews.get(position);
         container.removeView(view);
    }

@Override
public Object instantiateItem(ViewGroup container, int position) {
//当某个页面被划进屏幕时，显示该页面
        container.addView(mViews.get(position));
return mViews.get(position);
    }

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

在MAinActivity中将生成的三个界面加入到ViewPager中，并动态添加底部小圆点。

package com.example.administrator.myviewpagertest;

import android.app.ActionBar;
import android.app.Activity;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;


import com.example.administrator.myviewpagertest.adapter.ViewPagerAdapter;

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

public class MainActivity extends Activity {
private ViewPager mViewPager;//声明ViewPager
private LinearLayout mLinearLayout;//声明将来放置底部小圆点的LinearLayout
private List<View> mViews;//ViewPager中放置的界面的集合
private List<ImageView> mDots;//底部小圆点的集合
private ViewPagerAdapter mAdapter;//ViewPager适配器
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mViewPager= (ViewPager) findViewById(R.id.viewpager);
        mLinearLayout= (LinearLayout) findViewById(R.id.viewpager_linerlayout);
        initView();
        initDots();
        mAdapter=new ViewPagerAdapter(mViews);
        mViewPager.setAdapter(mAdapter);
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }

@Override
public void onPageSelected(int position) {
for (int i=0;i<mViews.size();i++){
//将所有的圆点设置为为选中时候的图片
                    mDots.get(i).setImageResource(R.mipmap.dot_normal);
                }
//将被选中的图片中的圆点设置为被选中的时候的图片
                mDots.get(position).setImageResource(R.mipmap.dot_select);
            }

@Override
public void onPageScrollStateChanged(int state) {

            }
        });
    }

private void initDots() {
        mDots = new ArrayList<ImageView>();//底部圆点集合的初始化
for (int i=0;i<mViews.size();i++){//根据界面数量动态添加圆点
            ImageView imageView=new ImageView(this);
            imageView.setLayoutParams(new ViewGroup.LayoutParams(35,35));//设置ImageView的宽度和高度
            imageView.setPadding(5,5,5,5);//设置圆点的Padding，与周围的距离
            imageView.setImageResource(R.mipmap.dot_normal);//设置图片
            mDots.add(imageView);//将该图片添加到圆点集合中
            mLinearLayout.addView(imageView);//将图片添加到LinearLayout中
        }
        mDots.get(0).setImageResource(R.mipmap.dot_select);
    }
private void initView() {
        mViews=new ArrayList<>();
        LayoutInflater inflater=getLayoutInflater();

        View view1=inflater.inflate(R.layout.activity_viewpager1, null);
        View view2=inflater.inflate(R.layout.activity_viewpager2,null);
        View view3=inflater.inflate(R.layout.activity_viewpager3,null);

        mViews.add(view1);
        mViews.add(view2);
        mViews.add(view3);

    }
}