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