viewpager實現靜態導航

1.viewpager滑動3頁切換效果。

activity_guide.xml

<?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"
    android:background="#000000">

    <android.support.v4.view.ViewPager
        android:id="@+id/guide_viewpager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

    <FrameLayout
        android:id="@+id/frameLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/imageView"
                android:layout_weight="1"
                android:background="#feaaaa"
                android:layout_width="wrap_content"
                android:layout_height="match_parent" />

            <ImageView
                android:layout_weight="2"
                android:layout_width="wrap_content"
                android:layout_height="match_parent" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/txtView1"
                android:textSize="20sp"
                android:textColor="#FFFFFF"
                android:text="1"
                android:gravity="center"
                android:layout_weight="1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

            <TextView
                android:id="@+id/txtView2"
                android:layout_width="wrap_content"
                android:textSize="20sp"
                android:layout_weight="1"
                android:textColor="#FFFFFF"

                android:gravity="center"
                android:text="2"
                android:layout_height="wrap_content" />

            <TextView
                android:id="@+id/txtView3"
                android:gravity="center"
                android:textSize="20sp"
                android:textColor="#FFFFFF"

                android:layout_weight="1"
                android:text="3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>


    </FrameLayout>
</RelativeLayout>

viewpager是全屏，顯示三個界面。framelayout裏面有兩個linearlayout，第一個linearlayout用來顯示三個標籤的背景，第二個linearlayout用來顯示三個標籤。第一個linearlayout的第一個imageview是背景，第二個imageview其實就是佔一個位置，好讓第一個imageview的寬度正好是三分之一的屏幕寬度。

下面是要切換的三個界面

guide1.xml

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


    <TextView
        android:text="1"
        android:textSize="40sp"
        android:textColor="#ffffff"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true" />
</RelativeLayout>

guide2.xml

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


    <TextView
        android:text="2"
        android:textSize="40sp"
        android:textColor="#ffffff"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true" />
</RelativeLayout>

guide3.xml

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


    <TextView
        android:text="3"
        android:textColor="#ffffff"
        android:textSize="40sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true" />
</RelativeLayout>

很簡單，爲了區分每個只有一個textview。

GuideActivity.java

package guide;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.TextView;

import com.example.LittleBee.R;

import java.util.ArrayList;

public class GuideActivity extends Activity implements ViewPager.OnPageChangeListener,
        View.OnClickListener {
    private ViewPager mViewPager;
    private ArrayList<View> mViewList;
    private LayoutInflater mInflater;
    private TextView mTxt1;
    private TextView mTxt2;
    private TextView mTxt3;
    private FrameLayout mFrameLayout;
    private ImageView mImageView;
    private int mCurrentPage;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_guide);
        mViewPager = (ViewPager) findViewById(R.id.guide_viewpager);
        mViewList = new ArrayList<View>();
        mInflater = getLayoutInflater();
        mViewList.add(mInflater.inflate(R.layout.guide1, null));
        mViewList.add(mInflater.inflate(R.layout.guide2, null));
        mViewList.add(mInflater.inflate(R.layout.guide3, null));
        mViewPager.setAdapter(new MyPageAdapter(mViewList));
        mViewPager.setCurrentItem(0);
        mViewPager.setOffscreenPageLimit(1);
        mViewPager.setOnPageChangeListener(this);
        mTxt1 = (TextView) findViewById(R.id.txtView1);
        mTxt1.setOnClickListener(this);
        mTxt2 = (TextView) findViewById(R.id.txtView2);
        mTxt2.setOnClickListener(this);
        mTxt3 = (TextView) findViewById(R.id.txtView3);
        mTxt3.setOnClickListener(this);
        mFrameLayout = (FrameLayout) findViewById(R.id.frameLayout);
        mImageView = (ImageView) findViewById(R.id.imageView);
    }

    @Override
    public void onPageScrolled(int i, float v, int i2) {
        mImageView.setX(mImageView.getWidth() * i + mImageView.getWidth() * v);
        if (v < 0.5) {
            float v1 = v;
            mImageView.setAlpha(1 - v1 * 2);
        } else {
            float v1 = v;
            mImageView.setAlpha(v1 * 2 - 1);
        }
    }

    @Override
    public void onPageSelected(int i) {
        mCurrentPage = i;
    }

    @Override
    public void onPageScrollStateChanged(int i) {
        if (i == 2) {//滑動完畢
            mImageView.setX(mImageView.getWidth() * mCurrentPage);
        }
    }

    @Override
    public void onClick(View view) {

        switch (view.getId()) {
            case R.id.txtView1:
                mImageView.setX(mImageView.getWidth() * 0);
                mViewPager.setCurrentItem(0);
                break;
            case R.id.txtView2:
                mImageView.setX(mImageView.getWidth() * 1);
                mViewPager.setCurrentItem(1);
                break;
            case R.id.txtView3:
                mImageView.setX(mImageView.getWidth() * 2);
                mViewPager.setCurrentItem(2);
                break;
        }

    }
}

MyPagerAdapter

package guide;

import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;

import java.util.ArrayList;


public class MyPageAdapter extends PagerAdapter {
    private ArrayList<View> mViewList;


    public MyPageAdapter(ArrayList<View> mViewList) {
        this.mViewList = mViewList;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(mViewList.get(position));
        return mViewList.get(position);
    }


    @Override
    public int getCount() {
        return mViewList.size();
    }

    @Override
    public boolean isViewFromObject(View view, Object o) {
        return view == o;
    }


    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(mViewList.get(position));
    }

}