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

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

1.     <?xml version="1.0" encoding="utf-8"?>  
   
2.     <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   
3.         android:id="@+id/root"  
   
4.         android:background="#ffffff"  
   
5.         android:layout_width="fill_parent"  
   
6.         android:layout_height="fill_parent" >  
   
7.       
   
8.         <LinearLayout  
   
9.             android:id="@+id/layoutBar"  
   
10.             android:layout_width="fill_parent"  
    
11.             android:layout_height="wrap_content"  
    
12.             android:background="@drawable/big_button_up"  
    
13.             android:orientation="horizontal" >  
    
14.       
    
15.             <RelativeLayout  
    
16.                 android:id="@+id/layout1"  
    
17.                 android:layout_width="fill_parent"  
    
18.                 android:layout_height="wrap_content"  
    
19.                 android:layout_gravity="center_vertical"  
    
20.                 android:layout_weight="1.0" >  
    
21.       
    
22.                 <TextView  
    
23.                     android:id="@+id/tab1"  
    
24.                     android:layout_width="wrap_content"  
    
25.                     android:layout_height="wrap_content"  
    
26.                     android:layout_centerInParent="true"  
    
27.                     android:text="新闻" />  
    
28.             </RelativeLayout>  
    
29.       
    
30.             <RelativeLayout  
    
31.                 android:id="@+id/layout2"  
    
32.                 android:layout_width="fill_parent"  
    
33.                 android:layout_height="wrap_content"  
    
34.                 android:layout_gravity="center_vertical"  
    
35.                 android:layout_weight="1.0" >  
    
36.       
    
37.                 <TextView  
    
38.                     android:id="@+id/tab2"  
    
39.                     android:layout_width="wrap_content"  
    
40.                     android:layout_height="wrap_content"  
    
41.                     android:layout_centerInParent="true"  
    
42.                     android:text="体育" />  
    
43.             </RelativeLayout>  
    
44.       
    
45.             <RelativeLayout  
    
46.                 android:id="@+id/layout3"  
    
47.                 android:layout_width="fill_parent"  
    
48.                 android:layout_height="wrap_content"  
    
49.                 android:layout_gravity="center_vertical"  
    
50.                 android:layout_weight="1.0" >  
    
51.       
    
52.                 <TextView  
    
53.                     android:id="@+id/tab3"  
    
54.                     android:layout_width="wrap_content"  
    
55.                     android:layout_height="wrap_content"  
    
56.                     android:layout_centerInParent="true"  
    
57.                     android:text="娱乐" />  
    
58.             </RelativeLayout>  
    
59.       
    
60.             <RelativeLayout  
    
61.                 android:id="@+id/layout4"  
    
62.                 android:layout_width="fill_parent"  
    
63.                 android:layout_height="wrap_content"  
    
64.                 android:layout_gravity="center_vertical"  
    
65.                 android:layout_weight="1.0" >  
    
66.       
    
67.                 <TextView  
    
68.                     android:id="@+id/tab4"  
    
69.                     android:layout_width="wrap_content"  
    
70.                     android:layout_height="wrap_content"  
    
71.                     android:layout_centerInParent="true"  
    
72.                     android:text="更多" />  
    
73.             </RelativeLayout>  
    
74.         </LinearLayout>  
    
75.     <LinearLayout   
    
76.          android:id="@+id/page"  
    
77.          android:layout_width="fill_parent"  
    
78.          android:layout_height="fill_parent"  
    
79.          android:layout_alignParentLeft="true"  
    
80.          android:layout_below="@+id/layoutBar"  
    
81.          android:background="#ffffff"  
    
82.          android:orientation="vertical"  
    
83.         >  
    
84.          
    
85.     </LinearLayout>  
    
86.     </RelativeLayout>  

复制代码

下面是核心类，

1.     package cn.com.karl.slider;  
   
2.     import android.app.Activity;  
   
3.     import android.os.Bundle;  
   
4.     import android.view.Gravity;  
   
5.     import android.view.LayoutInflater;  
   
6.     import android.view.View;  
   
7.     import android.view.View.OnClickListener;  
   
8.     import android.view.ViewGroup.LayoutParams;  
   
9.     import android.view.animation.TranslateAnimation;  
   
10.     import android.widget.LinearLayout;  
    
11.     import android.widget.RelativeLayout;  
    
12.     import android.widget.TextView;  
    
13.       
    
