Penggunaan mudah ViewPager

Baiklah, ia sangat mudah Jika anda mempunyai sebarang soalan, muat turun demo dan anda akan faham~

Contoh penggunaan 3: ViewPager melaksanakan kesan TabHost:

Sudah tentu, Contoh 2 selalunya hanya idea yang bagus tetapi tidak berguna dalam pembangunan sebenar, kita mungkin perlu menyesuaikan bar tajuk ini sendiri. Sekarang mari tulis contoh mudah untuk mencapai kesan TabHost Jika anda tidak tahu apa itu TabHost Jika ya, sila lihat rendering!

Penyampaian operasi:

Laksanakan analisis logik:

Jom terangkan logik untuk mencapai kesan di atas, dan kemudian tampal kod:

Pertama ialah reka letak: LinearLayout di bahagian atas, dibalut dalam tiga TextViews, dengan atribut berat ditetapkan kepada 1, dan kemudian berikut Untuk ImageView peluncur, kami menetapkan lebar kepada match_parent bahagian bawah ialah ViewPager kami, yang mungkin Terdapat dua sifat yang anda tidak tahu Satu ialah: flipInterval: Ini menentukan selang masa antara Lihat animasi.
Dan persistentDrawingCache: menetapkan strategi cache lukisan bagi kawalan Terdapat empat nilai pilihan:

• tiada: jangan simpan cache lukisan dalam memori animasi :Hanya simpan cache lukisan animasi;
• menatal: Hanya simpan cache lukisan kesan tatal; masa yang sama 2, animasi|menatal seperti ini~
Kod susun atur:

activity_four.xml

:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android: orientation="vertical"               android =".MainActivity">

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="48dp>"     background .               android /Android-tutorial-viewpager.html "& gt;

& lt; textView
android: id ="@+id/tv_one " android: Layout_width =" fill_parent "
="fill_parent"
            android:layout_weight="1.0"
             android:grav ity="center"
             android:text=" 橘黄                                 android 0" />

& lt; textView
android: id = "@+id/tv_two"
android: Layout_width = "fill_parent"
android: Layout_height = "fill_parent" "
            android:gravity="center"
            android:text="淡黄"
            android:textColor="#00 000"< /> Lihat
            android: id="@+id/tv_three"
            android: Layout_Width = "fill_parent"
android: Layout_height = "fill_parent"
android: Layout_weight = "1.0"
android: gravity = "center"
android: text = "浅棕" > Android: textColor = "#000000"/& gt;
& lt;/linearlayout & gt;

& lt; imageView
android: id = "@+id/img_cursor" "fill_parent"
        android:layout_height="wrap_content"
         android:scaleType="matrix"
        android:src="@mipmap/id" /> ;              />            android .v4.view.ViewPager
        android:id="@+id/vpager_four"
         android:layout_width="wrap_content"
        android:layout_" layout_" 
        android:layout_weight="1.0"
        android:flipInterval="30"
        android:out> 🎜>

Seterusnya ialah Aktiviti kita, mari kita fikirkan:

• Langkah 1: Kita perlu meletakkan blok bergerak kita dahulu Jika teks ditengah di bawah teks, maka offset perlu dikira di sini: Mula-mula dapatkan lebar imej pw, dan kemudian dapatkan lebar skrin sw Kaedah pengiraan adalah sangat mudah:
  offset (offset) = ((sw / 3)-pw) / 2 //Skrin. lebar/3 -Lebar gambar, dan kemudian bahagikannya dengan 2, kanan atau kiri!
  Kemudian kami memanggil setImageMatrix untuk menetapkan kedudukan semasa peluncur:
  Pada masa yang sama, kami juga bertukar antara satu halaman dan dua halaman dan mengira jarak bergerak peluncur Ia sangat mudah:
  satu = offset * 2 + pw;
  dua = satu * 2;

• Langkah 2: Apabila kita meluncur halaman , peluncur kita perlu bergerak, kita perlu menambah a Acara OnPageChangeListener, kita perlu membuat pertimbangan pada halaman selepas meluncur dan merekod halaman sebelum meluncur. Halaman mana, saya lukis gambar di bawah, mungkin lebih mudah untuk difahami!

PS: Sudah terlalu lama saya tidak menulis

Nah, jika anda masih tidak memahaminya, anda boleh lukis sendiri kodnya:

FourActvitiy.java:

/**
 * Dibuat oleh Jay pada 2015/10/8 0008.
 */
kelas awam FourActivity memanjangkan AppCompatActivity melaksanakan View.OnClickListener,
ViewPager.OnPageChangeListener {

private ViewPager🎜> private ViewPager🎜curv>< ;
peribadi TextView tv_one;
peribadi TextView tv_two;
peribadi TextView tv_three;

peribadi ArrayList<Lihat> listViews;
private int offset = 0;
private int currIndex = 0; //Nombor halaman semasa
private int bmpWidth; // Panjang imej bar bergerak
private int one = 0; dengan satu halaman
private int two = 0; //Jarak peluncur bergerak antara dua halaman

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState) ;
setContentView(R.layout.activity_four);
initViews();
}


