ViewPager basics

Verification environment

The content of this article has been verified in the following environment.

Overview

A view that can be switched using Fragment as a page. Like ListView, ViewPager should be used in combination with Adapter.

A view that inherits this view also allows you to swipe the screen to switch pages and tabs. This time, I will explain the basic usage of ViewPager.

ViewPager_01 .png

App to create

An app that allows you to switch between self-introduction pages by swiping

Complete image

ViewPager_02 .png

List of created files

file name Description
MainActivity.java
activity_main.xml
ViewPager Screen layout that holds views and buttons and their Activity
NameFragment.java
fragment_name.xml
Layout of the first page and its Fragment (name page)
AgeFragment.java
fragment_age.xml
Layout of the second page and its Fragment (age page)
FoodFragment.java
fragment_food.xml
Layout of the 3rd page and its Fragment (page of favorite food)
UserInfoViewPagerAdapter.java Adapter generating Fragment when swiping

Name page details

The code for the name page looks like this:

Layout file

fragment_name.xml


<LinearLayout 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:orientation="vertical"
    tools:context="jp.co.casareal.sample.viewpagersample.fragment.NameFragment">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="The first page"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="The name is Casa Real Taro."
        android:textSize="20sp" />

</LinearLayout>

Java source code

NameFragment.java


package jp.co.casareal.sample.viewpagersample.fragment;


import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import jp.co.casareal.sample.viewpagersample.R;

/**
 * A simple {@link Fragment} subclass.
 */
public class NameFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_name, container, false);
    }

}

Adapter details

There are two types of Adapters. "FragmentPagerAdapter" and "FragmentStatePagerAdapter". Since each operation is different, it is necessary to select it according to the application to be created. When the page is switched, "FragmentPagerAdapter" keeps the displayed Fragment in the memory. "FragmentStatePagerAdapter" discards Fragment when the page is switched. Since the number of pages is small this time, I used "FragmentPagerAdapter".

UserInfoViewPagerAdapter.java


package jp.co.casareal.sample.viewpagersample.adapter;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import jp.co.casareal.sample.viewpagersample.fragment.AgeFragment;
import jp.co.casareal.sample.viewpagersample.fragment.FoodFragment;
import jp.co.casareal.sample.viewpagersample.fragment.NameFragment;

/**
 * Created by naoi on 2017/04/24.
 */

public class UserInfoViewPagerAdapter extends FragmentPagerAdapter {
    private static final int PAGE_NUM = 3;

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

    @Override
    public Fragment getItem(int position) {
        Fragment fragment = null;
        switch (position){
            case 0:
                fragment = new NameFragment();
                break;
            case 1:
                fragment = new AgeFragment();
                break;
            default:
                fragment = new FoodFragment();
        }
        return fragment;
    }

    @Override
    public int getCount() {
        return PAGE_NUM;
    }
}

Details of the Activity that holds the ViewPager

Layout file

activity_main.xml


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    tools:context="jp.co.casareal.sample.viewpagersample.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <Button
            android:onClick="onClickGoToTop"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="To the first page"/>
        <Button
            android:onClick="onClickNext"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="to the next page"/>
    </LinearLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

Java source code

The point here is that if you want to change the page with Java source code, you can change it with the setCurrentItem () method of Adapter.

 MainActivity.java


package jp.co.casareal.sample.viewpagersample;

import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

import jp.co.casareal.sample.viewpagersample.adapter.UserInfoViewPagerAdapter;

public class MainActivity extends AppCompatActivity {

    private ViewPager pager;

    private FragmentPagerAdapter adapter;

    private int currentPage;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        pager = (ViewPager) findViewById(R.id.pager);

        adapter = new UserInfoViewPagerAdapter(getSupportFragmentManager());
        pager.setAdapter(adapter);
        currentPage = 0;

    }

    public void onClickNext(View view) {
        currentPage ++;
        pager.setCurrentItem(currentPage);
    }

    public void onClickGoToTop(View view) {
        currentPage = 0;
        pager.setCurrentItem(currentPage);
    }
}

reference

https://developer.android.com/reference/android/support/v13/app/FragmentPagerAdapter.html

https://developer.android.com/training/implementing-navigation/lateral.html

Recommended Posts

ViewPager basics
Rails basics
Ruby basics
Ruby basics
Fragment basics
JPA Basics 1
Docker basics
Java basics
Java basics
RSpec Basics
JavaScript basics
JPA Basics 2
Hash basics
Java basics
Ruby basics
RecyclerView Basics
Rails CSV basics
Rails Routing Basics
Rails database basics
Rails Logger Basics
java programming basics
Basics of Ruby
Java JAR basics
Object-oriented (Java) basics
vim (gitbush) basics
Regular expression basics
Java concurrency basics
Rspec Basics [Rails]
Stream API basics