반응형

이 게시물은 다음 링크를 참조하여 학습했습니다.

 

안드로이드 뷰페이저 기본 사용법. (Android ViewPager)

1. 화면에 표시될 컨텐츠를 전환하는 방법. 안드로이드를 탑재한 스마트폰이 처음 만들어지던 시기에는, 앱 화면을 구성할 때 UI(User Interface)의 "직관성"이 가장 중요한 이슈 중 하나였습니다. 사

recipes4dev.tistory.com

 

[Android] 안드로이드 - 뷰페이저(ViewPager) 구현

ViewPager는 데이터를 페이지 단위로 표시하고 화면을 쓸어 넘기는 동작인 스와이프(Swipe)를 통해 페이지 전환을 할 수 있는 컨테이너(Container)입니다. 자체적으로 그리는 기능이 있지 않고 위젯을

lktprogrammer.tistory.com

지난 시간에 구현하지 못했던 Custom ViewPager를 구현하는데에 성공했다. 

코드상으로 문제가 없었다고 생각했지만, 문제가 있었다.

처음에는 ArrayList<vpItem> 자료형을 사용할 수 없나 싶었지만 문제는 엉뚱한 곳에 있었다.

ArrayList<vpItem>을 선언하고 초기화 하지 않아서 문제가 있었다.....

ArrayList를 선언만 해주면 당연히 빈 ArrayList가 생성되는줄 알았는데 아니였다.

사실 ArrayList를 사용하면서도 잘 몰랐던 부분인데 이 기회에 확실하게 알게 되었다.

activity_main.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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:orientation="vertical">
 
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="100dp"/>
 
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:background="#aaaaaa"/>
 
</LinearLayout>
cs

page.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?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:gravity="center_vertical">
 
    <ImageView
        android:id="@+id/iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher_round"/>
 
    <TextView
        android:id="@+id/tv"
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="seminzzang"/>
 
</LinearLayout>
cs

vpItem.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
package com.example.customviewpager;
 
import android.graphics.drawable.Drawable;
 
public class vpItem {
    private String tv_1;
 
    private Drawable d;
 
    public Drawable getD() {        return d;    }
 
    public void setD(Drawable d) {        this.d = d;    }
 
    public String getTv_1() {        return tv_1;    }
 
    public void setTv_1(String tv_1) {        this.tv_1 = tv_1;    }
}
 
cs

vpAdapter.java

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
package com.example.customviewpager;
 
import android.content.Context;
import android.graphics.drawable.Drawable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
 
import androidx.annotation.NonNull;
import androidx.viewpager.widget.PagerAdapter;
 
import java.util.ArrayList;
 
public class vpAdapter extends PagerAdapter {
    private ArrayList<vpItem> lists = new ArrayList<>();
    private Context mContext;
 
    public vpAdapter(){
 
    }
    //Context와 ArrayList<vpItem>을 전달받아 저장하는 생성자
    public vpAdapter(Context context, ArrayList<vpItem> lists){
        this.mContext = context;
        this.lists = lists;
    }
    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        View view = null;
 
        if(mContext != null) {
            //LayoutInflater를 통해 "/res/layout/page.xml"을 뷰로 생성
            LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            view = inflater.inflate(R.layout.page,container,false);
 
            ImageView d = (ImageView) view.findViewById(R.id.iv);
            TextView tv_1 = (TextView)view.findViewById(R.id.tv);
 
            tv_1.setText(lists.get(position).getTv_1());
            d.setImageDrawable(lists.get(position).getD());
        }
        //뷰페이저에 추가
        container.addView(view);
        return view;
    }
 
    @Override
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
        //뷰페이저에서 삭제
        container.removeView((View)object);
    }
 
    @Override
    public int getCount() {
        //전체 페이지 수는 lists의 사이즈
        return lists.size();
    }
 
    @Override
    public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
        return (view == (View)object);
    }
}
 
cs

MainActivity.java

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
package com.example.customviewpager;
 
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.content.ContextCompat;
import androidx.viewpager.widget.ViewPager;
 
import android.os.Bundle;
 
import java.util.ArrayList;
 
public class MainActivity extends AppCompatActivity {
    private ViewPager vp;
    private ArrayList<vpItem> lists = new ArrayList<>();
    public int num = 1;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        initiateVp();
        initiateVp();
        initiateVp();
        initiateVp();
        initiateVp();
 
        vp = (ViewPager)findViewById(R.id.vp);
        vp.setAdapter(new vpAdapter(this,lists));
    }
 
    public void initiateVp(){
        vpItem v = new vpItem();
        v.setTv_1("seminzzang"+num);
        v.setD(ContextCompat.getDrawable(this, R.drawable.icon3));
        num++;
        lists.add(v);
    }
}
cs

 

기본적인 내용은 지난 시간에 공부한 ViewPagerExample과 크게 다르지 않으므로 링크를 첨부하겠다.

 

[안드로이드 스튜디오 독학#19] ViewPager

이 게시물은 다음 링크를 참조하여 학습했습니다. 안드로이드 뷰페이저 기본 사용법. (Android ViewPager) 1. 화면에 표시될 컨텐츠를 전환하는 방법. 안드로이드를 탑재한 스마트폰이 처음 만들어지

seminzzang.tistory.com

CustomViewPager 초기화면
CustomViewPager 왼쪽으로 넘긴 화면

반응형

+ Recent posts