学习内容来自“慕课网”
网站上一共有4种方法来实现APP主界面的TAB方法
这里学习第一种
ViewPager实现Tab
布局文件有7个，
主界面acitivity.layout
1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 android:orientation="vertical" 6 > 7 <include layout="@layout/top"/> 8 9 <android.support.v4.view.ViewPager 10 android:id="@+id/id_viewpager" 11 android:layout_width="fill_parent" 12 android:layout_height="0dp" 13 android:layout_weight="1"> 14 15 </android.support.v4.view.ViewPager> 16 17 <include layout="@layout/bottom"/> 18 </LinearLayout> 19
头部部分top.xml
1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="match_parent" 4 android:background="@drawable/title_bar" 5 android:layout_height="45dp" 6 android:gravity="center" 7 android:orientation="vertical" > 8 <TextView 9 android:layout_height="wrap_content" 10 android:layout_width="wrap_content" 11 android:layout_gravity="center" 12 android:text="微信" 13 android:textColor="#ffffff" 14 android:textSize="20sp" 15 android:textStyle="bold" 16 17 /> 18 19 </LinearLayout>
底部部分bottom.xml
1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 android:orientation="vertical" 6 > 7 <include layout="@layout/top"/> 8 9 <android.support.v4.view.ViewPager 10 android:id="@+id/id_viewpager" 11 android:layout_width="fill_parent" 12 android:layout_height="0dp" 13 android:layout_weight="1"> 14 15 </android.support.v4.view.ViewPager> 16 17 <include layout="@layout/bottom"/> 18 </LinearLayout> 19
这里有个需要注意的地方，就是ImageButton 他有一个属性android:clickable="false"
注意点在于为LinearLayout设置监听器的时候，会出现点击文字能响应监听事件，而点击图片不会响应的情况，问题在于LinearLayout会把监听事件先交给ImageButton，因为它是可以点击的，而ImageButton中未实现监听器，所以不能响应。解决方法就是设置它不能被点击。在XML文件中，添加android:clickable="false"，就可以。
（大家可以试试没有这行属性的情况下，点击图片是否有响应）
还有4个对应功能的layout
1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 android:orientation="vertical" > 6 7 <TextView 8 android:id="@+id/textView1" 9 android:layout_width="wrap_content" 10 android:layout_height="wrap_content" 11 android:layout_gravity="center_horizontal" 12 android:text="微信" 13 android:textAppearance="?android:attr/textAppearanceMedium" /> 14 15 </LinearLayout>
Mainactivity.java文件
1 package com.example.viewpager_tab; 2 3 import java.util.ArrayList; 4 import java.util.List; 5 6 import android.os.Bundle; 7 import android.app.Activity; 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.Menu; 13 import android.view.View; 14 import android.view.View.OnClickListener; 15 import android.view.ViewGroup; 16 import android.view.Window; 17 import android.widget.Gallery.LayoutParams; 18 import android.widget.ImageButton; 19 import android.widget.LinearLayout; 20 21 public class MainActivity extends Activity implements OnClickListener{ 22 23 private ViewPager mViewPager; 24 private PagerAdapter mAdapter; 25 private List<View> mviews = new ArrayList<View>(); 26 27 //Tab 28 private LinearLayout mTabweixin; 29 private LinearLayout mTabset; 30 private LinearLayout mTabfrd; 31 private LinearLayout mTabadd; 32 33 private ImageButton mweixin_image; 34 private ImageButton mfrd_image; 35 private ImageButton madd_image; 36 private ImageButton mset_image; 37 @Override 38 protected void onCreate(Bundle savedInstanceState) { 39 super.onCreate(savedInstanceState); 40 requestWindowFeature(Window.FEATURE_NO_TITLE); 41 setContentView(R.layout.activity_main); 42 43 44 initView(); //初始化 45 46 initEvent();//初始化事件 47 48 } 49 50 private void initEvent(){ 51 mTabweixin.setOnClickListener(this); 52 mTabadd.setOnClickListener(this); 53 mTabset.setOnClickListener(this); 54 mTabfrd.setOnClickListener(this); 55 56 //设置view左右滑动的响应事件 57 mViewPager.setOnPageChangeListener(new OnPageChangeListener() { 58 59 @Override 60 public void onPageSelected(int arg0) { 61 // TODO Auto-generated method stub 62 int currentItem = mViewPager.getCurrentItem(); 63 resgmit(); 64 switch (currentItem) { 65 case 0: 66 mweixin_image.setImageResource(R.drawable.tab_weixin_pressed); 67 break; 68 case 1: 69 madd_image.setImageResource(R.drawable.tab_address_pressed); 70 break; 71 case 2: 72 mfrd_image.setImageResource(R.drawable.tab_find_frd_pressed); 73 break; 74 case 3: 75 mset_image.setImageResource(R.drawable.tab_settings_pressed); 76 break; 77 default: 78 break; 79 } 80 81 } 82 83 @Override 84 public void onPageScrolled(int arg0, float arg1, int arg2) { 85 // TODO Auto-generated method stub 86 87 } 88 89 @Override 90 public void onPageScrollStateChanged(int arg0) { 91 // TODO Auto-generated method stub 92 93 } 94 }); 95 } 96 97 98 private void initView(){ 99 mViewPager = (ViewPager) findViewById(R.id.id_viewpager); 100 //layout 101 mTabadd = (LinearLayout) findViewById(R.id.id_tab_add); 102 mTabfrd = (LinearLayout) findViewById(R.id.id_tab_frd); 103 mTabset = (LinearLayout) findViewById(R.id.id_tab_set); 104 mTabweixin = (LinearLayout) findViewById(R.id.id_tab_weixin); 105 106 //imagebutton 107 mweixin_image = (ImageButton) findViewById(R.id.id_tab_weixin_image); 108 madd_image = (ImageButton) findViewById(R.id.id_tab_add_image); 109 mfrd_image = (ImageButton) findViewById(R.id.id_tab_frd_image); 110 mset_image = (ImageButton) findViewById(R.id.id_tab_set_image); 111 112 LayoutInflater mInflater = LayoutInflater.from(this); 113 View tab_1 = mInflater.inflate(R.layout.tab_1, null); 114 View tab_2 = mInflater.inflate(R.layout.tab_2, null); 115 View tab_3 = mInflater.inflate(R.layout.tab_3, null); 116 View tab_4 = mInflater.inflate(R.layout.tab_4, null); 117 118 mviews.add(tab_1); 119 mviews.add(tab_2); 120 mviews.add(tab_3); 121 mviews.add(tab_4); 122 123 mAdapter = new PagerAdapter() { 124 125 @Override 126 public void destroyItem(View container, int position, 127 Object object) { 128 // TODO Auto-generated method stub 129 ((ViewPager) container).removeView(mviews.get(position)); 130 131 } 132 133 @Override 134 public Object instantiateItem(View container, int position) { 135 // TODO Auto-generated method stub 136 View view = mviews.get(position); 137 ((ViewGroup) container).addView(view); 138 return view; 139 } 140 141 @Override 142 public boolean isViewFromObject(View arg0, Object arg1) { 143 // TODO Auto-generated method stub 144 return arg0 == arg1; 145 } 146 147 @Override 148 public int getCount() { 149 // TODO Auto-generated method stub 150 return mviews.size(); 151 } 152 }; 153 154 mViewPager.setAdapter(mAdapter); 155 156 } 157 158 @Override 159 public void onClick(View v) { 160 // TODO Auto-generated method stub 161 162 resgmit(); 163 164 switch (v.getId()) { 165 case R.id.id_tab_weixin: 166 mViewPager.setCurrentItem(0); 167 mweixin_image.setImageResource(R.drawable.tab_weixin_pressed); 168 break; 169 case R.id.id_tab_add: 170 mViewPager.setCurrentItem(1); 171 madd_image.setImageResource(R.drawable.tab_address_pressed); 172 break; 173 case R.id.id_tab_frd: 174 mViewPager.setCurrentItem(2); 175 mfrd_image.setImageResource(R.drawable.tab_find_frd_pressed); 176 break; 177 case R.id.id_tab_set: 178 mViewPager.setCurrentItem(3); 179 mset_image.setImageResource(R.drawable.tab_settings_pressed); 180 break; 181 182 default: 183 break; 184 } 185 186 } 187 188 //将所有的图片切换为暗色 189 private void resgmit() { 190 // TODO Auto-generated method stub 191 mweixin_image.setImageResource(R.drawable.tab_weixin_normal); 192 madd_image.setImageResource(R.drawable.tab_address_normal); 193 mfrd_image.setImageResource(R.drawable.tab_find_frd_normal); 194 mset_image.setImageResource(R.drawable.tab_settings_normal); 195 196 } 197 198 }
效果图：
