[Android] ViewPager를 이용한 카카오톡 페이지 만들기

 

안녕하세요. 카카오톡 UI처럼 View를 꾸미고 싶을때

 

ViewPager를 많이 사용합니다.

(저는 ViewPager보다는 ViewPager Indicator 를 추천합니다.)

 

간단하게 만들기에는 ViewPager를 사용하면 편리합니다.

 

퀄리티를 비교하자면 낮지만 간단하기에 자주 사용됩니다.

 

 

1. Fragment Layout을 3개 생성합니다.

 

fragment_one.xml

<?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"
    android:background="#000000"
    >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textSize="30dp"
        android:textColor="#ff00ff"
        android:textStyle="bold"
        android:text="첫번째 페이지"/>

</RelativeLayout>

fragment_two.xml

<?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"
    android:background="#00f0f0"
    >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textSize="30dp"
        android:textColor="#FFFFFF"
        android:textStyle="bold"
        android:text="두번째 페이지"/>

</RelativeLayout>

fragment_three.xml

<?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"
    android:background="#649212"
    >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textSize="30dp"
        android:textColor="#FFFFFF"
        android:textStyle="bold"
        android:text="세번째 페이지"/>

</RelativeLayout>

 

2. 각각 Fragment를 생성합니다.

 

FirstFragment.class

public class FirstFragment extends android.support.v4.app.Fragment
{
    public FirstFragment()
    {
    }

    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {
        RelativeLayout layout = (RelativeLayout) inflater.inflate(R.layout.fragment_one, container, false);
        return layout;
    }
}

 

 

SecondFragment.class

public class SecondFragment extends android.support.v4.app.Fragment
{
    public SecondFragment()
    {
    }
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
    }

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

 

 

ThridFragment.class

public class ThirdFragment extends android.support.v4.app.Fragment
{
    public ThirdFragment()
    {
    }
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
    }

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

 

3. MainActivity를 작성합니다.

 

import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {
    ViewPager vp;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        vp = (ViewPager)findViewById(R.id.vp);
        Button first = (Button)findViewById(R.id.one);
        Button second = (Button)findViewById(R.id.two);
        Button third = (Button)findViewById(R.id.three);

        vp.setAdapter(new pagerAdapter(getSupportFragmentManager()));
        vp.setCurrentItem(0);

        first.setOnClickListener(movePageListener);
        first.setTag(0);
        second.setOnClickListener(movePageListener);
        second.setTag(1);
        third.setOnClickListener(movePageListener);
        third.setTag(2);
    }
    View.OnClickListener movePageListener = new View.OnClickListener()
    {
        @Override
        public void onClick(View v)
        {
            int tag = (int) v.getTag();
            vp.setCurrentItem(tag);
        }
    };

    private class pagerAdapter extends FragmentStatePagerAdapter
    {
        public pagerAdapter(android.support.v4.app.FragmentManager fm)
        {
            super(fm);
        }
        @Override
        public android.support.v4.app.Fragment getItem(int position)
        {
            switch(position)
            {
                case 0:
                    return new FirstFragment();
                case 1:
                    return new SecondFragment();
                case 2:
                    return new ThirdFragment();
                default:
                    return null;
            }
        }
        @Override
        public int getCount()
        {
            return 3;
        }
    }

}

 

4. activity_main을 작성합니다.

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

    <LinearLayout
        android:id="@+id/tap"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/one"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="First" />

        <Button
            android:id="@+id/two"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="Second" />

        <Button
            android:id="@+id/three"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="Third" />
    </LinearLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/tap">

    </android.support.v4.view.ViewPager>

</RelativeLayout>

 

 

5. 폴더 경로

 

 

 

 

6. 결과

 

 

ViewPager말고

 

FragmentTabHost를 이용한 방법도 있습니다.

 

다음에는 FragmentTabHost를 이용해 보겠으며

 

PagerSlidingTabStrip + Viewpager를 이용한 방법도 보여드리겠습니다.

 

감사합니다.