你的位置:首页 > 操作系统

[操作系统]ViewPager的简单例子


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

首先是MainAcitivity.

<LinearLayout ="http://schemas.android.com/apk/res/android"  ="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>

View Code

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

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

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

View Code

然后是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);    }  }}

View Code

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

fragment为显示这个textview。

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

下面是效果图: