Viewpagerindicator 头部带滑动

首先导入对应的 library

MainActivity 代码

public class MainActivity extends FragmentActivity {    private TabPageIndicator viewPagerIndicator;    private ViewPager viewpager;    /**     * Tab标题     */    private static final String[] TITLE = new String[] { "头条", "房产", "另一面",            "女人", "财经", "数码", "情感", "科技" };    private List<Fragment> list;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        requestWindowFeature(Window.FEATURE_NO_TITLE);        setContentView(R.layout.activity_main);        viewPagerIndicator = (TabPageIndicator)findViewById(R.id.viewPagerIndicator);        viewpager=(ViewPager)findViewById(R.id.viewPager);        //添加fragment        addFragment();        viewpager.setAdapter(new MyFragmentAdapter(getSupportFragmentManager(), list, TITLE));        viewPagerIndicator.setViewPager(viewpager);    }    private void addFragment() {        list = new ArrayList<Fragment>();        for (int i = 0; i < TITLE.length; i++) {            MyFragment fragment=new MyFragment();            Bundle bundle=new Bundle();            bundle.putString("path", TITLE[i]+"");            fragment.setArguments(bundle);            list.add(fragment);        }    }}

MyFragment 代码

public class MyFragment extends Fragment {    private View v;    @Override    public View onCreateView(LayoutInflater inflater,            @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        v = inflater.inflate(R.layout.fragment_item, container, false);        return v;    }    @Override    public void onActivityCreated(@Nullable Bundle savedInstanceState) {        // TODO Auto-generated method stub        TextView textView = (TextView) v.findViewById(R.id.textView1);        Bundle bundle = getArguments();        String str = bundle.getString("path");        textView.setText(str);        super.onActivityCreated(savedInstanceState);    }}

MyFragmentAdapter 适配器

public class MyFragmentAdapter extends FragmentPagerAdapter{    List<Fragment> list;    String[] title;    public MyFragmentAdapter(FragmentManager fm, List<Fragment> list,            String[] title) {        super(fm);        this.list = list;        this.title = title;    }    @Override    public Fragment getItem(int arg0) {        // TODO Auto-generated method stub        return list.get(arg0);    }    @Override    public int getCount() {        // TODO Auto-generated method stub        return list.size();    }    @Override    public CharSequence getPageTitle(int position) {        // TODO Auto-generated method stub        return title[position];    }}

activity_main.xml 的布局文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="${relativePackage}.${activityClass}" >    <com.viewpagerindicator.TabPageIndicator        android:id="@+id/viewPagerIndicator"        android:layout_width="match_parent"        android:layout_height="wrap_content" >    </com.viewpagerindicator.TabPageIndicator>    <android.support.v4.view.ViewPager        android:id="@+id/viewPager"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_below="@id/viewPagerIndicator" >    </android.support.v4.view.ViewPager></RelativeLayout>

fragment_item.xml 布局

<?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/textView1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="TextView" /></LinearLayout>

styles.xml 样式

 <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/tab_indicator</item>        <item name="android:textAppearance">@style/CustomTabPageIndicator.Text</item>        <item name="android:textSize">14sp</item>        <item name="android:dividerPadding" tools:targetApi="11">8dp</item>        <item name="android:showDividers" tools:targetApi="11">middle</item>        <item name="android:paddingLeft">10dp</item>        <item name="android:paddingRight">10dp</item>        <item name="android:fadingEdge">horizontal</item>        <item name="android:fadingEdgeLength">8dp</item>    </style>    <style name="CustomTabPageIndicator.Text" parent="android:TextAppearance.Medium">        <item name="android:typeface">monospace</item>        <item name="android:textColor">@drawable/selector_tabtext</item>    </style>

drawable 选择字体变色 selector_tabtext.xml

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_selected="true" android:color="#EE2C2C" />    <item android:state_pressed="true" android:color="#EE2C2C" />    <item android:state_focused="true" android:color="#EE2C2C" />    <item android:color="@android:color/black"/></selector> 

drawable 选择字体变色 tab_indicator.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_selected="false" android:state_pressed="false" android:drawable="@android:color/transparent" />    <item android:state_selected="false" android:state_pressed="true" android:drawable="@android:color/transparent" />         <item android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/base_tabpager_indicator_selected" />    <item android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/base_tabpager_indicator_selected" /></selector>变色所需图片(http://img.blog.csdn.net/20161024165452514)

最后 切记AndroidManifest.xml 中添加的样式

 android:theme="@style/StyledIndicators"