2
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

スワイプして画面を切り替える

Posted at

今回はViewPagerについて解説をして行きたいと思います。
#はじめに
今回はスワイプでViewを切り替えることができるViewPagerを使ってみたいと思います。
横にスワイプしたときに画面が切り替わるあれです。
実際にどんなものかURLを載せておきますのでわからない方はぜひ確認して見てください。
https://media.giphy.com/media/pVZA3Zuhmf8uM8Vkd5/giphy.gif
またGitHubにもソースを公開しております。
https://github.com/minton0721/ViewPagerSample

##STEP1 MainActivityの編集
まず最初にMainActivityにViewPagerを追加します。

MainActivity.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/homePage"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="vertical">
    <android.support.v4.view.PagerTabStrip
        android:id="@+id/pager_tab_strip"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:background="#fff"
        android:textColor="#FF5F5F"
        android:paddingTop="10dp"
        android:paddingBottom="10dp"/>
    </android.support.v4.view.ViewPager>

</android.support.constraint.ConstraintLayout>

PagerTabStripはタブのタイトルが表示されます。必要なければ消しても良いですが、これがないと何のページかわからなくなってしまうと思いますので、ここでは実装して行きます。
必要な場合は必ずViewPagerの中に入れましょう。

##STEP2 Adapterの作成

MyFragmentStatePagerAdapter.java
public class MyFragmentStatePagerAdapter extends FragmentPagerAdapter {

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

    @Override
    public Fragment getItem(int i) {

        switch(i){
            case 0:
                return new Fragment0();
            case 1:
                return new Fragment1();
            default:
                return new Fragment2();
        }

    }

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

    @Override
    public CharSequence getPageTitle(int position) {
        switch (position){
            case 0:
                return "画面1";
            case 1:
                return "画面2";
            default:
                return "画面3";

        }
    }

}

##STEP3 MainActivityの編集

MainActivity.java
public class MainActivity extends AppCompatActivity {
    ViewPager viewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewPager = findViewById(R.id.homePage);
        viewPager.setAdapter(new MyFragmentStatePagerAdapter(getSupportFragmentManager()));

    }
}

setAdapterでMyFragmentStatePagerAdapterに接続します。
##STEP4 Fragmentの呼び込み

各フラグメント.java
class Fragment0 extends Fragment {
    View rootView;
    @Override
    public View onCreateView(LayoutInflater inflater,
                             ViewGroup container,
                             Bundle savedInstanceState) {
        rootView = inflater.inflate(R.layout.fragment0, container, false);
        return rootView;
    }

}

CreateViewで画面を呼び出してあげます。
説明が下手かもしれませんが、これで完成です。
もっとうまく説明できるようになりたい、、、

2
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?