转载

简单的方法实现仿微信的Tab界面

在网上看了比较多的关于Tab的教程，发现都很杂乱。比较多的用法是用TitlePagerTabStrip和ViewPaper。不过TitlePagerTabStrip有个很大的缺陷，Tab里面的内容刚进去是没有的，要滑一次才能加载出来。而且滑动的时候，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) {              }         });         }

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

原文 http://www.cnblogs.com/wzben/p/5171313.html

正文到此结束

所属分类：编程技术

本文标签： http tab HTML src 注释代码 schema IDE list UI XML find 实例 Select ip Android
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二