Android-ViewPagerIndicator框架使用——LinePageIndicator

前言:LinePageIndicator类似CirclePageIndicator,只是将圆点指示变成了长条指示。

    一:使用是定义的布局文件simple_lines  :

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

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

    <com.viewpagerindicator.LinePageIndicator
        android:id="@+id/indicator"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:padding="5dip" />
</LinearLayout>

    二:代码中使用:

        setContentView(R.layout.simple_lines);

        mAdapter = new TestFragmentAdapter(getSupportFragmentManager());

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

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

    三:修改属该改变样式,下边可以修改的属性值:

<declare-styleable name="LinePageIndicator">

        <!-- 是否居中显示 -->
        <attr name="centered" />
        <!-- 没有被选择标识的颜色 -->
        <attr name="unselectedColor" />
        <!-- 被选择标识的颜色 -->
        <attr name="selectedColor" />
        <!-- 标识的宽度大小 -->
        <attr name="lineWidth" format="dimension" />
        <!-- 标识的高度 -->
        <attr name="strokeWidth" />
        <!-- 标识间隔大小 -->
        <attr name="gapWidth" format="dimension" />
        <!-- 整体的背景色 -->
        <attr name="android:background" />
    </declare-styleable>

      1.代码修改样式:

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.simple_lines);

        mAdapter = new TestFragmentAdapter(getSupportFragmentManager());

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

        LinePageIndicator indicator = (LinePageIndicator) findViewById(R.id.indicator);
        mIndicator = indicator;
        indicator.setViewPager(mPager);
        // 获得屏幕的密度
        final float density = getResources().getDisplayMetrics().density;
        indicator.setSelectedColor(0x88FF0000);
        indicator.setUnselectedColor(0xFF888888);
        indicator.setStrokeWidth(4 * density);
        indicator.setLineWidth(30 * density);
    }

      2.布局中修改:

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

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

    <com.viewpagerindicator.LinePageIndicator
        android:id="@+id/indicator"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:padding="5dip"
        app:lineWidth="30dp"
        app:selectedColor="#FF880000"
        app:strokeWidth="4dp"
        app:unselectedColor="#FF888888" />
</LinearLayout>

      3.主题方式修改:

        <activity
            android:name=".SampleLinesStyledTheme"
            android:label="Lines/Styled (via theme)"
            android:theme="@style/CustomLinePageIndicator" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="com.jakewharton.android.viewpagerindicator.sample.SAMPLE" />
            </intent-filter>
        </activity>

      主题:

    <style name="CustomLinePageIndicator" parent="@android:style/Theme.Light">
        <item name="strokeWidth">4dp</item>
        <item name="lineWidth">30dp</item>
        <item name="unselectedColor">#FF888888</item>
        <item name="selectedColor">#FF880000</item>
    </style>

源码以及Demo下载地址:http://download.csdn.net/detail/as294985925/6796117

posted @ 2014-01-02 10:45  有情怀的人  阅读(4883)  评论(0编辑  收藏  举报