[안드로이드] Fragment 프래그먼트 예제

프래그먼트를 활용해서 좌우로 화면이 넘어가는 어플 만들어보기

 

 

 

1. xml

1. activity_main.xml

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

    <com.google.android.material.tabs.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tab"
        app:tabSelectedTextColor="#0000ff"
        app:tabTextColor="#AAAAAA"/>

    <androidx.viewpager.widget.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/pager"/>

</LinearLayout>

 

• 레이아웃 리소스에 TabLayout과 ViewPager 두 가지를 추가한다.

• TabLayout에는 프래그먼트의 제목을 지정해 줄 수 있고, ViewPager는 각 프래그먼트를 보여주는 역할을 한다.

• TabLayout의 tabselectedTextColor는 현재 선택되어있는 탭의 글씨 색을 설정하고, tabTextColor는 선택되어있지 않은 탭들의 글씨 색을 설정한다.

 

---

 

2. 라이브러리 추가

 

▼ design 라이브러리 추가

 

---

 

• 안드로이드에서 design 라이브러리를 추가해주고, bulid.gradle (module:app) 파일을 열어 'com.adnroid.support:design:26.0.0' 이 추가되었는지 확인한다.

 

 

---

3. java

• 자바 소스는 각 프래그먼트들과 페이지 어댑터, 메인클래스로 구성된다.

 

1. MainActivity.java

package com.example.myslideex;

import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;

import android.os.Bundle;
import android.widget.Toast;

import com.example.myslideex.dummy.DummyContent;
import com.google.android.material.tabs.TabLayout;

public class MainActivity extends AppCompatActivity implements ItemFragment.OnListFragmentInteractionListener {

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

        ViewPager viewPager = findViewById(R.id.pager);
        MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager());
        viewPager.setAdapter(adapter);

        TabLayout tabLayout = findViewById(R.id.tab);
        tabLayout.setupWithViewPager(viewPager);
    }

    @Override
    public void onListFragmentInteraction(DummyContent.DummyItem item) {
        Toast.makeText(getApplicationContext(), item.toString(), Toast.LENGTH_SHORT).show();
    }
}

• 메인 액티비티에서 레이아웃에 만들었던 뷰페이저와 페이저 어댑터를 연결시켜주고, 탭 레이아웃과 뷰 페이저를 연결시켜준다. 또, 메인 액티비티는 ItemFragment 클래스를 상속받는다. 처음 ItemFragment를 implements 시키면 빨간 줄이 그이면서 오류가 발생하는데, 이 부분에서 alt+enter를 눌러 필요한 코드를 오버 라이딩시켜주면 된다.

• onListFragmentInteraction()은 아이템 리스트를 클릭했을 때 발생하는 이벤트를 지정해주는 역할을 한다. 

   

2. MyPagerAdapter.java

package com.example.myslideex;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;

import java.util.ArrayList;

public class MyPagerAdapter extends FragmentPagerAdapter {

    private ArrayList<Fragment> mData;
    String[] tabname = {"왼쪽탭","가운데", "오른쪽탭"};

    public MyPagerAdapter(@NonNull FragmentManager fm) {
        super(fm);
        mData = new ArrayList<>();
        mData.add(new ColorFragment());
        mData.add(new ItemFragment());
        mData.add(new BlankFragment());
    }

    @NonNull
    @Override
    public Fragment getItem(int position) {
        return mData.get(position);
    }

    @Override
    public int getCount() {
        return mData.size();
    }


    // TapLayout 이름 지정
    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return tabname[position];
        //return position + " 번째";
    }
}

• 페이저어댑터에서 각 프래그먼트와 뷰 페이저, 탭 레이아웃을 연결시켜준다. 데이터를 연결시킨 후 앱을 실행해 화면을 움직여보면 탭과 뷰 페이저가 연결되어 함께 움직이는 것을 확인할 수 있다.

• CharSequence는 아래 사진처럼 오버라이딩 해서 사용하면 필요한 코드를 자동 완성시켜 쓸 수 있다.

 

 

3. 여러 프래그먼트들

• 프래그먼트의 자바소스는 아래 그림처럼 추가해주면 된다. 이번 프로젝트에서는 프래그먼트를 연결하는 정도로만 했기 때문에 프래그먼트의 내부 소스는 다루지 않았다. 프로젝트에는 Fragment(Blank)와 Fragment(List)를 추가해주었다.