为了实现这个效果我竟然用了两天的时间，我真是呵呵了，废话不多说直接开始整理。
这里的Indicator是重写的LinearLayout用来弄导航栏那个蓝条的样式以及位置的（这部分代码是在别人那考过来的），代码如下：
package vikicc.titletab;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.widget.LinearLayout;
/**
* Created by LiuWeiJie on 2015/7/20 0020.
* Email:1031066280@qq.com
*/
public class Indicator extends LinearLayout {
private Paint mPaint; // 画指示符的paint
private int mTop; // 指示符的top
private int mLeft; // 指示符的left
private int mWidth; // 指示符的width
private int mHeight = 5; // 指示符的高度，固定了
private int mColor; // 指示符的颜色
private int mChildCount; // 子item的个数，用于计算指示符的宽度
public Indicator(Context context, AttributeSet attrs) {
super(context, attrs);
setBackgroundColor(Color.TRANSPARENT); // 必须设置背景，否则onDraw不执行
// 获取自定义属性 指示符的颜色
TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.Indicator, 0, 0);
mColor = ta.getColor(0, 0X0000FF);
ta.recycle();
// 初始化paint
mPaint = new Paint();
mPaint.setColor(Color.parseColor("#2EBADE"));
mPaint.setAntiAlias(true);
}
@Override
protected void onFinishInflate() {
super.onFinishInflate();
mChildCount = getChildCount(); // 获取子item的个数
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
mTop = getMeasuredHeight(); // 测量的高度即指示符的顶部位置
int width = getMeasuredWidth(); // 获取测量的总宽度
int height = mTop + mHeight; // 重新定义一下测量的高度
mWidth = width / mChildCount; // 指示符的宽度为总宽度/item的个数
setMeasuredDimension(width, height);
}
/**
* 指示符滚动
*
* @param position 现在的位置
* @param offset 偏移量 0 ~ 1
*/
public void scroll(int position, float offset) {
mLeft = (int) ((position + offset) * mWidth);
invalidate();
}
@Override
protected void onDraw(Canvas canvas) {
// 圈出一个矩形
Rect rect = new Rect(mLeft, mTop, mLeft + mWidth, mTop + mHeight);
canvas.drawRect(rect, mPaint); // 绘制该矩形
super.onDraw(canvas);
}
}
然后再就是主页面MainActivity这里面重写了一个FragmentPagerAdapter 用来控制Fragment切换的问题。
MainActivity：
package vikicc.titletab;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.Log;
import android.view.View;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends FragmentActivity implements View.OnClickListener {
private Indicator mIndicator;
private TextView mTabOne;
private TextView mTabTwo;
private ViewPager mContainer;
List<Fragment> fragmentList = new ArrayList<Fragment>();
private ArrayList<TextView> mViews = new ArrayList<TextView>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mIndicator = (Indicator) findViewById(R.id.indicator);
mContainer = (ViewPager) findViewById(R.id.container);
mTabOne = (TextView) findViewById(R.id.tab_one);
mTabTwo = (TextView) findViewById(R.id.tab_two);
mTabOne.setOnClickListener(this);
mTabTwo.setOnClickListener(this);
fragmentList.add(new FirstFragment());
fragmentList.add(new SecondFragment());
mContainer.setAdapter(new MyViewAdapter(this.getSupportFragmentManager()));
mContainer.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
mIndicator.scroll(position, positionOffset);//控制滚动条位置
}
@Override
public void onPageScrollStateChanged(int position) {
}
});
}
public class MyViewAdapter extends FragmentPagerAdapter {
public MyViewAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int i) {
return fragmentList.get(i);
}
@Override
public int getCount() {
return fragmentList.size();
}
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.tab_one:
mContainer.setCurrentItem(0);
break;
case R.id.tab_two:
mContainer.setCurrentItem(1);
break;
}
}
}activity_main.xml的代码：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:indicator="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<vikicc.titletab.Indicator
android:id="@+id/indicator"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="10dip"
android:paddingTop="10dip"
android:weightSum="2"
indicator:color="#FFFF0000">
<LinearLayout
android:id="@+id/short_message_ll_one"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical|center_horizontal">
<TextView
android:id="@+id/tab_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="TAB1" />
</LinearLayout>
<LinearLayout
android:id="@+id/short_message_ll_two"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical|center_horizontal">
<TextView
android:id="@+id/tab_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="TAB2" />
</LinearLayout>
</vikicc.titletab.Indicator>
<android.support.v4.view.ViewPager
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</LinearLayout>
版权声明：本文为博主原创文章，未经博主允许不得转载。
仿网易客户端实现顶部导航效果（ViewPager+Fragment）
原文地址：http://blog.csdn.net/finder_chang/article/details/46975229
