Android 实现顶部导航

先把页面布置好，主要是用到viewpager
top1.xml

<?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:background="@drawable/top1_bg" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="12dp"
        android:gravity="center_horizontal"
        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_gravity="center_vertical"
            android:layout_marginLeft="12dp"
            android:textColor="#d3d3d3"
            android:textSize="18sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginRight="12dp"
        android:layout_centerVertical="true"
        android:orientation="horizontal" >
         <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:background="#eee"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="37dp"
        android:orientation="horizontal" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:id="@+id/ly_1"
            android:orientation="horizontal"
            android:gravity="center" >

            <TextView
                android:id="@+id/chat"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="聊天"
                android:textColor="#008000" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:id="@+id/ly_2" >

            <TextView
                android:id="@+id/find"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="发现"
                android:textColor="#000000" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center" 
            android:id="@+id/ly_3">

            <TextView
                android:id="@+id/contact"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="通讯录"
                android:textColor="#000000" />
        </LinearLayout>
    </LinearLayout>

    <ImageView
        android:id="@+id/id_iv_tabline"
        android:layout_width="100dp"
        android:layout_height="3dp"
        android:background="@drawable/tabline" />

</LinearLayout>

activity_main.xml

<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
        android:layout_height="wrap_content"
        layout="@layout/top2" />

    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/id_viewpager"
        >       
    </android.support.v4.view.ViewPager>

</LinearLayout>

MainActivity.java

package com.example.wx_main;

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

import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.Display;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup.LayoutParams;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;

import com.jauker.widget.BadgeView;

public class MainActivity extends FragmentActivity implements OnClickListener{

    private ViewPager mp;
    private List<Fragment> mDatas;
    private TextView t1;
    private TextView t2;
    private TextView t3;
    private BadgeView bv;
    private LinearLayout ly_1;
    private LinearLayout ly_2;
    private LinearLayout ly_3;
    
    private ImageView mTabline;
    private int mScreen1_3;

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

        initTabLine();
        mp = (ViewPager) findViewById(R.id.id_viewpager);
        ly_1 = (LinearLayout) findViewById(R.id.ly_1);
        ly_2 = (LinearLayout) findViewById(R.id.ly_2);
        ly_3 = (LinearLayout) findViewById(R.id.ly_3);
        t1 = (TextView) findViewById(R.id.chat);
        t2 = (TextView) findViewById(R.id.find);
        t3 = (TextView) findViewById(R.id.contact);
        initView();
        ly_1.setOnClickListener(this);
        ly_2.setOnClickListener(this);
        ly_3.setOnClickListener(this);
        
    }
    private void initTabLine()
    {
        mTabline = (ImageView) findViewById(R.id.id_iv_tabline);
        Display display = getWindow().getWindowManager().getDefaultDisplay();
        DisplayMetrics outMetrics = new DisplayMetrics();
        display.getMetrics(outMetrics);
        mScreen1_3 = outMetrics.widthPixels / 3;
        LayoutParams lp = mTabline.getLayoutParams();
        lp.width = mScreen1_3;
        mTabline.setLayoutParams(lp);
    }

    public void initView(){
        
        
        mDatas = new ArrayList<Fragment>();
        First f = new First();
        Second s = new Second();
        Third t = new Third();
        
        mDatas.add(f);
        mDatas.add(s);
        mDatas.add(t);
        
        MyAdapter mAdapter = new MyAdapter(getSupportFragmentManager(), mDatas);
        mp.setAdapter(mAdapter);
        
    
        mp.setOnPageChangeListener(new OnPageChangeListener() {
            
            @Override
            public void onPageSelected(int position) {
                resetTextView();
                switch (position) {
                case 0:
                    //第三方包 badgeView
                    if(bv!=null){
                        ly_1.removeView(bv);
                    }
                    bv = new BadgeView(MainActivity.this);
                    bv.setBadgeCount(99);
                    ly_1.addView(bv);                   
                    t1.setTextColor(Color.parseColor("#008000"));               
                    break;
                case 1:
                    t2.setTextColor(Color.parseColor("#008000"));                               
                    break;
                case 2:
                    t3.setTextColor(Color.parseColor("#008000"));           
                    break;
                default:
                    break;
                }
                
            }
            
            private void resetTextView() {
                t1.setTextColor(Color.BLACK);
                t2.setTextColor(Color.BLACK);
                t3.setTextColor(Color.BLACK);
            }

                @Override
                public void onPageScrolled(int position, float positionOffset,
                        int positionOffsetPx)
                {
                    Log.e("TAG", position + " , " + positionOffset + " , "
                            + positionOffsetPx);

                    LinearLayout.LayoutParams lp = (android.widget.LinearLayout.LayoutParams) mTabline
                            .getLayoutParams();

//                  if (mCurrentPageIndex == 0 && position == 0)// 0->1
//                  {
//                      lp.leftMargin = (int) (positionOffset * mScreen1_3 + mCurrentPageIndex
//                              * mScreen1_3);
//                  } else if (mCurrentPageIndex == 1 && position == 0)// 1->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) // 2->1
//                  {
//                      lp.leftMargin = (int) (mCurrentPageIndex * mScreen1_3 + ( positionOffset-1)
//                              * mScreen1_3);
//                  }
                    lp.leftMargin = (int) ((position+positionOffset)*mScreen1_3);
                    mTabline.setLayoutParams(lp);

                }
                
            
            
            @Override
            public void onPageScrollStateChanged(int arg0) {
                // TODO Auto-generated method stub
                
            }
        });
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
        case R.id.ly_1:
            mp.setCurrentItem(0);
            break;
        case R.id.ly_2:
            mp.setCurrentItem(1);
            break;
        case R.id.ly_3:
            mp.setCurrentItem(2);
            break;

        default:
            break;
        }
        
    }
    
  

}

MyAdapter.java

package com.example.wx_main;

import java.util.List;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class MyAdapter extends FragmentPagerAdapter{



    private List<Fragment>fragList;
    private List<String>titleList;
    
    public MyAdapter(FragmentManager fm,List<Fragment> fragList) {
        super(fm);
        // TODO Auto-generated constructor stub
        this.fragList=fragList;
    }

    @Override
    public Fragment getItem(int arg0) {
        // TODO Auto-generated method stub
        return fragList.get(arg0);
    }

    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return fragList.size();
    }
    
    @Override
    public CharSequence getPageTitle(int position) {
        // TODO Auto-generated method stub
        return titleList.get(position);
    }
    

}

First/Second/Third.java

package com.example.wx_main;


import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


public class First extends Fragment{

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        return inflater.inflate(R.layout.tab01, container,false);
        }
    
}

tab01/tab02/tab03.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:gravity="center"
    android:orientation="vertical"
   >
    
    <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#000000"
        android:textStyle="bold"
        android:textSize="20sp"
        android:text="This is the third fragment"
        />

</LinearLayout>

演示效果：

viewpager.gif