布局文件
布局文件中需要注意的地方：
1.主activity布局文件中颠通，善用weight屬性使ViewPager填充滿屏幕
<include layout="@layout/top" />
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:flipInterval="30"
android:persistentDrawingCache="animation">
</android.support.v4.view.ViewPager>
<include layout="@layout/bottom" />
2.底部由4個LinearLayout占據(jù)胳搞，ImageButton的background屬性要制定白色曹体，兩個控件要指定為wrap_content仆百，clickabale屬性設置為flase是為了不讓button阻擾LinearLayout的監(jiān)聽事件驶社，因為控件的優(yōu)先級比其父容器高绽淘。
<LinearLayout
android:id="@+id/tab_1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<ImageButton
android:id="@+id/tab_1_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
android:clickable="false"
android:src="@drawable/tab_weixin_pressed" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="one"
android:textColor="#ffffff"
android:textSize="12sp"
android:textStyle="bold" />
</LinearLayout>
3.主代碼：
initView方法：
1.find出4個tab的實例涵防，4個tab中ImageButton的實例，
2.動態(tài)加載4個布局add進View集合沪铭，
3.new一個ViewAdapter（4個方法格式基本通用壮池，功能就是對View集合的各種設置，加載杀怠，銷毀椰憋，選擇，數(shù)量）赔退，
4.給ViewPager適配ViewAdapter
initEvent方法：
1.給4個tab（LinearLayout）設置監(jiān)聽事件（功能：翻頁橙依，變色）
2.給ViewPager添加監(jiān)聽器证舟，注意代碼中標注的細節(jié)（功能：變色）
public class MainActivity extends Activity implements OnClickListener{
private ViewPager mViewPager;
private PagerAdapter mAdapter;
private List<View> mViews = new ArrayList<View>();
//底部4個TAB
private LinearLayout mTab1;
private LinearLayout mTab2;
private LinearLayout mTab3;
private LinearLayout mTab4;
private ImageButton mTab1Img;
private ImageButton mTab2Img;
private ImageButton mTab3Img;
private ImageButton mTab4Img;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
initView();
initEvent();
setSelect(1);
}
private void initView() {
mViewPager = (ViewPager) findViewById(R.id.viewpager);
//底部的4個tab區(qū)域，需要設置監(jiān)聽事件的
mTab1 = (LinearLayout) findViewById(R.id.tab_1);
mTab2 = (LinearLayout) findViewById(R.id.tab_2);
mTab3 = (LinearLayout) findViewById(R.id.tab_3);
mTab4 = (LinearLayout) findViewById(R.id.tab_4);
//底部的4個ImageButton窗骑，需要改變其背景圖片
mTab1Img = (ImageButton) findViewById(R.id.tab_1_btn);
mTab2Img = (ImageButton) findViewById(R.id.tab_2_btn);
mTab3Img = (ImageButton) findViewById(R.id.tab_3_btn);
mTab4Img = (ImageButton) findViewById(R.id.tab_4_btn);
//裝載View進集合女责，為ViewAdapter準備
LayoutInflater inflater = LayoutInflater.from(this);
View tab1 = inflater.inflate(R.layout.tab1, null);
View tab2 = inflater.inflate(R.layout.tab2, null);
View tab3 = inflater.inflate(R.layout.tab3, null);
View tab4 = inflater.inflate(R.layout.tab4, null);
mViews.add(tab1);
mViews.add(tab2);
mViews.add(tab3);
mViews.add(tab4);
//創(chuàng)建ViewAdapter，此處我直接new一個
mAdapter = new PagerAdapter() {
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(mViews.get(position));
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
//遍歷View集合创译，加載所有view
View view = mViews.get(position);
container.addView(view);
return view;
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return (arg0 == arg1);
}
@Override
public int getCount() {
return mViews.size();
}
};
//創(chuàng)建好了PagerAdapter就可以適配給ViewPager了
mViewPager.setAdapter(mAdapter);
}
private void initEvent() {
//給4個Tab設置監(jiān)聽事件
//注意此處要給layout添加監(jiān)聽事件抵知，而不是ImageButton。但如果點擊了IamageButton的話软族，點擊事件只傳給ImageButton刷喜，不會外傳給LinearLayout，所以再布局里要給ImageButton加上點擊無效屬性
mTab1.setOnClickListener(this);
mTab2.setOnClickListener(this);
mTab3.setOnClickListener(this);
mTab4.setOnClickListener(this);
//給ViewPager加載監(jiān)聽器互订，改變ImageButon顏色
mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int arg0) {
int currentItem = mViewPager.getCurrentItem();
initImg();
switch (currentItem) {
case 0:
mTab1Img.setImageResource(R.drawable.tab_weixin_pressed);
break;
case 1:
mTab2Img.setImageResource(R.drawable.tab_find_frd_pressed);
break;
case 2:
mTab3Img.setImageResource(R.drawable.tab_address_pressed);
break;
case 3:
mTab4Img.setImageResource(R.drawable.tab_settings_pressed);
break;
}
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
});
}
//重寫Tab的監(jiān)聽事件
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.tab_1:
setSelect(1);
break;
case R.id.tab_2:
setSelect(2);
break;
case R.id.tab_3:
setSelect(3);
break;
case R.id.tab_4:
setSelect(4);
break;
default:
break;
}
}
//將方法抽取出來（根據(jù)點擊翻頁吱肌，以及變換TabImage顏色）
private void setSelect(int i) {
initImg();
switch (i) {
case 1:
mViewPager.setCurrentItem(0);
mTab1Img.setImageResource(R.drawable.tab_weixin_pressed);
break;
case 2:
mViewPager.setCurrentItem(1);
mTab2Img.setImageResource(R.drawable.tab_find_frd_pressed);
break;
case 3:
mViewPager.setCurrentItem(2);
mTab3Img.setImageResource(R.drawable.tab_address_pressed);
break;
case 4:
mViewPager.setCurrentItem(3);
mTab4Img.setImageResource(R.drawable.tab_settings_pressed);
break;
}
}
//將所有ImageButton的源圖片切換為暗色，主意不是backgroundResource
private void initImg() {
mTab1Img.setImageResource(R.drawable.tab_weixin_normal);
mTab2Img.setImageResource(R.drawable.tab_find_frd_normal);
mTab3Img.setImageResource(R.drawable.tab_address_normal);
mTab4Img.setImageResource(R.drawable.tab_settings_normal);
}
}
