Contoh Serpihan - Bar Navigasi Bawah + Slaid ViewPager untuk Tukar Halaman

Dalam tiga bahagian pertama, kami melaksanakan kesan bar navigasi bawah biasa dengan cara yang berbeza, dan dalam bahagian ini kami akan menggunakan contoh kedua berdasarkan Tambah ViewPager untuk mencapai kesan gelongsor halaman bertukar! Kebanyakan kawan saya tahu apa itu ViewPager Tidak mengapa jika anda tidak tahu Mari perkenalkan kawalan ini secara ringkas!

1. Pengenalan ringkas kepada ViewPager

1) Apakah jenis kawalan itu?

Jawapan: Komponen penukaran halaman, kita boleh mengisinya dengan berbilang Paparan, dan kemudian kita boleh meluncur ke kiri dan kanan dengan menyentuh skrin Bertukar antara Paparan berbeza adalah sama seperti ListView yang kami pelajari sebelum ini. Kami memerlukan Penyesuai untuk menggabungkan Paparan untuk dipaparkan ViewPager kami terikat, dan ViewPager mempunyai Adapter-PagerAdapter khususnya sendiri! Selain itu, Google Cadangan rasmi ialah kami menggunakan Fragment untuk mengisi ViewPager, supaya lebih mudah untuk menjana dan mengurus setiap Halaman. Kitaran hayat setiap Halaman! Sudah tentu ia memberikan kita dua Penyesuai yang berbeza, iaitu: FragmentPageAdapter dan FragmentStatePagerAdapter! Apa yang kami gunakan dalam bahagian ini ialah yang pertama: FragmentPageAdapter! Perkara lain yang perlu disebutkan ialah mekanisme caching ViewPager: ViewPager akan cache halaman semasa, halaman sebelumnya dan halaman seterusnya Contohnya, terdapat empat halaman 1, 2, 3 dan 4: Apabila kita berada di halaman pertama: Cache 1, 2
——> Apabila kita berada di halaman kedua: Cache 1, 2, 3
——> , 3, 4 ——> Ia berada dalam cache halaman keempat 3, 4 seperti ini!

2) Untuk menggunakan PagerAdapter, tulis semula kaedah yang berkaitan:

getCount( ): Dapatkan bilangan paparan yang terdapat dalam viewpager
destroyItem( ): Mengalih keluar halaman pada kedudukan tertentu. Adalah menjadi tanggungjawab penyesuai untuk mengalih keluar paparan ini daripada bekas. Ini untuk memastikan Paparan boleh dialih keluar apabila finishUpdate(viewGroup) kembali.
instantiateItem( ): ① Tambahkan paparan pada kedudukan yang diberikan pada ViewGroup (bekas), buat dan paparkannya ②Kembalikan Objek (kunci) yang mewakili halaman yang baru ditambah, biasanya hanya mengembalikan paparan itu sendiri secara langsung. Sudah tentu, anda juga boleh menyesuaikan kunci anda sendiri, tetapi kunci itu mesti mempunyai surat-menyurat satu dengan satu dengan setiap paparan
isViewFromObject( ): Tentukan nilai yang dikembalikan oleh instantiateItem( Kekunci fungsi ViewGroup, int) dan sama ada paparan halaman adalah mewakili pandangan yang sama (iaitu, sama ada ia sepadan, dan yang sepadan mewakili Paparan yang sama), biasanya kita menulis secara langsung return view == objek; itu sahaja mengapa ia dilakukan dengan cara ini, saya akan mempunyai peluang untuk mengetahui lebih lanjut mengenainya. Nampaknya terdapat ArrayList dalam ViewPager yang menyimpan maklumat status paparan Anda boleh mendapatkan semula maklumat yang sepadan berdasarkan View!

PS:Tidak perlu. tulis semula semua kaedah~

2 Laksanakan rendering dan struktur direktori projek:

Mari kita lihat dahulu kesan yang ingin kita capai

Mari kita lihat struktur projek kami:

3

Langkah 1: Penyediaan fail sumber yang berkaitan:

PS: Kami menulis berdasarkan kaedah 2 dalam bar navigasi bawah, jadi salin sahaja fail sumber! Saya tidak akan menyiarkannya terlalu banyak kali di sini~!

Langkah 2: Tulis fail reka letak activity_main.xml:

PS: Gantikan FrameLayout sebelumnya dengan: android.support.v4.view.ViewPager:

activity_mian.xml

