농부지기 :: ViewPage

ViewPage - 2단계

[Android] - 개념/ViewPage 다루기 2016. 11. 25. 13:15

참고 url : http://itpangpang.tistory.com/286

* 개발 방향 및 Logic

1. ActionBar를 사용하지 않는다.

2. ActionBar대신에 TextView를 통해서 ActionBar역할을 하도록 한다.

3. ViewPage이동시 swipe기능도 추가한다.

[drawable]-[tab_color_selector.xml]

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#301500" android:state_selected="true" />
<item android:color="#8C8C8C" />
</selector>

[drawable]-[tab_bg_off.xml]

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="rectangle">
            <padding
                android:bottom="2dp"
                />
            <solid android:color="#8C8C8C" />
        </shape>
    </item>

    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#EAEAEA" />
        </shape>
    </item>
</layer-list>

[drawable]-[tab_bg_on.xml]

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="rectangle">
            <padding
                android:bottom="5dp"
                />
            <solid android:color="#301500" />
        </shape>
    </item>

    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#EAEAEA" />
        </shape>
    </item>
</layer-list>

[drawable]-[tab_bg_selector.xml]

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_selected="false"
        android:drawable="@drawable/tab_bg_off" />
    <item
        android:state_selected="true"
        android:drawable="@drawable/tab_bg_on" />
</selector>

[FirstFragment.java] >> [SecondFragment.java], [ThirdFragment.java] 두 개 java도 생성

[fragment_first.xml] >> [fragment_second.xml], [fragment_third.xml] 2개도 생성

[ activity_main.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"
    >
    <LinearLayout
        android:id="@+id/ll"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:id="@+id/tab_first"
            android:layout_width="0dip"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:gravity="center"
            android:textColor="@drawable/tab_color_selector"
            android:background="@drawable/tab_bg_selector"
            android:text="친구" />

        <TextView
            android:id="@+id/tab_second"
            android:layout_width="0dip"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:gravity="center"
            android:textColor="@drawable/tab_color_selector"
            android:background="@drawable/tab_bg_selector"
            android:text="채팅방" />

        <TextView
            android:id="@+id/tab_third"
            android:layout_width="0dip"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:gravity="center"
            android:textColor="@drawable/tab_color_selector"
            android:background="@drawable/tab_bg_selector"
            android:text="설정" />
    </LinearLayout>

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

</RelativeLayout>

[ MainActivity.xml ]

package org.example.farmkim.study001;

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

public class MainActivity extends AppCompatActivity
{
    ViewPager vp;
    LinearLayout ll;
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        vp = (ViewPager)findViewById(R.id.vp);
        ll = (LinearLayout)findViewById(R.id.ll);

        //ActionBar 역할을 TextView
        TextView tab_first = (TextView)findViewById(R.id.tab_first);
        TextView tab_second = (TextView)findViewById(R.id.tab_second);
        TextView tab_third = (TextView)findViewById(R.id.tab_third);

        //ViewPage객체에 Adapter 연결
        //이때, ViewPage에 Fragment가 연동된다.
        vp.setAdapter(new pagerAdapter(getSupportFragmentManager()));
        vp.setCurrentItem(0);

        //tab에 OnClick Event설정 및 Tag 값 지정
        tab_first.setOnClickListener(movePageListener);
        tab_first.setTag(0);
        tab_second.setOnClickListener(movePageListener);
        tab_second.setTag(1);
        tab_third.setOnClickListener(movePageListener);
        tab_third.setTag(2);

        tab_first.setSelected(true);

        //ViewPage에 Page가 변경될때 호출되는 Event 추가.
        vp.addOnPageChangeListener(new ViewPager.OnPageChangeListener()
        {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels)
            {

            }

            @Override
            public void onPageSelected(int position)
            {
                int i = 0;
                while(i<3)
                {
                    if(position==i)
                    {
                        ll.findViewWithTag(i).setSelected(true);
                    }
                    else
                    {
                        ll.findViewWithTag(i).setSelected(false);
                    }
                    i++;
                }
            }

            @Override
            public void onPageScrollStateChanged(int state)
            {

            }
        });
    }

    //Tab역할을 하는 상단 TextView를 클릭 시 Event
    View.OnClickListener movePageListener = new View.OnClickListener()
    {
        @Override
        public void onClick(View v)
        {
            int tag = (int) v.getTag();

            int i = 0;
            while(i<3)
            {
                if(tag==i)
                {
                    //특정 Component를 선택해준다.
                    //그럴경우, drawable안에 xml에 <selector>tag안에 state_selected="true" 속성을 찾아서 style을 적용한다.
                    ll.findViewWithTag(i).setSelected(true);
                }
                else
                {
                    ll.findViewWithTag(i).setSelected(false);
                }
                i++;
            }

            vp.setCurrentItem(tag);
        }
    };

    //ViewPager객체에 Adapter 연결.
    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;
        }
    }
}