android ViewPager 使用详解

来源：互联网发布：中科恒运大数据编辑：程序博客网时间：2024/05/22 02:16

ViewPager 使用详解

使用ViewPagerg构建一个视图组，实现对视图的侧滑切换。ViewPager是一个V4的组件，在XML中通过android.support.v4.view.ViewPager的方式调用。

工程目录：
这里写图片描述

效果图：
这里写图片描述

MainActivity ：

import java.util.ArrayList;import java.util.List;import android.app.Activity;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;public class MainActivity extends Activity {    private View view1, view2, view3;    private ViewPager viewPager; // 对应的viewPager    private List<View> viewList;// view数组    private ArrayList<String> list;    private PagerTabStrip pagerTabStrip;// 标题栏    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        viewPager = (ViewPager) findViewById(R.id.viewpager);        view1 = getLayoutInflater().inflate(R.layout.layout1, null);        view2 = getLayoutInflater().inflate(R.layout.layout2, null);        view3 = getLayoutInflater().inflate(R.layout.layout3, null);        pagerTabStrip = (PagerTabStrip) findViewById(R.id.pagertab);        // 改变下划线的颜色        pagerTabStrip                .setTabIndicatorColorResource(android.R.color.holo_green_dark);        viewList = new ArrayList<View>();// 将要分页显示的View装入数组中        viewList.add(view1);        viewList.add(view2);        viewList.add(view3);        list = new ArrayList<String>();        list.add("1");        list.add("2");        list.add("3");        // 定义适配器        PagerAdapter pagerAdapter = new PagerAdapter() {            @Override            public boolean isViewFromObject(View arg0, Object arg1) {                // TODO Auto-generated method stub                // 1、必须重写。                return arg0 == arg1;            }            @Override            public int getCount() {                // TODO Auto-generated method stub                // 2、必须重写。返回要滑动的VIew的个数                return viewList.size();             }            @Override            public void destroyItem(ViewGroup container, int position,                    Object object) {                // TODO Auto-generated method stub                // 3、必须重写。从当前container中删除指定位置（position）的View                container.removeView(viewList.get(position));            }            @Override            public Object instantiateItem(ViewGroup container, int position) {                // TODO Auto-generated method stub                // 4、必须重写。将当前视图添加到container中，第二：返回当前View                container.addView(viewList.get(position));                return viewList.get(position);            }            @Override            public CharSequence getPageTitle(int position) {                // 使用标题栏必须重写。根据位置返回当前所对应的标题                return list.get(position);            }        };        // 添加适配器到viewPager        viewPager.setAdapter(pagerAdapter);    }}

activity_mian.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    tools:context="com.example.testviewpage_1.MainActivity" >    <!-- 要滑动的视图组件 -->    <android.support.v4.view.ViewPager        android:id="@+id/viewpager"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center" >        <!-- 标题栏  将PagerTabStrip作为ViewPager的一个子控件直接插入其中 -->        <android.support.v4.view.PagerTabStrip            android:id="@+id/pagertab"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_gravity="top" />    </android.support.v4.view.ViewPager></RelativeLayout>

view1:

<?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"     android:background="#330044"></LinearLayout>

view2:

<?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"    android:background="#990077" ></LinearLayout>

view3:

<?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"     android:background="#772255"></LinearLayout>

0 0