实现ViewPager与Tab之间的交互

来源：互联网发布：直播平台软件开发编辑：程序博客网时间：2024/05/19 03:20

今天我们要实现一个类似微信界面的布局。

那么我给这个界面分成三个部分，上，中，下，那么久分别给上，下分别设置一个布局，为tob_bar和bottom_bar，那么先建一个顶部布局，代码为：

<?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="wrap_content">    <TextView        android:layout_width="match_parent"        android:layout_height="50dp"        android:gravity="center"        android:paddingLeft="20dp"        android:text="微信"        android:textColor="#aeaeae"        android:textSize="20dp"        android:background="#4f3978"/></LinearLayout>

    再建一个底部的布局文件，代码为：

<?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="wrap_content"    android:orientation="horizontal"    android:background="#ce293c">    <LinearLayout        android:id="@+id/first1_1"        android:layout_weight="1"        android:layout_width="0dp"        android:layout_height="wrap_content"        android:orientation="vertical"        android:gravity="center">        <ImageButton            android:id="@+id/first1_2"            android:layout_width="40dp"            android:layout_height="40dp"            android:clickable="false"            android:background="@drawable/homepagenormal"/>        <TextView            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:gravity="center"            android:text="首页"            android:textColor="#d46aa6"            android:textSize="15dp"/>        </LinearLayout>    <LinearLayout        android:id="@+id/first2_1"        android:layout_weight="1"        android:layout_width="0dp"        android:layout_height="wrap_content"        android:gravity="center"        android:orientation="vertical">        <ImageButton            android:id="@+id/first2_2"            android:layout_width="40dp"            android:layout_height="40dp"            android:clickable="false"            android:background="@drawable/compliantnormal"/>        <TextView            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:gravity="center"            android:text="好友"            android:textColor="#d46aa6"            android:textSize="15dp"/>    </LinearLayout>    <LinearLayout        android:id="@+id/first3_1"        android:layout_weight="1"        android:layout_width="0dp"        android:layout_height="wrap_content"        android:gravity="center"        android:orientation="vertical">        <ImageButton            android:id="@+id/first3_2"            android:layout_width="40dp"            android:layout_height="40dp"            android:clickable="false"            android:background="@drawable/signinnormal"/>        <TextView            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:gravity="center"            android:text="个人"            android:textColor="#d46aa6"            android:textSize="15dp"/>    </LinearLayout></LinearLayout>
    其实很简单，就是三个LinearLayout里面分别放了一个ImageButton和一个TextView，主要作用就是让底部看起来有文字有图标，好看一点。
    接下来我们要再建一个主布局了，有人问不是还少一个中间的布局吗？不要急嘛，等下会加进去的，主布局代码为：

<?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:orientation="vertical">    <include layout="@layout/tob_bar" />    <android.support.v4.view.ViewPager        android:id="@+id/fragment"        android:layout_weight="1"        android:layout_width="match_parent"        android:layout_height="0dp">    </android.support.v4.view.ViewPager>    <include layout="@layout/bottom_bar" /></LinearLayout>
    注意这里我们用了一个android.support.v4.view.ViewPager
    来当中间的布局，但是没内容啊，我们等下会在主函数里面添加的。
    然后都写好了，我们可以写主函数了。主函数代码我们会一点一点讲解的，免得小伙伴一下子看到太多就没胃口看了。
    先写个头部，代码是：
public class MainActivity extends FragmentActivity
{    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.main_activity);    }
}

这几行代码相比大家是知道的，为了能够控制到布局底部布局里面的三个LinearLayout和ImageButton，我们都分别设置了id，那么我们这里就可以引用，那么引用的代码就是：

    private ViewPager viewpager;    private FragmentPagerAdapter madapter;    private List<View> mView;
    private LinearLayout First1_1;    private LinearLayout First2_1;    private LinearLayout First3_1;    private ImageButton First1_2;    private ImageButton First2_2;    private ImageButton First3_2;
为了简单我用数字代替了，不过也是比较好理解的，这里也初始化了ViewPager，因为等下要用，mView用来盛装几个中间布局用的，还有一个madepter，是一个适配器，用来适配ViewPager的，等下也要用。接下来引用，代码为：

    First1_1 = (LinearLayout)findViewById(R.id.first1_1);    First2_1 = (LinearLayout)findViewById(R.id.first2_1);    First3_1 = (LinearLayout)findViewById(R.id.first3_1);    First1_2 = (ImageButton)findViewById(R.id.first1_2);    First2_2 = (ImageButton)findViewById(R.id.first2_2);    First3_2 = (ImageButton)findViewById(R.id.first3_2);    viewpager = (ViewPager)findViewById(R.id.fragment);
