2013.12.05（6）——— android ViewPagerIndicator之SampleTitlesDefault

2013.12.05（6）——— android ViewPagerIndicator之SampleTitlesDefault

package com.viewpagerindicator.sample;

import android.os.Bundle;
import android.support.v4.view.ViewPager;

import com.viewpagerindicator.TitlePageIndicator;

public class SampleTitlesDefault extends BaseSampleActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.simple_titles);

        mAdapter = new TestFragmentAdapter(getSupportFragmentManager());

        mPager = (ViewPager)findViewById(R.id.pager);
        mPager.setAdapter(mAdapter);

        mIndicator = (TitlePageIndicator)findViewById(R.id.indicator);
        mIndicator.setViewPager(mPager);
    }
}

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

    <com.viewpagerindicator.TitlePageIndicator
        android:id="@+id/indicator"
        android:padding="10dip"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        />
    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        />

</LinearLayout>

1、layout里面用的是

com.viewpagerindicator.TitlePageIndicator

2、title显示的名字会调用adapter的

getPageTitle

3、修改样式

xml

app:footerColor="#FFAA2222"
        app:footerLineHeight="1dp"
        app:footerIndicatorHeight="3dp"
        app:footerIndicatorStyle="underline"
        app:selectedColor="#FF000000"
        app:selectedBold="true"

java

final float density = getResources().getDisplayMetrics().density;
        indicator.setBackgroundColor(0x18FF0000);
        indicator.setFooterColor(0xFFAA2222);
        indicator.setFooterLineHeight(1 * density); //1dp
        indicator.setFooterIndicatorHeight(3 * density); //3dp
        indicator.setFooterIndicatorStyle(IndicatorStyle.Underline);
        indicator.setTextColor(0xAA000000);
        indicator.setSelectedColor(0xFF000000);
        indicator.setSelectedBold(true); 

BackgroundColor：tab的背景颜色
FooterColor：tab最下面线的颜色
FooterLineHeight：线的宽度
FooterIndicatorHeight：处于选中状态时，线的宽度
FooterIndicatorStyle：有三种样式 None(0) 无， Triangle(1)三角形, Underline(2) 下划线
TextColor：tab上文字的颜色
SelectedColor：处于选中状态时，文字的颜色
SelectedBold：选中时，文字是否加粗

[img]http://dl2.iteye.com/upload/attachment/0091/8679/9dfcc09e-e9f1-36c9-a15b-c0489e3eee6f.png[/img]

三角形的样式如下：


[img]http://dl2.iteye.com/upload/attachment/0091/8689/c0ac819b-5d6c-3f57-87f3-4095612fc1ee.png[/img]


4、可以监听点击了正在显示的title 实现OnCenterItemClickListener

 @Override
    public void onCenterItemClick(int position) {
        Toast.makeText(this, "You clicked the center title!", Toast.LENGTH_SHORT).show();
    }

5、监听活动和SampleCircles是一样的

//We set this on the indicator, NOT the pager
        mIndicator.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageSelected(int position) {
                Toast.makeText(SampleTitlesWithListener.this, "Changed to page " + position, Toast.LENGTH_SHORT).show();
            }

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

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