Android ViewPager

于 2014-03-27 15:33:00 发布
阅读量45 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/MMLoveMeMM/articles/3628471.html

ViewPager常用于APP正式使用界面使用之前所加载的视图,相当于windows很多软件的splash,ViewPager一般放在APP启动之前或者APP中一个操作切换到两外一个操作之间的显示.平时微信APP均会使用.

ViewPager是一种视窗类型的组件,所以它可以加载Layout,在这个Layout中又可以添加其他UI件,所以ViewPager可以相当于是一个大型容器,下面给出使用的步骤:

<1> : 首先新建一个Android工程,然后在主类的布局xml文件中添加ViewPager如下:

<android.support.v4.view.ViewPager
        android:id="@+id/whatsnew_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="0dp"
            android:layout_gravity="bottom"
            android:background="#0000"
            android:textColor="#ffff" />
    </android.support.v4.view.ViewPager>

<2> : 在主类中定义一个ViewPager对象:

private ViewPager mViewPager;
mViewPager=(ViewPager)findViewById(R.id.whatsnew_viewpager);

添加事件:

//添加事件
        mViewPager.setOnPageChangeListener(new OnPageChangeListener(){

            @Override
            public void onPageScrollStateChanged(int arg0) {
                // TODO Auto-generated method stub
                
                
            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
                // TODO Auto-generated method stub
                
            }

            @Override
            public void onPageSelected(int arg0) {
                // TODO Auto-generated method stub
                Toast.makeText(PushViewTest.this, "view page : "+arg0, Toast.LENGTH_SHORT).show();
            }
            
        });

<3> : 构建各个视窗的视图:

// ViewPager既然是视窗容器,那么就需要添加View,可以添加一个或者多个,一般是大于一个视窗
        // 一个View视窗的里面需要放置一个Layout用于在View中显示
        LayoutInflater inf = LayoutInflater.from(this);
        View view1 = inf.inflate(R.layout.view1, null);
        View view2 = inf.inflate(R.layout.view2, null);
        View view3 = inf.inflate(R.layout.view3, null);
        View view4 = inf.inflate(R.layout.view4, null);

        // ViewPager加载视窗是依靠适配器的
        // 适配器的一般是一次性加载List对象,那么下面就要先构建一个List对象
        final ArrayList<View> mViewList = new ArrayList<View>();
        //显示的顺序和添加的顺序是一样的
        mViewList.add(view4);
        mViewList.add(view3);
        mViewList.add(view2);
        mViewList.add(view1);

<4> ViewPager需要通过适配器添加上面的视窗:

// 然后构建适配器
        PagerAdapter adapter = new PagerAdapter() {

            
            @Override
            public int getCount() {
                // TODO Auto-generated method stub
                return mViewList.size();
            }

            @Override
            public boolean isViewFromObject(View arg0, Object arg1) {
                // TODO Auto-generated method stub
                return (arg0 == arg1);
            }
            
            @Override
            public void destroyItem(View container, int position, Object object) {
                // TODO Auto-generated method stub
                ((ViewPager) container).removeView(mViewList.get(position));

            }

            @Override
            public Object instantiateItem(View container, int position) {
                // TODO Auto-generated method stub
                ((ViewPager) container).addView(mViewList.get(position));
                return mViewList.get(position);
            }

        };

<5> 添加适配器,既可以工作了:

//添加适配器
        mViewPager.setAdapter(adapter);


<6> PAGE导航指示设置:

上面有四个视窗,那么就需要有四个指示去指示当前是第几个视窗,指示指针其实由四个小图标显示的,当处于当前视窗时,把与当前视窗对应的指针小图标用同样大小的但是颜色相对较深的小图标替换之,这样看起来,四个指针其中一个对应视窗的指针图片将会凸显出来:

private ImageView page1;
    private ImageView page2;
    private ImageView page3;
    private ImageView page4;
page1 = (ImageView) findViewById(R.id.page0);
        page2 = (ImageView) findViewById(R.id.page1);
        page3 = (ImageView) findViewById(R.id.page2);
        page4 = (ImageView) findViewById(R.id.page3);

在滑动视窗的事件中进行更换小图标用于指示作用:

@Override
            public void onPageSelected(int arg0) {
                // TODO Auto-generated method stub
//                Toast.makeText(PushViewTest.this, "view page : " + arg0,
//                        Toast.LENGTH_SHORT).show();
                // 这个地方需要添加一个指示单签page的"位置",起到一个指示作用.
                switch (arg0) {
                case 0:
                    page4.setImageDrawable(getResources().getDrawable(
                            R.drawable.page));
                    page1.setImageDrawable(getResources().getDrawable(
                            R.drawable.page_now));
                    page2.setImageDrawable(getResources().getDrawable(
                            R.drawable.page));
                    break;
                case 1:
                    page1.setImageDrawable(getResources().getDrawable(
                            R.drawable.page));
                    page2.setImageDrawable(getResources().getDrawable(
                            R.drawable.page_now));
                    page3.setImageDrawable(getResources().getDrawable(
                            R.drawable.page));
                    break;
                case 2:
                    page2.setImageDrawable(getResources().getDrawable(
                            R.drawable.page));
                    page3.setImageDrawable(getResources().getDrawable(
                            R.drawable.page_now));
                    page4.setImageDrawable(getResources().getDrawable(
                            R.drawable.page));
                    break;
                case 3:
                    page3.setImageDrawable(getResources().getDrawable(
                            R.drawable.page));
                    page4.setImageDrawable(getResources().getDrawable(
                            R.drawable.page_now));
                    page1.setImageDrawable(getResources().getDrawable(
                            R.drawable.page));
                    break;
                }
            }

运行即可以看到效果:

整个工程source :

package view;

import java.util.ArrayList;

