微信主界面的效果，一眼看上去準備用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