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

最新推荐文章于 2024-07-28 23:44:14 发布

chriszht_163

最新推荐文章于 2024-07-28 23:44:14 发布

阅读量6k

点赞数 6

分类专栏： Android 文章标签： android viewpager 导航 tab

本文链接：https://blog.csdn.net/qq_33425116/article/details/52584282

版权

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

摘要由CSDN通过智能技术生成

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));// 先任意设置宽度
        addView(mIndicato