ViewPager實現滑動切換頁面

<span style="background-color: rgb(255, 255, 255); font-family: Arial, Helvetica, sans-serif;">ViewPager是谷歌官方提供的一個兼容低版本安卓設備的軟件包,裏面包括只有在android3.0以上可以使用的API。使用它可以實現導航,頁面菜單切換,APP引導頁的功能。</span>

使用方式與ListView類似。需要一個適配器,PagerAdapter。

使用步驟:(***表示自己定義文件名)

【1】建立一個項目

【2】佈局文件***.xml

<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center">

    <!--標題、菜單、導航-->
    <android.support.v4.view.PagerTabStrip
        android:id="@+id/pagertab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top"/>
</android.support.v4.view.ViewPager>

注意:ViewPager和PagerTabStrip必須把包名寫全了,否則會產生ClassNotFound;還有PagerTabStrip只能當做ViewPager的子標籤來使用。

           在PagerTabStrip標籤中可以用屬性android:layout_gravity="top/bottom"指定導航欄的位置;

          如果要顯示出PagerTabStrip某一頁的title,需要在ViewPager的adapter中實現getPagerTitle(int position)方法。所以我們要定義一個數組去保存title值

【3】***Activity.java中

首先應該想到有以下成員變量

    private ViewPager viewPager;  //ViewPager組件
    private PagerTabStrip pagerTabStrip;  //PagerTabStrip組件
    private MyPagerAdapter adapter;  //ViewPager的適配器

    private String[] titles = {"標題一", "標題二", "標題三", "標題四"};  //標題
    private ArrayList<View> views = new ArrayList<>();  //每個選項卡對應的佈局

其次在onCreate()方法中實例化組件,並初始化選項卡對應的佈局

        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        pagerTabStrip = (PagerTabStrip) findViewById(R.id.pagertab);
        adapter = new MyPagerAdapter();
        initViews();
        viewPager.setAdapter(adapter);

initViews()方法中就是向鏈表views添加布局,使用LayoutInflater將佈局轉化爲View對象

    private void initViews() {
        views.add(getLayoutInflater().inflate(R.layout.viewpager1_layout, null));
        views.add(getLayoutInflater().inflate(R.layout.viewpager2_layout, null));
        views.add(getLayoutInflater().inflate(R.layout.viewpager3_layout, null));
        views.add(getLayoutInflater().inflate(R.layout.viewpager4_layout, null));
    }

每個選項卡的佈局根據實際情況自己設計,我這裏只是有一個ImageView控件顯示圖片

接下來最重要的步驟之一是自定義MyPagerAdapter去繼承PagerAdapter。

    //適配器
    class MyPagerAdapter extends PagerAdapter {
        @Override
        public int getCount() {
            return views.size();
        }

        //實例化選項卡
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            View v = views.get(position);
            container.addView(v);
            return v;
        }

        //刪除選項卡
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView(views.get(position));
        }

        //判斷當前是否爲返回的選項卡對象
        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view==object;
        }

        //獲取標題
        @Override
        public CharSequence getPageTitle(int position) {
            return titles[position];
        }
    }
目前先達到會用,適配器具體的工作原理後面再深入研究
補充一個小知識點--》getPageTitle()方法中CharSequence類型;  String是java中的字符串,繼承於CharSequence。CharSequence是一個接口。它只包括了length(),charAt(int index),subSequence(int start, int end)這幾個API接口。

設置了適配器後就可以將標題,以及選項卡對應的佈局意義對應起來。如果要實現滑動,還需要實現一個事件接口,在下面就貼出完整版代碼吧

package com.example.uitest;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Toast;

import java.util.ArrayList;

//ViewPager的使用
public class MainActivity extends Activity implements ViewPager.OnPageChangeListener{

    private ViewPager viewPager;
    private PagerTabStrip pagerTabStrip;
    private MyPagerAdapter adapter;

    private String[] titles = {"操作一", "操作二", "操作三", "操作四"};  //標題
    private ArrayList<View> views = new ArrayList<>();  //每個選項卡對應的佈局

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        pagerTabStrip = (PagerTabStrip) findViewById(R.id.pagertab);
        adapter = new MyPagerAdapter();
        initViews();
        viewPager.setAdapter(adapter);
        pagerTabStrip.setTabIndicatorColor(getResources().getColor(android.R.color.holo_blue_bright));//標題欄指示器的顏色
        pagerTabStrip.setBackgroundColor(getResources().getColor(android.R.color.holo_blue_light));  //標題欄背景顏色
        pagerTabStrip.setTextColor(Color.WHITE);  //設置標題字體顏色
        pagerTabStrip.setTextSize(1, 16);  //設置標題字體大小

        viewPager.setCurrentItem(1);//設定默認選中的
        viewPager.setOnPageChangeListener(this);
    }

    private void initViews() {
        views.add(getLayoutInflater().inflate(R.layout.viewpager1_layout, null));
        views.add(getLayoutInflater().inflate(R.layout.viewpager2_layout, null));
        views.add(getLayoutInflater().inflate(R.layout.viewpager3_layout, null));
        views.add(getLayoutInflater().inflate(R.layout.viewpager4_layout, null));
    }



    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    }

    @Override
    public void onPageSelected(int position) {
        Toast.makeText(this, "當前選中的是第"+position+"個頁面",Toast.LENGTH_SHORT).show();
    }

    @Override
    public void onPageScrollStateChanged(int state) {
    }

    //適配器
    class MyPagerAdapter extends PagerAdapter {
        @Override
        public int getCount() {
            return views.size();
        }

        //實例化選項卡
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            View v = views.get(position);
            container.addView(v);
            return v;
        }

        //刪除選項卡
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView(views.get(position));
        }

        //判斷當前是否爲返回的選項卡對象
        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view==object;
        }

        //獲取標題
        @Override
        public CharSequence getPageTitle(int position) {
            return titles[position];
        }
    }
}





發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章