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

来源：互联网发布：映客直播网站源码编辑：程序博客网时间：2024/05/24 05:03

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。

0 0