Karena ini adalah pertanyaan yang sangat sering diajukan, saya ingin meluangkan waktu dan upaya untuk menjelaskan ViewPager dengan beberapa Fragmen dan Tata Letak secara terperinci. Ini dia
ViewPager dengan beberapa file Fragmen dan Tata Letak - Cara
Berikut ini adalah contoh lengkap tentang bagaimana menerapkan ViewPager dengan Jenis fragmen yang berbeda dan file tata letak yang berbeda.
Dalam hal ini, saya memiliki 3 kelas Fragmen, dan file tata letak yang berbeda untuk setiap kelas. Agar hal-hal sederhana, tata letak fragmen-hanya berbeda dalam warna latar belakang mereka . Tentu saja, setiap file layout dapat digunakan untuk Fragmen.
FirstFragment.java memiliki tata letak latar belakang oranye , SecondFragment.java memiliki tata letak latar belakang hijau dan ThirdFragment.java memiliki tata letak latar belakang merah . Selanjutnya, setiap Fragmen menampilkan teks yang berbeda, tergantung dari kelas mana dan dari mana itu.
Perlu diketahui juga bahwa saya menggunakan fragmen dukungan-perpustakaan:
android.support.v4.app.Fragment
MainActivity.java (Menginisialisasi Viewpager dan memiliki adaptor untuknya sebagai kelas dalam). Sekali lagi lihat impor . Saya menggunakan android.support.v4
paket.
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
public class MainActivity extends FragmentActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ViewPager pager = (ViewPager) findViewById(R.id.viewPager);
pager.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));
}
private class MyPagerAdapter extends FragmentPagerAdapter {
public MyPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int pos) {
switch(pos) {
case 0: return FirstFragment.newInstance("FirstFragment, Instance 1");
case 1: return SecondFragment.newInstance("SecondFragment, Instance 1");
case 2: return ThirdFragment.newInstance("ThirdFragment, Instance 1");
case 3: return ThirdFragment.newInstance("ThirdFragment, Instance 2");
case 4: return ThirdFragment.newInstance("ThirdFragment, Instance 3");
default: return ThirdFragment.newInstance("ThirdFragment, Default");
}
}
@Override
public int getCount() {
return 5;
}
}
}
activity_main.xml (File MainActivitys .xml) - file tata letak sederhana, hanya berisi ViewPager yang memenuhi seluruh layar.
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/viewPager"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
Kelas Fragmen, FirstFragment.java
mengimpor android.support.v4.app.Fragment;
public class FirstFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.first_frag, container, false);
TextView tv = (TextView) v.findViewById(R.id.tvFragFirst);
tv.setText(getArguments().getString("msg"));
return v;
}
public static FirstFragment newInstance(String text) {
FirstFragment f = new FirstFragment();
Bundle b = new Bundle();
b.putString("msg", text);
f.setArguments(b);
return f;
}
}
first_frag.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"
android:background="@android:color/holo_orange_dark" >
<TextView
android:id="@+id/tvFragFirst"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:textSize="26dp"
android:text="TextView" />
</RelativeLayout>
SecondFragment.java
public class SecondFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.second_frag, container, false);
TextView tv = (TextView) v.findViewById(R.id.tvFragSecond);
tv.setText(getArguments().getString("msg"));
return v;
}
public static SecondFragment newInstance(String text) {
SecondFragment f = new SecondFragment();
Bundle b = new Bundle();
b.putString("msg", text);
f.setArguments(b);
return f;
}
}
second_frag.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"
android:background="@android:color/holo_green_dark" >
<TextView
android:id="@+id/tvFragSecond"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:textSize="26dp"
android:text="TextView" />
</RelativeLayout>
ThirdFragment.java
public class ThirdFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.third_frag, container, false);
TextView tv = (TextView) v.findViewById(R.id.tvFragThird);
tv.setText(getArguments().getString("msg"));
return v;
}
public static ThirdFragment newInstance(String text) {
ThirdFragment f = new ThirdFragment();
Bundle b = new Bundle();
b.putString("msg", text);
f.setArguments(b);
return f;
}
}
third_frag.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"
android:background="@android:color/holo_red_light" >
<TextView
android:id="@+id/tvFragThird"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:textSize="26dp"
android:text="TextView" />
</RelativeLayout>
Hasil akhirnya adalah sebagai berikut:
Viewpager memegang 5 Fragmen, Fragmen 1 bertipe FirstFragment, dan menampilkan tata letak first_frag.xml, Fragmen 2 bertipe SecondFragment dan menampilkan second_frag.xml, dan Fragmen 3-5 bertipe ThirdFragment dan semua menampilkan third_frag.xml .
Di atas Anda dapat melihat 5 Fragmen di antaranya dapat diaktifkan melalui gesek ke kiri atau kanan. Hanya satu Fragmen yang bisa ditampilkan pada saat yang bersamaan tentunya.
Terakhir tapi bukan yang akhir:
Saya akan merekomendasikan agar Anda menggunakan konstruktor kosong di setiap kelas Fragmen Anda.
Alih-alih menyerahkan parameter potensial melalui konstruktor, gunakan newInstance(...)
metode dan Bundle
untuk menyerahkan parameter.
Dengan cara ini jika terlepas dan dilampirkan kembali keadaan objek dapat disimpan melalui argumen. Sangat mirip Bundles
dengan Intents
.