android欢迎界面引导页_用Fragment和ViewPager编写酷炫引导页。

话不多说直接上效果图：

为什么不使用第三方库Baaner来写这个引导页呢？因为产品那边的需求比较神奇（标题那里有个直角虚线），而且要适配平板（此demo里面没写，如有需要请联系我），所以只能通过Fragment加ViewPager来写引导页。

1、首先编写activity_main.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.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="center_horizontal" >
    </android.support.v4.view.ViewPager>
 
 
    <TextView
        android:layout_marginBottom="15dp"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:id="@+id/tv_skip"
        android:layout_width="154dp"
        android:layout_height="40dp"
        android:layout_gravity="center_horizontal"
        android:background="@drawable/shape_radius_12_yellow"
        android:gravity="center"
        android:text="立即体验"
        android:textColor="#303030"
        android:visibility="gone" />
 
    <LinearLayout
        android:layout_marginBottom="24dp"
        android:layout_alignParentBottom="true"
        android:id="@+id/layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal|center_vertical"
        android:orientation="horizontal"/>
</RelativeLayout>

2、编写fragment_guide.xml

<?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">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="390dp"
        android:id="@+id/iv_image"/>
    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="40dp">
 
        <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
 
            <ImageView
                android:id="@+id/iv_left_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="left|top"
                android:layout_margin="2dp"
                android:src="@drawable/guide_line_left_short" />
 
            <ImageView
                android:id="@+id/iv_right_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="right|bottom"
                android:layout_alignParentRight="true"
                android:scaleType="fitCenter"
                android:src="@drawable/guide_line_right_short" />
 
            <TextView
                android:textColor="#000000"
                android:id="@+id/oneTitle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:padding="10dp"
                android:layout_marginLeft="6dp"
                android:layout_marginRight="6dp"
                android:layout_gravity="center"
                android:textSize="23sp" />
        </FrameLayout>
    </FrameLayout>
 
    <TextView
        android:textColor="#303030"
        android:id="@+id/twoTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="8dp"
        android:textSize="15sp" />
</LinearLayout>

3、编写适配器GuideAdapter.class

//装fragment的适配器
public class GuideAdapter extends FragmentStatePagerAdapter {
 
    private List<Fragment> fragmentList;
 
    public GuideAdapter(FragmentManager fm, List<Fragment> fragmentList) {
        super(fm);
        this.fragmentList=fragmentList;
    }
 
    @Override
    public Fragment getItem(int arg0) {
        return fragmentList.get(arg0);
    }
 
    @Override
    public int getCount() {
        return fragmentList.size();
    }
 
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        super.destroyItem(container, position, object);
    }
 
    @Override
    public Object instantiateItem(ViewGroup arg0, int arg1) {
        return super.instantiateItem(arg0, arg1);
    }
}

4、编写GuideFragment.class(这个类要特别注意fragment里面不能写有参构造方法)

public class GuideFragment extends Fragment {
    private TextView oneTitle;//大标题
    private TextView twoTitle;//小标题
    private ImageView imageView;//引导页图片
    private ImageView leftImage, rightImage;//字体左上角和右下角的虚线图
 
    private String title, subTitle;
    private int img, leftImageInt, rightImageInt;
    
    //解决重写Fragment带参构造方法来传参,避免使用@SuppressLint("ValidFragment")
    public static final GuideFragment newInstance(String title, String subTitle, int img, int leftImageInt, int rightImageInt) {
        GuideFragment guideFragment = new GuideFragment();
        Bundle bundle = new Bundle();
        bundle.putString("title", title);
        bundle.putString("subTitle", subTitle);
        bundle.putInt("img", img);
        bundle.putInt("leftImageInt", leftImageInt);
        bundle.putInt("rightImageInt", rightImageInt);
        guideFragment.setArguments(bundle);
        return guideFragment;
    }
 
 
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_guide, null);
        if (getArguments() != null) {
            //取值
            title = getArguments().getString("title");
            subTitle = getArguments().getString("subTitle");
            img = getArguments().getInt("img");
            leftImageInt = getArguments().getInt("leftImageInt");
            rightImageInt = getArguments().getInt("rightImageInt");
        }
        oneTitle = view.findViewById(R.id.oneTitle);
        twoTitle = view.findViewById(R.id.twoTitle);
        oneTitle.setText(title);
        twoTitle.setText(subTitle);
        imageView = view.findViewById(R.id.iv_image);
        imageView.setImageResource(img);
 
        leftImage = view.findViewById(R.id.iv_left_image);
        leftImage.setImageResource(leftImageInt);
        rightImage = view.findViewById(R.id.iv_right_image);
        rightImage.setImageResource(rightImageInt);
        return view;
    }
}