private void initViews() {
vpager_four = (ViewPager) findViewById(R .id.v pager_four );
tv_one = (TextView) findViewById(R.id.tv_one);
tv_two = (TextView) findViewById(R.id.tv_two);
tv_three = (BytIdView) find (R.id. tv_three);
img_cursor = (ImageView) findViewById(R.id.img_cursor);

//Tetapan berkaitan untuk animasi garis bawah:
bmpWidth = BitmapFactory.decodeResource(getResources ( ), R.mipmap .line).getWidth(); // Dapatkan lebar imej
DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
int screenW = dm.widthPixels; //Dapatkan lebar peleraian
offset = (screenW / 3 - bmpWidth) / 2;// Kira offset
Matriks matriks = new Matrix();
matrix.postTranslate(offset, 0);
img_cursor.setImageMatrix(matrix) ;/ /Tetapkan kedudukan awal animasi
                                                                                                                                                                                                                                                                                                                                                                                                                                    // Jarak bergerak 🎜> Dua = satu * 2;//Pindahkan offset dua halaman, sebagai contoh, 1 lompat terus ke 3


listViews = ArrayList<View>();
LayoutInflater mInflater = getLayoutInflater();
listViews.add(mInflater.inflate(R.layout.view_one, null, false));
listViews.add(( mInflater.inflate(R.layout.view_two, null, false));
listViews.add(mInflater.inflate(R.layout.view_three, null, false));
vpager_four.setAdapter(new MyPagerAdapter(listViews ));
vpager_four.setCurrentItem(0); 🎜> tv_three.setOnClickListener(this);

vpager_four.addOnPageChangeListener(this);
}

public void onClick(View v) {
suis (v. getId()) {
case R.id.tv_one:
vpager_four.setCurrentItem(0);
break;
case R .id .tv_two:
                vpager_four.setCurrentItem (1); >    @Override
    public void onPageSelected(int index) {
        Animation animasi = null;
        tukar (indeks) {
                                                                                                                                                             jika (currIndex == 1) {
animasi = translateAnimation baru (satu, 0, 0, 0);
} else if (currIndex == 2) {
animation = new translateanimation (dua, 0, 0, 0);
}
Break;
kes 1:
if (currIndex == 0) {
animation = new translateanimation (offset, one, 0, 0);
} else if (currindex == 2) {
                    animasi = baharu TranslateAnimation(dua, satu, 0, 0);
                }
                                                                                                                                      kes 2:
if (currIndex == 0) {
animasi = TranslateAnimation baharu(offset, two, 0, 0);
else if (curr Index == 1) {
                      =       animasi baharu TranslateAnimation(satu, dua, 0, 0);
}
break;
}
currIndex = index;
animation.setFi llAfter(true); // true bermaksud gambar berhenti di penghujung animasi Position
animation.setDuration(300); //Tetapkan masa animasi kepada 300 milisaat
img_cursor.startAnimation(animation);//Mulakan animasi
}

@Override
public void onPageScrollStateChanged(int i) {

}

@Override
public void onPageScrolled(int i, float v, int i1) {

}
}

Nah, anda mungkin tidak biasa dengan animasi, tidak mengapa, kami akan membawa anda melalui bab seterusnya~

---

3. ViewPager contoh

Nah, apabila kami menerangkan Fragment sebelum ini, kami menerangkan contoh penggunaan: Pengenalan Asas kepada Tutorial Android - 5.2.4 Contoh Fragmen - Bar Navigasi Bawah + ViewPager Slaid ke Tukar Halaman Saya tidak akan pergi ke butiran di sini. Jika anda berminat, hanya klik pada pautan untuk melihat~

---

4. Muat turun contoh kod

ViewPagerDemo.zip

---

Ringkasan bahagian ini:

Mengenai ViewPager, kerana batasan ruang, beberapa tempat tidak disebutkan. Di samping itu, seperti yang dinyatakan di atas, kami akan membincangkan animasi ViewPager di bawah. Okay, itu sahaja~

Baiklah, sebelum Hari Kebangsaan, saya cakap saya akan habiskan keseluruhan siri semasa cuti Hari Kebangsaan, tetapi akhirnya saya tidak menulis satu bab pun ... Kerana gadis itu datang untuk bermain, jadi, anda tahu~

, saya akan mempercepatkan kemajuan~ dan berusaha untuk maju secepat mungkin!

← Menu

Penggunaan mudah DrawerLayout (menu gelongsor sisi rasmi) →