ViewPager實現引導頁

時間 2019-11-30

原文原文鏈接

1. 要使用ViewPager，必需要建立 PagerAdapter。這裏建立一個 ViewPagerAdapter來繼承PagerAdapterandroid

public class ViewPagerAdapter extends PagerAdapter{

    private List<View> views;   // 咱們引導頁的list
    private Context context;    // 上下文

    public ViewPagerAdapter(List<View> views, Context context) {
        this.views = views;
        this.context = context;
    }


    // 移除一個view
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        //super.destroyItem(container, position, object);
        container.removeView(views.get(position));
    }


    // 加載一個view
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(views.get(position));
        return views.get(position);
    }

    @Override
    public int getCount() { // 必寫的方法 返回當前views的數量
      return this.views.size();
    }

    @Override
    public boolean isViewFromObject(View view, Object object) { //必寫的方法 判斷當前的view是不是咱們須要的對象
        return (view == object);
    }
}

2. 建立咱們引導頁的視圖緩存

<?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">
    <!--filpInterval 設置View之間切換的時間間隔 （在androidStudio上面跑不起來 能夠不須要）
       persistentDrawingCache 持久化繪畫緩存
   -->
    <android.support.v4.view.ViewPager
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="#00000000"
        android:persistentDrawingCache="animation"
        android:id="@+id/viewpage"
        >
    </android.support.v4.view.ViewPager>
</RelativeLayout>

3. 建立引導頁的圖片視圖 one.xml和two.xmlide

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView"

        android:background="@drawable/guide1"/>
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView2"
        android:background="@drawable/guide2"/>

</LinearLayout>

4. 在咱們的activity中使用佈局

 1 public class Guide extends Activity{
 2 
 3     private ViewPager vp;
 4     private ViewPagerAdapter vpAdapter;
 5     private List<View> views;
 6 
 7 
 8     protected void onCreate(Bundle savedInstanceState) {
 9         super.onCreate(savedInstanceState);
10         setContentView(R.layout.guide);//加載guide.xml 視圖
11         this.initView();
12 
13         System.out.println("onCreate");
14     }
15 
16     // 初始化view
17     public void initView() {
18         /*
19         * Inflater英文意思是膨脹，在Android中應該是擴展的意思吧。
20           LayoutInflater的做用相似於 findViewById(),
21           不一樣點是LayoutInflater是用來找layout文件夾下的xml佈局文件，而且實例化！
22           而 findViewById()是找具體某一個xml下的具體 widget控件(如:Button,TextView等)。
23         *
24         * */
25         LayoutInflater inflater = LayoutInflater.from(this);
26         views = new ArrayList<View>();
27         views.add(inflater.inflate(R.layout.one, null));  // 加載視圖1
28         views.add(inflater.inflate(R.layout.two, null));  // 加載視圖2
29 
30         vpAdapter = new ViewPagerAdapter(views, this);   // 建立咱們的 adapter
31         vp = (ViewPager) findViewById(R.id.viewpage);
32         vp.setAdapter(vpAdapter);                        // viewpage綁定 adapter
33     }
34 }

5. 運行就有引導頁的兩張圖片，能夠來回切換。ui

6. 添加導航點this

① 在原來的guide.xml中添加spa

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!--filpInterval 設置View之間切換的時間間隔 （在androidStudio上面跑不起來 能夠不須要）
       persistentDrawingCache 持久化繪畫緩存
   -->
    <android.support.v4.view.ViewPager
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="#00000000"
        android:persistentDrawingCache="animation"
        android:id="@+id/viewpage"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true">
    </android.support.v4.view.ViewPager>

    <!-- 新添加的 放導航點用的 -->
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center_horizontal"
        android:layout_marginBottom="19dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/iv1"
            android:src="@drawable/login_selectd"/>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/iv2"
            android:src="@drawable/login_point"/>
    </LinearLayout>


</RelativeLayout>

② 在原來的代碼的基礎上添加新的代碼code

public class Guide extends Activity implements ViewPager.OnPageChangeListener{  // 實現監聽接口

    private ViewPager vp;
    private ViewPagerAdapter vpAdapter;
    private List<View> views;

