Android 导航条效果实现（四） ViewPager+自定义导航条

最新推荐文章于 2025-08-11 14:48:19 发布

原创

最新推荐文章于 2025-08-11 14:48:19 发布 · 6.1k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#android #viewpager #导航 #tab

本文介绍了如何在Android中使用ViewPager结合自定义导航条实现动态选项卡和指示器的效果。通过自定义TabsView，可以避免在布局文件中为每个选项卡编写单独的布局，简化了代码，提高了开发效率。

ViewPager+自定义导航条实现导航效果

效果说明：

自定义导航条；
导航条固定位置，选项卡按比例显示；
选项卡下方有一个指示器，指示当前页面的位置。

参考代码
自定义的选项卡布局：
TabsView.java

package com.noonecode.viewpagertabsdemo;

import android.animation.ObjectAnimator;
import android.content.Context;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;

/**
 * 一个简单的Tabs选项卡视图
 * 
 * @author noonecode
 *
 */
public class TabsView extends LinearLayout {
   
   

    private int mSelectedColor = 0xffff0000;// 选中的字体颜色
    private int mNotSelectedColor = ((mSelectedColor >>> 25) << 24) | (mSelectedColor & 0x00ffffff);// 未选中的字体颜色

    private int mIndicatorColor = 0xff0000ff;// 指示器的颜色

    private LinearLayout mTabsContainer;// 放置tab的容器
    private View mIndicator, mBottomLine;// 指示器和底部横线

    private OnTabsItemClickListener listener;

    public TabsView(Context context) {
        this(context, null);
    }

    public TabsView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public TabsView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        setOrientation(VERTICAL);
        // 初始化容器
        mTabsContainer = new LinearLayout(getContext());
        mTabsContainer.setOrientation(HORIZONTAL);
        mTabsContainer.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));
        addView(mTabsContainer);
        // 初始化指示器
        mIndicator = new View(getContext());
        mIndicator.setBackgroundColor(mIndicatorColor);
        mIndicator.setLayoutParams(new LayoutParams(300, 8));

最低0.47元/天解锁文章