Android UI设计——ViewPager的简单使用（一）

http://blog.csdn.net/to_be_designer/article/details/48179793

ViewPager

　　v4包是谷歌官方给我们提供的一个兼容低版本安卓设备的软件包，里面包囊了只有在安卓3.0以上可以使用的api。而viewpager就是其中之一。 
　　什么是ViewPager，我们在开发中什么时候使用？ 
　　在安装一个APP之后，第一次进入这个APP会有几个页面的简介，通过滑动界面我们来查看不同的界面， 这个其实就是ViewPager。还有很多新闻在同一个Activity中我们经常会看到有不同的新闻分类，我们通过滑动界面来查看不同分类的新闻，其实这也是一个ViewPager。 
　　从上面的例子中我们了解到ViewPager是有若干个不同的布局界面组成的。我们

如何导入v4包

　　使用ViewPager之前我们应该先导入v4包。 
　　如何导入v4包？ 
　　

ViewPager的简单使用

1. 在布局中加入ViewPager。这里有一点需要注意，ViewPager的调用需要使用全名调用，也就是需要写清楚包名路径。

<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"    tools:context=".MainActivity">    <android.support.v4.view.ViewPager        android:id="@+id/viewpager"        android:layout_width="match_parent"        android:layout_height="match_parent">    </android.support.v4.view.ViewPager></LinearLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
1
2
3
4
5
6
7
8
9
10
11
12
13

2. ViewPager的使用显然需要使用Adapter适配器，定义一个ViewPager的适配器MyPagerAdapter继承PagerAdapter。重写其中的方法。由于PagerAdapter是抽象的，因此有两个方法是必须重写的，分别是：

getCount()isViewFromObject(View, Object)
1
2
1
2

　　除了这两个方法外为了使用我们还需要重写方法：

instantiateItem(ViewGroup, int)destroyItem(ViewGroup, int, Object)
1
2
1
2

　　在定义Adapter之前我们首先要定义ViewPager中显示的不同的布局界面，这里我们定义三个界面：显示一张图片；显示一段文本；显示一个按钮。
显示一张图片的布局：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    android:gravity="center">    <ImageView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:src="@mipmap/person" /></LinearLayout>
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12

显示一段文本的布局：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:gravity="center"    android:orientation="vertical">    <TextView        android:id="@+id/textview"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="这是一个Viewpager" /></LinearLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
1
2
3
4
5
6
7
8
9
10
11
12
13

显示一个按钮的布局：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:gravity="center"    android:orientation="vertical">    <Button        android:id="@+id/button"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="这是一个Button" /></LinearLayout>
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12

　　然后定义适配器，通过适配器，删除被滑出屏幕的界面，添加划入屏幕的界面。

public class MyPagerAdapter extends PagerAdapter {    private List<View> mViews;//三个布局的集合    /*    通过构造器获得数据     */    public MyPagerAdapter(List<View> mViews) {        this.mViews = mViews;    }    @Override    public int getCount() {        return mViews.size();//显示的布局的数量，我们这里为三个。    }    @Override    public boolean isViewFromObject(View view, Object o) {        return view == o;    }    //该方法用于将添加页面    @Override    public Object instantiateItem(ViewGroup container, int position) {        //增加View        container.addView(mViews.get(position));        return mViews.get(position);    }    //删除页面    @Override    public void destroyItem(ViewGroup container, int position, Object object) {        //删除View        container.removeView(mViews.get(position));    }}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

3. 在MAinActivity中， 通过LayoutInflater加载三个不同布局的界面， 保存在List中。创建MyPagerAdapter的对象，然后通过viewPager的对象调用。

public class MainActivity extends Activity {    private ViewPager mViewPager;//定义ViewPager的对象    private List<View> mViews;//定义布局的集合    private LayoutInflater mInflater;    private MyPagerAdapter mPagerAdapter;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        mViewPager = (ViewPager) findViewById(R.id.viewpager);        mInflater = getLayoutInflater();        mViews = new ArrayList<View>();        View view1 =mInflater.inflate(R.layout.item_frist, null);        View view2 =mInflater.inflate(R.layout.item_second, null);        View view3 =mInflater.inflate(R.layout.item_third, null);        mViews.add(view1);        mViews.add(view2);        mViews.add(view3);        mPagerAdapter  = new MyPagerAdapter( mViews);        mViewPager.setAdapter(mPagerAdapter);    }}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

 
扩展：我们可以在第三个页面的按钮上增加点击事件。就像很多应用中会有一个跳过按钮。在Adapter的instantiateItem()方法中添加点击事件。

 @Override    public Object instantiateItem(ViewGroup container, int position) {        //增加View        container.addView(mViews.get(position));        View view  = mViews.get(position);        if(position==2){            Button button = (Button) view.findViewById(R.id.button);            Log.d("data", "这是触发的Button按钮 "+button);            button.setOnClickListener(new View.OnClickListener() {                @Override                public void onClick(View view) {                    Toast.makeText(view.getContext(), "点击了按钮", Toast.LENGTH_SHORT).show();                }            });        }        return mViews.get(position);    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20