ViewPager的简单例子

这个例子是按照官网上的例子写的，有点抄袭的嫌疑，但是自己单独写一下会加深自己的印象。

首先是MainAcitivity.xml:

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

    <android.support.v4.view.ViewPager
        android:translationZ="10dp"
        android:elevation="10dp"
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <Button
            android:id="@+id/go_to_first_item"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:padding="10dp"
            android:text="@string/first"
            android:textAllCaps="false" />

        <Button
            android:id="@+id/go_to_last_item"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:padding="10dp"
            android:text="@string/last"
            android:textAllCaps="false" />
    </LinearLayout>

</LinearLayout>

布局很简单，就是一个ViewPager加上一个LinearLayout

然后ViewPager中的item的布局，这里的ViewPager使用的adapter是FragmentStatePagerAdatper

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

    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical|center_horizontal"
        android:text="@string/hello_world"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <ListView
            android:id="@android:id/list"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <TextView
            android:id="@android:id/empty"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="No items."
            android:textAppearance="?android:attr/textAppearanceMedium" />
    </FrameLayout>
</LinearLayout>

然后是MainAcitivity的代码：

package com.example.crazykids.customsizeviewpager;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.app.ListFragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.ListView;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    static final int NUM_ITEMS = 10;

    private ViewPager mPager;
    private MyAdapter mAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mAdapter = new MyAdapter(getSupportFragmentManager());

        mPager = (ViewPager) findViewById(R.id.view_pager);
        mPager.setAdapter(mAdapter);
        mPager.setPageMargin(10);
        mPager.setPageMarginDrawable(android.R.color.background_dark);

        Button button = (Button) findViewById(R.id.go_to_first_item);
        button.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                mPager.setCurrentItem(0);
            }
        });
        button = (Button) findViewById(R.id.go_to_last_item);
        button.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                mPager.setCurrentItem(NUM_ITEMS - 1);
            }
        });
    }

    public static class MyAdapter extends FragmentStatePagerAdapter {

        @Override
        public float getPageWidth(int position) {
            return 0.2f;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return position + "";
        }

        public MyAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return MyListFragment.getInstance(position);
        }

        @Override
        public int getCount() {
            return NUM_ITEMS;
        }
    }

    public static class MyListFragment extends ListFragment {
        private int mNum;

        public static MyListFragment getInstance(int position) {
            MyListFragment fragment = new MyListFragment();

            Bundle args = new Bundle();
            args.putInt("position", position);
            fragment.setArguments(args);

            return fragment;
        }

        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            mNum = getArguments() == null ? 1 : getArguments().getInt("position");
        }

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
            View view = inflater.inflate(R.layout.fragment_page_item, container, false);
            TextView text = (TextView) view.findViewById(R.id.text);
            text.setText("Fragment # " + mNum);
            return view;
        }

        @Override
        public void onViewCreated(View view, Bundle savedInstanceState) {
            super.onViewCreated(view, savedInstanceState);
            setListAdapter(
                    new ArrayAdapter<String>(getActivity(),
                            android.R.layout.simple_list_item_1,
                            MyArrays.arrays));
        }

        @Override
        public void onListItemClick(ListView l, View v, int position, long id) {
            Log.i("FragmentList", "Item clicked: " + id);
        }
    }
}

这里的fragment继承自ListFragment，在布局文件中ListView的id要设置成android:id/list，然后还有一个id为android:id/empty的textview，当list的adapter的数据为空时，

fragment为显示这个textview。

然后在FragmentStatePagerAdapter中有个getPageSize()的方法，这个方法是制定viewPager中的每个item占整个屏幕的比例，适当的设置这个值可以让viewpager中一次显示多个页面。

下面是效果图：