android viewpager 底部圆点,安卓用ViewPager实现APP的引导页和小圆点

在模拟器上显示效果大概如下：

大概思路和代码如下：

1、首先创建一个layout布局文件，

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".ViewPagerFragmentActivity">

android:id="@+id/myViewPager"

android:layout_width="match_parent"

android:layout_height="match_parent" />

android:id="@+id/dot_layout"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:layout_centerHorizontal="true"

android:layout_marginBottom="40dip"

android:gravity="center"

android:orientation="horizontal">

2、创建四个布局文件，一个布局文件一张图片

我这里四个布局文件名称，以便下面好理解：fmain.xml、fphone.xml、ffriend.xml、fme.xml。

android:layout_width="match_parent"

android:layout_height="match_parent">

android:id="@+id/bookapp1"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:scaleType="fitXY"

android:src="@drawable/bookapp1" />

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

android:id="@+id/bookapp2"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:scaleType="fitXY"

android:src="@drawable/bookapp2" />

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

android:id="@+id/bookapp3"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:scaleType="fitXY"

android:src="@drawable/bookapp3" />

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

android:id="@+id/bookapp4"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:scaleType="fitXY"

android:src="@drawable/bookapp4" />

android:layout_width="200dp"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:layout_centerHorizontal="true"

android:layout_marginBottom="107dp"

android:background="#80ecebeb"

android:text="立即体验"

android:textSize="20dp"/>

3、然后创建四个相对应的JAVA类，继承Fragment，

四个JAVA类名跟布局文件名一致，fmain.java、fphone.java、ffriend.java、fme.java。

package main;

import android.os.Bundle;

import android.support.annotation.Nullable;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ImageView;

import zking.com.android7.R;

/**

* 第一个页面的Fragment的JAVA类

*/

public class Fmain extends Fragment {

@Nullable

@Override

public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {

View v = inflater.inflate(R.layout.fmain, null);

//得到第一张图片的控件对象

ImageView bookapp1 = v.findViewById(R.id.bookapp1);

return v;

}

}

package main;

import android.support.v4.app.Fragment;

import android.os.Bundle;

import android.support.annotation.Nullable;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ImageView;

import zking.com.android7.R;

/**

* 第二个页面的Fragment的JAVA类

*/

public class Fphone extends Fragment {

@Nullable

@Override

public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {

View v = inflater.inflate(R.layout.fphone, null);

//得到第二张图片的控件对象

ImageView bookapp2 = v.findViewById(R.id.bookapp2);

return v;

}

}

package main;

import android.support.v4.app.Fragment;

import android.os.Bundle;

import android.support.annotation.Nullable;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ImageView;

import zking.com.android7.R;

/**

* 第三个页面的Fragment的JAVA类

*/

public class Ffriend extends Fragment {

@Nullable

@Override

public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {

View v = inflater.inflate(R.layout.ffriend, null);

//得到第三张图片的控件对象

ImageView bookapp3 = v.findViewById(R.id.bookapp3);

return v;

}

}

package main;

import android.support.v4.app.Fragment;

import android.os.Bundle;

import android.support.annotation.Nullable;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ImageView;

import zking.com.android7.R;

/**

* 第四个页面的Fragment的JAVA类

*/

public class Fme extends Fragment {

@Nullable

@Override

public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {

View v = inflater.inflate(R.layout.fme, null);

//得到第四张图片的控件对象

ImageView bookapp4 = v.findViewById(R.id.bookapp4);

return v;

}

}

4、创建外部资源的布局文件，文件名为：myselect.xml

怎样创建？

切换到Project模式-->选中当前项目 new Android Rescourse File-->type为Drawable，root为select(必须小写)

5、创建一个Activity，文件名为：ViewPagerFragmentActivity

package zking.com.android7;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentManager;

import android.support.v4.app.FragmentPagerAdapter;

import android.support.v4.view.ViewPager;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.widget.ImageView;

import android.widget.LinearLayout;

import java.util.ArrayList;

import java.util.List;

import main.Ffriend;

import main.Fmain;

import main.Fme;

import main.Fphone;

public class ViewPagerFragmentActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {

private List fragmentList;

private ViewPager myViewPager;

private ViewPagerFragmentActivity.myFragmentPagerAdapter myFragmentPagerAdapter;

private ImageView[] dotViews;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_viewpagerfragment);

//把Fragment添加到List集合里面

fragmentList = new ArrayList<>();

fragmentList.add(new Fmain());

fragmentList.add(new Fphone());

fragmentList.add(new Ffriend());

fragmentList.add(new Fme());

//实例化适配器

myFragmentPagerAdapter = new myFragmentPagerAdapter(getSupportFragmentManager(), fragmentList);

//得到ViewPager对象

myViewPager = findViewById(R.id.myViewPager);

//为ViewPager设置适配器

myViewPager.setAdapter(myFragmentPagerAdapter);

myViewPager.setOnPageChangeListener(this);

//初始化显示第一个页面

myViewPager.setCurrentItem(0);

//生成相应数量的导航小圆点

LinearLayout layout = findViewById(R.id.dot_layout);

LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);

//设置小圆点左右之间的间隔

params.setMargins(10, 0, 10, 0);

//得到页面个数

dotViews = new ImageView[fragmentList.size()];

for (int i = 0; i < fragmentList.size(); i++) {

ImageView imageView = new ImageView(this);

imageView.setLayoutParams(params);

imageView.setImageResource(R.drawable.myselector);

if (i == 0) {

//默认启动时，选中第一个小圆点

imageView.setSelected(true);

} else {

imageView.setSelected(false);

}

//得到每个小圆点的引用，用于滑动页面时，(onPageSelected方法中)更改它们的状态。

dotViews[i] = imageView;

//添加到布局里面显示

layout.addView(imageView);

}

}

@Override

public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}

/**

* 当前滑动显示页面的索引值，可以根据这个值，来设置相应小圆点的状态。

* @param position

*/

@Override

public void onPageSelected(int position) {

for (int i = 0; i < dotViews.length; i++) {

if (position == i) {

dotViews[i].setSelected(true);

} else {

dotViews[i].setSelected(false);

}

}

}

@Override

public void onPageScrollStateChanged(int state) {

}

/**

* 创建Fragment的适配器

*/

class myFragmentPagerAdapter extends FragmentPagerAdapter {

List fragmentList;

public myFragmentPagerAdapter(FragmentManager fm, List fragmentList) {

super(fm);

this.fragmentList = fragmentList;

}

/**

* 显示第几个页面

* @param position

* @return

*/

@Override

public Fragment getItem(int position) {

return fragmentList.get(position);

}

/**

* 有几个页面

* @return

*/

@Override

public int getCount() {

return fragmentList.size();

}

}

}