ViewPager基础入门

效果图：

实现了三个view间的相互滑动

第一个VIEW向第二个VIEW滑动第二个VIEW向第三个VIEW滑动

一、新建项目，引入ViewPager控件

ViewPager。它是google SDk中自带的一个附加包的一个类，可以用来实现屏幕间的切换.

1.在主布局文件里加入：

其中 <android.support.v4.view.ViewPager /> 是ViewPager对应的组件，要将其放到想要滑动的位置

<?xml version="1.0" encoding="utf-8"?>

<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"

    tools:context=".MainActivity">

    <android.support.v4.view.ViewPager

        android:id="@+id/viewpager"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center" />

</RelativeLayout>

2.新建三个layout,用于滑动切换视图

布局代码分别如下：

layout_one.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"

    android:background="#edf2e70e">

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="这是第一个布局"

        android:textColor="#da0a34"

        android:textSize="18dip"

        android:layout_centerVertical="true"

        android:layout_centerHorizontal="true" />

</RelativeLayout>

　　layout_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"

    android:background="#2ce297">

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="这是第二个布局"

        android:textSize="18dip"

        android:textColor="#be21d2"

        android:layout_gravity="center_horizontal"

        android:layout_alignParentTop="true"

        android:layout_centerHorizontal="true"

        android:layout_marginTop="195dp" />

</RelativeLayout>

　　layout_three.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"

    android:background="#2f8bc9">

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="这是第三个布局"

        android:textSize="18dip"

        android:textColor="#ffffff"

        android:layout_gravity="center_horizontal"

        android:layout_alignParentTop="true"

        android:layout_centerHorizontal="true"

        android:layout_marginTop="206dp" />

</RelativeLayout>

　二.代码实战

package com.nyl.viewpager.activity.viewpager;

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.ViewPager;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

public class MainActivity extends Activity {

    //view1,view2,view3对应我们的三个layout,既layout_one.xml;layout_two.xml;layout_three.xml

    private View view1,view2,view3;

    //viewList是一个View数组，盛装上面三个View

    private List<View> viewList;

    //对应的viewPager

    private ViewPager viewPager;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        //获取控件

        viewPager = (ViewPager) findViewById(R.id.viewpager);

        LayoutInflater inflater = getLayoutInflater();

        view1 = inflater.inflate(R.layout.layout_one,null);

        view2 = inflater.inflate(R.layout.layout_two,null);

        view3 = inflater.inflate(R.layout.layout_three,null);

        //将要分布显示的view装入数组中

        viewList = new ArrayList<View>();

       //将实例化的view1,view2,view3添加的viewList中

        viewList.add(view1);

        viewList.add(view2);

        viewList.add(view3);

        PagerAdapter pagerAdapter = new PagerAdapter() {

            @Override

            public boolean  isViewFromObject(View arg0, Object arg1) {

                return arg0 == arg1;

            }

            //返回要滑动的View的个数

                @Override

            public int getCount() {

                return viewList.size();

            }

            //从当前container（容器）中删除指定位置（position）的View

            @Override

        public void destroyItem(ViewGroup container, int position, Object object) {

                container.removeView(viewList.get(position));

            }

            //instantiateItem()做了两件事，第一：将当前视图添加到container中，第二：返回当前View

            @Override

        public Object instantiateItem(ViewGroup container, int position){

                container.addView(viewList.get(position));

                return viewList.get(position);

            }

            };

        viewPager.setAdapter(pagerAdapter);

    }

}

巴特西

ViewPager基础入门

一、新建项目，引入ViewPager控件

二.代码实战

最新文章

热门文章