：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <RelativeLayout
        android:id="@+id/ly_top_bar"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="../style/images/bg_topbar">

        <TextView
            android:id="@+id/txt_topbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:text="提醒"
            android:textColor="@color/text_topbar"
            android:textSize="18sp" />

        <View
            android:layout_width="match_parent"
            android:layout_height="2px"
            android:layout_alignParentBottom="true"
            android:background="../style/images/div_white" />

    </RelativeLayout>


    <RadioGroup
        android:id="@+id/rg_tab_bar"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_alignParentBottom="true"
        android:background="../style/images/bg_white"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/rb_channel"
            style="@style/tab_menu_item"
            android:drawableTop="@drawable/tab_menu_channel"
            android:text="@string/tab_menu_alert" />

        <RadioButton
            android:id="@+id/rb_message"
            style="@style/tab_menu_item"
            android:drawableTop="@drawable/tab_menu_message"
            android:text="@string/tab_menu_profile" />

        <RadioButton
            android:id="@+id/rb_better"
            style="@style/tab_menu_item"
            android:drawableTop="@drawable/tab_menu_better"
            android:text="@string/tab_menu_pay" />

        <RadioButton
            android:id="@+id/rb_setting"
            style="@style/tab_menu_item"
            android:drawableTop="@drawable/tab_menu_setting"
            android:text="@string/tab_menu_setting" />

    </RadioGroup>

    <View
        android:id="@+id/div_tab_bar"
        android:layout_width="match_parent"
        android:layout_height="2px"
        android:layout_above="@id/rg_tab_bar"
        android:background="../style/images/div_white" />

    <android.support.v4.view.ViewPager
        android:id="@+id/vpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/div_tab_bar"
        android:layout_below="@id/ly_top_bar" />


</RelativeLayout>

Langkah 3: Tulis susun atur dan kod Fragmen:

PS: Untuk menunjukkan mekanisme ViewPager, empat Fragmen ditulis khas di sini . Ciptaan cetakan Log masuk onCreateView!

fg_content.xml:

<?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="../style/images/bg_white"
    android:orientation="vertical">

    <TextView
        android:id="@+id/txt_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="呵呵"
        android:textColor="@color/text_yellow"
        android:textSize="20sp" />

</LinearLayout>

MyFragment1.java

/**
 * Created by Jay on 2015/8/28 0028.
 */
public class MyFragment1 extends Fragment {

    public MyFragment1() {
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fg_content, container, false);
        TextView txt_content = (TextView) view.findViewById(R.id.txt_content);
        txt_content.setText("第一个Fragment");
        Log.e("HEHE", "1日狗");
        return view;
    }
}

Tiga yang lain mengikut corak yang sama, tukar mata Hanya barangan!

Langkah 4: Sesuaikan kelas FragmentPagerAdapter:

Kod ini sangat mudah, cuma hantar FragmentManager dan segala-galanya dilakukan di sini!

/**
 * Created by Jay on 2015/8/31 0031.
 */
public class MyFragmentPagerAdapter extends FragmentPagerAdapter {

    private final int PAGER_COUNT = 4;
    private MyFragment1 myFragment1 = null;
    private MyFragment2 myFragment2 = null;
    private MyFragment3 myFragment3 = null;
    private MyFragment4 myFragment4 = null;


    public MyFragmentPagerAdapter(FragmentManager fm) {
        super(fm);
        myFragment1 = new MyFragment1();
        myFragment2 = new MyFragment2();
        myFragment3 = new MyFragment3();
        myFragment4 = new MyFragment4();
    }


    @Override
    public int getCount() {
        return PAGER_COUNT;
    }

    @Override
    public Object instantiateItem(ViewGroup vg, int position) {
        return super.instantiateItem(vg, position);
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        System.out.println("position Destory" + position);
        super.destroyItem(container, position, object);
    }

    @Override
    public Fragment getItem(int position) {
        Fragment fragment = null;
        switch (position) {
            case MainActivity.PAGE_ONE:
                fragment = myFragment1;
                break;
            case MainActivity.PAGE_TWO:
                fragment = myFragment2;
                break;
            case MainActivity.PAGE_THREE:
                fragment = myFragment3;
                break;
            case MainActivity.PAGE_FOUR:
                fragment = myFragment4;
                break;
        }
        return fragment;
    }

}

Langkah 5: Menulis MainActivity:

Logiknya sangat mudah, lihat sendiri~

MainActivity.java:

rreee

PS: Hehe, saya juga siarkan kod untuk bahagian import pakej di atas, hanya kerana saya takut anda akan mengimport pakej yang salah dan beberapa ralat yang tidak dapat dijelaskan akan berlaku! Kerana ViewPager berada di bawah pakej v4, Fragment, FragmentManager dan FragmentTransaction semuanya perlu digunakan. Ia ada dalam pakej V4! Di samping itu, kaedah untuk mendapatkan FragmentManager bukan menggunakan getFragmentManager() secara langsung tetapi menggunakan getSupportFragmentManager() Oh!

Nota: Jika ViewPager diletakkan di belakang RadioButton, acara klik RadioButton akan menjadi tidak sah.

4. Muat turun kod:

FragmentDemo4

: Muat turun FragmentDemo4.zip

Ringkasan ini bahagian :

Baiklah, di atas ialah proses pelaksanaan bar navigasi bawah + ViewPager untuk melaksanakan penukaran gelongsor mudah Fragmen! Itu sahaja, terima kasih~

← Contoh Serpihan - Pelaksanaan Bar Navigasi Bawah (Kaedah 3)

Contoh serpihan - pelaksanaan ringkas serpihan senarai aplikasi berita (belanja). →