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

这个是网易新闻的主界面，我们知道底部可以用tabhost实现，这个很容易，我们在其他软件中也会经常用到。

至于顶部的滑动条，个人感觉还是比较漂亮的所以今天也模仿了下，网易顶部滑动条的效果，由于初次模仿这种效果，可能有些地方还不够完美，不过基本已经实现，希望大家能够喜欢。

废话不多说，下面上代码：

首先是布局layout下的main.xml

[html]
view plaincopyprint?

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns: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>

[html]
view plaincopyprint?

package cn.com.karl.slider;
import android.app.Activity;
import android.os.Bundle;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup.LayoutParams;
import android.view.animation.TranslateAnimation;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;

public class SliderBarActivity extends Activity {
/** Called when the activity is first created. */
private RelativeLayout layout;

private RelativeLayout layout1;
private RelativeLayout layout2;
private RelativeLayout layout3;
private RelativeLayout layout4;
private TextView tab1;
private TextView tab2;
private TextView tab3;
private TextView tab4;
private TextView first;
private int current = 1;

private LinearLayout page;

private boolean isAdd = false;
private int select_width;
private int select_height;
private int firstLeft;
private int startLeft;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

init();
}

private void init(){
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.LayoutParams rl = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
rl.addRule(RelativeLayout.CENTER_IN_PARENT, RelativeLayout.TRUE);
first = new TextView(this);
first.setTag("first");
first.setGravity(Gravity.CENTER);
first.setBackgroundResource(R.drawable.slidebar);
first.setText(tab1.getText());
View view1=LayoutInflater.from(getApplicationContext()).inflate(R.layout.page1, null);
page.addView(view1);

switch (current) {
case 1:
layout1.addView(first, rl);
current = R.id.tab1;
break;
case 2:
layout2.addView(first, rl);
current = R.id.tab2;
break;
case 3:
layout3.addView(first, rl);
current = R.id.tab3;
break;
case 4:
layout4.addView(first, rl);
current = R.id.tab4;
break;
default:
break;
}

}

private void replace() {
switch (current) {
case R.id.tab1:
changeTop(layout1);
break;
case R.id.tab2:
changeTop(layout2);
break;
case R.id.tab3:
changeTop(layout3);
break;
case R.id.tab4:
changeTop(layout4);
break;
default:
break;
}
}
private void changeTop(RelativeLayout relativeLayout){
TextView old = (TextView) relativeLayout.findViewWithTag("first");;
select_width = old.getWidth();
select_height = old.getHeight();

RelativeLayout.LayoutParams rl = new RelativeLayout.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();

TextView tv = new TextView(this);
tv.setTag("move");
tv.setBackgroundResource(R.drawable.slidebar);

layout.addView(tv , rl);
relativeLayout.removeView(old);
}

private OnClickListener onClickListener = new OnClickListener(){
public void onClick(View v) {
if(!isAdd){
replace();
isAdd = true;
}

TextView top_select = (TextView) layout.findViewWithTag("move");
top_select.setGravity(Gravity.CENTER);
top_select.setText(tab1.getText());
int tabLeft;
int endLeft = 0;

boolean run = false;

switch (v.getId()) {
case R.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;
View view1=LayoutInflater.from(getApplicationContext()).inflate(R.layout.page1, null);
page.addView(view1);
}
break;
case R.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;
View view2=LayoutInflater.from(getApplicationContext()).inflate(R.layout.page2, null);
page.addView(view2);
}
break;
case R.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;
View view3=LayoutInflater.from(getApplicationContext()).inflate(R.layout.page3, null);
page.addView(view3);
}
break;
case R.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;
View view4=LayoutInflater.from(getApplicationContext()).inflate(R.layout.page4, null);
page.addView(view4);
}
break;
default:
break;
}

if(run){
TranslateAnimation animation = new TranslateAnimation(startLeft, endLeft - firstLeft, 0, 0);
startLeft = endLeft - firstLeft;
animation.setDuration(100);
animation.setFillAfter(true);
top_select.bringToFront();
top_select.startAnimation(animation);

}

}

};
}