这里大家也能看得懂吧，那么接着往下讲，讲到这里我们发现中间的布局还是没说到啊，那么这里我们就写一下吧，写好三个中间布局的代码：

<?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">    <TextView        android:layout_width="match_parent"        android:layout_height="160dp"        android:text="XX"        android:textSize="25dp"        android:gravity="center"        android:textColor="#160943"        android:background="#d2d2d2"/></LinearLayout>
三个布局都差不多，只要改掉XX部分就可以了，并且给每个布局加上id，以便我们接下来的引用。
那么我们在主布局里面怎加载呢？利用以下代码：
LayoutInflater minflater = LayoutInflater.from(this);View tab1 = minflater.inflate(R.id.tab1, null);View tab2 = minflater.inflate(R.id.tab2, null);View tab3 = minflater.inflate(R.id.tab3, null);
这样就可以了，然后添加进mView中，之前已经声明了，代码：
mView.add(tab1);mView.add(tab2);
mView.add(tab3);
然后我们初始化适配器，以便将这些中间布局放进ViewPager中，代码：
madapter = new PagerAdapter()
{
    @Override
    public void destroyItem(ViewGroup container, int position)
    {
        container.removeView(mView.get(position));
    }
    @Override
    public Object instantiateItem(ViewGroup container, int position)
    {
        return container.addView(mView.get(position));
    }
    @Override
    public boolean isViewFromObject(View arg0, Object arg1)
    {
        return arg0 == arg1;

    }    @Override
    public int getCount()
    {
        return mView.size();
    }
}
重写了四个方法，分别有添加View，删除View，得到View的个数和一个固定的写法，然后写好了适配器，就传给viewpager就行了，代码：
viewpager.setAdapter(madapter);
不过要注意的是这些初始化我们需要放到一个初始化方法里，用iniview代替，并放置在onCreate下面。
写到这里其实我们就完成了中间的布局设置，此时我们是可以运行程序的，但是我们发现运动中间的布局，底部的布局是不会有任何改变的，那么我们要做的就是把二者之间联系起来。
那么接下来我们就应该设置点击事件了，也用方法包起来，名叫initEvent，然后在代码写：
private void initEvent() {    First1_1.setOnClickListener(new click());    First2_1.setOnClickListener(new click());    First3_1.setOnClickListener(new click());
}
然后重写onClick方法，代码：
public void click()
{
    @Override
    public void onClick(View v)
    {
        switch(v.getId())
        {
            case R.id.first1_1: viewpager.setCurrentItem(0); First1_2.setImageResourse(R.id.X); break;
            case R.id.first2_1: vewipager.setCurrentItem(1); First2_2.setImageResourse(R.id.X); break;
            case R.id.first3_1: viewpager.setCurrentItem(2); First3_2.setImageResourse(R.id.X); break;
            default : break;
        }
    }
}
到这里其实我们就完成了点击按钮切换中间布局的效果，但是为了让用户能清晰的看出来当前是哪个页面，我们给底部布局的几个ImageButton都设置了两个图片，一个是彩色，一个是暗色，就为了实现，点击哪个按钮哪个按钮就亮，其他暗的效果，所以我们添加了一个resetImg()方法在最前面，代码：
public void resetImg()
{
    First1_2.setImageResourse(R.drawable.X);
    First2_2.setImageResourse(R.drawable.X);
    First3_2.setImageResourse(R.drawable.X);
}
我们注意到click的代码里面和这里都有相同的代码，其实前面的是用来显示亮的图片，这里是显示暗的图片的。
到这里我们是不是就结束了呢？不是，我们只实现了点击更换中间布局的效果，却还没有实现切换中间布局实现更改下面按钮亮暗的效果，那么就必须给viewpager设置一个监听，代码：
viewpager.setOnPageChangeListener(new OnPagerChangeListener()
{
@Override
public void onPageSelected(int arg0)
{
int currentItem = mViewPager.getCurrentItem();
resetImg();
switch (currentItem)
{
case 0:
First1_2.setImageResource(R.drawable.X);
break;
case 1:
First2_2.setImageResource(R.drawable.X);
break;
case 2:
First3_2.setImageResource(R.drawable.X);
break;
}
          }@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2){}        @Overridepublic void onPageScrollStateChanged(int arg0){
        });
