高仿网易资讯顶部滑动条效果

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

?

???????????

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

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

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

????

?

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