仿网易新闻顶部滑动条效果

看了这篇文章：http://blog.youkuaiyun.com/wangkuifeng0118/article/details/7406240

觉得效果不错，故自己也实现了一下，代码要比原文简洁很多

首先要注意XML的布局结构，这个很重要

TextView一定要放在RelativeLayout布局中，保证android:layout_width="wrap_content" 和android:layout_centerInParent="true"属性，这样才可以获得TextView的位置，依靠这个位置定位滑动块的初始位置

定位TextView是无法在onCreate函数中直接获取view的尺寸，因为此时界面的layout还没有初始化，通过注册需要监听的view的viewTreeObserver来获取其尺寸，回调函数onGlobalLayout被调用的时候表明相应的view已经初始化，此时就可以将图片定位到TextView的中间。

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#ffffff"
    android:orientation="horizontal" >

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/big_button_up" >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:src="@drawable/slidebar" />

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:orientation="horizontal" >

            <RelativeLayout
                android:id="@+id/layout1"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_weight="1.0" >

                <TextView
                    android:id="@+id/textView1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:text="新闻" />
            </RelativeLayout>

            <RelativeLayout
                android:id="@+id/layout2"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_weight="1.0" >

                <TextView
                    android:id="@+id/textView2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:text="体育" />
            </RelativeLayout>

            <RelativeLayout
                android:id="@+id/layout3"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_weight="1.0" >

                <TextView
                    android:id="@+id/textView3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:text="娱乐" />
            </RelativeLayout>

            <RelativeLayout
                android:id="@+id/layout4"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_weight="1.0" >

                <TextView
                    android:id="@+id/textView4"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:text="更多" />
            </RelativeLayout>
        </LinearLayout>
    </RelativeLayout>

</LinearLayout>

 

TabChangeActivity.java

public class TabChangeActivity extends Activity
{

	TextView tv1;
	TextView tv2;
	TextView tv3;
	TextView tv4;
	ImageView iv;
	Drawable d;
	int fromX;
	int toX;
	TranslateAnimation am;
	//MyHandler handler;

	@Override
	public void onCreate(Bundle savedInstanceState)
	{
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		tv1 = (TextView) findViewById(R.id.textView1);
		tv2 = (TextView) findViewById(R.id.textView2);
		tv3 = (TextView) findViewById(R.id.textView3);
		tv4 = (TextView) findViewById(R.id.textView4);
		iv = (ImageView) findViewById(R.id.imageView1);

		final ViewTreeObserver viewTreeObserver = tv1.getViewTreeObserver();
		if(viewTreeObserver.isAlive())
		{
			viewTreeObserver.addOnGlobalLayoutListener(new OnGlobalLayoutListener()
			{
				@Override
				public void onGlobalLayout()
				{
					tv1.getViewTreeObserver().removeGlobalOnLayoutListener(this);
				    int initX = tv1.getLeft() - (iv.getWidth() - tv1.getWidth())/2;
				    iv.setPadding(initX, 0, 0, 0);
				}
			});
		}
		
		tv1.setOnClickListener(new View.OnClickListener()
		{
			@Override
			public void onClick(View v)
			{
				move(v);
			}
		});

		tv2.setOnClickListener(new View.OnClickListener()
		{
			@Override
			public void onClick(View v)
			{
				move(v);
			}
		});

		tv3.setOnClickListener(new View.OnClickListener()
		{
			@Override
			public void onClick(View v)
			{
				move(v);
			}
		});

		tv4.setOnClickListener(new View.OnClickListener()
		{
			@Override
			public void onClick(View v)
			{
				move(v);
			}
		});
	} 
	private void move(View v)
	{
		Log.v("zing", " fromX2= " + fromX);
		toX = ((RelativeLayout) v.getParent()).getLeft();
		am = new TranslateAnimation(fromX, toX, 0, 0);
		am.setDuration(600);
		am.setFillAfter(true);
		iv.clearAnimation();
		iv.startAnimation(am);
		fromX = toX;
	}
}

效果图如下：

代码很简单，不多说，附上项目下载链接

hhttp://download.youkuaiyun.com/detail/zingck/4217160

转载请保存源地址

http://blog.youkuaiyun.com/zingck/article/details/7446075