zoukankan      html  css  js  c++  java
  • 使用ViewPager来实现Tab的效果

    程序运行之后将要实现的效果如下图所示:

    下边就详细的说明一下实现代码:

    1、布局实现

      1)上边的布局很简单,命名为top.xml,代码如下:

     1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     2     android:layout_width="fill_parent"
     3     android:layout_height="45dp"
     4     android:background="#000000"
     5     android:gravity="center"
     6     android:orientation="vertical" >
     7 
     8     <TextView
     9         android:layout_width="wrap_content"
    10         android:layout_height="45dp"
    11         android:layout_gravity="center"
    12         android:text="微信"
    13         android:textColor="#FFFFFF"
    14         android:textSize="30sp"
    15         android:textStyle="bold" />
    16 
    17 </LinearLayout>

      2)下边的布局,分别由4个垂直分布的LinearLayout构成,每个LinearLayout由ImageButton和TextView构成,,命名为bottom.xml,代码如下:(中间的代码有省略)

     1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     2     android:layout_width="fill_parent"
     3     android:layout_height="wrap_content"
     4     android:background="#FFFFFF"
     5     android:gravity="center"
     6     android:orientation="horizontal" >
     7 
     8     <LinearLayout
     9         android:id="@+id/tab_weixin"
    10         android:layout_width="0dp"
    11         android:layout_height="wrap_content"
    12         android:layout_weight="1"
    13         android:gravity="center"
    14         android:orientation="vertical" >
    15 
    16         <ImageButton
    17             android:id="@+id/weixin_img"
    18             android:layout_width="wrap_content"
    19             android:layout_height="wrap_content"
    20             android:clickable="false"
    21             android:src="@drawable/yesb" />
    22 
    23         <TextView
    24             android:layout_width="wrap_content"
    25             android:layout_height="wrap_content"
    26             android:text="微信"
    27             android:textColor="#000000" />
    28     </LinearLayout>
    29                     .
    30                     .
    31                     .
    32     <LinearLayout
    33         android:id="@+id/tab_setting"
    34         android:layout_width="0dp"
    35         android:layout_height="wrap_content"
    36         android:layout_weight="1"
    37         android:gravity="center"
    38         android:orientation="vertical" >
    39 
    40         <ImageButton
    41             android:id="@+id/setting_img"
    42             android:layout_width="wrap_content"
    43             android:layout_height="wrap_content"
    44             android:clickable="false"
    45             android:src="@drawable/jibla" />
    46 
    47         <TextView
    48             android:layout_width="wrap_content"
    49             android:layout_height="wrap_content"
    50             android:text="设置"
    51             android:textColor="#000000" />
    52     </LinearLayout>
    53 
    54 </LinearLayout>                            
    View Code

      3)实现整体布局:

     1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     2     xmlns:tools="http://schemas.android.com/tools"
     3     android:id="@+id/container"
     4     android:layout_width="match_parent"
     5     android:layout_height="match_parent"
     6     android:orientation="vertical" >
     7 
     8     <include layout="@layout/top" />
     9 
    10     <android.support.v4.view.ViewPager
    11         android:id="@+id/viewpager"
    12         android:layout_width="wrap_content"
    13         android:layout_height="0dp"
    14         android:layout_weight="1" >
    15     </android.support.v4.view.ViewPager>
    16 
    17     <include layout="@layout/bottom" />
    18 
    19 </LinearLayout>
    View Code

    2、使用Viewpager来实现Tab类似的效果:

      1 @Override
      2     protected void onCreate(Bundle savedInstanceState) {
      3         super.onCreate(savedInstanceState);
      4         requestWindowFeature(Window.FEATURE_NO_TITLE);// 必须在setContentView之前
      5         setContentView(R.layout.activity_main);
      6         initView();
      7         ininEvents();
      8     }
      9 
     10     private void ininEvents() {
     11         // TODO Auto-generated method stub
     12         tab_weixin.setOnClickListener(this);
     13         tab_friend.setOnClickListener(this);
     14         tab_contact.setOnClickListener(this);
     15         tab_setting.setOnClickListener(this);
     16         // 给viewpager添加监听,使得华东viewpager的同时,下边的随之改变按钮的按下状态
     17         viewpager.setOnPageChangeListener(new OnPageChangeListener() {
     18 
     19             @Override
     20             public void onPageSelected(int arg0) {
     21                 // TODO Auto-generated method stub
     22                 int currentItem = viewpager.getCurrentItem();
     23                 resetImg();
     24                 switch (currentItem) {
     25                 case 0:
     26                     weixin.setImageResource(R.drawable.yesr);
     27                     break;
     28                 case 1:
     29                     friend.setImageResource(R.drawable.jib);
     30                     break;
     31 
     32                 case 2:
     33                     contact.setImageResource(R.drawable.yesr);
     34                     break;
     35 
     36                 case 3:
     37                     setting.setImageResource(R.drawable.jib);
     38                     break;
     39 
     40                 default:
     41                     break;
     42                 }
     43             }
     44 
     45             @Override
     46             public void onPageScrolled(int arg0, float arg1, int arg2) {
     47                 // TODO Auto-generated method stub
     48 
     49             }
     50 
     51             @Override
     52             public void onPageScrollStateChanged(int arg0) {
     53                 // TODO Auto-generated method stub
     54 
     55             }
     56         });
     57     }
     58 
     59     private void initView() {
     60         // TODO Auto-generated method stub
     61         viewpager = (ViewPager) findViewById(R.id.viewpager);
     62         weixin = (ImageButton) findViewById(R.id.weixin_img);
     63         friend = (ImageButton) findViewById(R.id.friend_img);
     64         contact = (ImageButton) findViewById(R.id.contact_img);
     65         setting = (ImageButton) findViewById(R.id.setting_img);
     66 
     67         tab_weixin = (LinearLayout) findViewById(R.id.tab_weixin);
     68         tab_friend = (LinearLayout) findViewById(R.id.tab_friend);
     69         tab_contact = (LinearLayout) findViewById(R.id.tab_contact);
     70         tab_setting = (LinearLayout) findViewById(R.id.tab_setting);
     71 
     72         // 将布局转化为View
     73         LayoutInflater inflater = LayoutInflater.from(this);
     74         View view1 = inflater.inflate(R.layout.tab_01, null);
     75         View view2 = inflater.inflate(R.layout.tab_02, null);
     76         View view3 = inflater.inflate(R.layout.tab_03, null);
     77         View view4 = inflater.inflate(R.layout.tab_04, null);
     78         mViews.add(view1);
     79         mViews.add(view2);
     80         mViews.add(view3);
     81         mViews.add(view4);
     82 
     83         // 实例化PagerAdapter
     84         adapter = new PagerAdapter() {
     85 
     86             // 使用PagerAdapter一般还栩需要实现下面两个方法
     87             @Override
     88             public void destroyItem(ViewGroup container, int position,
     89                     Object object) {
     90                 // TODO Auto-generated method stub
     91                 container.removeView(mViews.get(position));
     92             }
     93 
     94             // 初始化Item
     95             @Override
     96             public Object instantiateItem(ViewGroup container, int position) {
     97                 // TODO Auto-generated method stub
     98                 View view = mViews.get(position);
     99                 container.addView(view);
    100                 return view;
    101             }
    102 
    103             // 使用PagerAdapter必须实现的两个方法
    104             @Override
    105             public int getCount() {
    106                 // TODO Auto-generated method stub
    107                 return mViews.size();
    108             }
    109 
    110             @Override
    111             public boolean isViewFromObject(View arg0, Object arg1) {
    112                 // TODO Auto-generated method stub
    113                 return arg0 == arg1;
    114             }
    115 
    116         };
    117         viewpager.setAdapter(adapter);
    118     }
    119 
    120     @Override
    121     public void onClick(View arg0) {
    122         // TODO Auto-generated method stub
    123         resetImg();
    124         switch (arg0.getId()) {
    125         case R.id.tab_weixin:
    126             weixin.setImageResource(R.drawable.yesr);
    127             viewpager.setCurrentItem(0);
    128             break;
    129         case R.id.tab_friend:
    130             friend.setImageResource(R.drawable.jib);
    131             viewpager.setCurrentItem(1);
    132             break;
    133         case R.id.tab_contact:
    134             contact.setImageResource(R.drawable.yesr);
    135             viewpager.setCurrentItem(2);
    136             break;
    137         case R.id.tab_setting:
    138             setting.setImageResource(R.drawable.jib);
    139             viewpager.setCurrentItem(3);
    140             break;
    141 
    142         default:
    143             break;
    144         }
    145     }
    146 
    147     /**
    148      * 将所有的图片切换为暗色
    149      */
    150     private void resetImg() {
    151         // TODO Auto-generated method stub
    152         weixin.setImageResource(R.drawable.yesb);
    153         friend.setImageResource(R.drawable.jibla);
    154         contact.setImageResource(R.drawable.yesb);
    155         setting.setImageResource(R.drawable.jibla);
    156 
    157     }
    158 }
    View Code

    不积跬步,无以至千里,不积小流,无以成江海

  • 相关阅读:
    二、java基本语法
    LINQ入门教程之各种标准查询操作符(一)
    LINQ入门教程之各种标准查询操作符(二)
    读《穷爸爸 富爸爸》有想
    考考你的逻辑推理能力
    读《自控力》有感
    读大数据有感
    django.core.exceptions.AppRegistryNotReady: Models aren't loaded yet.的解决办法
    RabbitMQ入门
    ubuntu安装mysql可视化工具MySQL-workbench及简单操作
  • 原文地址:https://www.cnblogs.com/mengyan1124/p/4675524.html
Copyright © 2011-2022 走看看