14.     public class SliderBarActivity extends Activity {  
    
15.         /** Called when the activity is first created. */  
    
16.          private RelativeLayout layout;  
    
17.          
    
18.         private RelativeLayout layout1;  
    
19.         private RelativeLayout layout2;  
    
20.         private RelativeLayout layout3;  
    
21.         private RelativeLayout layout4;  
    
22.         private TextView tab1;  
    
23.         private TextView tab2;  
    
24.         private TextView tab3;  
    
25.         private TextView tab4;  
    
26.         private TextView first;  
    
27.         private int current = 1;   
    
28.          
    
29.         private LinearLayout page;  
    
30.          
    
31.         private boolean isAdd = false;  
    
32.         private int select_width;   
    
33.         private int select_height;  
    
34.         private int firstLeft;   
    
35.         private int startLeft;   
    
36.          
    
37.         @Override  
    
38.         public void onCreate(Bundle savedInstanceState) {  
    
39.             super.onCreate(savedInstanceState);  
    
40.             setContentView(R.layout.main);  
    
41.               
    
42.             init();  
    
43.         }  
    
44.          
    
45.         private void init(){  
    
46.             layout = (RelativeLayout) findViewById(R.id.root);  
    
47.               
    
48.             layout1 = (RelativeLayout) findViewById(R.id.layout1);  
    
49.             layout2 = (RelativeLayout) findViewById(R.id.layout2);  
    
50.             layout3 = (RelativeLayout) findViewById(R.id.layout3);  
    
51.             layout4 = (RelativeLayout) findViewById(R.id.layout4);  
    
52.               
    
53.             page=(LinearLayout) this.findViewById(R.id.page);  
    
54.               
    
55.             tab1 = (TextView) findViewById(R.id.tab1);  
    
56.             tab1.setOnClickListener(onClickListener);  
    
57.             tab2 = (TextView) findViewById(R.id.tab2);  
    
58.             tab2.setOnClickListener(onClickListener);  
    
59.             tab3 = (TextView) findViewById(R.id.tab3);  
    
60.             tab3.setOnClickListener(onClickListener);  
    
61.             tab4 = (TextView) findViewById(R.id.tab4);  
    
62.             tab4.setOnClickListener(onClickListener);  
    
63.               
    
64.               
    
65.               
    
66.             RelativeLayout.LayoutParams rl = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);  
    
67.             rl.addRule(RelativeLayout.CENTER_IN_PARENT, RelativeLayout.TRUE);  
    
68.             first = new TextView(this);  
    
69.             first.setTag("first");  
    
70.             first.setGravity(Gravity.CENTER);  
    
71.             first.setBackgroundResource(R.drawable.slidebar);  
    
72.             first.setText(tab1.getText());  
    
73.             View view1=LayoutInflater.from(getApplicationContext()).inflate(R.layout.page1, null);  
    
74.             page.addView(view1);  
    
75.               
    
76.             switch (current) {  
    
77.             case 1:  
    
78.                 layout1.addView(first, rl);  
    
79.                 current = R.id.tab1;  
    
80.                 break;  
    
81.             case 2:  
    
82.                 layout2.addView(first, rl);  
    
83.                 current = R.id.tab2;  
    
84.                 break;  
    
85.             case 3:  
    
86.                 layout3.addView(first, rl);  
    
87.                 current = R.id.tab3;  
    
88.                 break;  
    
89.             case 4:  
    
90.                 layout4.addView(first, rl);  
    
91.                 current = R.id.tab4;  
    
92.                 break;  
    
93.             default:  
    
94.                 break;  
    
95.             }  
    
96.               
    
97.         }  
    
98.       
    
99.          
    
100.         private void replace() {  
     
101.             switch (current) {  
     
102.             case R.id.tab1:  
     
103.                 changeTop(layout1);  
     
104.                 break;  
     
105.             case R.id.tab2:  
     
106.                 changeTop(layout2);  
     
107.                 break;  
     
108.             case R.id.tab3:  
     
109.                 changeTop(layout3);  
     
110.                 break;  
     
111.             case R.id.tab4:  
     
112.                 changeTop(layout4);  
     
113.                 break;  
     
114.             default:  
     
115.                 break;  
     
116.             }  
     
117.         }  
     
118.         private void changeTop(RelativeLayout relativeLayout){  
     
119.             TextView old = (TextView) relativeLayout.findViewWithTag("first");;  
     
120.             select_width = old.getWidth();  
     
121.             select_height = old.getHeight();  
     
122.               
     
123.             RelativeLayout.LayoutParams rl = new RelativeLayout.LayoutParams(select_width, select_height);  
     
124.             rl.leftMargin = old.getLeft() + ((RelativeLayout)old.getParent()).getLeft();  
     
125.             rl.topMargin = old.getTop() + ((RelativeLayout)old.getParent()).getTop();  
     
126.               
     
127.             firstLeft = old.getLeft() + ((RelativeLayout)old.getParent()).getLeft();  
     
128.               
     
129.             TextView tv = new TextView(this);  
     
130.             tv.setTag("move");  
     
131.             tv.setBackgroundResource(R.drawable.slidebar);  
     
132.               
     
133.             layout.addView(tv , rl);  
     
134.             relativeLayout.removeView(old);  
     
135.         }  
     
