4-5-1 뷰페이저 만들기 / 4-5-2 타이틀스트립 사용하기
MainActivity
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
package com.example.boostcoursepractice;
import androidx.annotation.NonNull;
import androidx.annotation.RequiresApi;
import androidx.appcompat.app.ActionBar;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.app.ActivityCompat;
import androidx.core.content.ContextCompat;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentStatePagerAdapter;
import androidx.viewpager.widget.ViewPager;
import android.Manifest;
import android.content.pm.PackageManager;
import android.os.Build;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.FrameLayout;
import android.widget.Toast;
import android.widget.Toolbar;
import com.google.android.material.tabs.TabLayout;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
ViewPager pager ;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
pager = (ViewPager) findViewById(R.id.pager) ;
pager.setOffscreenPageLimit(3);
MoviePagerAdapter moviePagerAdapter = new MoviePagerAdapter(getSupportFragmentManager());
Fragment fragment1 = new Fragment1();
moviePagerAdapter.addItem(fragment1);
Fragment fragment2 = new Fragment2();
moviePagerAdapter.addItem(fragment2);
Fragment fragment3 = new Fragment3();
moviePagerAdapter.addItem(fragment3);
pager.setAdapter(moviePagerAdapter);
Button button = (Button) findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { pager.setCurrentItem(1); } }); }
class MoviePagerAdapter extends FragmentStatePagerAdapter
{
ArrayList<Fragment> items = new ArrayList<Fragment>();
public MoviePagerAdapter(FragmentManager fm) {
super(fm);
}
public void addItem(Fragment item)
{
items.add(item);
}
@Override
public Fragment getItem(int position) {
return items.get(position);
}
@Override
public int getCount() {
return items.size();
}
@Nullable
@Override public CharSequence getPageTitle(int position) { return "페이지" + position; } }
}
|
cs |
|
|
|
Fragment1
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
package com.example.boostcoursepractice;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import androidx.viewpager.widget.ViewPager;
public class Fragment1 extends Fragment {
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
ViewGroup rootView = (ViewGroup)inflater.inflate(R.layout.fragment1, container, false);
return rootView;
}
}
|
cs |
Fragment2
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
package com.example.boostcoursepractice;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import androidx.viewpager.widget.ViewPager;
public class Fragment2 extends Fragment {
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
ViewGroup rootView = (ViewGroup)inflater.inflate(R.layout.fragment2, container, false);
return rootView;
}
}
|
cs |
Fragment3
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
package com.example.boostcoursepractice;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import androidx.viewpager.widget.ViewPager;
public class Fragment3 extends Fragment {
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
ViewGroup rootView = (ViewGroup)inflater.inflate(R.layout.fragment3, container, false);
return rootView;
}
}
|
cs |
activity_main.xml
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<?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">
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="0dp"
android:layout_marginTop="0dp"
android:text="두 번째 보기" />
<androidx.viewpager.widget.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/button"
android:layout_alignParentLeft="true"
android:id="@+id/pager">
<androidx.viewpager.widget.PagerTitleStrip
android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#55cedf" android:paddingTop="5dp" android:paddingBottom="5dp" ></androidx.viewpager.widget.PagerTitleStrip> </androidx.viewpager.widget.ViewPager>
</RelativeLayout>
|
cs |
fragment1.xml
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/design_default_color_primary"
android:orientation="vertical">
<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="첫번째"
android:textSize="40dp" />
</LinearLayout>
|
cs |
fragment2.xml
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorAccent"
android:orientation="vertical">
<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="두번째"
android:textSize="40dp" />
</LinearLayout>
|
cs |
fragment3.xml
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/holo_green_dark"
android:orientation="vertical">
<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="세번째"
android:textSize="40dp" />
</LinearLayout>
|
cs |
우선 뷰페이저를 만들기 위해서 메인액티비티 xml파일에 뷰페이저 태그를 만들어 추가해주었다.
이제 메인액티비의 자바코드로 가보자. 방금 만든 뷰페이저를 찾아 참조해주어 pager를 만들고 그 페이저에 어댑터를 만들어 줘야 한다.
class MoviePagerAdapter extends FragmentStatePagerAdapter
{
ArrayList<Fragment> items = new ArrayList<Fragment>();
public MoviePagerAdapter(FragmentManager fm) {
super(fm);
}
public void addItem(Fragment item)
{
items.add(item);
}
@Override
public Fragment getItem(int position) {
return items.get(position);
}
@Override
public int getCount() {
return items.size();
}
}
위 처럼 FragmentStatePagerAdapter만들어 어댑터를 만들어 줘야 하고 필수로생성자를 만들고 getItem, getCount를 오버라이드 해줘야 된다. 추가로 addItem을 만들어 어댑터의 아이템을 추가할 수 있도록 한다.
MoviePagerAdapter moviePagerAdapter = new MoviePagerAdapter(getSupportFragmentManager());
Fragment fragment1 = new Fragment1();
moviePagerAdapter.addItem(fragment1);
Fragment fragment2 = new Fragment2();
moviePagerAdapter.addItem(fragment2);
Fragment fragment3 = new Fragment3();
moviePagerAdapter.addItem(fragment3);
pager.setAdapter(moviePagerAdapter);
마지막으로 어댑터를 만들어주고 생성자의 매개변수로 액티비티의 프래그먼트 매니저를 전달해 주고 어댑터의 아이템을 추가해주고 마지막으로 페이저에 어댑터를 설정해주면 끝난다.
페이지 스트립을 만드는 것은 매우 간다하다. 그냥 아까 만든 뷰페이저 안에
<androidx.viewpager.widget.PagerTitleStrip
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#55cedf"
android:paddingTop="5dp"
android:paddingBottom="5dp"
></androidx.viewpager.widget.PagerTitleStrip>
라고 태그만 추가해주고 페이저 어댑터의
@Nullable
@Override
public CharSequence getPageTitle(int position) {
return "페이지" + position;
}
이 함수만 추가적으로 오버라이드 해주면 된다.
