농부지기 :: '[Android] - 개념/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도 생성

<?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="#FFFFFF"
        android:textStyle="bold"
        android:text="첫번째 페이지"/>

</RelativeLayout>

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

<?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="#FFFFFF"
        android:textStyle="bold"
        android:text="첫번째 페이지"/>

</RelativeLayout>

[ 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;
        }
    }
}

저작자표시

'[Android] - 개념 > ViewPage 다루기' 카테고리의 다른 글

ViewPage 기본 개념 (0)	2016.11.24
ViewPager - 1단계 (0)	2016.11.24

Posted by 농부지기

,

ViewPage 기본 개념

[Android] - 개념/ViewPage 다루기 2016. 11. 24. 17:11

1. ViewPage에서 기본 디폴티는 현재 보이는 페이지 좌우만 생성해놓고 사용하는 구조임

- 그럼 모든 탭의 화면을 항상 유지하고 싶다면 setOffscreenPageLimit를 사용하면 됨

- 유지라는 뜻은 화면에 사용자가 어떤 값을 입력 시 계속 메모리에 남아 있다는 뜻.

반데로, 유지하지 못하면 탭이 이동시 사용자가 입력한 값이 사라짐.

2. setOffscreenPageLimit()

- 좌우 몇개의 페이지를 그려놓고(준비)있을지 설정해줌.

- setOffscreenPageLimit(2) : 좌2, 현재, 우2 와 로 총 5페이지가 그려져(준비)있는 상태

- http://itpangpang.tistory.com/287

3. setUserVisibleHint

- 첫번째 page에서 두번째 page에 값을 넘기고 싶을 경우 사용

- http://itpangpang.tistory.com/288

- 사용방법 :

      @Override
      public void setUserVisibleHint(boolean inVisibleToUser){
          if (inVisibleToUser){
              //사용자에게 page가 보일 때 실행할 문장
             count = ((MainActivity)getActivity()).tempCount; //다른page에서 값을 받을 수 있음.

          }else{
              //사용자에게 page가 안보일 때 실행할 문자d
          }
      }

- 참고. 위에서 tempCount값을 얻어 올려면

tab을 변경 시 아래와 같은 script가 존재 해야 됨

           ((MainActivity)getActivity()).tempCount = Integer.parseInt(et.getText().toString());

저작자표시

'[Android] - 개념 > ViewPage 다루기' 카테고리의 다른 글

ViewPage - 2단계 (0)	2016.11.25
ViewPager - 1단계 (0)	2016.11.24

Posted by 농부지기

,

ViewPager - 1단계

[Android] - 개념/ViewPage 다루기 2016. 11. 24. 16:44

참고URL : http://itpangpang.tistory.com/284

[ ViewPager 1단계 ]

* 개발 방향 및 Logic

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

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

3. TextView (탭버튼)를 클릭 시 ViewPager에 페이지가 변경되도록 한다.

[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">
        <Button
            android:id="@+id/btn_first"
            android:layout_width="0dip"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="첫번째 탭" />

        <Button
            android:id="@+id/btn_second"
            android:layout_width="0dip"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="두번째 탭" />

        <Button
            android:id="@+id/btn_third"
            android:layout_width="0dip"
            android:layout_height="match_parent"
            android:layout_weight="1"
            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>

[fragment_first.xml], [fragment_second.xml], [fragment_third.xml] 3가지 거의 유사

<?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="#FFFFFF"
        android:textStyle="bold"
        android:text="첫번째 페이지"/>

</RelativeLayout>

[FirstFragment.java], [SecondFragment.java], [ThirdFragment.java]

public class FirstFragment extends 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_first, container, false);
        return layout;
    }
}

[MainActivity.java]

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

        vp = (ViewPager)findViewById(R.id.vp);
        Button btn_first = (Button)findViewById(R.id.btn_first);
        Button btn_second = (Button)findViewById(R.id.btn_second);
        Button btn_third = (Button)findViewById(R.id.btn_third);

        //ViewPage의 Page를 관리해주는 Adapter가 필요.
        //ViewPage와 Adapter연결
        vp.setAdapter(new pagerAdapter(getSupportFragmentManager()));

        //ViewPage.setCurrentItem()는 해당 ViewPage에 Fragment 를 보여준다.
        //맨 처음에 setCurrentItem()을 안하면 default로 첫번째(0) Fragment를 보여준다.
        //vp.setCurrentItem(0);

        btn_first.setOnClickListener(movePageListener);
        btn_first.setTag(0);
        btn_second.setOnClickListener(movePageListener);
        btn_second.setTag(1);
        btn_third.setOnClickListener(movePageListener);
        btn_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;
        }
    }
}