136.          
     
137.         private OnClickListener onClickListener = new OnClickListener(){  
     
138.             public void onClick(View v) {  
     
139.                 if(!isAdd){  
     
140.                     replace();            
     
141.                     isAdd = true;  
     
142.                 }  
     
143.                   
     
144.                 TextView top_select = (TextView) layout.findViewWithTag("move");  
     
145.                 top_select.setGravity(Gravity.CENTER);  
     
146.                 top_select.setText(tab1.getText());  
     
147.                 int tabLeft;  
     
148.                 int endLeft = 0;  
     
149.                   
     
150.                 boolean run = false;  
     
151.       
     
152.                 switch (v.getId()) {  
     
153.                 case R.id.tab1:  
     
154.                     if (current != R.id.tab1) {  
     
155.                         page.removeAllViews();  
     
156.                         tabLeft = ((RelativeLayout) tab1.getParent()).getLeft() + tab1.getLeft() + tab1.getWidth() / 2;  
     
157.                         endLeft = tabLeft - select_width / 2;  
     
158.                         current = R.id.tab1;  
     
159.                         top_select.setText(tab1.getText());  
     
160.                         run = true;  
     
161.                         View view1=LayoutInflater.from(getApplicationContext()).inflate(R.layout.page1, null);  
     
162.                         page.addView(view1);  
     
163.                     }  
     
164.                     break;  
     
165.                 case R.id.tab2:  
     
166.                     if (current != R.id.tab2) {  
     
167.                         page.removeAllViews();  
     
168.                         tabLeft = ((RelativeLayout) tab2.getParent()).getLeft() + tab2.getLeft() + tab2.getWidth() / 2;  
     
169.                         endLeft = tabLeft - select_width / 2;  
     
170.                         current = R.id.tab2;  
     
171.                         top_select.setText(tab2.getText());  
     
172.                         run = true;  
     
173.                         View view2=LayoutInflater.from(getApplicationContext()).inflate(R.layout.page2, null);  
     
174.                         page.addView(view2);  
     
175.                     }  
     
176.                     break;  
     
177.                 case R.id.tab3:  
     
178.                     if (current != R.id.tab3) {  
     
179.                         page.removeAllViews();  
     
180.                         tabLeft = ((RelativeLayout) tab3.getParent()).getLeft() + tab3.getLeft() + tab3.getWidth() / 2;  
     
181.                         endLeft = tabLeft - select_width/2;  
     
182.                         current = R.id.tab3;  
     
183.                         top_select.setText(tab3.getText());  
     
184.                         run = true;  
     
185.                         View view3=LayoutInflater.from(getApplicationContext()).inflate(R.layout.page3, null);  
     
186.                         page.addView(view3);  
     
187.                     }  
     
188.                     break;  
     
189.                 case R.id.tab4:  
     
190.                     if (current != R.id.tab4) {  
     
191.                         page.removeAllViews();  
     
192.                         tabLeft = ((RelativeLayout) tab4.getParent()).getLeft() + tab3.getLeft() + tab4.getWidth() / 2;  
     
193.                         endLeft = tabLeft - select_width/2;  
     
194.                         current = R.id.tab4;  
     
195.                         top_select.setText(tab4.getText());  
     
196.                         run = true;  
     
197.                         View view4=LayoutInflater.from(getApplicationContext()).inflate(R.layout.page4, null);  
     
198.                         page.addView(view4);  
     
199.                     }  
     
200.                     break;  
     
201.                 default:  
     
202.                     break;  
     
203.                 }  
     
204.                   
     
205.                 if(run){  
     
206.                     TranslateAnimation animation = new TranslateAnimation(startLeft, endLeft - firstLeft, 0, 0);  
     
207.                     startLeft = endLeft - firstLeft;   
     
208.                     animation.setDuration(100);  
     
209.                     animation.setFillAfter(true);  
     
210.                     top_select.bringToFront();  
     
211.                     top_select.startAnimation(animation);  
     
212.                      
     
213.                 }  
     
214.                   
     
215.             }  
     
216.       
     
217.         };  
     
218.     }  

复制代码

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



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


本文章是在我blog首发，也希望大家访问我博客多多交流： http://blog.csdn.net/wangkuifeng0118/article/details/7406240

若果管理员觉得不错希望给加个精，并推荐到头条。


sliderBar.rar