Android-ViewPagerIndicator框架使用——TabPageIndicator

本文介绍如何在Android应用中使用TabPageIndicator组件创建Tab栏,并通过主题设置自定义Tab栏样式,包括背景色、分割线及文本显示等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

转载:http://www.cnblogs.com/qinghuaideren/p/3501999.html
前言:TabPageIndicator这个类和之前的不大一样,他不仅提供了展示的功能,而且可以点击,下面的viewpager可以跳转的有点tabhost的感觉。

    一:布局文件的定义,simple_tabs,其中的TabPageIndicator可以放在viewpager的上面或是下面都行,效果还行吧。

复制代码
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <com.viewpagerindicator.TabPageIndicator
        android:id="@+id/indicator"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />
</LinearLayout>
复制代码

    二:在代码中使用:

复制代码
   @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.simple_tabs);

        FragmentPagerAdapter adapter= new GoogleMusicAdapter(
                getSupportFragmentManager());

        ViewPager pager = (ViewPager) findViewById(R.id.pager);
        pager.setAdapter(adapter);

        TabPageIndicator indicator = (TabPageIndicator) findViewById(R.id.indicator);
        indicator.setViewPager(pager);
    }
复制代码

    其中的adapter需要注意,因为标识的标签文字需要在adapter中添加:

复制代码
     /**
       * 标题
       */
      private static final String[] CONTENT = new String[] { "Recent", "Artists",
            "Albums", "Songs", "Playlists", "Genres" };
            "Albums", "Songs", "Playlists", "Genres" };    
      /**
         * 继承PagerAdapter或PagerAdapter子类的时候需要实现这个方法,用于设置标题
         */
        @Override
        public CharSequence getPageTitle(int position) {
            return CONTENT[position % CONTENT.length].toUpperCase();
        }
复制代码

    若想让标签带一张图片,在定义adatper的时候,还需要实现IconPagerAdapter接口,并实现其中的getIconResId方法:

复制代码
     private static final int[] ICONS = new int[] {
            R.drawable.perm_group_calendar, R.drawable.perm_group_camera,
            R.drawable.perm_group_device_alarms,
            R.drawable.perm_group_location, };
     /**
         * 返回标签的图片
         */
        @Override
        public int getIconResId(int index) {
            return ICONS[index];
        }
复制代码

    三:修改样式,下面是比较重要的属性:

复制代码
        <!-- 点击时在不同状态下显示的背景色 -->
        <item name="android:background">@drawable/custom_tab_indicator</item>
        <!-- 分割线图片设置 -->
        <item name="android:divider">@drawable/custom_tab_indicator_divider</item>
        <!-- 设置分割线的显示位置,或是不显示 -->
        <item name="android:showDividers">none</item>
复制代码

    四:使用方法这个使用时候比较特别,貌似只能用主题来设置:

        1.设置主题,必须按照一下三步设置,其中的StyledIndicators这名字可以自定义:

复制代码
    <!-- 第一步设置主题 -->
    <style name="StyledIndicators" parent="@android:style/Theme.Light">
        <item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item>
    </style>
    <!-- 第二步设置主题 -->
    <style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator">

        <!-- 点击时在不同状态下显示的背景色 -->
        <item name="android:background">@drawable/custom_tab_indicator</item>
        <!-- 分割线图片设置 -->
        <item name="android:divider">@drawable/custom_tab_indicator_divider</item>
        <!-- 设置分割线的显示位置,或是不显示 -->
        <item name="android:showDividers">none</item>
        
        <item name="android:textAppearance">@style/CustomTabPageIndicator.Text</item>
        <item name="android:textColor">#FF555555</item>
        <item name="android:textSize">16sp</item>
        <item name="android:dividerPadding">10dp</item>
        <item name="android:paddingLeft">8dp</item>
        <item name="android:paddingRight">8dp</item>
        <item name="android:fadingEdgeLength">10dp</item>
        <item name="android:fadingEdge">horizontal</item>
    </style>
    <!-- 第三步设置主题 -->
    <style name="CustomTabPageIndicator.Text" parent="android:TextAppearance.Medium">
        <item name="android:typeface">monospace</item>
    </style>
复制代码

        2.使用主题:

复制代码
        <activity
            android:name=".SampleTabsStyled"
            android:label="Tabs/Styled"
            android:theme="@style/StyledIndicators" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="com.jakewharton.android.viewpagerindicator.sample.SAMPLE" />
            </intent-filter>
        </activity>
复制代码
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值