高仿网易新闻顶部滑动条效果实现代码

这个是网易新闻的主界面，我们知道底部可以用tabhost实现，这个很容易，我们在其他软件中也会经常用到。
至于顶部的滑动条，个人感觉还是比较漂亮的所以今天也模仿了下，网易顶部滑动条的效果，由于初次模仿这种效果，可能有些地方还不够完美，不过基本已经实现，希望大家能够喜欢。
废话不多说，下面上代码：
首先是布局layout下的main.xml

<?xmlversion="1.0"encoding="utf-8"?>
<relativelayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/root"
android:background="#ffffff"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<linearlayout
android:id="@+id/layoutbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/big_button_up"
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/tab1"
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/tab2"
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/tab3"
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/tab4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerinparent="true"
android:text="更多"/>
</relativelayout>
</linearlayout>
<linearlayout
android:id="@+id/page"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignparentleft="true"
android:layout_below="@+id/layoutbar"
android:background="#ffffff"
android:orientation="vertical"
>
</linearlayout>
</relativelayout>

下面是核心类，

packagecn.com.karl.slider;
importandroid.app.activity;
importandroid.os.bundle;
importandroid.view.gravity;
importandroid.view.layoutinflater;
importandroid.view.view;
importandroid.view.view.onclicklistener;
importandroid.view.viewgroup.layoutparams;
importandroid.view.animation.translateanimation;
importandroid.widget.linearlayout;
importandroid.widget.relativelayout;
importandroid.widget.textview;
publicclasssliderbaractivityextendsactivity{
/**calledwhentheactivityisfirstcreated.*/
privaterelativelayoutlayout;

privaterelativelayoutlayout1;
privaterelativelayoutlayout2;
privaterelativelayoutlayout3;
privaterelativelayoutlayout4;
privatetextviewtab1;
privatetextviewtab2;
privatetextviewtab3;
privatetextviewtab4;
privatetextviewfirst;
privateintcurrent=1;

privatelinearlayoutpage;

privatebooleanisadd=false;
privateintselect_width;
privateintselect_height;
privateintfirstleft;
privateintstartleft;

@override
publicvoidoncreate(bundlesavedinstancestate){
super.oncreate(savedinstancestate);
setcontentview(r.layout.main);
init();
}
privatevoidinit(){
layout=(relativelayout)findviewbyid(r.id.root);

layout1=(relativelayout)findviewbyid(r.id.layout1);
layout2=(relativelayout)findviewbyid(r.id.layout2);
layout3=(relativelayout)findviewbyid(r.id.layout3);
layout4=(relativelayout)findviewbyid(r.id.layout4);

page=(linearlayout)this.findviewbyid(r.id.page);

tab1=(textview)findviewbyid(r.id.tab1);
tab1.setonclicklistener(onclicklistener);
tab2=(textview)findviewbyid(r.id.tab2);
tab2.setonclicklistener(onclicklistener);
tab3=(textview)findviewbyid(r.id.tab3);
tab3.setonclicklistener(onclicklistener);
tab4=(textview)findviewbyid(r.id.tab4);
tab4.setonclicklistener(onclicklistener);



relativelayout.layoutparamsrl=newrelativelayout.layoutparams(layoutparams.wrap_content,layoutparams.wrap_content);
rl.addrule(relativelayout.center_in_parent,relativelayout.true);
first=newtextview(this);
first.settag("first");
first.setgravity(gravity.center);
first.setbackgroundresource(r.drawable.slidebar);
first.settext(tab1.gettext());
viewview1=layoutinflater.from(getapplicationcontext()).inflate(r.layout.page1,null);
page.addview(view1);

switch(current){
case1:
layout1.addview(first,rl);
current=r.id.tab1;
break;
case2:
layout2.addview(first,rl);
current=r.id.tab2;
break;
case3:
layout3.addview(first,rl);
current=r.id.tab3;
break;
case4:
layout4.addview(first,rl);
current=r.id.tab4;
break;
default:
break;
}

}

privatevoidreplace(){
switch(current){
caser.id.tab1:
changetop(layout1);
break;
caser.id.tab2:
changetop(layout2);
break;
caser.id.tab3:
changetop(layout3);
break;
caser.id.tab4:
changetop(layout4);
break;
default:
break;
}
}
privatevoidchangetop(relativelayoutrelativelayout){
textviewold=(textview)relativelayout.findviewwithtag("first");;
select_width=old.getwidth();
select_height=old.getheight();

relativelayout.layoutparamsrl=newrelativelayout.layoutparams(select_width,select_height);
rl.leftmargin=old.getleft()+((relativelayout)old.getparent()).getleft();
rl.topmargin=old.gettop()+((relativelayout)old.getparent()).gettop();

firstleft=old.getleft()+((relativelayout)old.getparent()).getleft();

textviewtv=newtextview(this);
tv.settag("move");
tv.setbackgroundresource(r.drawable.slidebar);

layout.addview(tv,rl);
relativelayout.removeview(old);
}

privateonclicklisteneronclicklistener=newonclicklistener(){
publicvoidonclick(viewv){
if(!isadd){
replace();
isadd=true;
}

textviewtop_select=(textview)layout.findviewwithtag("move");
top_select.setgravity(gravity.center);
top_select.settext(tab1.gettext());
inttableft;
intendleft=0;

booleanrun=false;
switch(v.getid()){
caser.id.tab1:
if(current!=r.id.tab1){
page.removeallviews();
tableft=((relativelayout)tab1.getparent()).getleft()+tab1.getleft()+tab1.getwidth()/2;
endleft=tableft-select_width/2;
current=r.id.tab1;
top_select.settext(tab1.gettext());
run=true;
viewview1=layoutinflater.from(getapplicationcontext()).inflate(r.layout.page1,null);
page.addview(view1);
}
break;
caser.id.tab2:
if(current!=r.id.tab2){
page.removeallviews();
tableft=((relativelayout)tab2.getparent()).getleft()+tab2.getleft()+tab2.getwidth()/2;
endleft=tableft-select_width/2;
current=r.id.tab2;
top_select.settext(tab2.gettext());
run=true;
viewview2=layoutinflater.from(getapplicationcontext()).inflate(r.layout.page2,null);
page.addview(view2);
}
break;
caser.id.tab3:
if(current!=r.id.tab3){
page.removeallviews();
tableft=((relativelayout)tab3.getparent()).getleft()+tab3.getleft()+tab3.getwidth()/2;
endleft=tableft-select_width/2;
current=r.id.tab3;
top_select.settext(tab3.gettext());
run=true;
viewview3=layoutinflater.from(getapplicationcontext()).inflate(r.layout.page3,null);
page.addview(view3);
}
break;
caser.id.tab4:
if(current!=r.id.tab4){
page.removeallviews();
tableft=((relativelayout)tab4.getparent()).getleft()+tab3.getleft()+tab4.getwidth()/2;
endleft=tableft-select_width/2;
current=r.id.tab4;
top_select.settext(tab4.gettext());
run=true;
viewview4=layoutinflater.from(getapplicationcontext()).inflate(r.layout.page4,null);
page.addview(view4);
}
break;
default:
break;
}

if(run){
translateanimationanimation=newtranslateanimation(startleft,endleft-firstleft,0,0);
startleft=endleft-firstleft;
animation.setduration(100);
animation.setfillafter(true);
top_select.bringtofront();
top_select.startanimation(animation);

}

}
};
}

由于时间比较紧，我没有做注释，有时间再做注释啊。
看一下效果是不是一样啊！

   

 
效果还请大家自行体验并改进，由于时间仓促，代码并未做注释，希望大家能够原谅