Android 实现下划线能滑动的Tab标签页

转载请注明出处：http://blog.csdn.net/zhuwentao2150/article/details/51407661

效果图如下，点击对应的Tab标签或者滑动屏幕则可跳转到对应的页面，并且底部的横线也会滑动到对应的Tab标签下面

顶部的导航栏使用三个TextView实现，下划线就是一个ImageView加载了一张横线图片，内容区是用ViewPager实现。

需要注意的是，使用ViewPager控件需要导入android.support.v4.jar兼容包，不过如果你是使用AndroidStudio，则会自动导入

页面布局代码

activity_main.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:orientation="vertical">
&lt;!-- 顶部导航栏 --&gt;
&lt;LinearLayout
    android:layout_width=&quot;match_parent&quot;
    android:layout_height=&quot;40dp&quot;
    android:orientation=&quot;horizontal&quot;&gt;

    &lt;TextView
        android:id=&quot;@+id/tv01&quot;
        android:layout_width=&quot;0dp&quot;
        android:layout_height=&quot;match_parent&quot;
        android:layout_weight=&quot;1&quot;
        android:gravity=&quot;center&quot;
        android:text=&quot;今日&quot;
        android:textColor=&quot;#ff0000&quot;
        android:textSize=&quot;18sp&quot; /&gt;

    &lt;TextView
        android:id=&quot;@+id/tv02&quot;
        android:layout_width=&quot;0dp&quot;
        android:layout_height=&quot;match_parent&quot;
        android:layout_weight=&quot;1&quot;
        android:gravity=&quot;center&quot;
        android:text=&quot;明天&quot;
        android:textSize=&quot;18sp&quot; /&gt;

    &lt;TextView
        android:id=&quot;@+id/tv03&quot;
        android:layout_width=&quot;0dp&quot;
        android:layout_height=&quot;match_parent&quot;
        android:layout_weight=&quot;1&quot;
        android:gravity=&quot;center&quot;
        android:text=&quot;后天&quot;
        android:textSize=&quot;18sp&quot; /&gt;
&lt;/LinearLayout&gt;

&lt;!-- Tab底部下划线 --&gt;
&lt;ImageView
    android:id=&quot;@+id/iv_tab_bottom_img&quot;
    android:layout_width=&quot;wrap_content&quot;
    android:layout_height=&quot;2dp&quot;
    android:scaleType=&quot;matrix&quot;
    android:src=&quot;@drawable/ic_orange_line&quot; /&gt;

&lt;!-- 内容页 --&gt;
&lt;android.support.v4.view.ViewPager
    android:id=&quot;@+id/vPager&quot;
    android:layout_width=&quot;wrap_content&quot;
    android:layout_height=&quot;match_parent&quot;
    android:layout_gravity=&quot;center&quot;
    android:background=&quot;#ffffff&quot; /&gt;

</LinearLayout>

还需要三个Tab页面作为VIewPager的内容展示页，分别取名 tab_01.xml、tab_02.xml，tab_03.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:orientation="vertical">
&lt;TextView
    android:layout_width=&quot;match_parent&quot;
    android:layout_height=&quot;match_parent&quot;
    android:gravity=&quot;center&quot;
    android:textSize=&quot;180sp&quot;
    android:text=&quot;1&quot;/&gt;

</LinearLayout>

接下来就是主要代码了，详细的解释在代码里

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private List<View> listViews;
private ImageView cursorIv;
private TextView tab01, tab02, tab03;
private TextView[] titles;
private ViewPager viewPager;

/**
 * 偏移量（手机屏幕宽度 / 选项卡总数 - 选项卡长度） / 2
 */
private int offset = 0;

/**
 * 下划线图片宽度
 */
private int lineWidth;

/**
 * 当前选项卡的位置
 */
private int current_index = 0;

/**
 * 选项卡总数
 */
private static final int TAB_COUNT = 3;

private static final int TAB_0 = 0;

private static final int TAB_1 = 1;

private static final int TAB_2 = 2;

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

/**
 * 初始化布局和监听
 */
