Android guide page

1: layout

//  res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"? >
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_guide"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/guide_ViewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <requestFocus />
    </androidx.viewpager.widget.ViewPager>
    <LinearLayout
        android:id="@+id/dot_Layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:gravity="center"
        android:layout_marginBottom="45dip"
        >
        <View
            android:id="@+id/circle0"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:background="@drawable/guide_circle_bg2"
            android:layout_marginRight="10dp"/>
        <View
            android:id="@+id/circle1"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:background="@drawable/guide_circle_bg1"
            android:layout_marginRight="10dp"/>
        <View
            android:id="@+id/circle2"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:background="@drawable/guide_circle_bg1"
            android:layout_marginRight="10dp"/>
        <View
            android:id="@+id/circle3"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:background="@drawable/guide_circle_bg1"
            android:layout_marginRight="10dp"/>
        <View
            android:id="@+id/circle4"
            android:layout_width="10dp"
            android:background="@drawable/guide_circle_bg1"
            android:layout_height="10dp" />
    </LinearLayout>

</RelativeLayout>
Copy the code

//  res/drawable/guide_circle_bg1

<?xml version="1.0" encoding="utf-8"? >
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <corners android:radius="5dp"/>
    <solid android:color="# 666666"/>
    <size android:width="10dp"
        android:height="10dp"/>

</shape>
Copy the code

//  res/drawable/guide_circle_bg2

<?xml version="1.0" encoding="utf-8"? >
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <corners android:radius="5dp"/>
    <solid android:color="#9932cd"/>
    <size android:width="10dp"
        android:height="10dp"/>

</shape>
Copy the code

// res/layout/fragment_guide

<?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:id="@+id/guide_image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"/>

</LinearLayout>
Copy the code

2:Fragment

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

public class GuideFragment extends Fragment {
    private ImageView mGuideImg;

    public static Fragment newInstance(int paramInt) {
        GuideFragment guideFragment = new GuideFragment();
        Bundle localBundle = new Bundle();
        localBundle.putInt("ImageID", paramInt);
        guideFragment.setArguments(localBundle);
        return guideFragment;
    }

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

        View view = inflater.inflate(R.layout.fragment_guide, container, false);
        mGuideImg = view.findViewById(R.id.guide_image);
        mGuideImg.setImageResource(getArguments().getInt("ImageID".0));
        returnview; }}Copy the code

3:Adapter

import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

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

import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;
/* * FragmentPagerAdapter does not destroy Fragment instances, only views; * FragmentStatePagerAdapter destroy instance. * * FragmentPagerAdapter Detach when it is not in use and attach when it is needed again; * FragmentStatePagerAdapter when not in use to perform the remove and need to add. * so when choosing to suggest the following * when the page is more, in order to save memory, using FragmentStatePagerAdpater priority; * Use FragmentPagerAdapter when only a few pages are available to reduce the overhead of repeated creation and destruction. * * /
public class ViewPagerAdapter extends FragmentPagerAdapter {

    private FragmentManager mfragmentManager;
    private List<Fragment> mlist;

    public ViewPagerAdapter(FragmentManager fm,List<Fragment> list) {
        super(fm);
        mlist = list;
    }

    @Override
    public Fragment getItem(int arg0) {
        return mlist.get(arg0);// which page is displayed
    }

    @Override
    public int getCount(a) {
        return mlist.size();// There are several pages}}Copy the code

4:Activity

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.viewpager.widget.ViewPager;

import android.os.Bundle;
import android.util.Log;
import android.view.View;

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

public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {

    private ViewPager mViewPager;
    // ArrayList is initialized with parameters when a specific number is specified.
    private List<Fragment> mListFragment = new ArrayList<>(5);
    private List<View> mListView = new ArrayList<>(5);
    private ViewPagerAdapter mAdapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initView();
    }
    private void initView(a){
        mViewPager = findViewById(R.id.guide_ViewPager);
        mViewPager.setOnPageChangeListener(this);
        mListFragment.add(GuideFragment.newInstance(R.mipmap.welcome_1));
        mListFragment.add(GuideFragment.newInstance(R.mipmap.welcome_2));
        mListFragment.add(GuideFragment.newInstance(R.mipmap.welcome_3));
        mListFragment.add(GuideFragment.newInstance(R.mipmap.welcome_5));
        mListFragment.add(GuideFragment.newInstance(R.mipmap.welcome_7));
        mAdapter = new ViewPagerAdapter(getSupportFragmentManager(),mListFragment);
        mListView.add(findViewById(R.id.circle0));
        mListView.add(findViewById(R.id.circle1));
        mListView.add(findViewById(R.id.circle2));
        mListView.add(findViewById(R.id.circle3));
        mListView.add(findViewById(R.id.circle4));
        mViewPager.setAdapter(mAdapter);
        mViewPager.setCurrentItem(0);
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}@Override
    public void onPageSelected(int position) {
        Log.d("lsc"."--lsc:" + position);
        switch (position) {
            case 0:
                setCircle(0);
                break;
            case 1:
                setCircle(1);
                break;
            case 2:
                setCircle(2);
                break;
            case 3:
                setCircle(3);
                break;
            case 4:
                setCircle(4);
                break; }}@Override
    public void onPageScrollStateChanged(int state) {}private void setCircle(int position){
        for (int i=0; i<mListView.size(); i++){if (position == i){
                mListView.get(i).setBackgroundResource(R.drawable.guide_circle_bg2);
                continue; } mListView.get(i).setBackgroundResource(R.drawable.guide_circle_bg1); }}}Copy the code