Android——ViewPager和底部导航的配合

ViewPager之前已经说过，微信左右滑动的效果就是ViewPager的效果，但是人家的滑

动和底部导航是一块变化的，所以我们来实现这个效果。

先来做底部导航，实际上是需要8张图片，选择的图片和未被选择到的图片，这些需要存放在资源包下面。

整体用LinearLayout布局，上面一个ViewPager，下面导航一个LinearLayout。

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:padding="5dp"
    tools:context="com.example.weibotest.MainActivity" >

  <android.support.v4.view.ViewPager
      android:id="@+id/main_vp"
       android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="#f00"
      >

  </android.support.v4.view.ViewPager>


    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center"
        >
        <LinearLayout 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
             android:layout_weight="1"
            android:gravity="center"
            android:id="@+id/main_home"
            >

            <ImageView 
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/tabbar_home"

                />
            <TextView 
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="首页"
                android:textSize="20sp"
                />


        </LinearLayout>

        <LinearLayout 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_weight="1"
            android:gravity="center"
             android:id="@+id/main_message"
            >

            <ImageView 
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/tabbar_message_center"

                />
            <TextView 
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="消息"
                android:textSize="20sp"
                />


        </LinearLayout>

        <LinearLayout 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_weight="1"
             android:id="@+id/main_profile"
            android:gravity="center"
            >

            <ImageView 
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/tabbar_profile"

                />
            <TextView 
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="个人"
                android:textSize="20sp"
                />


        </LinearLayout>

        <LinearLayout 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical"
             android:id="@+id/main_more"
            android:gravity="center"
            >

            <ImageView 
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/tabbar_more"

                />
            <TextView 
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="更多"
                android:textSize="20sp"
                />


        </LinearLayout>



    </LinearLayout>

</LinearLayout>

ViewPager必须使用全包名。

布局做好以后来写逻辑。

将4个LinearLayout放到数组中进行控件监听，当点击到那个LinearLayout时候切换图片。

同时需要4个Fragment，自然对应4个Fragment的布局。

由于用到的是ViewPager，需要创建Adapter继承FragmentPagerAdapter。

大体知道以后看看具体的代码：

Mainactivity：

package com.example.weibotest;

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

import com.example.adapter.Myadapter;
import com.example.fragment.HomeFragment;
import com.example.fragment.MessageFragment;
import com.example.fragment.MoreFragment;
import com.example.fragment.ProfileFragment;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class MainActivity extends FragmentActivity implements OnClickListener, OnPageChangeListener {
    private LinearLayout home, message, profile, more;
    private LinearLayout lls[] = new LinearLayout[4];
    private ViewPager vp;
    private int imgs[] = { R.drawable.tabbar_home, R.drawable.tabbar_message_center, R.drawable.tabbar_profile,
            R.drawable.tabbar_more };
    private int imgs_select[] = { R.drawable.tabbar_home_highlighted, R.drawable.tabbar_message_center_highlighted,
            R.drawable.tabbar_profile_highlighted, R.drawable.tabbar_more_highlighted };
    private Myadapter adapter;
    private List<Fragment> datas;
    private FragmentManager fm;
    private HomeFragment home_f;
    private MessageFragment message_f;
    private ProfileFragment profile_f;
    private MoreFragment more_f;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initViews();
        initListener();
        initFragments();
        adapter=new Myadapter(fm, datas);
        vp.setAdapter(adapter);
    }

    private void initFragments() {
        // TODO Auto-generated method stub
        fm=getSupportFragmentManager();
        home_f=new HomeFragment();
        message_f=new MessageFragment();
        profile_f=new ProfileFragment();
        more_f=new MoreFragment();
        datas=new ArrayList<Fragment>();
        datas.add(home_f);
        datas.add(message_f);
        datas.add(profile_f);
        datas.add(more_f);
    }

    private void initListener() {
        // TODO Auto-generated method stub
        for (int i = 0; i < lls.length; i++) {
            lls[i].setOnClickListener(this);
        }
        vp.setOnPageChangeListener(this);
    }

    private void initViews() {
        // TODO Auto-generated method stub
        vp = (ViewPager) findViewById(R.id.main_vp);
        home = (LinearLayout) findViewById(R.id.main_home);
        message = (LinearLayout) findViewById(R.id.main_message);
        profile = (LinearLayout) findViewById(R.id.main_profile);
        more = (LinearLayout) findViewById(R.id.main_more);
        lls[0] = home;
        lls[1] = message;
        lls[2] = profile;
        lls[3] = more;
    }

    @Override
    public void onClick(View v) {
        // TODO Auto-generated method stub
        int index=0;
        switch (v.getId()) {
        case R.id.main_home:
            index=0;
            break;
        case R.id.main_message:
            index=1;
            break;
        case R.id.main_profile:
            index=2;

            break;
        case R.id.main_more:
            index=3;
            break;

        default:
            break;
        }
        changeSelected(index);
        vp.setCurrentItem(index);
    }

    public void changeSelected(int index)
    {
        for (int i = 0; i < lls.length; i++) {
            ImageView iv=(ImageView) lls[i].getChildAt(0);
            if(i==index)
            {
                iv.setImageResource(imgs_select[i]);
            }else
            {
                iv.setImageResource(imgs[i]);
            }

        }
    }

    @Override
    public void onPageScrollStateChanged(int arg0) {
        // TODO Auto-generated method stub

    }

    @Override
    public void onPageScrolled(int arg0, float arg1, int arg2) {
        // TODO Auto-generated method stub

    }

    @Override
    public void onPageSelected(int arg0) {
        // TODO Auto-generated method stub
        changeSelected(arg0);
    }

}

要想到达ViewPager和底部导航的同步，需要两步：

ViewPager设置监听setOnPageChangeListene，里面有三个需要重写的方法。

onPageScrollStateChanged 滚动状态改变的时候

onPageScrolled 滚动的时候

onPageSelected 被选中的时候

1、这里只 第三个方法中添加changeSelected(arg0)方法，当ViewPager被选中的时

候，底部导航需要改变，

2、同样点击导航 也需要改变ViewPager，这里需要在点击监听事件改变导航最后加上

vp.setCurrentItem(index);这样在改变导航以后会立马改变ViewPager。