多种多样的App主界面Tab实现方法（一）：Viewpager

最近看了慕课网hyman老师的课程，感觉收获很多，所以打算给大家“传销”一下。大家也可以看一下视频，讲得很好。视频连接http://www.imooc.com/learn/264

现在实现tab页面的方式有很多，我会整理一下常用的，把代码贴出来，大家参考一下。

使用ViewPager可以实现图片的滑动，那么肯定也能实现tab的效果。

  top.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:background="@drawable/title_bar"
android:text="@string/title"
android:textColor="#ffffff"
android:textSize="22sp"/>"
</LinearLayout>

bottom.xml  
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="55dp"
android:background="@drawable/bottom_bar"
android:orientation="horizontal">
<LinearLayout
android:id="@+id/weixin_tab"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/weixin_img"
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="@string/weixin"
android:textColor="#ffffff"/>
</LinearLayout>

<LinearLayout
android:id="@+id/frd_tab"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/frd_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
android:clickable="false"
android:src="@drawable/tab_find_frd_normal"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/frd"
android:textColor="#ffffff"/>
</LinearLayout>

<LinearLayout
android:id="@+id/add_tab"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/add_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
android:clickable="false"
android:src="@drawable/tab_address_normal"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/add"
android:textColor="#ffffff"/>
</LinearLayout>

<LinearLayout
android:id="@+id/setting_tab"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/setting_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
android:clickable="false"
android:src="@drawable/tab_settings_normal"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/setting"
android:textColor="#ffffff"/>
</LinearLayout>

</LinearLayout>

用四个LinearLayout作底部切换块，里面包含一个ImageButton和TextView。要把imagebutton的点击事件取消，否则会与linearlayout的点击事件冲突。

weixin_tab.xml 四个页面基本上是一样的，就以微信页面为例，其余页面可以下载源码查看。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="@string/weixin"/>
</LinearLayout>

MainActivity.java

package com.example.tab;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.view.View.OnClickListener;
import android.widget.ImageButton;
import android.widget.LinearLayout;

public class MainActivity extends Activity implements OnClickListener{

ViewPager mViewPager;
PagerAdapter mAdapter;
List<View> mViews;

LinearLayout weixin_tab;
LinearLayout frd_tab;
LinearLayout add_tab;
LinearLayout setting_tab;

ImageButton weixin_img;
ImageButton frd_img;
ImageButton add_img;
ImageButton setting_img;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);

intViews();
intEvents();
}

@SuppressWarnings("deprecation")
private void intEvents() {
weixin_tab.setOnClickListener(this);
frd_tab.setOnClickListener(this);
add_tab.setOnClickListener(this);
setting_tab.setOnClickListener(this);

mViewPager.setOnPageChangeListener(new OnPageChangeListener(){

@Override
public void onPageScrollStateChanged(int arg0) {

}

@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {

}

@Override
public void onPageSelected(int arg0) {
resetImg();
int currentItem = mViewPager.getCurrentItem();
switch(currentItem){
case 0:
weixin_img.setImageResource(R.drawable.tab_weixin_pressed);
break;
case 1:
frd_img.setImageResource(R.drawable.tab_find_frd_pressed);
break;
case 2:
add_img.setImageResource(R.drawable.tab_address_pressed);
break;
case 3:
setting_img.setImageResource(R.drawable.tab_settings_pressed);
break;
default:
break;
}

}

});

}

private void intViews() {
mViewPager=(ViewPager) findViewById(R.id.id_viewpager);

weixin_tab=(LinearLayout)findViewById(R.id.weixin_tab);
frd_tab=(LinearLayout)findViewById(R.id.frd_tab);
add_tab=(LinearLayout)findViewById(R.id.add_tab);
setting_tab=(LinearLayout)findViewById(R.id.setting_tab);

weixin_img=(ImageButton)findViewById(R.id.weixin_img);
frd_img=(ImageButton)findViewById(R.id.frd_img);
add_img=(ImageButton)findViewById(R.id.add_img);
setting_img=(ImageButton)findViewById(R.id.setting_img);

LayoutInflater inflater=LayoutInflater.from(this);
View tab01=inflater.inflate(R.layout.weixin_tab,null);
View tab02=inflater.inflate(R.layout.frd_tab,null);
View tab03=inflater.inflate(R.layout.add_tab,null);
View tab04=inflater.inflate(R.layout.setting_tab,null);

mViews=new ArrayList<View>();
mViews.add(tab01);
mViews.add(tab02);
mViews.add(tab03);
mViews.add(tab04);

mAdapter=new PagerAdapter(){

@Override
public int getCount() {

return mViews.size();
}

@Override
public boolean isViewFromObject(View arg0, Object arg1) {

return arg0==arg1;
}

@Override
public Object instantiateItem(ViewGroup container, int position){
View view = mViews.get(position);
container.addView(view);
return view;
}

@Override
public void destroyItem(ViewGroup container, int position,
Object object) {
container.removeView(mViews.get(position));
}
};

mViewPager.setAdapter(mAdapter);

}

@Override
public boolean onCreateOptionsMenu(Menu menu) {

getMenuInflater().inflate(R.menu.main, menu);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {

int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}

@Override
public void onClick(View v) {
resetImg();
switch(v.getId()){
case R.id.weixin_tab:
mViewPager.setCurrentItem(0);
weixin_img.setImageResource(R.drawable.tab_weixin_pressed);
break;
case R.id.frd_tab:
mViewPager.setCurrentItem(1);
frd_img.setImageResource(R.drawable.tab_find_frd_pressed);
break;
case R.id.add_tab:
mViewPager.setCurrentItem(2);
add_img.setImageResource(R.drawable.tab_address_pressed);
break;
case R.id.setting_tab:
mViewPager.setCurrentItem(3);
setting_img.setImageResource(R.drawable.tab_settings_pressed);
break;
default:
break;
}

}

private void resetImg() {
weixin_img.setImageResource(R.drawable.tab_weixin_normal);
frd_img.setImageResource(R.drawable.tab_find_frd_normal);
add_img.setImageResource(R.drawable.tab_address_normal);
setting_img.setImageResource(R.drawable.tab_settings_normal);
}
}
用LayoutInflater将weixin_tab等四个页面转化为view，再将各个view装进List<View>中，用list数据将适配器PagerAdapter初始化，适配器再将控件ViewPager初始化，然后就成像了。

源码下载：http://pan.baidu.com/s/1jGQySGe

提取码：xz3j