66、多种多样的App主界面Tab（1）------ ViewPager实现Tab

  1 <?xml version="1.0" encoding="utf-8"?>
  2 <!-- bottom.xml -->
  3 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  4     android:layout_width="match_parent"
  5     android:layout_height="55dp"
  6     android:background="@drawable/bottom_bar"
  7     android:orientation="horizontal" >
  9     <LinearLayout
 10         android:id="@+id/id_tab_weixin"
 11         android:layout_width="0dp"
 12         android:layout_height="fill_parent"
 13         android:layout_weight="1"
 14         android:gravity="center"
 15         android:orientation="vertical" >
 17         <ImageButton
 18             android:id="@+id/id_tab_weixin_img"
 19             android:layout_width="wrap_content"
 20             android:layout_height="wrap_content"
 21             android:background="#00000000"
 22             android:clickable="false"
 23             android:src="@drawable/tab_weixin_pressed" />
 25         <TextView
 26             android:layout_width="wrap_content"
 27             android:layout_height="wrap_content"
 28             android:text="微信"
 29             android:textColor="#ffffff" />
 30     </LinearLayout>
 31 
 32     <LinearLayout
 33         android:id="@+id/id_tab_frd"
 34         android:layout_width="0dp"
 35         android:layout_height="fill_parent"
 36         android:layout_weight="1"
 37         android:gravity="center"
 38         android:orientation="vertical" >
 40         <ImageButton
 41             android:id="@+id/id_tab_frd_img"
 42             android:layout_width="wrap_content"
 43             android:layout_height="wrap_content"
 44             android:background="#00000000"
 45             android:clickable="false"
 46             android:src="@drawable/tab_find_frd_normal" />
 48         <TextView
 49             android:layout_width="wrap_content"
 50             android:layout_height="wrap_content"
 51             android:text="朋友"
 52             android:textColor="#ffffff" />
 53     </LinearLayout>
 54 
 55     <LinearLayout
 56         android:id="@+id/id_tab_address"
 57         android:layout_width="0dp"
 58         android:layout_height="fill_parent"
 59         android:layout_weight="1"
 60         android:gravity="center"
 61         android:orientation="vertical" >
 63         <ImageButton
 64             android:id="@+id/id_tab_address_img"
 65             android:layout_width="wrap_content"
 66             android:layout_height="wrap_content"
 67             android:background="#00000000"
 68             android:clickable="false"
 69             android:src="@drawable/tab_address_normal" />
 71         <TextView
 72             android:layout_width="wrap_content"
 73             android:layout_height="wrap_content"
 74             android:text="通讯录"
 75             android:textColor="#ffffff" />
 76     </LinearLayout>
 77 
 78     <LinearLayout
 79         android:id="@+id/id_tab_settings"
 80         android:layout_width="0dp"
 81         android:layout_height="fill_parent"
 82         android:layout_weight="1"
 83         android:gravity="center"
 84         android:orientation="vertical" >
 86         <ImageButton
 87             android:id="@+id/id_tab_settings_img"
 88             android:layout_width="wrap_content"
 89             android:layout_height="wrap_content"
 90             android:background="#00000000"
 91             android:clickable="false"
 92             android:src="@drawable/tab_settings_normal" />
 94         <TextView
 95             android:layout_width="wrap_content"
 96             android:layout_height="wrap_content"
 97             android:text="设置"
 98             android:textColor="#ffffff" />
 99     </LinearLayout>
100 
101 </LinearLayout>

 1 <LinearLayout 
 2     xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:tools="http://schemas.android.com/tools"
 4     android:layout_width="match_parent"
 5     android:layout_height="match_parent"
 6     android:orientation="vertical" >
