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

           

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

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

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

      首先是布局layout下的main.xml

[html]  view plain copy

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>  

    下面是核心类，

[html]  view plain copy

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. }  

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

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

    

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