5、编写MainActivity.class

public class MainActivity extends FragmentActivity implements ViewPager.OnPageChangeListener {
 
 
    private LinearLayout mLinearLayout;
    private ViewPager viewPager;
    private ImageView imageView;//显示数组图片的View
    private ImageView[] diandianArray;//点数组
    private TextView mxperience;//立即体验
 
    private List<Fragment> mFragments;
    private GuideAdapter mGuideAdapter;
    private TextView oneTitle;//大标题
    private TextView twoTitle;//小标题
    private ImageView leftImage;//左边虚线
    private ImageView rightImage;
    private ImageView ivImage;
 
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mxperience = findViewById(R.id.tv_skip);
        mFragments = new ArrayList<Fragment>();
 
        mFragments.add(GuideFragment.newInstance("风景引导页demo", "采用Fragment和ViewPager", R.drawable.guide_img__one, R.drawable.guide_line_left_short, R.drawable.guide_line_right_short));
        mFragments.add(GuideFragment.newInstance("解决Fragment不能写有参构造方法", "如丝般的顺滑体验", R.drawable.guide_img_two, R.drawable.guide_line_left_long, R.drawable.guide_line_right_long));
        mFragments.add(GuideFragment.newInstance("在学习技术的同时", "尽情的享受丰富的风景图", R.drawable.guide_img_three, R.drawable.guide_line_left_long, R.drawable.guide_line_right_long));
        mFragments.add(GuideFragment.newInstance("代码中详细的注释", "让你更加容易理解", R.drawable.guide_img__four, R.drawable.guide_line_left_long, R.drawable.guide_line_right_long));
        mFragments.add(GuideFragment.newInstance(" 看完GIF图 ", "让我们开始写demo吧", R.drawable.guide_img_five, R.drawable.guide_line_left_long, R.drawable.guide_line_right_long));
        mGuideAdapter = new GuideAdapter(getSupportFragmentManager(), mFragments);
 
        //xml中的LinearLayout布局
        mLinearLayout = (LinearLayout) findViewById(R.id.layout);
        viewPager = (ViewPager) findViewById(R.id.viewPager);
        viewPager.addOnPageChangeListener(this);
        //设置底部点的view
        diandianArray = new ImageView[5];
        for (int i = 0; i < diandianArray.length; i++) {
            imageView = new ImageView(this);
            diandianArray[i] = imageView;
            if (i == 0) {
                diandianArray[i].setImageResource(R.drawable.guide_point_sel);
            } else {
                diandianArray[i].setImageResource(R.drawable.guide_point_nor);
            }
 
            //此处为设置底部点的属性
            LinearLayout.LayoutParams linearLayout = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
            linearLayout.leftMargin = 15;
            linearLayout.rightMargin = 15;
 
            mLinearLayout.addView(imageView, linearLayout);
        }
        viewPager.setAdapter(mGuideAdapter);
    }
 
 
    @Override
    public void onPageScrollStateChanged(int arg0) {
 
    }
 
    @Override
    public void onPageScrolled(int arg0, float arg1, int arg2) {
 
    }
 
    @Override
    public void onPageSelected(int position) {
        for (int i = 0; i < diandianArray.length; i++) {
            mxperience.setVisibility(View.GONE);
            mLinearLayout.setVisibility(View.VISIBLE);
            diandianArray[position].setImageResource(R.drawable.guide_point_sel);
            if (i != position) {
                diandianArray[i].setImageResource(R.drawable.guide_point_nor);
            }
        }
 
        if (position == diandianArray.length - 1) {
            //当在最后一个的时候把立即体验按钮显示出来
            mLinearLayout.setVisibility(View.GONE);
            mxperience.setVisibility(View.VISIBLE);
        }
    }
}

到这里就完成了哈