好久没写博客了，今天没事怒更一记。
如标题今天我们来模仿一下搜狐新闻，先上个效果图.
效果图上完之后再上个博客，我也是从这里得到的启发http://blog.csdn.net/qibin0506/article/details/42046559
1，接下来我们就来分析一下这个效果
下面的内容应该是用viewpager，头部的选项卡我们用一个LinearLayout+HorizontalScrollView也可以实现，滚动效果的话我们可以用到我们学会的scrollTo，大致的思路理清，我们就开始码代码吧！
2，自定义LinearLayout
我们可以观察到那个红色的矩形应该是和整体的LinearLayout在一起，所以我们可以自定义LinearLayout画出那个矩形，滚动就是改变画矩形的位置即可
<span style="font-size:14px;">public class ViewpagerIndicator extends LinearLayout {
/**
* 画笔，底部矩形
*/
private Paint paint;
/**
* 子View个数
*/
private int mCount;
private int mTop;
private int mWidth;
private int mLeft;
private int mHeight = 5;
public OnTextClick onTextClick;
public ViewpagerIndicator(Context context) {
super(context);
}
public ViewpagerIndicator(Context context, AttributeSet attrs) {
super(context, attrs);
setBackgroundColor(Color.TRANSPARENT);
paint = new Paint();
paint.setColor(getResources().getColor(R.color.red));
paint.setAntiAlias(true);
}
public interface OnTextClick{
public void textViewClick(int position);
}
public void setOnTextClick(OnTextClick onTextClick){
this.onTextClick = onTextClick;
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//整体高度
mTop = getMeasuredHeight();
//整体宽度
int width = getMeasuredWidth();
//加上指示器高度
int height = mTop + mHeight;
//指示器的宽度
mWidth = width / mCount;
setMeasuredDimension(width, height);
}</span>
<span style="font-size:14px;">/**
* 画出指示器
* @param canvas
*/
protected void onDraw(Canvas canvas) {
Rect rect = new Rect(mLeft, mTop, mLeft + mWidth, mTop + mHeight);
canvas.drawRect(rect, paint);
}</span>
没错，就是俩句代码，之后通过不断的改变left就可以实现跟随滚动的效果。
<span style="font-size:14px;"> /**
* 滚动效果
* @param position
* @param positionOffset
*/
public void scrollTo(int position, float positionOffset) {
mLeft = (int) ((position + positionOffset) * mWidth);
postInvalidate();
}</span>方法中的俩个参数我们可以通过viewpager的回调方法onPageScrolled中得到，position就是当前的选项卡,positionOffset相当于滑动的百分比0.0~0.0之间.
3,使用自定义控件
ok，大致的思路都已经理清，接下来我们就可以使用自己做的Indicator了。
<span style="font-size:14px;"><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="topnews.inhome.wrh.fragment.NewsFragment">
<HorizontalScrollView
android:id="@+id/horizon"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scrollbars="none"
>
<com.wrh.sohunews.ViewpagerIndicator
android:id="@+id/indicator"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingBottom="10dp"
android:paddingTop="10dp">
<TextView
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_margin="10dp"
android:text="首页"
android:textColor="@color/red"
android:gravity="center" />
<TextView
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="订阅"
android:layout_margin="10dp"
android:gravity="center" />
<TextView
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="娱乐"
android:layout_margin="10dp"
android:gravity="center" />
<TextView
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_margin="10dp"
android:text="本地"
android:gravity="center" />
<TextView
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_margin="10dp"
android:text="生活"
android:gravity="center" />
<TextView
android:layout_width="0dp"
android:layout_margin="10dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="军事"
android:gravity="center" />
<TextView
android:layout_width="0dp"
android:layout_margin="10dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="财经"
android:gravity="center" />
<TextView
android:layout_width="0dp"
android:layout_margin="10dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="社会"
android:gravity="center" />
<TextView
android:layout_width="0dp"
android:layout_margin="10dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="汽车"
android:gravity="center" />
<TextView
android:layout_width="0dp"
android:layout_margin="10dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="体育"
android:gravity="center" />
<TextView
android:layout_width="0dp"
android:layout_margin="10dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="历史"
android:gravity="center" />
<TextView
android:layout_width="0dp"
android:layout_margin="10dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="搞笑"
android:gravity="center" />
<TextView
android:layout_width="0dp"
android:layout_margin="10dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="情感"
android:gravity="center" />
</com.wrh.sohunews.ViewpagerIndicator>
</HorizontalScrollView>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/horizon"
/>
</RelativeLayout></span>先不要被眼前多如狗的TextView吓到，其实都是粘贴复制上去的改了一个text就行，我们也可以在自己的LinearLayout中通过TextView t = new TextView();然后add进去，这俩种方法都可以。
但是我们显然都不想给这么多的textview都取id然后拿到它的实例再setOnClick,所以我们就可以在自定义的ViewGroup中直接set
<span style="font-size:14px;">@Override
protected void onFinishInflate() {
super.onFinishInflate();
mCount = getChildCount();
/**
* 监听点击事件，回调接口
*/
for (int i = 0 ;i<mCount;i++){
View view = getChildAt(i);
if (view instanceof TextView)
{
final int finalI = i;
((TextView) view).setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if (onTextClick != null) {
onTextClick.textViewClick(finalI);
}
}
});
}
}
}</span>通过回调接口我们就轻易的拿到了所点击的是哪一页选项卡,接下来我们来看看使用方法
<span style="font-size:14px;">public class MainActivity extends Activity implements ViewPager.OnPageChangeListener,ViewpagerIndicator.OnTextClick{
private ViewPager viewPager;
private int lastX = 0;
private ViewpagerIndicator indicator;
private HorizontalScrollView horizontalScrollView;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initViews();
}
private void initViews() {
viewPager = (ViewPager) findViewById(R.id.viewpager);
indicator = (ViewpagerIndicator) findViewById(R.id.indicator);
indicator.setOnTextClick(this);
horizontalScrollView = (HorizontalScrollView) findViewById(R.id.horizon);
viewPager.setAdapter(new MyAdapter());
viewPager.setOnPageChangeListener(this);
}</span>一些必要的实例化.
<span style="font-size:14px;"> /**
* 只有当从第一项滚动第二项或者从第二项滚动第一项时，整体不动指示器单独滚动，其余都是整个布局滚动
* @param position
* @param positionOffset
* @param positionOffsetPixels
*/
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
if (!(position == 0 && positionOffset - lastX >= 0) || !(position == 1 && positionOffset - lastX <= 0)){
horizontalScrollView.scrollTo((int)((positionOffset+position-1)*indicator.getIndicatorWidth()), 0);
}
indicator.scrollTo(position, positionOffset);
lastX = (int) positionOffset;
}
@Override
public void onPageSelected(int position) {
indicator.resetTextViewColor();
indicator.setFocusTextView(position);
}
@Override
public void onPageScrollStateChanged(int state) {
}</span>通过观察搜狐新闻我们可以看到，当从第一页滑动到第二页时，只有Indicator滚动了，之后都是整体滚动，所以我们要做好判断，整体滚动的时候indicator就相当于停留在了显示出来的第二个选项卡，接下来我们看看实际效果.
效果还是阔以的嘛，咔咔。
Android 模仿搜狐新闻的ViewpagerIndicator
原文地址：http://blog.csdn.net/u014163726/article/details/43113857
