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

 更新时间:2013年01月02日 16:15:51   作者:  
网易新闻的主界面顶部的滑动条个人感觉还是比较漂亮的所以今天也模仿了下,网易顶部滑动条的效果,由于初次模仿这种效果,可能有些地方还不够完美,不过基本已经实现,希望大家能够喜欢

这个是网易新闻的主界面,我们知道底部可以用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);

}

}
};
}

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

   

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

相关文章

  • Android 通知的基本用法示例代码

    Android 通知的基本用法示例代码

    本文主要介绍Android 通知栏,这里整理了相关的知识资料,并附示例代码和详解,有需要的小伙伴可以参考下
    2016-08-08
  • Android Jetpack Compose开发实用小技巧

    Android Jetpack Compose开发实用小技巧

    这篇文章主要为大家介绍了Android Jetpack Compose开发中的一些实用小技巧示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • Android关于获取时间的记录(小结)

    Android关于获取时间的记录(小结)

    这篇文章主要介绍了Android关于获取时间的记录(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • Android EditText限制输入字符类型的方法总结

    Android EditText限制输入字符类型的方法总结

    这篇文章主要介绍了Android EditText限制输入字符类型的方法总结的相关资料,需要的朋友可以参考下
    2017-03-03
  • Android使用ViewPager加载图片和轮播视频

    Android使用ViewPager加载图片和轮播视频

    这篇文章主要为大家详细介绍了Android使用ViewPager加载图片和轮播视频,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • Windows下获取Android 源码方法的详解

    Windows下获取Android 源码方法的详解

    本篇文章是对在Windows下获取Android 源码的方法进行了详细的分析介绍,需要的朋友参考下
    2013-06-06
  • Android自定义表格控件满足人们对视觉的需求

    Android自定义表格控件满足人们对视觉的需求

    随着人们对视觉的需求,基本组件已无法满足人们求新求异的要求,于是我们常常会自定义组件,用来实现更美观的UI界面,接下来将介绍Android如何自定义表格控件,感兴趣的朋友可以了解下,或许对你学习自定义控件有所帮助
    2013-02-02
  • Android编程之消息机制实例分析

    Android编程之消息机制实例分析

    这篇文章主要介绍了Android编程之消息机制,较为详细的分析了Android消息机制的原理与消息传递的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • AFURLSessionManager 上传下载使用代码说明

    AFURLSessionManager 上传下载使用代码说明

    本文通过代码给大家介绍了AFURLSessionManager 上传下载使用说明,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-09-09
  • 一步步教你写Slack的Loading动画

    一步步教你写Slack的Loading动画

    这篇文章主要为大家详细手摸手教你写Slack的Loading动画,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09

最新评论