简单的方法实现仿微信底部的Tab选项卡界面

在网上看了比较多的关于Tab的教程,发现都很杂乱。比较多的用法是用TitlePagerTabStrip和ViewPaper。不过TitlePagerTabStrip有个很大的缺陷,Tab里面的内容刚进去是没有的,要滑一次才能加载出来。而且滑动的时候,Tab里面的内容位置不是固定的,滑倒最后会出现一片空白,非常不美观。虽然有其他的补救方法,但是非常的麻烦,所以我就按照自己的方法实现了一个。功能不错而且非常简单。

 

直接点击或者是滑动界面,都可以转到相应的页面。

效果图:

 

原理是用了三个按钮和ViewPaper,抛弃了TitlePagerTabStrip。

 

ViewPaper通俗的说,它是一个装页面的容器。如上图我有三个不同的界面,是因为我把三个view加了进去。然后再把这个viewPaper加到主界面的布局中。

这样,主界面上就有三个按钮,按钮下方是一个viewPaper,这个viewPaper里面有三个view,我每滑一下或点击按钮就会跳到相应的view。

就是说我们看到的,其实都是主界面,按钮是一直在那的。我们只是不断的转换viewPaper这个容器里面的视图而已。

 

主界面的布局代码:

<RelativeLayout 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" >

  //这里加三个按钮
  
 //这里是viewPaper 一个容器 <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="wrap_content" android:layout_height="wrap_content" > </RelativeLayout>

 

 怎么实现,按相应的按钮跳转到viewPaper中相应的视图呢?很简单,只要为按钮设置监听,然后调用viewPaper的setCurrentItem()这个函数就行。

对于相应的页面,我们的按钮也应该有相应的变化,如上图我们的按钮中的英文变成了√。这个只要在viewPaper的监听器中重载onPageSelected()这个函数就行,

每个页面被选中,都会调用这个函数。在这个函数里判断当前的页面是哪一个,然后再对按钮做出相应的改变即可。

  

  onCreate的代码

 //设置viewPaper
    ViewPager pager = null;
    ArrayList<View> viewContainter = new ArrayList<View>();

    

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_add);

        //实例化ViewPaper
        pager = (ViewPager) this.findViewById(R.id.viewpager3);



        //设置按钮跳转到相应的viewPaper页面
        
        按钮1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                //跳到第一个页面
                pager.setCurrentItem(0);

            }
        });

        按钮2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                //第二个页面
                pager.setCurrentItem(1);

            }
        });
        
        按钮3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                //第三个页面
                pager.setCurrentItem(2);

            }
        });
        
        
        

        //为viewPaper设置内容
        //view是我们放进viewPaper里面的东西,要为它设置好布局,再放进去
        View view1 = LayoutInflater.from(this).inflate(R.layout.自己的布局文件1, null);
        View view2 = LayoutInflater.from(this).inflate(R.layout.自己的布局文件2, null);
        View view3 = LayoutInflater.from(this).inflate(R.layout.自己的布局文件3, null);

        //这是个ArrayList,加进去了3个view
        viewContainter.add(view1);
        viewContainter.add(view2);
        viewContainter.add(view3);
        

        //设置适配器 这里的代码复制即可
        pager.setAdapter(new PagerAdapter() {


            //viewpager中的组件数量
            @Override
            public int getCount() {
                return viewContainter.size();
            }

            //滑动切换的时候销毁当前的组件

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

            //每次滑动的时候生成的组件
            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                ((ViewPager) container).addView(viewContainter.get(position));
                return viewContainter.get(position);
            }

            @Override
            public boolean isViewFromObject(View arg0, Object arg1) {
                return arg0 == arg1;
            }

            @Override
            public int getItemPosition(Object object) {
                return super.getItemPosition(object);
            }


        });

        //页面变化时的监听 改变按钮
        pager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int i, float v, int i1) {

            }

            @Override
            public void onPageSelected(int i) {

                switch (i) {

                    //如果是第一个页面
                    case 0:
                        按钮1.setText("√");
                        按钮2.setText("TAB2");
                        按钮3.setText("TAB3");

                        break;

                    //如果是第二个页面
                    case 1:
                        按钮1.setText("TAB1");
                        按钮2.setText("√");
                        按钮3.setText("TAB3");
                        break;
                        
                    //如果是第三个页面
                    case 1:
                        按钮1.setText("TAB1");
                        按钮2.setText("TAB2");
                        按钮3.setText("√");
                        break;



                }

            }

            @Override
            public void onPageScrollStateChanged(int i) {

            }
        });




    }

 

想用到每个view里面的控件的话,在主界面上是找不到这些控件的,都是空的。 必须在instantiateItem这个函数里面指定。

@Override
            public Object instantiateItem(ViewGroup container, int position) {
                ((ViewPager) container).addView(viewContainter.get(position));

                switch (position){

                    case 0: {

                        //在第一个页面中

                        }
                    }
}

 


 

 代码不是直接复制可用的,因为有些地方怕杂乱,改成了中文,布局文件中的注释也是不正确的。不过大家只要把代码过一遍,应该没什么问题。

 

posted @ 2016-01-30 16:57  wzb的QQ空间  阅读(9531)  评论(0编辑  收藏  举报