10     <android.support.v4.view.ViewPager
11         android:id="@+id/id_viewpager"
12         android:layout_width="fill_parent"
13         android:layout_height="0dp"
14         android:layout_weight="1" />
16     <include layout="@layout/bottom" />
18 </LinearLayout>

  1 package com.imooc.tab01;
  2 
  3 import java.util.ArrayList;
  4 import java.util.List;
  5 
  6 import android.app.Activity;
  7 import android.os.Bundle;
  8 import android.support.v4.view.PagerAdapter;
  9 import android.support.v4.view.ViewPager;
 10 import android.support.v4.view.ViewPager.OnPageChangeListener;
 11 import android.view.LayoutInflater;
 12 import android.view.View;
 13 import android.view.View.OnClickListener;
 14 import android.view.ViewGroup;
 15 import android.view.Window;
 16 import android.widget.ImageButton;
 17 import android.widget.LinearLayout;
 18 
 19 public class MainActivity extends Activity implements OnClickListener {
 20 
 21     private ViewPager mViewPager;
 22     private PagerAdapter mAdapter;
 23     private List<View> mViews = new ArrayList<View>();
 24     // TAB
 25     private LinearLayout mTabWeixin;
 26     private LinearLayout mTabFrd;
 27     private LinearLayout mTabAddress;
 28     private LinearLayout mTabSetting;
 29 
 30     private ImageButton mWeixinImg;
 31     private ImageButton mFrdImg;
 32     private ImageButton mAddressImg;
 33     private ImageButton mSettingImg;
 34 
 35     @Override
 36     protected void onCreate(Bundle savedInstanceState) {
 37         super.onCreate(savedInstanceState);
 38         requestWindowFeature(Window.FEATURE_NO_TITLE);
 39         setContentView(R.layout.activity_main);
 40 
 41         initView();
 42 
 43         initEvents();
 44     }
 45     
 46     private void initView() {
 47         mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
 48         // tabs
 49         mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);
 50         mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);
 51         mTabAddress = (LinearLayout) findViewById(R.id.id_tab_address);
 52         mTabSetting = (LinearLayout) findViewById(R.id.id_tab_settings);
 53         // ImageButton
 54         mWeixinImg = (ImageButton) findViewById(R.id.id_tab_weixin_img);
 55         mFrdImg = (ImageButton) findViewById(R.id.id_tab_frd_img);
 56         mAddressImg = (ImageButton) findViewById(R.id.id_tab_address_img);
 57         mSettingImg = (ImageButton) findViewById(R.id.id_tab_settings_img);
 58 
 59         LayoutInflater mInflater = LayoutInflater.from(this);
 60         View tab01 = mInflater.inflate(R.layout.tab01, null);
 61         View tab02 = mInflater.inflate(R.layout.tab02, null);
 62         View tab03 = mInflater.inflate(R.layout.tab03, null);
 63         View tab04 = mInflater.inflate(R.layout.tab04, null);
 64         mViews.add(tab01);
 65         mViews.add(tab02);
 66         mViews.add(tab03);
 67         mViews.add(tab04);
 68 
 69         mAdapter = new PagerAdapter() {
 70 
 71             @Override
 72             public void destroyItem(ViewGroup container, int position,
 73                     Object object) {
 74                 container.removeView(mViews.get(position));
 75             }
 76 
 77             @Override
 78             public Object instantiateItem(ViewGroup container, int position) {
 79                 View view = mViews.get(position);
 80                 container.addView(view);
 81                 return view;
 82             }
 83 
 84             @Override
 85             public boolean isViewFromObject(View arg0, Object arg1) {
 86                 return arg0 == arg1;
 87             }
 88 
 89             @Override
 90             public int getCount() {
 91                 return mViews.size();
 92             }
 93         };
 94 
 95         mViewPager.setAdapter(mAdapter);
 96     }
 97 
 98     private void initEvents() {
 99         mTabWeixin.setOnClickListener(this);
100         mTabFrd.setOnClickListener(this);
101         mTabAddress.setOnClickListener(this);
102         mTabSetting.setOnClickListener(this);
103 
104         mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
105 
106             @Override
107             public void onPageSelected(int arg0) {
108                 int currentItem = mViewPager.getCurrentItem();
109                 resetImg();   // 将所有的图片切换为暗色的
110                 
111                 switch (currentItem) {
112                 case 0:
113                     mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);
114                     break;
115                 case 1:
116                     mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);
117                     break;
118                 case 2:
119                     mAddressImg
120                             .setImageResource(R.drawable.tab_address_pressed);
121                     break;
122                 case 3:
123                     mSettingImg
124                             .setImageResource(R.drawable.tab_settings_pressed);
125                     break;
126                 }
127             }
128 
129             @Override
130             public void onPageScrolled(int arg0, float arg1, int arg2) { }
131 
132             @Override
133             public void onPageScrollStateChanged(int arg0) { }
134         });
135     }
136 
137     @Override
138     public void onClick(View v) {
139         resetImg();  // 将所有的图片切换为暗色的
140         
141         switch (v.getId()) {
142         case R.id.id_tab_weixin:
143             mViewPager.setCurrentItem(0);
144             mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);
145             break;
146         case R.id.id_tab_frd:
147             mViewPager.setCurrentItem(1);
148             mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);
149             break;
150         case R.id.id_tab_address:
151             mViewPager.setCurrentItem(2);
152             mAddressImg.setImageResource(R.drawable.tab_address_pressed);
153             break;
154         case R.id.id_tab_settings:
155             mViewPager.setCurrentItem(3);
156             mSettingImg.setImageResource(R.drawable.tab_settings_pressed);
157             break;
158 
159         default:
160             break;
161         }
162     }
163 
164     /**
165      * 将所有的图片切换为暗色的
166      */
167     private void resetImg() {
168         mWeixinImg.setImageResource(R.drawable.tab_weixin_normal);
169         mFrdImg.setImageResource(R.drawable.tab_find_frd_normal);
170         mAddressImg.setImageResource(R.drawable.tab_address_normal);
171         mSettingImg.setImageResource(R.drawable.tab_settings_normal);
172     }
173 
174 }