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

看了这篇文章：http://blog.csdn.net/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;@Overridepublic 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(){@Overridepublic 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(){@Overridepublic void onClick(View v){move(v);}});tv2.setOnClickListener(new View.OnClickListener(){@Overridepublic void onClick(View v){move(v);}});tv3.setOnClickListener(new View.OnClickListener(){@Overridepublic void onClick(View v){move(v);}});tv4.setOnClickListener(new View.OnClickListener(){@Overridepublic 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;}}

效果图如下：

仿网易新闻顶部滑动条效果_第1张图片
代码很简单，不多说，附上项目下载链接

hhttp://download.csdn.net/detail/zingck/4217160

转载请保存源地址

http://blog.csdn.net/zingck/article/details/7446075

更多相关文章

随机推荐