android顶部横线动态导航

       最近做一个小项目，需要用到顶部导航，现在大部分的一些顶部导航都差不多是横线加文字的模式设计的，这样简单也比较的方便，在动态设置横线的问题遇到一些问题，如开始用到的是setX,但是效果不怎样，最终通过设置 LinearLayout.LayoutParams完成动态横线的切换，先上图：

采用ViewPager实现多页显示，MainActivity继承FragmentActivity,通过设置适配器完成相应的页面显示，如下面的程序所示。

布局文件为：

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_height="match_parent" 
    android:layout_width="match_parent" 
    android:orientation="vertical" 
   >
    <include layout="@layout/activity_main_top_tab"/>
    <android.support.v4.view.ViewPager
        android:id="@+id/id_page_vp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
       />
</LinearLayout>

activity_main_top_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/id_switch_tab_ll"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

       <LinearLayout
            android:id="@+id/id_tab_chat_ll"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:clickable="true"
            android:gravity="center"
            android:orientation="horizontal"
            android:padding="10dip"
            android:saveEnabled="false" >
           
            <TextView 
                android:id="@+id/id_chat_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="动态"
                android:textColor="#ff8c8c8c"
                android:textSize="16dp"
                />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/id_tab_friend_ll"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:clickable="true"
            android:gravity="center"
            android:orientation="horizontal"
            android:padding="10dip"
            android:saveEnabled="false"
             >

            <TextView
                android:id="@+id/id_friend_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="附近"
                android:textColor="#ff8c8c8c"
                android:textSize="16dp" />
           
        </LinearLayout>

        <LinearLayout
            android:id="@+id/id_tab_contacts_ll"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:focusable="false"
            android:gravity="center"
            android:orientation="horizontal"
            android:padding="10dip" >

            <TextView
                android:id="@+id/id_contacts_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="广场"
                android:textColor="#ff8c8c8c"
                android:textSize="16dp"/>
            
        </LinearLayout>
    </LinearLayout>

    <ImageView
        android:id="@+id/id_tab_line_iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/slidingcursor"
       
       />
  

    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:background="#ff8c8c8c" />
 

</LinearLayout>

java源代码为：

MainActivity.class源代码：

package com.example.test;
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.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
 
public class MainActivity extends FragmentActivity {
 
    private List<Fragment> mFragmentList = new ArrayList<Fragment>();
    private FragmentAdapter mFragmentAdapter;
     
    private ViewPager mPageVp;
    /**
     * Tab显示内容TextView
     */
    private TextView mTabChatTv, mTabContactsTv, mTabFriendTv;
    /**
     * Tab的那个引导线
     */
    private ImageView mTabLineIv;
    /**
     * Fragment
     */
    private FragmentPage1 mChatFg;
    private FragmentPage2 mFriendFg;
    private FragmentPage3 mContactsFg;
    /**
     * ViewPager的当前选中页
     */
    private int currentIndex;
    /**
     * 屏幕的宽度
     */
    private int screenWidth;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        findById();
        init();
        initTabLineWidth();
 
    }
 
    private void findById() {
        mTabContactsTv = (TextView) this.findViewById(R.id.id_contacts_tv);
        mTabChatTv = (TextView) this.findViewById(R.id.id_chat_tv);
        mTabFriendTv = (TextView) this.findViewById(R.id.id_friend_tv);
 
        mTabLineIv = (ImageView) this.findViewById(R.id.id_tab_line_iv);
 
        mPageVp = (ViewPager) this.findViewById(R.id.id_page_vp);
    }
 
    @SuppressWarnings("deprecation")
	private void init() {
        mFriendFg = new FragmentPage2();
        mContactsFg = new FragmentPage3();
        mChatFg = new FragmentPage1();
        mFragmentList.add(mChatFg);
        mFragmentList.add(mFriendFg);
        mFragmentList.add(mContactsFg);
 
        mFragmentAdapter = new FragmentAdapter(
                this.getSupportFragmentManager(), mFragmentList);
        mPageVp.setAdapter(mFragmentAdapter);
        mPageVp.setCurrentItem(0);
 
        mPageVp.setOnPageChangeListener(new OnPageChangeListener() {
 
            /**
             * state滑动中的状态 有三种状态（0，1，2） 1：正在滑动 2：滑动完毕 0：什么都没做。
             */
            @Override
            public void onPageScrollStateChanged(int state) {
 
            }
 
            /**
             * position :当前页面，及你点击滑动的页面 offset:当前页面偏移的百分比
             * offsetPixels:当前页面偏移的像素位置
             */
            @Override
            public void onPageScrolled(int position, float offset,
                    int offsetPixels) {
               LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) mTabLineIv.getLayoutParams();
               lp.leftMargin = screenWidth/3*position+offsetPixels/3;
               mTabLineIv.setLayoutParams(lp);
            }
 
            @Override
            public void onPageSelected(int position) {
                resetTextView();
                switch (position) {
                case 0:
                    mTabChatTv.setTextColor(Color.BLUE);
                    break;
                case 1:
                    mTabFriendTv.setTextColor(Color.BLUE);
                    break;
                case 2:
                    mTabContactsTv.setTextColor(Color.BLUE);
                    break;
                }
                currentIndex = position;
            }
        });
 
    }
 
    /**
     * 设置滑动条的宽度为屏幕的1/3(根据Tab的个数而定)
     */
    private void initTabLineWidth() {
        DisplayMetrics dpMetrics = new DisplayMetrics();
        getWindow().getWindowManager().getDefaultDisplay()
                .getMetrics(dpMetrics);
        screenWidth = dpMetrics.widthPixels;
        LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) mTabLineIv.getLayoutParams();
        lp.width = screenWidth / 3;
        mTabLineIv.setLayoutParams(lp);
    }
 
    /**
     * 重置颜色
     */
    private void resetTextView() {
        mTabChatTv.setTextColor(0xff8c8c8c);
        mTabFriendTv.setTextColor(0xff8c8c8c);
        mTabContactsTv.setTextColor(0xff8c8c8c);
    }
 
}

源码下载地址