Android仿微信底部实现Tab选项卡切换效果_Android

在网上看了比较多的关于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" >

  <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: {

            //在第一个页面中

            }
          }
}

以上就是本文的全部内容,希望对大家的学习有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索android
Tab选项卡切换
mui 底部选项卡切换、底部选项卡切换错位、mui tab选项卡切换、tab选项卡切换代码、js实现tab选项卡切换,以便于您获取更多的相关知识。

时间: 2024-09-15 04:02:43

Android仿微信底部实现Tab选项卡切换效果_Android的相关文章

Android仿微信底部实现Tab选项卡切换效果

在网上看了比较多的关于Tab的教程,发现都很杂乱.比较多的用法是用TitlePagerTabStrip和ViewPaper.不过TitlePagerTabStrip有个很大的缺陷,Tab里面的内容刚进去是没有的,要滑一次才能加载出来.而且滑动的时候,Tab里面的内容位置不是固定的,滑倒最后会出现一片空白,非常不美观.虽然有其他的补救方法,但是非常的麻烦,所以我就按照自己的方法实现了一个,功能不错而且非常简单. 直接点击或者是滑动界面,都可以转到相应的页面. 效果图: 原理是用了三个按钮和View

Android多个TAB选项卡切换效果_Android

在前一期中,我们做了悬浮头部的两个tab切换和下拉刷新效果,后来项目中要求改成三个tab,当时就能估量了一下,如果从之前的改,也不是不可以,但是要互相记住的状态就太多了,很容易出现错误.就决定重新实现一下这个效果,为此先写了一个demo,这期间项目都已经又更新了两个版本了.demo还木有变成文章. 之前的版本中是采用了一个可以下拉刷新的listview,之后在listview中添加了两个头部,并且在该布局上的上面用了一个一模一样的切换tab,如果没有看过前面版本的,可以看看前一个版本,Listv

Android仿微信图片点击全屏效果_Android

废话不多说先看下效果 先是微信的 再是模仿的 先说下实现原理再一步步分析 这里总共有2个Activity一个就是主页一个就是显示我们图片效果的页面参数通过Intent传送素材内容均来自网络(感谢聪明的蘑菇) 图片都是Glide异步下的下的下的重要的事情说三次然后就是用动画做放大操作然后显示出来了并没有做下载原图的实现反正也是一样 下载下来Set上去而且动画都不需要更简便. OK我们来看分析下 obj目录下分别创建了2个对象一个用来使用来处理显示页面的图片尺寸信息以及位置信息还有一个是用来附带UR

Android仿微信发朋友圈浏览图片效果_Android

先看一下效果吧: 下面就来说一下具体怎么实现的: 实现思路 1.首先我们要获取数据源,数据源就是我们的每条说说(包括姓名.标题.图片数组) 2.自定义适配器(ListView嵌套着GridView) 3.图片点击浏览图片(Fragment+ViewPager) 具体实现 1.初始化数据源,设置适配器,看一下代码: public class MyActivity extends Activity { /*图片显示列表*/ private ListView listView; /*图片URL数组*/

Android仿微信图片点击浏览的效果_Android

本篇我们来做一个类似于微信的图片点击浏览的效果,点击小图图片后会放大至全屏显示,且中间有一个2D平滑过渡的效果. 思路如下: 首先,从图片缩略界面跳转到图片详情页面,应该是从一个Activity跳转到另外一个Activity,应该图片详情页面也有很多操作,用View或者Dialog不是很好.所以现在难点就是,如何使得前一个界面的ImageView在另外一个界面做缩放切割动画. 其次,一般缩略界面的ImageView的是正方形的,并且是CENTER_CROP缩放属性的.CENTER_CROP属性会

Android仿微信底部菜单栏功能显示未读消息数量_Android

底部菜单栏很重要,我看了一下很多应用软件都是用了底部菜单栏,这里使用了tabhost做了一种通用的(就是可以像微信那样显示未读消息数量的,虽然之前也做过但是layout下的xml写的太臃肿,这里去掉了很多不必要的层,个人看起来还是不错的,所以贴出来方便以后使用). 先看一下做出来之后的效果: 以后使用的时候就可以换成自己项目的图片和字体了,主框架不用变哈哈, 首先是要布局layout下xml文件 main.xml: <?xml version="1.0" encoding=&qu

Android仿微信底部按钮滑动变色

Android仿微信底部按钮滑动变色,这里只针对使用Fragment为Tab页的滑动操作,进行简单的变色讲解. 首先说下OnPageChangeListener这个监听 //这个监听有三个方法 public abstract void onPageScrollStateChanged (int state) public abstract void onPageScrolled (int position, float positionOffset, int positionOffsetPixe

Android仿微信底部菜单栏效果

前言 在市面上,大多数的APP都需要通过底部菜单栏来将程序的功能进行分类整理,通常都是分为3-5个大模块,从而正确有效地引导用户去使用我们的APP.实现底部菜单栏的方法也有很多种. 1.仿微信底部菜单栏(ViewPager+ImagerView+TextView) ......(其他方式后续会补充) 效果预览 首先来个开胃菜,看看实现效果: 先贴出项目所需的资源文件,这些可随个人自由更改颜色和文字 colors.xml <color name="bg_line_light_gray&quo

JS基于myFocus库实现各种功能的tab选项卡切换效果_javascript技巧

本文实例讲述了JS基于myFocus库实现各种功能的tab选项卡切换效果.分享给大家供大家参考.具体如下: 这里介绍使用myFocus-tab实现各种功能的选项卡切换,有的是带有动画效果的,各款基于myFocus库制作的焦点图风格皮肤,可自行按需选择,myFocus焦点图库及皮肤可自由使用,保留作者相关信息即可,谢谢支持!^^ 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-myfocus-plug-tab-cha-nav-codes/ 具