至此我们的任务全部完成了，有学会的同学吗。
最后给出全部的主函数的代码，变量上有出入，但是更改一下就可以了。
package com.imooc.tab01;import java.util.ArrayList;import java.util.List;import android.app.Activity;import android.os.Bundle;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.view.LayoutInflater;import android.view.View;import android.view.View.OnClickListener;import android.view.ViewGroup;import android.view.Window;import android.widget.ImageButton;import android.widget.LinearLayout;public class MainActivity extends Activity implements OnClickListener{private ViewPager mViewPager;private PagerAdapter mAdapter;private List<View> mViews = new ArrayList<View>();// TABprivate LinearLayout mTabWeixin;private LinearLayout mTabFrd;private LinearLayout mTabAddress;private LinearLayout mTabSetting;private ImageButton mWeixinImg;private ImageButton mFrdImg;private ImageButton mAddressImg;private ImageButton mSettingImg;@Overrideprotected void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.activity_main);initView();initEvents();}private void initEvents(){mTabWeixin.setOnClickListener(this);mTabFrd.setOnClickListener(this);mTabAddress.setOnClickListener(this);mTabSetting.setOnClickListener(this);mViewPager.setOnPageChangeListener(new OnPageChangeListener(){@Overridepublic void onPageSelected(int arg0){int currentItem = mViewPager.getCurrentItem();resetImg();switch (currentItem){case 0:mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);break;case 1:mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);break;case 2:mAddressImg.setImageResource(R.drawable.tab_address_pressed);break;case 3:mSettingImg.setImageResource(R.drawable.tab_settings_pressed);break;}}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2){}@Overridepublic void onPageScrollStateChanged(int arg0){}});}private void initView(){mViewPager = (ViewPager) findViewById(R.id.id_viewpager);// tabsmTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);mTabAddress = (LinearLayout) findViewById(R.id.id_tab_address);mTabSetting = (LinearLayout) findViewById(R.id.id_tab_settings);// ImageButtonmWeixinImg = (ImageButton) findViewById(R.id.id_tab_weixin_img);mFrdImg = (ImageButton) findViewById(R.id.id_tab_frd_img);mAddressImg = (ImageButton) findViewById(R.id.id_tab_address_img);mSettingImg = (ImageButton) findViewById(R.id.id_tab_settings_img);LayoutInflater mInflater = LayoutInflater.from(this);View tab01 = mInflater.inflate(R.layout.tab01, null);View tab02 = mInflater.inflate(R.layout.tab02, null);View tab03 = mInflater.inflate(R.layout.tab03, null);View tab04 = mInflater.inflate(R.layout.tab04, null);mViews.add(tab01);mViews.add(tab02);mViews.add(tab03);mViews.add(tab04);mAdapter = new PagerAdapter(){@Overridepublic void destroyItem(ViewGroup container, int position,Object object){container.removeView(mViews.get(position));}@Overridepublic Object instantiateItem(ViewGroup container, int position){View view = mViews.get(position);container.addView(view);return view;}@Overridepublic boolean isViewFromObject(View arg0, Object arg1){return arg0 == arg1;}@Overridepublic int getCount(){return mViews.size();}};mViewPager.setAdapter(mAdapter);}@Overridepublic void onClick(View v){resetImg();switch (v.getId()){case R.id.id_tab_weixin:mViewPager.setCurrentItem(0);mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);break;case R.id.id_tab_frd:mViewPager.setCurrentItem(1);mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);break;case R.id.id_tab_address:mViewPager.setCurrentItem(2);mAddressImg.setImageResource(R.drawable.tab_address_pressed);break;case R.id.id_tab_settings:mViewPager.setCurrentItem(3);mSettingImg.setImageResource(R.drawable.tab_settings_pressed);break;default:break;}}/** * 将所有的图片切换为暗色的 */private void resetImg(){mWeixinImg.setImageResource(R.drawable.tab_weixin_normal);mFrdImg.setImageResource(R.drawable.tab_find_frd_normal);mAddressImg.setImageResource(R.drawable.tab_address_normal);mSettingImg.setImageResource(R.drawable.tab_settings_normal);}}

0 0