ViewPager與Fragment配合使用實作引導頁

1.主界面布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1">
            <android.support.v4.view.ViewPager
                android:id="@+id/view_pager"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_marginBottom="18dp"
                android:gravity="center_horizontal">

                <LinearLayout
                    android:id="@+id/ll_point_group"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="5dp"
                    android:gravity="center_vertical"
                    android:orientation="horizontal"/>
            </RelativeLayout>
        </RelativeLayout>

</LinearLayout>
           

2.MainActivity代碼：

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.widget.ImageView;
import android.widget.LinearLayout;

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

public class MainActivity extends FragmentActivity {

    private ViewPager viewPager;

    private LinearLayout ll_point_group;

    private int[] imageIds = new int[]{R.drawable.guide1, R.drawable.guide2, R.drawable.guide3};

    private List<ImageView> imageList;
    private List<Fragment> fragmentList;


    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewPager = (ViewPager) findViewById(R.id.view_pager);
        ll_point_group = (LinearLayout) findViewById(R.id.ll_point_group);



        imageList = new ArrayList<>();

        for (int imageId : imageIds) {
            ImageView image = new ImageView(this);
            image.setBackgroundResource(imageId);
            imageList.add(image);

            // 添加訓示點
            ImageView point = new ImageView(this);
            point.setBackgroundResource(R.drawable.point_bg);

            // 建立一個線性布局使用的布局參數
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(-, LinearLayout.LayoutParams.WRAP_CONTENT);
            layoutParams.leftMargin = ;

            // 添加子view,同時，指定該子view的布局參數
            ll_point_group.addView(point, layoutParams);

            if (imageId == R.drawable.guide1) {
                // 讓第一個點，顯示，選中的背景圖檔
                point.setEnabled(true);
            } else {
                point.setEnabled(false);
            }

        }
        ll_point_group.getChildAt().setEnabled(true);
        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

            @Override
            public void onPageSelected(int position) {

                position = position % imageIds.length;
                // 切換訓示點的選中狀态
                // 讓上一個選中的點，顯示為普通色
                ll_point_group.getChildAt(lastPosition).setEnabled(false);
                // 讓目前選中的點顯示為白色
                ll_point_group.getChildAt(position).setEnabled(true);
                // 為lastPosition 設值
                lastPosition = position;

            }


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

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

        fragmentList = new ArrayList<>();

        fragmentList.add(new ChildFragment1());
        fragmentList.add(new ChildFragment2());
        fragmentList.add(new ChildFragment3());

        fragmentAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager());
        viewPager.setAdapter(fragmentAdapter);
    }

    // 上一個選中的頁面的下标
    private int lastPosition = ;


    private MyFragmentPagerAdapter fragmentAdapter;

    private class MyFragmentPagerAdapter extends FragmentStatePagerAdapter {

        public MyFragmentPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return fragmentList.get(position);
        }

        @Override
        public int getCount() {
            return fragmentList.size();
        }

    }

}
           

3.ChildFragment代碼：