Android之仿微信Tab滑动

这个项目实现了以下的功能：有三个标签聊天、发现和通讯录，左右滑动下面的ViewPager可以切换不同的标签，且标签下面的蓝色条可以随着手指的滑动来实时滑动。另外，如果第二次滑动到“聊天”界面，可以在“聊天”旁边添加一个“七条信息”的BadgeView。具体的运行效果如下。

public class MainActivity extends FragmentActivity {
private ViewPager viewPager;
private FragmentPagerAdapter adapter;
private List<Fragment> data;
private TextView tChat, tDiscover, tConn;
private LinearLayout chatLayout;
private BadgeView badgeView;
private ImageView tabLine;
private int widthTabLine;
private int currentPageIndex;

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

initView();
}

// 设置TabLine长度占屏幕的三分之一
private void initTabLine() {
// 获取屏幕宽度1/3的长度
DisplayMetrics metrics = new DisplayMetrics();
getWindow().getWindowManager().getDefaultDisplay().getMetrics(metrics);
widthTabLine = metrics.widthPixels / 3;
// 设置宽度占1/3
LayoutParams layoutParams = (LayoutParams) tabLine.getLayoutParams();
layoutParams.width = widthTabLine;
tabLine.setLayoutParams(layoutParams);
}

private void initView() {
viewPager = (ViewPager) findViewById(R.id.viewpager);
tChat = (TextView) findViewById(R.id.tabbar_tchat);
tDiscover = (TextView) findViewById(R.id.tabbar_tdiscover);
tConn = (TextView) findViewById(R.id.tabbar_tconn);
chatLayout = (LinearLayout) findViewById(R.id.tabbar_chat_layout);
tabLine = (ImageView) findViewById(R.id.tabbar_tabline);

initTabLine();

data = new ArrayList<Fragment>();

// ViewPager的三个页面
ChatTabPage chatTabPage = new ChatTabPage();
DiscoverTabPage discoverTabPage = new DiscoverTabPage();
ConnTabPage connTabPage = new ConnTabPage();
data.add(chatTabPage);
data.add(discoverTabPage);
data.add(connTabPage);

adapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public int getCount() {
return data.size();
}

@Override
public Fragment getItem(int position) {
return data.get(position);
}
};

viewPager.setAdapter(adapter);

// ViewPager滑动结束后，改变Tabbar中的字体颜色
viewPager.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int position) {
resetTextView();
switch (position) {
case 0:
// 当滑动回第一个页面时，在“聊天”旁边增加一个“七条信息”的提示
if (badgeView != null) {
chatLayout.removeView(badgeView);
}
badgeView = new BadgeView(MainActivity.this);
tChat.setTextColor(Color.parseColor("#008000"));
badgeView.setBadgeCount(7);
chatLayout.addView(badgeView);
break;
case 1:
tDiscover.setTextColor(Color.parseColor("#008000"));
break;
case 2:
tConn.setTextColor(Color.parseColor("#008000"));
break;
}
currentPageIndex = position;
}

@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPx) {
// TabLine随着手指滑动而变化位置
LayoutParams layoutParams = (LayoutParams) tabLine.getLayoutParams();
if (currentPageIndex == position) {
layoutParams.leftMargin = (int) ((positionOffset + currentPageIndex) * widthTabLine);
} else {
layoutParams.leftMargin = (int) ((positionOffset - 1 + currentPageIndex) * widthTabLine);
}
tabLine.setLayoutParams(layoutParams);
}

@Override
public void onPageScrollStateChanged(int arg0) {

}
});
}

// 重置三个TextView的字体颜色
protected void resetTextView() {
tChat.setTextColor(Color.BLACK);
tDiscover.setTextColor(Color.BLACK);
tConn.setTextColor(Color.BLACK);
}
}

MainActivity中的JAVA代码