    // 導航點
    private ImageView[] dots;
    private int[] ids = {R.id.iv1, R.id.iv2};


    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.guide);//加載guide.xml 視圖
        this.initView();
        this.initDots();
        System.out.println("onCreate");
    }

    // 初始化view
    public void initView() {
        /*
        * Inflater英文意思是膨脹，在Android中應該是擴展的意思吧。
          LayoutInflater的做用相似於 findViewById(),
          不一樣點是LayoutInflater是用來找layout文件夾下的xml佈局文件，而且實例化！
          而 findViewById()是找具體某一個xml下的具體 widget控件(如:Button,TextView等)。
        *
        * */
        LayoutInflater inflater = LayoutInflater.from(this);
        views = new ArrayList<View>();
        views.add(inflater.inflate(R.layout.one, null));  // 加載視圖1
        views.add(inflater.inflate(R.layout.two, null));  // 加載視圖2

        vpAdapter = new ViewPagerAdapter(views, this);   // 建立咱們的 adapter
        vp = (ViewPager) findViewById(R.id.viewpage);
        vp.setAdapter(vpAdapter);                        // viewpage綁定 adapter
        vp.setOnPageChangeListener(this);                // ViewPager 監聽本身
    }


    private void initDots() {                           // 初始化 咱們的導航點
        this.dots = new ImageView[this.views.size()];
        for (int i=0; i<this.views.size(); i++) {
            dots[i] = (ImageView) this.findViewById(this.ids[i]);
        }
    }


    // 監聽 頁面滑動的方法
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        for (int i=0; i<this.ids.length; i++) {
            if (position == i) {
                this.dots[i].setImageResource(R.drawable.login_selectd);  // 變成選中的
            } else {
                this.dots[i].setImageResource(R.drawable.login_point);    //變成不選中的
            }
        }
    }

    //選中
    @Override
    public void onPageSelected(int position) {

    }

    // 滑動狀態改變
    @Override
    public void onPageScrollStateChanged(int state) {

    }
}

7. 添加進入按鈕xml

① 在two.xml中添加一個按鈕對象

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView2"
        android:background="@drawable/guide2"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true" />


    <!-- 添加進去按鈕 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:orientation="horizontal"
        android:gravity="center"
        >

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="進入"
            android:id="@+id/btn_start" />

    </LinearLayout>


</RelativeLayout>

② 監聽按鈕進去MainActivity

public class Guide extends Activity implements ViewPager.OnPageChangeListener{  // 實現監聽接口

    private ViewPager vp;
    private ViewPagerAdapter vpAdapter;
    private List<View> views;

    // 導航點
    private ImageView[] dots;
    private int[] ids = {R.id.iv1, R.id.iv2};

    // 開始按鈕
    private Button bt;

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.guide);//加載guide.xml 視圖
        this.initView();
        this.initDots();
        System.out.println("onCreate");
    }

    // 初始化view
    public void initView() {
        /*
        * Inflater英文意思是膨脹，在Android中應該是擴展的意思吧。
          LayoutInflater的做用相似於 findViewById(),
          不一樣點是LayoutInflater是用來找layout文件夾下的xml佈局文件，而且實例化！
          而 findViewById()是找具體某一個xml下的具體 widget控件(如:Button,TextView等)。
        *
        * */
        LayoutInflater inflater = LayoutInflater.from(this);
        views = new ArrayList<View>();
        views.add(inflater.inflate(R.layout.one, null));  // 加載視圖1
        views.add(inflater.inflate(R.layout.two, null));  // 加載視圖2

        vpAdapter = new ViewPagerAdapter(views, this);   // 建立咱們的 adapter
        vp = (ViewPager) findViewById(R.id.viewpage);
        vp.setAdapter(vpAdapter);                        // viewpage綁定 adapter
        vp.setOnPageChangeListener(this);                // ViewPager 監聽本身


        // 進入按鈕
        this.bt = (Button) views.get(1).findViewById(R.id.btn_start);
        this.bt.setOnClickListener(new View.OnClickListener() {  // 監聽
            @Override
            public void onClick(View v) {
                Intent i = new Intent(Guide.this, MainActivity.class);  // 進去MainActivity
                startActivity(i);
                finish();  //銷燬當前的Activity
            }
        });
    }


    private void initDots() {                           // 初始化 咱們的導航點
        this.dots = new ImageView[this.views.size()];
        for (int i=0; i<this.views.size(); i++) {
            dots[i] = (ImageView) this.findViewById(this.ids[i]);
        }
    }


    // 監聽 頁面滑動的方法
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        for (int i=0; i<this.ids.length; i++) {
            if (position == i) {
                this.dots[i].setImageResource(R.drawable.login_selectd);  // 變成選中的
            } else {
                this.dots[i].setImageResource(R.drawable.login_point);    //變成不選中的
            }
        }
    }

    //選中
    @Override
    public void onPageSelected(int position) {

    }

    // 滑動狀態改變
    @Override
    public void onPageScrollStateChanged(int state) {

    }
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。