php仿微信底部菜单,Android_Android仿微信底部实现Tab选项卡切换效果，在网上看了比较多的关于Tab的 - phpStudy...

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

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

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

效果图：

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

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

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

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

主界面的布局代码：

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity" >

android:id="@+id/viewpager"

android:layout_width="wrap_content"

android:layout_height="wrap_content" >

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

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

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

onCreate的代码

//设置viewPaper

ViewPager pager = null;

ArrayList viewContainter = new ArrayList();

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

//在第一个页面中

}

}

}

以上就是本文的全部内容，希望对大家的学习有所帮助。相关阅读:

JavaScript动态插入CSS的方法

探讨:web上存漏洞及原理分析、防范方法

JS实现获取键盘按下的按键并显示在页面上的方法

JQuery查找DOM节点的方法

利用jquery写的左右轮播图特效

jQuery分组选择器用法实例

浅析java快速排序算法

js运动动画的八个知识点

css3实现顶部社会化分享按钮示例

绝对令人的惊叹的CSS3折叠效果(3D效果)整理

如何为OS X备忘录添加密码保护？Mac备忘录加密详细教程

C#基于UDP进行异步通信的方法

Java垃圾回收finalize()作用详解

Symfony2联合查询实现方法