import com.example.androidfragmentd02test.R;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageView;
import android.widget.Toast;

public class PushViewTest extends Activity {

    private ViewPager mViewPager;

    private ImageView page1;
    private ImageView page2;
    private ImageView page3;
    private ImageView page4;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);

        setContentView(R.layout.pushview_test);

        page1 = (ImageView) findViewById(R.id.page0);
        page2 = (ImageView) findViewById(R.id.page1);
        page3 = (ImageView) findViewById(R.id.page2);
        page4 = (ImageView) findViewById(R.id.page3);

        mViewPager = (ViewPager) findViewById(R.id.whatsnew_viewpager);
        // 添加事件
        mViewPager.setOnPageChangeListener(new OnPageChangeListener() {

            @Override
            public void onPageScrollStateChanged(int arg0) {
                // TODO Auto-generated method stub

            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
                // TODO Auto-generated method stub

            }

            @Override
            public void onPageSelected(int arg0) {
                // TODO Auto-generated method stub
//                Toast.makeText(PushViewTest.this, "view page : " + arg0,
//                        Toast.LENGTH_SHORT).show();
                // 这个地方需要添加一个指示单签page的"位置",起到一个指示作用.
                switch (arg0) {
                case 0:
                    page4.setImageDrawable(getResources().getDrawable(
                            R.drawable.page));
                    page1.setImageDrawable(getResources().getDrawable(
                            R.drawable.page_now));
                    page2.setImageDrawable(getResources().getDrawable(
                            R.drawable.page));
                    break;
                case 1:
                    page1.setImageDrawable(getResources().getDrawable(
                            R.drawable.page));
                    page2.setImageDrawable(getResources().getDrawable(
                            R.drawable.page_now));
                    page3.setImageDrawable(getResources().getDrawable(
                            R.drawable.page));
                    break;
                case 2:
                    page2.setImageDrawable(getResources().getDrawable(
                            R.drawable.page));
                    page3.setImageDrawable(getResources().getDrawable(
                            R.drawable.page_now));
                    page4.setImageDrawable(getResources().getDrawable(
                            R.drawable.page));
                    break;
                case 3:
                    page3.setImageDrawable(getResources().getDrawable(
                            R.drawable.page));
                    page4.setImageDrawable(getResources().getDrawable(
                            R.drawable.page_now));
                    page1.setImageDrawable(getResources().getDrawable(
                            R.drawable.page));
                    break;
                }
            }

        });

        // ViewPager既然是视窗容器,那么就需要添加View,可以添加一个或者多个,一般是大于一个视窗
        // 一个View视窗的里面需要放置一个Layout用于在View中显示
        LayoutInflater inf = LayoutInflater.from(this);
        View view1 = inf.inflate(R.layout.view1, null);
        view1.setBackgroundColor(Color.YELLOW);
        View view2 = inf.inflate(R.layout.view2, null);
        view2.setBackgroundColor(Color.BLUE);
        View view3 = inf.inflate(R.layout.view3, null);
        view3.setBackgroundColor(Color.GREEN);
        View view4 = inf.inflate(R.layout.view4, null);
        view4.setBackgroundColor(Color.WHITE);

        // ViewPager加载视窗是依靠适配器的
        // 适配器的一般是一次性加载List对象,那么下面就要先构建一个List对象
        final ArrayList<View> mViewList = new ArrayList<View>();
        // 显示的顺序和添加的顺序是一样的
        mViewList.add(view1);
        mViewList.add(view2);
        mViewList.add(view3);
        mViewList.add(view4);

        // 然后构建适配器
        PagerAdapter adapter = new PagerAdapter() {

            @Override
            public int getCount() {
                // TODO Auto-generated method stub
                return mViewList.size();
            }

            @Override
            public boolean isViewFromObject(View arg0, Object arg1) {
                // TODO Auto-generated method stub
                return (arg0 == arg1);
            }

            @Override
            public void destroyItem(View container, int position, Object object) {
                // TODO Auto-generated method stub
                ((ViewPager) container).removeView(mViewList.get(position));

            }

            @Override
            public Object instantiateItem(View container, int position) {
                // TODO Auto-generated method stub
                ((ViewPager) container).addView(mViewList.get(position));
                return mViewList.get(position);
            }

        };

        // 添加适配器
        mViewPager.setAdapter(adapter);

        this.getActionBar().setDisplayHomeAsUpEnabled(true);
        this.getActionBar().setDisplayShowTitleEnabled(true);

    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // TODO Auto-generated method stub
        int id = item.getItemId();
        switch (id) {
        case android.R.id.home:
            finish();
        }
        return super.onOptionsItemSelected(item);
    }

}

布局xml :

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

    <android.support.v4.view.ViewPager
        android:id="@+id/whatsnew_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="0dp"
            android:layout_gravity="bottom"
            android:background="#0000"
            android:textColor="#ffff" />
    </android.support.v4.view.ViewPager>
    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        > 
        
         <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_marginBottom="30dp" 
            android:gravity="center_horizontal"     >
            
            <ImageView
                android:id="@+id/page0"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"                     
                android:scaleType="matrix"
                android:src="@drawable/page_now" />
            <ImageView
                android:id="@+id/page1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"                     
                android:scaleType="matrix"
                android:src="@drawable/page" />
            <ImageView
                android:id="@+id/page2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"                        
                android:scaleType="matrix"
                android:src="@drawable/page" />
            <ImageView
                android:id="@+id/page3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" 
                android:layout_marginLeft="10dp"                       
                android:scaleType="matrix"
                android:src="@drawable/page" />
            
        </LinearLayout>
        
       
    </LinearLayout>

</FrameLayout>

 

 

 

 

 

转载于:https://www.cnblogs.com/MMLoveMeMM/articles/3628471.html

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值