效果:ViewPager跟随Tab动,底端绘制三角形
布局文件中:
<com.bw.view.ViewPagerIndicator
android:layout_width="match_parent"android:layout_height="45dp"
android:orientation="horizontal"
android:id="@+id/viewpager_indicator"
hyman:visible_tab_coount="4"
android:background="@android:color/holo_green_light">
</com.bw.view.ViewPagerIndicator>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/vp"></android.support.v4.view.ViewPager>
自定义一个类 ,继承LinearLayout
public class ViewPagerIndicator extends LinearLayout{
//画笔
private Paint mPaint;
//构造三角形
private Path mPath;
//三角形的宽,高,
private int mTriangleWidth;
//三角形的底边的长度,相对于的每一个TextVIew的底边的宽度。我们可以定义为1/6
private static final float RADIO_TRIANGLE_WIDTH = 1/6f;
//三角形底边的最大值
private final int DIMENSION_TRIANGLE_WIDTH_MAX = (int) (getScreenWidth()/3*RADIO_TRIANGLE_WIDTH);
//初始化的偏移量
private int mInitTranslationX;
//移动时的偏移量
private int mTranslationX;
//设置可见的TextView的数量
private int mTabVisibleCount;
private static final int COUNT_DEFAULT_TAB = 4;
//设置颜色的常量
private static final int COLOR_TEXT_MORMAL = 0x77FFFFFF;
private static final int COLOR_TEXT_HIGHLIGHT = 0xFF0000;
//存放title
private List<String> mTites;
private ViewPager mViewPager;
public PageOnchangeListener mListener;
public ViewPagerIndicator(Context context) {
this(context, null);
}
public ViewPagerIndicator(Context context, AttributeSet attrs) {
super(context, attrs);
//获取可见tab的数量
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ViewPagerIndicator);
mTabVisibleCount = a.getInt(R.styleable.ViewPagerIndicator_visible_tab_coount, COUNT_DEFAULT_TAB);
//如果用户传入的值<0,就设置为默认值
if(mTabVisibleCount < 0){
mTabVisibleCount = COUNT_DEFAULT_TAB;
}
//释放
a.recycle();
//初始化画笔
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setColor(Color.parseColor("#FFFFFF"));
mPaint.setStyle(Style.FILL);
mPaint.setPathEffect(new CornerPathEffect(3));
}
//当attr文件加载完之后,会回调这个方法
protected void onFinishInflate() {
super.onFinishInflate();
//那到子元素的个数
int cCount = getChildCount();
if(cCount == 0){
return;
}
for(int i=0;i<cCount;i++){
//那到每一个子View
View view = getChildAt(i);
LinearLayout.LayoutParams lp = (LayoutParams) view.getLayoutParams();
lp.weight = 0;
//设置子view的宽度
lp.width = getScreenWidth()/mTabVisibleCount;
view.setLayoutParams(lp);
}
setItemClickEvent();
}
//获得屏幕的宽度
private int getScreenWidth() {
WindowManager wm = (WindowManager) getContext().getSystemService(Context.WINDOW_SERVICE);
DisplayMetrics outMetrics = new DisplayMetrics();
//通过WindowManager获得
wm.getDefaultDisplay().getMetrics(outMetrics);
//返回屏幕的宽度
return outMetrics.widthPixels;
}
//设置三角形的大小(只要控件的宽高,发生变化,就会调用的方法)
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
//底边的宽度
mTriangleWidth = (int) (w/mTabVisibleCount*RADIO_TRIANGLE_WIDTH);
mTriangleWidth = Math.min(mTriangleWidth, DIMENSION_TRIANGLE_WIDTH_MAX);
//初始时的偏移量
mInitTranslationX = w/mTabVisibleCount/2-mTriangleWidth/2;
//初始化三角形
initTriangle();
}
//初始化三角形
private void initTriangle() {
//初始化画板,绘制三角形
mPath = new Path();
mPath.moveTo(0, 0);
mPath.lineTo(mTriangleWidth, 0);
mPath.lineTo(mTriangleWidth/2, -mTriangleWidth/2);
mPath.close();
}
//绘制三角形
protected void dispatchDraw(Canvas canvas) {
//绘制三角形
canvas.save();
canvas.translate(mInitTranslationX+mTranslationX, getHeight()+2);
canvas.drawPath(mPath, mPaint);
canvas.restore();
super.dispatchDraw(canvas);
}
//指示器跟随手指进行滚动
public void scroll(int position, float offset) {
int tabWidth = getWidth()/mTabVisibleCount;
mTranslationX = (int) (tabWidth*(offset+position));
//但移动到倒数第二个的时候
//容器移动,当tab处于移动至最后一个时
if(position>=(mTabVisibleCount-2)&&offset>0&&getChildCount()>mTabVisibleCount){
//在mTabVisibleCount是1的时候
if(mTabVisibleCount != 1){
this.scrollTo(((position-(mTabVisibleCount-2))*tabWidth+(int)(tabWidth*offset)),0);
}else{
this.scrollTo(position*tabWidth+(int)(tabWidth*offset), 0);
}
}
//调用重汇方法
invalidate();
}
//动态添加TextView
public void setTabItemTitles(List<String> titles){
if(titles!=null&&titles.size()>0){
//全部移除布局中的title
this.removeAllViews();
mTites = titles;
for(String title : mTites){
addView(genetateTextView(title));
}
setItemClickEvent();
}
}
//设置可见的Tab数量
public void setVisibleTab(int count){
mTabVisibleCount = count;
}
//根据title创建tab
private View genetateTextView(String title) {
TextView tv = new TextView(getContext());
LinearLayout.LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT);
lp.width = getScreenWidth()/mTabVisibleCount;
tv.setText(title);
tv.setGravity(Gravity.CENTER);
tv.setTextSize(16f);
tv.setTextColor(COLOR_TEXT_MORMAL);
tv.setLayoutParams(lp);
return tv;
}
//设置关联的ViewPager
public void setViewPager(ViewPager viewPager,int pos){
mViewPager = viewPager;
mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
public void onPageSelected(int arg0) {
if(mListener !=null){
mListener.onPageSelected(arg0);
}
//在选择的时候
hightLightTextView(arg0);
}
public void onPageScrolled(int arg0, float arg1, int arg2) {
scroll(arg0, arg1);
if(mListener !=null){
mListener.onPageScrolled(arg0, arg1, arg2);
}
}
public void onPageScrollStateChanged(int arg0) {
if(mListener!=null){
mListener.onPageScrollStateChanged(arg0);
}
}
});
//设置默认值
mViewPager.setCurrentItem(pos);
//设置默认值为高亮状态
hightLightTextView(pos);
}
//创建一个接口,方便ManiActivity中的VIewPager调用,以免冲突
public interface PageOnchangeListener{
public void onPageSelected(int position);
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels);
public void onPageScrollStateChanged(int state);
}
//供外界调用的方法
public void setOnPagechangeListener(PageOnchangeListener listener){
this.mListener = listener;
}
//高亮某个Tab文本
private void hightLightTextView(int pos){
//调用重置Tab文本颜色
resetTextViewColor();
//设置高亮某个Tab文本
View view = getChildAt(pos);
if(view instanceof TextView){
((TextView) view).setTextColor(Color.RED);
}
}
//重置Tab文本颜色
public void resetTextViewColor(){
for(int i=0;i<getChildCount();i++){
View view = getChildAt(i);
if(view instanceof TextView){
((TextView) view).setTextColor(COLOR_TEXT_MORMAL);
}
}
}
//设置Tab点击的事件
public void setItemClickEvent(){
int cCount = getChildCount();
for(int i = 0;i<cCount;i++){
final int j = i;
View view = getChildAt(i);
view.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
mViewPager.setCurrentItem(j);
}
});
}
}
}
在MainActivity里边
public class MainActivity extends FragmentActivity {
private ViewPager mViewPager;
private ViewPagerIndicator mIndicator;
private FragmentPagerAdapter mAdapter;
private List<String> mList = Arrays.asList("查询1","添加2","展示3","查询4","添加5","展示6","查询7","添加8","展示9");
private List<VpSimpleFragment> mContents = new ArrayList<VpSimpleFragment>();
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
//初始化控件
initView();
//初始化数据
initDatas();
//调用ViewPager指示器里边的方法
mIndicator.setVisibleTab(4);
mIndicator.setTabItemTitles(mList);
mIndicator.setViewPager(mViewPager, 0);
mViewPager.setAdapter(mAdapter);
mIndicator.setOnPagechangeListener(new PageOnchangeListener() {
@Override
public void onPageSelected(int position) {
// TODO Auto-generated method stub
}
@Override
public void onPageScrolled(int position, float positionOffset,
int positionOffsetPixels) {
// TODO Auto-generated method stub
}
@Override
public void onPageScrollStateChanged(int state) {
// TODO Auto-generated method stub
}
});
}
//初始化控件
private void initView() {
mViewPager = (ViewPager) findViewById(R.id.vp);
mIndicator = (ViewPagerIndicator) findViewById(R.id.viewpager_indicator);
}
//初始化数据
private void initDatas() {
//往Fragment集合中,添加数据信息
for(int i = 0;i<mList.size() ;i++){
VpSimpleFragment fragment = VpSimpleFragment.newInstance(mList.get(i));
mContents.add(fragment);
}
//初始化适配器
mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
public int getCount() {
return mList.size();
}
public Fragment getItem(int arg0) {
return mContents.get(arg0);
}
};
}
}
fragment中
public class VpSimpleFragment extends Fragment{
private String mTitle;
public static final String BUNDLE_KEY = "title";
//创建一个方法,在实例化的时候,将值放在Arguments
public static VpSimpleFragment newInstance(String title){
//将获得到的值,放置bundler
Bundle bundle = new Bundle();
bundle.putString(BUNDLE_KEY, title);
VpSimpleFragment fragment = new VpSimpleFragment();
fragment.setArguments(bundle);
return fragment;
}
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
//取出放在Arguments中的值
Bundle bundle = getArguments();
if(bundle != null){
mTitle = bundle.getString(BUNDLE_KEY);
}
//自定义一个TextView
TextView tv = new TextView(getActivity());
tv.setText(mTitle);
tv.setTextSize(20f);
tv.setGravity(Gravity.CENTER);
return tv;
}
}