private void initUI() {
    viewPager = (ViewPager) findViewById(R.id.vPager);
    cursorIv = (ImageView) findViewById(R.id.iv_tab_bottom_img);
    tab01 = (TextView) findViewById(R.id.tv01);
    tab02 = (TextView) findViewById(R.id.tv02);
    tab03 = (TextView) findViewById(R.id.tv03);

    tab01.setOnClickListener(this);
    tab02.setOnClickListener(this);
    tab03.setOnClickListener(this);

}

/**
 * 初始化底部下划线
 */
private void initImageView() {
    // 获取图片宽度
    lineWidth = BitmapFactory.decodeResource(getResources(), R.drawable.ic_orange_line).getWidth();
    // Android提供的DisplayMetrics可以很方便的获取屏幕分辨率
    DisplayMetrics dm = new DisplayMetrics();
    getWindowManager().getDefaultDisplay().getMetrics(dm);
    int screenW = dm.widthPixels; // 获取分辨率宽度
    offset = (screenW / TAB_COUNT - lineWidth) / 2;  // 计算偏移值
    Matrix matrix = new Matrix();
    matrix.postTranslate(offset, 0);
    // 设置下划线初始位置
    cursorIv.setImageMatrix(matrix);
}

/**
 * 初始化ViewPager并添加监听事件
 */
private void initVPager() {
    listViews = new ArrayList<>();
    LayoutInflater mInflater = getLayoutInflater();
    listViews.add(mInflater.inflate(R.layout.tab_01, null));
    listViews.add(mInflater.inflate(R.layout.tab_02, null));
    listViews.add(mInflater.inflate(R.layout.tab_03, null));
    viewPager.setAdapter(new MyPagerAdapter(listViews));
    viewPager.setCurrentItem(0);
    titles = new TextView[]{tab01, tab02, tab03};
    viewPager.setOffscreenPageLimit(titles.length);
    viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        int one = offset * 2 + lineWidth;

        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        }

        @Override
        public void onPageSelected(int position) {
            // 下划线开始移动前的位置
            float fromX = one * current_index;
            // 下划线移动完毕后的位置
            float toX = one * position;
            Animation animation = new TranslateAnimation(fromX, toX, 0, 0);
            animation.setFillAfter(true);
            animation.setDuration(500);
            // 给图片添加动画
            cursorIv.startAnimation(animation);
            // 当前Tab的字体变成红色
            titles[position].setTextColor(Color.RED);
            titles[current_index].setTextColor(Color.BLACK);
            current_index = position;
        }

        @Override
        public void onPageScrollStateChanged(int state) {
        }
    });
}

/**
 * ViewPager适配器
 */
public class MyPagerAdapter extends PagerAdapter {

    public List<View> mListViews;

    public MyPagerAdapter(List<View> mListViews) {
        this.mListViews = mListViews;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(mListViews.get(position));
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(mListViews.get(position), 0);
        return mListViews.get(position);
    }

    @Override
    public int getCount() {
        return mListViews.size();
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

}

@Override
public void onClick(View v) {
    switch (v.getId()) {
        case R.id.tv01:
            // 避免重复加载
            if (viewPager.getCurrentItem() != TAB_0) {
                viewPager.setCurrentItem(TAB_0);
            }
            break;
        case R.id.tv02:
            if (viewPager.getCurrentItem() != TAB_1) {
                viewPager.setCurrentItem(TAB_1);
            }
            break;
        case R.id.tv03:
            if (viewPager.getCurrentItem() != TAB_2) {
                viewPager.setCurrentItem(TAB_2);
            }
            break;
    }
}

}

如果嫌下划线走的太慢的话，可以设置animation.setDuration(100)，传入的毫秒数字越小动画执行的越快，越大则越慢

要注意animation.setFillAfter()一定要设置为true，防止下划线图片返回，Animation动画终止时让ImageView停留在最后一帧，不然下划线又会回到没有执行Animation之前的状态，如下图

其实这个效果也可使用Google提供的TabLayout来实现：《使用TabLayout制作下划线能滑动的Tab标签页》

Demo源码：传送门