package cn.com.karl.slider;
import android.app.Activity;
import android.os.Bundle;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup.LayoutParams;
import android.view.animation.TranslateAnimation;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;

public class SliderBarActivity extends Activity {
/** Called when the activity is first created. */
private RelativeLayout layout;

private RelativeLayout layout1;
private RelativeLayout layout2;
private RelativeLayout layout3;
private RelativeLayout layout4;
private TextView tab1;
private TextView tab2;
private TextView tab3;
private TextView tab4;
private TextView first;
private int current = 1;

private LinearLayout page;

private boolean isAdd = false;
private int select_width;
private int select_height;
private int firstLeft;
private int startLeft;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

init();
}

private void init(){
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.LayoutParams rl = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
rl.addRule(RelativeLayout.CENTER_IN_PARENT, RelativeLayout.TRUE);
first = new TextView(this);
first.setTag("first");
first.setGravity(Gravity.CENTER);
first.setBackgroundResource(R.drawable.slidebar);
first.setText(tab1.getText());
View view1=LayoutInflater.from(getApplicationContext()).inflate(R.layout.page1, null);
page.addView(view1);

switch (current) {
case 1:
layout1.addView(first, rl);
current = R.id.tab1;
break;
case 2:
layout2.addView(first, rl);
current = R.id.tab2;
break;
case 3:
layout3.addView(first, rl);
current = R.id.tab3;
break;
case 4:
layout4.addView(first, rl);
current = R.id.tab4;
break;
default:
break;
}

}

private void replace() {
switch (current) {
case R.id.tab1:
changeTop(layout1);
break;
case R.id.tab2:
changeTop(layout2);
break;
case R.id.tab3:
changeTop(layout3);
break;
case R.id.tab4:
changeTop(layout4);
break;
default:
break;
}
}
private void changeTop(RelativeLayout relativeLayout){
TextView old = (TextView) relativeLayout.findViewWithTag("first");;
select_width = old.getWidth();
select_height = old.getHeight();

RelativeLayout.LayoutParams rl = new RelativeLayout.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();

TextView tv = new TextView(this);
tv.setTag("move");
tv.setBackgroundResource(R.drawable.slidebar);

layout.addView(tv , rl);
relativeLayout.removeView(old);
}

private OnClickListener onClickListener = new OnClickListener(){
public void onClick(View v) {
if(!isAdd){
replace();
isAdd = true;
}

TextView top_select = (TextView) layout.findViewWithTag("move");
top_select.setGravity(Gravity.CENTER);
top_select.setText(tab1.getText());
int tabLeft;
int endLeft = 0;

boolean run = false;

switch (v.getId()) {
case R.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;
View view1=LayoutInflater.from(getApplicationContext()).inflate(R.layout.page1, null);
page.addView(view1);
}
break;
case R.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;
View view2=LayoutInflater.from(getApplicationContext()).inflate(R.layout.page2, null);
page.addView(view2);
}
break;
case R.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;
View view3=LayoutInflater.from(getApplicationContext()).inflate(R.layout.page3, null);
page.addView(view3);
}
break;
case R.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;
View view4=LayoutInflater.from(getApplicationContext()).inflate(R.layout.page4, null);
page.addView(view4);
}
break;
default:
break;
}

if(run){
TranslateAnimation animation = new TranslateAnimation(startLeft, endLeft - firstLeft, 0, 0);
startLeft = endLeft - firstLeft;
animation.setDuration(100);
animation.setFillAfter(true);
top_select.bringToFront();
top_select.startAnimation(animation);

}

}

};
}

由于时间比较紧，我没有做注释，有时间再做注释啊。

看一下效果是不是一样啊！





效果还请大家自行体验并改进，由于时间仓促，代码并未做注释，希望大家能够原谅，下面我附上源码下载地址：点击打开链接