Android Studio 导入ViewpagerIndicator

1:选择插件

搜索：com.inkapplications.viewpageindicator:library:2.4.3     点Ok下载完成


2：使用配置

activity的xml布局：

<?xml version="1.0" encoding="utf-8"?><LinearLayout 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"    android:orientation="vertical"    >    <include        layout="@layout/top_bar"        />    <com.viewpagerindicator.TabPageIndicator        android:id="@+id/indicators"        android:layout_height="wrap_content"        android:layout_width="fill_parent"        android:background="@color/white"        />    <android.support.v4.view.ViewPager        android:id="@+id/pagers"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1"        ></android.support.v4.view.ViewPager></LinearLayout>

两个选择器：
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>

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> 

styles.xml 添加style样式

<!-- Base application theme. --><style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">    <!-- Customize your theme here. -->    <item name="colorPrimary">@color/colorPrimary</item>    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>    <item name="colorAccent">@color/colorAccent</item>    <item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item>  //在样式中调用viewpagerindicator的样式</style>

<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">8dp</item>     <item name="android:showDividers">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>

在AndroidManifest.xml中使用自定义样式

3：使用流程

在actvity中初始化控件

public class ResultActivity extends FragmentActivity{    private TextView tv_des;    private Button btn_back;    /**     * Tab标题     */    private static final String[] TITLE = new String[] { "等额本息", "等额本金"};      BenxiFragment f1;    BenjinFragment f2;    ArrayList<Fragment> listFragmentsa;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_results);        initview();         }    private void initview() {        listFragmentsa = new ArrayList<Fragment>();        f1=new BenxiFragment();        f2=new BenjinFragment();        listFragmentsa.add(f1);        listFragmentsa.add(f2);        //ViewPager的adapter        FragmentPagerAdapter adapter = new TabPageIndicatorAdapter(getSupportFragmentManager(),listFragmentsa);        ViewPager pager = (ViewPager)findViewById(R.id.pagers);        pager.setAdapter(adapter);        //实例化TabPageIndicator然后设置ViewPager与之关联        TabPageIndicator indicator = (TabPageIndicator)findViewById(R.id.indicators);        indicator.setViewPager(pager);        pager.setCurrentItem(0);    }    /**     * ViewPager适配器     * @author len     *     */    class TabPageIndicatorAdapter extends FragmentPagerAdapter {        private ArrayList<Fragment> listFragments;        public TabPageIndicatorAdapter(FragmentManager fm, ArrayList<Fragment> al) {            super(fm);            listFragments=al;        }        public TabPageIndicatorAdapter(FragmentManager fm) {            super(fm);        }        @Override        public Fragment getItem(int position) {            return listFragments.get(position);        }        @Override        public CharSequence getPageTitle(int position) {            return TITLE[position % TITLE.length];        }        @Override        public int getCount() {            return listFragments.size();        }    }}

2个Fragment

public class BenxiFragment extends Fragment {    private Context context;    View view;    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {           context=this.getActivity();            view=inflater.inflate(R.layout.fragment_benxi,container,false);         return view;    }  }

public class BenjinFragment extends Fragment {    private Context context;    View view;   @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        context=this.getActivity();        view=inflater.inflate(R.layout.fragment_benjin,container,false);              return view;    }}

4.结束 end