- 我们先得去Github上面下载这个库,下载地址:https://github.com/JakeWharton/Android-ViewPagerIndicator,
- 下载完成后,讲Library导入自己的工程,我是导入的studio里面的
- //看布局文件怎么用:
-
- <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:background="@drawable/base_action_bar_bg"
- 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>
- //代码里面的用法
- MainActivity的代码
-
- import android.os.Bundle;
- import android.support.v4.app.Fragment;
- import android.support.v4.app.FragmentActivity;
- import android.support.v4.app.FragmentManager;
- import android.support.v4.app.FragmentPagerAdapter;
- import android.support.v4.view.ViewPager;
- import android.support.v4.view.ViewPager.OnPageChangeListener;
- import android.widget.Toast;
- import com.viewpagerindicator.TabPageIndicator;
- public class MainActivity extends FragmentActivity {
- /**
- * Tab标题
- */
- private static final String[] TITLE = new String[] { "头条", "房产", "另一面", "女人",
- "财经", "数码", "情感", "科技" };
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_main);
- //ViewPager的adapter
- FragmentPagerAdapter adapter = new TabPageIndicatorAdapter(getSupportFragmentManager());
- ViewPager pager = (ViewPager)findViewById(R.id.pager);
- pager.setAdapter(adapter);
- //实例化TabPageIndicator然后设置ViewPager与之关联
- TabPageIndicator indicator = (TabPageIndicator)findViewById(R.id.indicator);
- indicator.setViewPager(pager);
- //如果我们要对ViewPager设置监听,用indicator设置就行了
- indicator.setOnPageChangeListener(new OnPageChangeListener() {
- @Override
- public void onPageSelected(int arg0) {
- Toast.makeText(getApplicationContext(), TITLE[arg0], Toast.LENGTH_SHORT).show();
- }
- @Override
- public void onPageScrolled(int arg0, float arg1, int arg2) {
- }
- @Override
- public void onPageScrollStateChanged(int arg0) {
- }
- });
- }
- /**
- * ViewPager适配器
- * @author len
- *
- */
- class TabPageIndicatorAdapter extends FragmentPagerAdapter {
- public TabPageIndicatorAdapter(FragmentManager fm) {
- super(fm);
- }
- @Override
- public Fragment getItem(int position) {
- //新建一个Fragment来展示ViewPager item的内容,并传递参数
- Fragment fragment = new ItemFragment();
- Bundle args = new Bundle();
- args.putString("arg", TITLE[position]);
- fragment.setArguments(args);
- return fragment;
- }
- @Override
- public CharSequence getPageTitle(int position) {
- return TITLE[position % TITLE.length];
- }
- @Override
- public int getCount() {
- return TITLE.length;
- }
- }
- }
- 用法其实很简单,直接复制就行了
- 每个viewpager里面是一个fragment,这里面就用了一个fragment实现效果,每个fragment里面就一个文本框
-
- import android.os.Bundle;
- import android.support.v4.app.Fragment;
- import android.view.LayoutInflater;
- import android.view.View;
- import android.view.ViewGroup;
- import android.widget.TextView;
- public class ItemFragment extends Fragment {
- @Override
- public View onCreateView(LayoutInflater inflater, ViewGroup container,
- Bundle savedInstanceState) {
- View contextView = inflater.inflate(R.layout.fragment_item, container, false);
- TextView mTextView = (TextView) contextView.findViewById(R.id.textview);
- //获取Activity传递过来的参数
- Bundle mBundle = getArguments();
- String title = mBundle.getString("arg");
- mTextView.setText(title);
- return contextView;
- }
- @Override
- public void onActivityCreated(Bundle savedInstanceState) {
- super.onActivityCreated(savedInstanceState);
- }
- }
- 代码都完了,关键部分就是,样式这里了 ,样式配不对,程序就不对
- 把下边的代码,复制到自己的style.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">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>
- 把parent的引用改成自己程序的主题。然后再清单文件里引用一下
-
<activity android:name=".SortComenActivity" android:theme="@style/StyledIndicators" />
- 引用的名字就是上边style的名字
- 这样程序就完成了。。。