android开发--ViewPager的简单应用

效果图:

要完成上述效果我总结出以下几个步骤:
step1:先制作下方导航栏的3个图标的selector,在res下新建文件夹color和drawable;在color里建selector_txtcolor.xml,用于设定导航栏的文字颜色.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:color="@android:color/holo_red_light"/>
    <item android:state_checked="false" android:color="@android:color/darker_gray"/>
</selector>

在drawable中建3个xml,对应设定3个图标
selector_chat.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_checked="true" android:drawable="@drawable/chat_clicked"/>
    <item android:state_checked="false" android:drawable="@drawable/chat_normal"/>
</selector>

selector_search.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_checked="true" android:drawable="@drawable/search_clicked"/>
    <item android:state_checked="false" android:drawable="@drawable/search_normal"/>
</selector>

selector_schedule.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_checked="true" android:drawable="@drawable/schedule_clicked"/>
    <item android:state_checked="false" android:drawable="@drawable/schedule_normal"/>
</selector>

Step2:现在制作Activity_main.xml:

<LinearLayout 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
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="6" />

    <RadioGroup
        android:id="@+id/rg"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingTop="5dp" >

        <RadioButton
            android:id="@+id/rb_chat"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/selector_chat"
            android:gravity="center_horizontal|bottom"
            android:text="chat"
            android:textColor="@color/selector_textcolor" />

        <RadioButton
            android:id="@+id/rb_search"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:button="@null"
            android:checked="true"
            android:drawableTop="@drawable/selector_search"
            android:gravity="center_horizontal|bottom"
            android:text="search"
            android:textColor="@color/selector_textcolor" />

        <RadioButton
            android:id="@+id/rb_schedule"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/selector_schedule"
            android:gravity="center_horizontal|bottom"
            android:text="schedule"
            android:textColor="@color/selector_textcolor" />
    </RadioGroup>

</LinearLayout>

上部分有android.support.v4.view.ViewPager标签定义,而下方导航栏用RadioGroup 组

step3:现在需要做3个xml来对应显示,
pager1.xml:

<?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:background="#00ff00"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_gravity="center_horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:text="pager1" />

</LinearLayout>

pager2.xml:

<?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:background="#00ffff"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView2"
        android:layout_gravity="center_horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:text="pager2" />

</LinearLayout>

pager3.xml:

<?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:background="#f0f000"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView3"
        android:layout_gravity="center_horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:text="pager3" />

</LinearLayout>

简单制作,只是都给出一个textview,并修改了背景颜色而已;
step4:有用到viewpager,需要创建一个继承PagerAdapter类的MyViewPagerAdapter的类
MyViewPagerAdapter.java:

package com.min.viewpager;

import java.util.List;

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

public class MyViewPagerAdapter extends PagerAdapter {

    List<View> views;

    public MyViewPagerAdapter(List<View> views) {
        this.views = views;
    }

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

    @Override
    public boolean isViewFromObject(View arg0, Object arg1) {

        return arg0 == arg1;
    }

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

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

}

step5:MainActivity.java代码:

package com.min.viewpager;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;
import android.widget.Toast;

public class MainActivity extends Activity {
    ViewPager viewPager;
    private RadioGroup rGroup;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        LayoutInflater layoutInflater = getLayoutInflater().from(this);
        View view1 = layoutInflater.inflate(R.layout.pager1, null);
        View view2 = layoutInflater.inflate(R.layout.pager2, null);
        View view3 = layoutInflater.inflate(R.layout.pager3, null);
        ArrayList<View> views = new ArrayList<View>();
        views.add(view1);
        views.add(view2);
        views.add(view3);

        viewPager = (ViewPager) findViewById(R.id.viewpager);
        viewPager.setAdapter(new MyViewPagerAdapter(views));
        viewPager.setCurrentItem(1);

        rGroup = (RadioGroup) findViewById(R.id.rg);
        rGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() {

            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                switch (checkedId) {
                case R.id.rb_chat:
                    viewPager.setCurrentItem(0);
                    break;
                case R.id.rb_schedule:
                    viewPager.setCurrentItem(2);
                    break;
                default:
                    viewPager.setCurrentItem(1);
                    break;
                }

            }
        });

        viewPager.addOnPageChangeListener(new OnPageChangeListener() {

            @Override
            public void onPageSelected(int arg0) {
                Log.i("min", "pager" + arg0);
                switch (arg0) {
                case 0:
                    RadioButton rb_chat = (RadioButton) findViewById(R.id.rb_chat);
                    rb_chat.setChecked(true);
                    break;
                case 1:
                    RadioButton rb_search = (RadioButton) findViewById(R.id.rb_search);
                    rb_search.setChecked(true);
                    break;
                default:
                    RadioButton rb_schedule = (RadioButton) findViewById(R.id.rb_schedule);
                    rb_schedule.setChecked(true);
                    break;
                }

            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {

            }

            @Override
            public void onPageScrollStateChanged(int arg0) {

            }
        });

    }

}

viewpager的应用小结:
1.定义ViewPager的布局文件(Activity_main.xml中的android.support.v4.view.ViewPager标签内为viewpager布局区域)
2.定义每个页面的布局文件(pager1.xml, pager2.xml, pager3.xml)
3.将所有页面添加到ViewPager中(MainActivity.java)
4.继承PagerAdapter(MyViewPagerAdapter.java)

//————————————————-end—————–