ViewPagerIndicator的指示器应用

来源：互联网发布：linux 禅道下载地址编辑：程序博客网时间：2024/06/16 13:10

我们先得去Github上面下载这个库，下载地址：https://github.com/JakeWharton/Android-ViewPagerIndicator，
下载完成后，讲Library导入自己的工程,我是导入的studio里面的
//看布局文件怎么用：
1. <LinearLayout
2. xmlns:android="http://schemas.android.com/apk/res/android"
3. android:orientation="vertical"
4. android:layout_width="fill_parent"
5. android:layout_height="fill_parent">
7. <com.viewpagerindicator.TabPageIndicator
8. android:id="@+id/indicator"
9. android:background="@drawable/base_action_bar_bg"
10. android:layout_height="wrap_content"
11. android:layout_width="fill_parent"
12. />
13. <android.support.v4.view.ViewPager
14. android:id="@+id/pager"
15. android:layout_width="fill_parent"
16. android:layout_height="0dp"
17. android:layout_weight="1"
18. />
20. </LinearLayout>
//代码里面的用法
MainActivity的代码
1. import android.os.Bundle;
2. import android.support.v4.app.Fragment;
3. import android.support.v4.app.FragmentActivity;
4. import android.support.v4.app.FragmentManager;
5. import android.support.v4.app.FragmentPagerAdapter;
6. import android.support.v4.view.ViewPager;
7. import android.support.v4.view.ViewPager.OnPageChangeListener;
8. import android.widget.Toast;
10. import com.viewpagerindicator.TabPageIndicator;
12. public class MainActivity extends FragmentActivity {
13. /**
14. * Tab标题
15. */
16. private static final String[] TITLE = new String[] { "头条", "房产", "另一面", "女人",
17. "财经", "数码", "情感", "科技" };
19. @Override
20. protected void onCreate(Bundle savedInstanceState) {
21. super.onCreate(savedInstanceState);
22. setContentView(R.layout.activity_main);
24. //ViewPager的adapter
25. FragmentPagerAdapter adapter = new TabPageIndicatorAdapter(getSupportFragmentManager());
26. ViewPager pager = (ViewPager)findViewById(R.id.pager);
27. pager.setAdapter(adapter);
29. //实例化TabPageIndicator然后设置ViewPager与之关联
30. TabPageIndicator indicator = (TabPageIndicator)findViewById(R.id.indicator);
31. indicator.setViewPager(pager);
33. //如果我们要对ViewPager设置监听，用indicator设置就行了
34. indicator.setOnPageChangeListener(new OnPageChangeListener() {
36. @Override
37. public void onPageSelected(int arg0) {
38. Toast.makeText(getApplicationContext(), TITLE[arg0], Toast.LENGTH_SHORT).show();
39. }
41. @Override
42. public void onPageScrolled(int arg0, float arg1, int arg2) {
44. }
46. @Override
47. public void onPageScrollStateChanged(int arg0) {
49. }
50. });
52. }
55. /**
56. * ViewPager适配器
57. * @author len
58. *
59. */
60. class TabPageIndicatorAdapter extends FragmentPagerAdapter {
61. public TabPageIndicatorAdapter(FragmentManager fm) {
62. super(fm);
63. }
65. @Override
66. public Fragment getItem(int position) {
67. //新建一个Fragment来展示ViewPager item的内容，并传递参数
68. Fragment fragment = new ItemFragment();
69. Bundle args = new Bundle();
70. args.putString("arg", TITLE[position]);
71. fragment.setArguments(args);
73. return fragment;
74. }
76. @Override
77. public CharSequence getPageTitle(int position) {
78. return TITLE[position % TITLE.length];
79. }
81. @Override
82. public int getCount() {
83. return TITLE.length;
84. }
85. }
87. }
用法其实很简单，直接复制就行了
每个viewpager里面是一个fragment，这里面就用了一个fragment实现效果，每个fragment里面就一个文本框
1. import android.os.Bundle;
2. import android.support.v4.app.Fragment;
3. import android.view.LayoutInflater;
4. import android.view.View;
5. import android.view.ViewGroup;
6. import android.widget.TextView;
9. public class ItemFragment extends Fragment {
11. @Override
12. public View onCreateView(LayoutInflater inflater, ViewGroup container,
13. Bundle savedInstanceState) {
15. View contextView = inflater.inflate(R.layout.fragment_item, container, false);
16. TextView mTextView = (TextView) contextView.findViewById(R.id.textview);
18. //获取Activity传递过来的参数
19. Bundle mBundle = getArguments();
20. String title = mBundle.getString("arg");
22. mTextView.setText(title);
24. return contextView;
25. }
27. @Override
28. public void onActivityCreated(Bundle savedInstanceState) {
29. super.onActivityCreated(savedInstanceState);
30. }
32. }
代码都完了，关键部分就是，样式这里了，样式配不对，程序就不对
把下边的代码，复制到自己的style.xml文件里
1. <style name="StyledIndicators" parent="@android:style/Theme.Light">
2. <item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item>
3. </style>
5. <style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator">
6. <item name="android:background">@drawable/tab_indicator</item>
7. <item name="android:textAppearance">@style/CustomTabPageIndicator.Text</item>
8. <item name="android:textSize">14sp</item>
9. <item name="android:dividerPadding">8dp</item>
10. <item name="android:showDividers">middle</item>
11. <item name="android:paddingLeft">10dp</item>
12. <item name="android:paddingRight">10dp</item>
13. <item name="android:fadingEdge">horizontal</item>
14. <item name="android:fadingEdgeLength">8dp</item>
15. </style>
17. <style name="CustomTabPageIndicator.Text" parent="android:TextAppearance.Medium">
18. <item name="android:typeface">monospace</item>
19. <item name="android:textColor">@drawable/selector_tabtext</item>
20. </style>
把parent的引用改成自己程序的主题。然后再清单文件里引用一下

<activity    android:name=".SortComenActivity"    android:theme="@style/StyledIndicators" />

引用的名字就是上边style的名字
这样程序就完成了。。。

0 0