您的位置：首页 > 移动开发 > Android开发

Android 中 viewpager 滑动指示器的实例代码

2017-12-08 09:19 821 查看

先看下效果图：

这个需要用到1个开源的库，这个后面也会说下的。

工程目录：

1. MainActivity.java

public class MainActivity extends FragmentActivity {
private ViewPagerFrameAdapter adapter;  //适配器（标题和内容）
private ViewPager mPager;
private TabPageIndicator   tabbPageIndicator;   //
private UnderlinePageIndicatorEx underlinePageIndicator;
private int COUNT = 0;
private List<String> titles = new ArrayList<String>(); //标题
@Override
protected void onCreate(Bundle bundle) {
super.onCreate(bundle);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
//标题，这里自己造的假数据
for (int j = 0; j < 3 ; j++){
titles.add( "第"+ j +"标签卡");
}
mPager = (ViewPager)findViewById(R.id.pager);
adapter = new ViewPagerFrameAdapter(getSupportFragmentManager(),titles);
mPager.setAdapter(adapter);
//得到指示器
tabbPageIndicator = (TabPageIndicator) findViewById(R.id.tab_indicator);
tabbPageIndicator.setViewPager(mPager);
//下标
underlinePageIndicator = (UnderlinePageIndicatorEx)findViewById(R.id.underline_indicator);
underlinePageIndicator.setViewPager(mPager);
underlinePageIndicator.setFades(false);
//设置指示器
tabbPageIndicator.setOnPageChangeListener(underlinePageIndicator);
}
//adapter 没啥好说的 跟前面的一样
private class ViewPagerFrameAdapter extends FragmentStatePagerAdapter{
private List<String> title; //页面标题头部数据
public ViewPagerFrameAdapter(FragmentManager fm, List<String> title) {
super(fm);
this.title = title;
}
//根据position 返回 fragment
@Override
public Fragment getItem(int position) {
return ArrayFragment.newInstance(position);
}
//size
@Override
public int getCount() {
return title.size();
}
//顶部的title
@Override
public CharSequence getPageTitle(int position) {
if (titles != null){
return titles.get(position).toString();
}
return super.getPageTitle(position);
}
}
}

UnderlinePageIndicatorEx.java

//继承这个然后重写
public class UnderlinePageIndicatorEx extends UnderlinePageIndicator{
public UnderlinePageIndicatorEx(Context context) {
super(context, null);
}
public UnderlinePageIndicatorEx(Context context, AttributeSet attrs) {
super(context, attrs, R.attr.vpiUnderlinePageIndicatorStyle);
}
public UnderlinePageIndicatorEx(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
//自身的 ViewPage传递过去
@Override
public void setViewPager(ViewPager viewPager) {
if (mViewPager == viewPager){
return;
}
//   if (mViewPager != null) {
//    mViewPager.setOnPageChangeListener(null);
//   }
if (viewPager.getAdapter() == null) {
throw new IllegalStateException(" pager 没有 加入 adapter");
}
mViewPager = viewPager;
//   mViewPager.setOnPageChangeListener(this);
invalidate();
post(new Runnable(){
@Override public void run() {
if (mFades) {
post(mFadeRunnable);
}
}
});
}
}

ArrayFragment.java

public class ArrayFragment extends Fragment{
private int position;
public ArrayFragment(int position){
this.position = position;
}
// 返回 viwePager 下面滑动的页面
public static ArrayFragment newInstance(int position){
return new ArrayFragment(position);
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
@Override
public void onDestroy() {
super.onDestroy();
}
// 根据position 返回不同的view
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.layoutaa, null);
return view;
}
}

好了接下来是布局xml了。

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>
<!-- 标题  和  标题下面的 指示器 -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="35dp"
android:orientation="vertical"
android:background="@drawable/main_header_background">
<com.viewpagerindicator.TabPageIndicator
android:id="@+id/tab_indicator"
android:layout_height="wrap_content"
android:layout_width="fill_parent"/>
<com.test.linepagerindictor.widget.UnderlinePageIndicatorEx
android:id="@+id/underline_indicator"
android:layout_height="3dip"
android:layout_width="fill_parent"
android:layout_alignParentBottom="true"/>
</LinearLayout>
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</LinearLayout>

接下来设置滑动指示器的style

<!-- 总 style 直接引用 这个 由 tab style 和 Indicator style 组成 -->
<style name="StyledAllIndicators" parent="@android:style/Theme.Light">
<item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item>
<item name="vpiUnderlinePageIndicatorStyle">@style/CustomUnderlinePageIndicator</item>
</style>
<!-- tab的 style -->
<style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator">
<item name="android:background">#00000000</item>
<item name="android:textAppearance">@style/CustomTabPageIndicator_text</item>
<item name="android:textColor">@color/selector_tab</item>
<item name="android:textSize">20sp</item>
<!-- 分割线，可有可无的 -->
<item name="android:divider">@drawable/custom_tab_indicator_divider</item>
<item name="android:dividerPadding">10dip</item>
<item name="android:showDividers">middle</item>
<item name="android:paddingTop">4dp</item>
<item name="android:paddingLeft">8dp</item>
<item name="android:paddingBottom">4dp</item>
<item name="android:paddingRight">8dp</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>
</style>
<!-- 下标的指示器的颜色 -->
<style name="CustomUnderlinePageIndicator">
<item name="selectedColor">#EB5548</item>
<item name="android:background">#00000000</item>
<item name="fadeLength">1000</item>
<item name="fadeDelay">1000</item>
</style>

selector_tab.xml 这个是选择器在style中引用的，是用来切换被选中的背景色的

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

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： android viewpager 指示器

相关文章推荐

新的分享

章节导航