项目地址
github:https://github.com/JakeWharton/ViewPagerIndicator
官网:http://viewpagerindicator.com/
项目简介
一个指示器,作为导航来使用。
可配合viewpage来使用
效果图:
简单栗子(以android studio为例):
1、导入,下载源码,将library作为module导入项目中。
2、并忘了在项目中的Dependencies中导入哦。
3、代码部分
package com.sangbo.testproject;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.viewpagerindicator.TabPageIndicator;
import java.util.ArrayList;
import java.util.List;
public class ViewPagerIndicator extends AppCompatActivity {
private ViewPager mViewPager;
private TabPageIndicator mIndicator;
private List<View> mViews;
private PagerAdapter mPagerAdapter;
private LayoutInflater mInflater;
private static final String[] CONTENT = new String[] { "Recent", "Artists", "Albums", "Songs", "Playlists", "Genres" };
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_view_pager_indicator);
mViewPager = (ViewPager) findViewById(R.id.viewpager);
mIndicator = (TabPageIndicator) findViewById(R.id.indicator);
mViews = new ArrayList<>();
mInflater = LayoutInflater.from(ViewPagerIndicator.this);
View view1 = mInflater.inflate(R.layout.activity_view,null);
View view2 = mInflater.inflate(R.layout.activity_view,null);
View view3 = mInflater.inflate(R.layout.activity_view,null);
View view4 = mInflater.inflate(R.layout.activity_view,null);
View view5 = mInflater.inflate(R.layout.activity_view,null);
View view6 = mInflater.inflate(R.layout.activity_view,null);
mViews.add(view1);
mViews.add(view2);
mViews.add(view3);
mViews.add(view4);
mViews.add(view5);
mViews.add(view6);
mPagerAdapter = new PagerAdapter() {
@Override
public CharSequence getPageTitle(int position) {
return CONTENT[position % CONTENT.length].toUpperCase();
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(mViews.get(position));
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view = mViews.get(position);
container.addView(view);
return view;
}
@Override
public int getCount() {
return mViews.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
};
mViewPager.setAdapter(mPagerAdapter);
mIndicator.setViewPager(mViewPager);
}
}
基本的形状有,但是很不好看,我们得装饰一下。
2、xml部分
首先是:styles.xml
增加这些内容
<style name="Theme.PageIndicatorDefaults" parent="AppTheme">
<item name="vpiIconPageIndicatorStyle">@style/Widget.IconPageIndicator</item>
<item name="vpiTabPageIndicatorStyle">@style/Widget.TabPageIndicator</item>
</style>
<style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator">
<item name="android:background">#ffffff</item>
<item name="android:textAppearance">@style/CustomTabPageIndicator.Text</item>
<item name="android:textColor">#FF555555</item>
<item name="android:textSize">16sp</item>
<item name="android:divider">#ffffff</item>
<item name="android:dividerPadding">10dp</item>
<item name="android:showDividers">middle</item>
<item name="android:paddingLeft">8dp</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>
按照需要进行更改,比如字体颜色等等。
最后在AndroidMainfest中,将改activit的them设置为Widget.TabPageIndicator
如下:
<activity android:name=".ViewPagerIndicator"
android:theme="@style/Widget.TabPageIndicator" />
可能出现的问题:
1、java.lang.RuntimeException: Unable to start activity ComponentInfo{com.sdsoon.ui/com.sdsoon.ui.MainActivity}: java.lang.IllegalStateException: You need to use a Theme.AppCompat theme (or descendant) with this activity.
解决方案:
Theme.PageIndicatorDefaults要继承AppTheme