歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
Linux教程網 >> Linux編程 >> Linux編程 >> ViewPager多頁面滑動效果

ViewPager多頁面滑動效果

日期:2017/3/1 9:46:09   编辑:Linux編程

ViewPager在Android開發中還是很常見的,下面是一個小例子來說明ViewPager的用法

首先先看Main.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"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >

<!-- 下面是定義ViewPager的布局文件 -->
<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.PagerTitleStrip
android:id="@+id/pagerTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top">
</android.support.v4.view.PagerTitleStrip>

</android.support.v4.view.ViewPager>

</RelativeLayout>

因為是要實現左右滑屏,所以說這裡我們還需要創建3個布局文件,分別命名為tab1,tab2,tab3.在這3個布局文件裡隨便加一個控件即可,不需要什麼華麗的布局。

tab1.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:orientation="vertical" >

<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />

</LinearLayout>

tab2.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:orientation="vertical" >

<ProgressBar
android:id="@+id/progressBar1"

android:layout_width="wrap_content"
android:layout_height="wrap_content" />

</LinearLayout>

tab3.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:orientation="vertical" >

<ProgressBar
android:id="@+id/progressBar1"

android:layout_width="wrap_content"
android:layout_height="wrap_content" />

<SeekBar
android:id="@+id/seekBar1"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

</LinearLayout>

下面就需要我們在MainActivity裡面實現方法

package com.example.viewpager;

import java.util.ArrayList;
import java.util.Currency;
import java.util.List;

import android.os.Bundle;
import android.app.Activity;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.PagerTitleStrip;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;

public class MainActivity extends Activity {

private ViewPager viewPager;
private PagerTitleStrip pagerTitle;
private List<View> list;//表示裝載滑動的布局
private List<String> titleList;//表示滑動每一頁的標題
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
viewPager=(ViewPager)this.findViewById(R.id.viewPager);
pagerTitle=(PagerTitleStrip)this.findViewById(R.id.pagerTitle);
//下面則開始動態加載布局,並轉換成頁面
View view1=LayoutInflater.from(MainActivity.this).inflate(R.layout.tab1, null);
View view2=LayoutInflater.from(MainActivity.this).inflate(R.layout.tab2, null);
View view3=LayoutInflater.from(MainActivity.this).inflate(R.layout.tab3, null);
//下面是把頁面view1,view2,view3加載到list集合中
list=new ArrayList<View>();
list.add(view1);
list.add(view2);
list.add(view3);

//然後為每一個布局文件加載一個標題
titleList=new ArrayList<String>();
titleList.add("left");
titleList.add("middle");
titleList.add("right");

viewPager.setAdapter(new MyAdapter());
viewPager.setCurrentItem(1);//設置默認進入ViewPager之後的頁面是middle頁面
}
private class MyAdapter extends PagerAdapter{

@Override
public int getCount() {
// 獲取布局的個數
return list.size();
}

@Override
public Object instantiateItem(View container, int position) {
// 加載布局
((ViewPager)container).addView(list.get(position));
return list.get(position);

}

@Override
public void destroyItem(View container, int position, Object object) {
// 銷毀布局,即從一個布局頁面滑動到另一個布局頁面
((ViewPager)container).removeView(list.get(position));

}

@Override
public CharSequence getPageTitle(int position) {
// 獲取布局頁面的標題
return titleList.get(position);
}

@Override
public boolean isViewFromObject(View arg0, Object arg1) {
// 判斷是否是一個完整的頁面
return arg0==arg1;
}

}

}

就這樣所有的布局和方法實現就完成了,這個小例子是很粗糙的,但是我們的重點是實現如何左右滑屏。

更多Android相關信息見Android 專題頁面 http://www.linuxidc.com/topicnews.aspx?tid=11

Copyright © Linux教程網 All Rights Reserved