先上图
布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.dfhe.viewpagerindicatordemo.VpSimpleIndicator
android:id="@+id/id_indicator"
android:layout_width="match_parent"
android:layout_height="45dp"
android:orientation="horizontal"
android:background="#AA000000">
<TextView
android:id="@+id/id_tv1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="首页"
android:textSize="16sp"
android:gravity="center"
android:textColor="#CCFFFFFF"/>
<TextView
android:id="@+id/id_tv2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="新闻"
android:textSize="16sp"
android:gravity="center"
android:textColor="#CCFFFFFF"/>
<TextView
android:id="@+id/id_tv3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="我的"
android:textSize="16sp"
android:gravity="center"
android:textColor="#CCFFFFFF"/>
</com.dfhe.viewpagerindicatordemo.VpSimpleIndicator>
<android.support.v4.view.ViewPager
android:id="@+id/id_viewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
</LinearLayout>
主页面MainActivity
package com.dfhe.viewpagerindicatordemo;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.Window;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
public class MainActivity extends FragmentActivity implements View.OnClickListener {
private List<String> mTitles = Arrays.asList("首页", "新闻", "我的");
private VpSimpleIndicator mIndicater;
private ViewPager mViewPager;
private FragmentPagerAdapter mAdapter;
//定义viewPager的内容
private List<VpSimpleFragment> mContents = new ArrayList<>();
private TextView tv1;
private TextView tv2;
private TextView tv3;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
initViews();
initDatas();
mViewPager.setAdapter(mAdapter);
//VipewPager选中的监听
mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
//在viewPager改变的时候调用
mIndicater.scroll(position,positionOffset);
}
@Override
public void onPageSelected(int position) {
//当ViewPager的当前选项被选中的时候,改变标题的颜色
if (position == 0) {
setTextColor(tv1, tv2, tv3, Color.BLUE, Color.WHITE);
} else if (position == 1) {
setTextColor(tv2, tv1, tv3, Color.BLUE, Color.WHITE);
} else {
setTextColor(tv3, tv2, tv1, Color.BLUE, Color.WHITE);
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
private void initDatas() {
for (String title : mTitles) {
VpSimpleFragment fragment = VpSimpleFragment.newInstance(title);
mContents.add(fragment);
}
}
private void initViews() {
tv1 = (TextView) findViewById(R.id.id_tv1);
tv1.setTextColor(Color.BLUE);
tv2 = (TextView) findViewById(R.id.id_tv2);
tv3 = (TextView) findViewById(R.id.id_tv3);
tv1.setOnClickListener(this);
tv2.setOnClickListener(this);
tv3.setOnClickListener(this);
mIndicater = (VpSimpleIndicator) findViewById(R.id.id_indicator);
mViewPager = (ViewPager) findViewById(R.id.id_viewPager);
mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int position) {
return mContents.get(position);
}
@Override
public int getCount() {
return mContents.size();
}
};
}
/**
* 改变当前ViewPager选中的颜色
* @param tv1
* @param tv2
* @param tv3
* @param color
* @param color2
*/
private void setTextColor(TextView tv1, TextView tv2, TextView tv3, int color, int color2) {
tv1.setTextColor(color);
tv2.setTextColor(color2);
tv3.setTextColor(color2);
}
@Override
public void onClick(View view) {
switch (view.getId()){
case R.id.id_tv1:
mViewPager.setCurrentItem(0);
break;
case R.id.id_tv2:
mViewPager.setCurrentItem(1);
break;
case R.id.id_tv3:
mViewPager.setCurrentItem(2);
break;
}
}
}
自定义Indicator
package com.dfhe.viewpagerindicatordemo;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.CornerPathEffect;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.widget.LinearLayout;
/**
* 项目名称:ViewPagerIndicatorDemo
* 类描述:
* 创建人:Gimi
* 创建时间:2016/3/20 10:46
* 修改人:Gimi
* 修改时间:2016/3/20 10:46
* 修改备注:
*
* @param
*/
public class VpSimpleIndicator extends LinearLayout {
private Paint mPaint;//定义画笔
private Path mPath;//画线
private int mTriangleWidth;//小三角形的宽度
private int mTriangleHeight;//小三角形的高度
private int mInitTranslationX;//初始化偏移位置
private int mTranslationX;//根据我们手指移动的变量
private static final float RADIO_TRANGLE_WIDTH = 1/6F;//三角形占用tab的六分之一
public VpSimpleIndicator(Context context) {
this(context, null);
}
public VpSimpleIndicator(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public VpSimpleIndicator(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mPaint = new Paint();
mPaint.setAntiAlias(true);//设置抗锯齿
mPaint.setColor(Color.parseColor("#FFFFFF"));
mPaint.setStyle(Paint.Style.FILL);
mPaint.setPathEffect(new CornerPathEffect(3));//让三角形有弧度,不至于太尖锐
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mTriangleWidth = (int) (w/3 * RADIO_TRANGLE_WIDTH);
//三角形初始时的偏移量
mInitTranslationX = w /3/2 -mTriangleWidth/2;
initTangle();
}
/**
* 初始化三角形
*/
private void initTangle() {
mTriangleHeight = mTriangleWidth/2;
mPath = new Path();
mPath.moveTo(0, 0);
mPath.lineTo(mTriangleWidth, 0);
mPath.lineTo(mTriangleWidth / 2, -mTriangleHeight);//这里三角形应该是向上的,所以是负值
mPath.close();
}
/**
* 这个方法是onDraw方法之后进行调用,也就是分发给子组件进行绘制
* @param canvas
*/
@Override
protected void dispatchDraw(Canvas canvas) {
canvas.save();
canvas.translate(mInitTranslationX + mTranslationX, getHeight() + 2);//这里加2是为了让三角形离字稍微远点
canvas.drawPath(mPath, mPaint);
canvas.restore();
super.dispatchDraw(canvas);
}
/**
* 当手指进行滑动的时候,三角形也跟着滑动
* @param position
* @param positionOffset
*/
public void scroll(int position, float positionOffset) {
//获取控件的宽度
int tabWidth = getWidth()/3;
//设置移动的距离
mTranslationX = (int) (tabWidth * (position + positionOffset));
//刷新view,重新绘制
invalidate();
}
}
Fragment
package com.dfhe.viewpagerindicatordemo;
import android.graphics.Color;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
/**
* 项目名称:ViewPagerIndicatorDemo
* 类描述:
* 创建人:Gimi
* 创建时间:2016/3/20 10:58
* 修改人:Gimi
* 修改时间:2016/3/20 10:58
* 修改备注:
*
* @param
*/
public class VpSimpleFragment extends Fragment {
private String mTitle;
private static final String BUNDLE_TITLE = “title”;
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
Bundle bundle = getArguments();
if(bundle != null){
mTitle = bundle.getString(BUNDLE_TITLE);
}
TextView tv = new TextView(getActivity());
tv.setText(mTitle);
tv.setGravity(Gravity.CENTER);
tv.setTextColor(Color.BLACK);
return tv;
}
/**
* 创建一个newInstance方法,对外提供参数设置
*/
public static VpSimpleFragment newInstance(String title){
Bundle bundle = new Bundle();
bundle.putString(BUNDLE_TITLE, title);
VpSimpleFragment fragment = new VpSimpleFragment();
fragment.setArguments(bundle);
return fragment;
}
}