Android uses ViewPager to implement APP's guide page and dot

Posted by bhawap on Fri, 10 Jan 2020 16:12:17 +0100

The display effect on the simulator is as follows:

The general idea and code are as follows:

1. First, create a layout file,

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context=".ViewPagerFragmentActivity">

    <!--Controls for sliding layout-->
    <android.support.v4.view.ViewPager
        android:id="@+id/myViewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!--Controls for displaying different small dots according to the display page-->
    <LinearLayout
        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"></LinearLayout>

</RelativeLayout>

2. Create four layout files, one layout file and one picture

I have four layout file names here for easy understanding: fmain.xml, fphone.xml, ffriend.xml, fme.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">

    <!--First picture-->
    <ImageView
        android:id="@+id/bookapp1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:src="@drawable/bookapp1" />

</LinearLayout>

<?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">

    <!--Second picture-->
    <ImageView
        android:id="@+id/bookapp2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:src="@drawable/bookapp2" />

</LinearLayout>

<?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">

    <!--Third picture-->
    <ImageView
        android:id="@+id/bookapp3"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:src="@drawable/bookapp3" />

</LinearLayout>

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

    <!--Fourth picture-->
    <ImageView
        android:id="@+id/bookapp4"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:src="@drawable/bookapp4" />

    <Button
        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="Immediate experience"
        android:textSize="20dp"/>

</RelativeLayout>

3. Then create four corresponding JAVA classes, inherit Fragment,

The four JAVA class names are consistent with the layout file names, fmain.java, fphone.java, ffriend.java and 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;

/**
 * JAVA class of Fragment of the first page
 */
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);
        //Get the control object of the first picture
        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;

/**
 * JAVA class of Fragment of the second page
 */
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);
        //Get the control object of the second picture
        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;

/**
 * JAVA class of Fragment of the third page
 */
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);
        //Get the control object of the third picture
        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;

/**
 * JAVA class of Fragment of the fourth page
 */
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);
        //Get the control object of the fourth picture
        ImageView bookapp4 = v.findViewById(R.id.bookapp4);
        return v;
    }
}

4. Create a layout file for external resources, named myselect.xml

How to create?

Switch to Project mode -- > select the current Project new Android return file -- > type is Drawable, root is select (must be lowercase)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--Unselected pictures-->
    <item android:drawable="@drawable/smile" android:state_selected="false" />
    <!--Selected pictures-->
    <item android:drawable="@drawable/happy" android:state_selected="true" />
</selector>

5. Create an Activity named 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<Fragment> 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);

        //Add Fragment to List set
        fragmentList = new ArrayList<>();
        fragmentList.add(new Fmain());
        fragmentList.add(new Fphone());
        fragmentList.add(new Ffriend());
        fragmentList.add(new Fme());


        //Instantiate adapter
        myFragmentPagerAdapter = new myFragmentPagerAdapter(getSupportFragmentManager(), fragmentList);
        //Get ViewPager object
        myViewPager = findViewById(R.id.myViewPager);
        //Set adapter for ViewPager
        myViewPager.setAdapter(myFragmentPagerAdapter);
        myViewPager.setOnPageChangeListener(this);

        //Initialize display of first page
        myViewPager.setCurrentItem(0);


        //Generate corresponding number of navigation dots
        LinearLayout layout = findViewById(R.id.dot_layout);
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
        //Set the space between the left and right of the small dots
        params.setMargins(10, 0, 10, 0);


        //Get the number of pages
        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) {
                //On default startup, the first dot is selected
                imageView.setSelected(true);
            } else {
                imageView.setSelected(false);
            }
            //Get a reference to each small dot to change their state (in the onPageSelected method) when you slide the page.
            dotViews[i] = imageView;
            //Add to layout to display
            layout.addView(imageView);
        }

    }

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

    }

    /**
     * The index value of the current slide display page can be used to set the status of the corresponding small circle point.
     * @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) {

    }


    /**
     * Create adapter for Fragment
     */
    class myFragmentPagerAdapter extends FragmentPagerAdapter {
        List<Fragment> fragmentList;

        public myFragmentPagerAdapter(FragmentManager fm, List<Fragment> fragmentList) {
            super(fm);
            this.fragmentList = fragmentList;
        }

        /**
         * Show page
         * @param position
         * @return
         */
        @Override
        public Fragment getItem(int position) {
            return fragmentList.get(position);
        }

        /**
         * There are several pages
         * @return
         */
        @Override
        public int getCount() {
            return fragmentList.size();
        }
    }


}

Topics: Android Fragment Java xml

Programmer Think

Android uses ViewPager to implement APP's guide page and dot

Hot Topics