微信主界面的效果，一眼看上去准备用ViewpagerIndicator来实现，但是需要在Indicator的后面添加消息通知（BadgeView），可惜没有办法自定义Indicator，最后还是自己写了个实现。
主界面结构:ViewPager 和 Fragment
效果：
主界面布局：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<include layout="@layout/top1"/>
<include layout="@layout/top2"/>
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
</LinearLayout><?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="50dp"
android:paddingLeft="12dp"
android:paddingRight="12dp"
android:background="@drawable/top1_bg" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@drawable/actionbar_icon"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="微信"
android:layout_marginLeft="12dp"
android:textColor="#d3d3d3"
android:textSize="18sp"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:gravity="center"
android:orientation="horizontal"
android:layout_alignParentRight="true">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@drawable/actionbar_search_icon"/>
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@drawable/actionbar_add_icon"/>
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@drawable/actionbar_more_icon"/>
</LinearLayout>
</RelativeLayout>
top2.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="40dp"
android:orientation="vertical"
android:background="#eee" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="37dp"
android:orientation="horizontal">
<LinearLayout
android:id="@+id/chat_warn"
android:layout_width="3dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center">
<TextView
android:id="@+id/textview1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#008000"
android:text="聊天"/>
</LinearLayout>
<LinearLayout
android:layout_width="3dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center">
<TextView
android:id="@+id/textview2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000"
android:text="发现"/>
</LinearLayout>
<LinearLayout
android:layout_width="3dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center">
<TextView
android:id="@+id/textview3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000"
android:text="通讯录"/>
</LinearLayout>
</LinearLayout>
<!-- 。9的图片需要设置为background才有效果 -->
<ImageView
android:id="@+id/tab_line"
android:layout_width="100dp"
android:layout_height="3dp"
android:background="@drawable/tabline"/>
</LinearLayout>
这个布局中有一条线 ImageView，会在程序中动态计算它的宽度，而且在ViewPager切换时会动态的改变它的marginLeft来实现滑动效果。
MainActivity.java
/**
* 指示器根据滑动的距离去改变imageView的marginLeft
*
*
*/
public class MainActivity extends FragmentActivity {
private ViewPager mViewPager;
private FragmentPagerAdapter mAdapter;
private List<Fragment> mDatas;
private TextView textView1;
private TextView textView2;
private TextView textView3;
//指示线的长度
private int mScreen1_3;
//当前页
private int mCurrentPageIndex;
private ImageView tabLine;
private LinearLayout mCharLinearLayout;
//添加一个消息提醒数字
private BadgeView mBadgeView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.main);
//设置指示器的宽度
initTabLine();
initView();
}
//计算指示线的宽度
private void initTabLine() {
tabLine = (ImageView)findViewById(R.id.tab_line);
//这段代码获取了屏幕的宽度
Display display = getWindow().getWindowManager().getDefaultDisplay();
DisplayMetrics outMetrics = new DisplayMetrics();
display.getMetrics(outMetrics);
mScreen1_3 = outMetrics.widthPixels/3;
LayoutParams lp =tabLine.getLayoutParams();
tabLine.setLayoutParams(lp);
}
private void initView(){
mViewPager = (ViewPager)findViewById(R.id.view_pager);
textView1 = (TextView)findViewById(R.id.textview1);
textView2 = (TextView)findViewById(R.id.textview2);
textView3 = (TextView)findViewById(R.id.textview3);
mCharLinearLayout = (LinearLayout)findViewById(R.id.chat_warn);
mDatas = new ArrayList<Fragment>();
ChatMainFragment tab01 = new ChatMainFragment();
ContactFragment tab02 = new ContactFragment();
FindFragment tab03 = new FindFragment();
mDatas.add(tab01);
mDatas.add(tab02);
mDatas.add(tab03);
//注意，如果使用v4包里的Fragment的话，需要继承FragmentActivity，做好保证所有的Fragment都来自Fragment，防止编译报错
mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public int getCount() {
return mDatas.size();
}
@Override
public Fragment getItem(int arg0) {
return mDatas.get(arg0);
}
};
mViewPager.setAdapter(mAdapter);
//滑动时改变字的颜色
mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
//滑动结束的时候
@Override
public void onPageSelected(int arg0) {
//全部设置为同一个颜色
resetTextView();
switch (arg0) {
case 0:
//添加一个BadgeView 提示
if(mBadgeView != null){
mCharLinearLayout.removeView(mBadgeView);
}
mBadgeView = new BadgeView(MainActivity.this);
//添加提示数量
mBadgeView.setBadgeCount(7);
mCharLinearLayout.addView(mBadgeView);
textView1.setTextColor(Color.parseColor("#008000"));
break;
case 1:
textView2.setTextColor(Color.parseColor("#008000"));
break;
case 2:
textView3.setTextColor(Color.parseColor("#008000"));
break;
default:
break;
}
mCurrentPageIndex = arg0;
}
//滚动的时候，动态改变ImageView的 marginLeft 来实现动画效果
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPx) {
LinearLayout.LayoutParams lp = (android.widget.LinearLayout.LayoutParams) tabLine.getLayoutParams();
/*//如果当前页为0
if(mCurrentPageIndex == 0 && position == 0){
lp.leftMargin = (int) (positionOffset*mScreen1_3 + mCurrentPageIndex*mScreen1_3);
}else if(mCurrentPageIndex ==1 && position == 0){
//从第1页到第0页,最终margin为0
lp.leftMargin = (int) (mCurrentPageIndex* mScreen1_3 +(positionOffset -1)*mScreen1_3);
}else if(mCurrentPageIndex == 1 && position == 1){
//从1 到2
lp.leftMargin = (int) (mCurrentPageIndex * mScreen1_3 +positionOffset*mScreen1_3);
}else if(mCurrentPageIndex == 2 && position == 1){
lp.leftMargin = (int) (mCurrentPageIndex *mScreen1_3 +(positionOffset-1)*mScreen1_3);
}*/
//上面的代码可以直接用这一句代替
lp.leftMargin= (int) (mCurrentPageIndex*mScreen1_3+(positionOffset+position-mCurrentPageIndex)*mScreen1_3);
tabLine.setLayoutParams(lp);
}
@Override
public void onPageScrollStateChanged(int state) {
//三种状态，滑动中，滑动结束，没有动
Log.i("meng.li","state = "+state );
}
});
}
private void resetTextView(){
textView1 .setTextColor(Color.parseColor("#000000"));
textView2 .setTextColor(Color.parseColor("#000000"));
textView3 .setTextColor(Color.parseColor("#000000"));
}
}再次就是TabLine的跟随手指的效果，首先会根据Tab页的数量为TabLine设置宽度，然后在onPageScrolled中根据position，positionOffset，currentIndex，判断用户当前手指滑动的方向，然后根据positionOffset这个百分比乘以TabLine的宽度，动态设置TabLine的leftMargin实现跟随手指移动的效果。
Fragment 的代码和布局都比较简单，不贴代码了。
本文转载自：http://blog.csdn.net/lmj623565791/article/details/25708045