Actionbarsherlock与Viewpagerindicator详解

此篇博客主要详细介绍时下比较流行的两个android开源组件的使用，AnctionBarsherlock与viewpagerindicator，具体使用将以demo形式呈现，先上效果图，看是否是你需要的。

 

一步：下载资源，github 是好东东。

       这是两个开源组件的Github地址，具体你想用Git同步还是svn，自选

       https://github.com/JakeWharton/ActionBarSherlock

       https://github.com/JakeWharton/Android-ViewPagerIndicator

二步：开始工程的配置和组件的使用。在工程右击--properties --android 添加Library

 

       添加viewpagerindicator组件的布局文件simple_tabs.xml

<?xml version="1.0" encoding="utf-8"?>
<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.TabPageIndicator
        android:id="@+id/indicator"
        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>

 添加Fragments的布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">



    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical|center_horizontal"
        android:text="Large Text"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</LinearLayout>

 创建 TabDemoActivity继承sherlockFragmentActivity

package com.example.blogsit;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;

import com.actionbarsherlock.app.SherlockFragmentActivity;
import com.viewpagerindicator.PageIndicator;
import com.viewpagerindicator.TabPageIndicator;
/**
 * 微博 : @陈华blogsit
 * @author blogsit.cn
 *
 */
public class TabDemoActivity extends SherlockFragmentActivity {

    private static final String[] CONTENT = new String[] { "分组一", "分组二", "分组三", "分组四", "分组五" };

    TabFragmentAdapter mAdapter;
    ViewPager mPager;
    PageIndicator mIndicator;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.simple_tabs);

        mAdapter = new TabFragmentAdapter(getSupportFragmentManager());

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

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

    class TabFragmentAdapter extends FragmentPagerAdapter {
        private int mCount = CONTENT.length;

        public TabFragmentAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return TabFragment.newInstance(String.valueOf(position));
        }

        @Override
        public int getCount() {
            return mCount;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return CONTENT[position];
        }
    }

}

 添加Fragment子类TabFragment

package com.example.blogsit;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;

import com.actionbarsherlock.app.SherlockFragmentActivity;
import com.viewpagerindicator.PageIndicator;
import com.viewpagerindicator.TabPageIndicator;
/**
 * 微博 : @陈华blogsit
 * @author blogsit.cn
 *
 */
public class TabDemoActivity extends SherlockFragmentActivity {

    private static final String[] CONTENT = new String[] { "分组一", "分组二", "分组三", "分组四", "分组五" };

    TabFragmentAdapter mAdapter;
    ViewPager mPager;
    PageIndicator mIndicator;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.simple_tabs);

        mAdapter = new TabFragmentAdapter(getSupportFragmentManager());

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

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

    class TabFragmentAdapter extends FragmentPagerAdapter {
        private int mCount = CONTENT.length;

        public TabFragmentAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return TabFragment.newInstance(String.valueOf(position));
        }

        @Override
        public int getCount() {
            return mCount;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return CONTENT[position];
        }
    }

}

 使用Fragment方便管理tab页，viewpagerindicator使用场景非常常见，在很多应用的重新安装的开始引导页中也可以用到。具体实例在Viewpageridicator的Github的samplelist中有详细介绍。请关注 @陈华blogist  微博，有 使用问题微博交流，其实下面有详细的代码，上图是实际运行效果。并在产品中已经使用。

 

• tab_blogsit_demo.zip (2.7 MB)
• 下载次数: 269