Android UI开发第六篇——仿QQ的滑动Tab

代码下载地址：http://www.devdiv.com/thread-101454-1-1.html

使用了ActivityGroup。

1. public class MainActivity extends ActivityGroup { 
2.  
3.  
4.  
5.  
6.      private RelativeLayout layout; 
7.  
8.      
9.  
10.      private RelativeLayout layout1; 
11.  
12.      private RelativeLayout layout2; 
13.  
14.      private RelativeLayout layout3; 
15.  
16.      
17.  
18.      private RelativeLayout bodylayout; 
19.  
20.      
21.  
22.      private ImageView tab1; 
23.  
24.      private ImageView tab2; 
25.  
26.      private ImageView tab3; 
27.  
28.      
29.  
30.      private ImageView first; 
31.  
32.      private int current = 1; //默认选中第一个，可以动态的改变此参数值 
33.  
34.      
35.  
36.      public void onCreate(Bundle savedInstanceState) { 
37.  
38.          super.onCreate(savedInstanceState); 
39.  
40.          setContentView(R.layout.main); 
41.  
42.          initUI(); 
43.  
44.      } 
45.  
46.      
47.  
48.      private void initUI(){ 
49.  
50.          layout = (RelativeLayout) findViewById(R.id.root); 
51.  
52.          
53.  
54.          layout1 = (RelativeLayout) findViewById(R.id.layout1); 
55.  
56.          layout2 = (RelativeLayout) findViewById(R.id.layout2); 
57.  
58.          layout3 = (RelativeLayout) findViewById(R.id.layout3); 
59.  
60.          bodylayout = (RelativeLayout) findViewById(R.id.bodylayout); 
61.  
62.          
63.  
64.          tab1 = (ImageView) findViewById(R.id.tab1); 
65.  
66.          tab1.setOnClickListener(onClickListener); 
67.  
68.          tab2 = (ImageView) findViewById(R.id.tab2); 
69.  
70.          tab2.setOnClickListener(onClickListener); 
71.  
72.          tab3 = (ImageView) findViewById(R.id.tab3); 
73.  
74.          tab3.setOnClickListener(onClickListener); 
75.  
76.          
77.  
78.          RelativeLayout.LayoutParams rl = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); 
79.  
80.          rl.addRule(RelativeLayout.CENTER_IN_PARENT, RelativeLayout.TRUE); 
81.  
82.          first = new ImageView(this); 
83.  
84.          first.setTag("first"); 
85.  
86.          first.setImageResource(R.drawable.topbar_select); 
87.  
88.          
89.  
90.          // 默认选中项 
91.  
92.          switch (current) { 
93.  
94.          case 1: 
95.  
96.              layout1.addView(first, rl); 
97.  
98.              current = R.id.tab1; 
99.  
100.              break; 
101.  
102.          case 2: 
103.  
104.              layout2.addView(first, rl); 
105.  
106.              current = R.id.tab2; 
107.  
108.              break; 
109.  
110.          case 3: 
111.  
112.              layout3.addView(first, rl); 
113.  
114.              current = R.id.tab3; 
115.  
116.              break; 
117.  
118.          default: 
119.  
120.              break; 
121.  
122.          } 
123.  
124.          View view = getLocalActivityManager().startActivity("index", 
125.  
126.                  new Intent(MainActivity.this, Tab1.class)) 
127.  
128.                  .getDecorView(); 
129.  
130.          bodylayout.addView(view); 
131.  
132.          
133.  
134.      } 
135.  
136.  
137.  
138.  
139.      private boolean isAdd = false; // 是否添加过 top_select 
140.  
141.      private int select_width; // top_select_width 
142.  
143.      private int select_height; // top_select_height 
144.  
145.      private int firstLeft; // 第一次添加后的左边距***** 
146.  
147.      private int startLeft; // 起始左边距 
148.  
149.      
150.  
151.      // 添加一个view，移除一个view 
152.  
153.      private void replace() { 
154.  
155.          switch (current) { 
156.  
157.          case R.id.tab1: 
158.  
159.              changeTop(layout1); 
160.  
161.              break; 
162.  
163.          case R.id.tab2: 
164.  
165.              changeTop(layout2); 
166.  
167.              break; 
168.  
169.          case R.id.tab3: 
170.  
171.              changeTop(layout3); 
172.  
173.              break; 
174.  
175.          default: 
176.  
177.              break; 
178.  
179.          } 
180.  
181.      } 
182.  
183.      
184.  
185.      private void changeTop(RelativeLayout relativeLayout){ 
186.  
187.          ImageView old = (ImageView) relativeLayout.findViewWithTag("first");; 
188.  
189.          select_width = old.getWidth(); 
190.  
191.          select_height = old.getHeight(); 
192.  
193.          
194.  
195.          RelativeLayout.LayoutParams rl = new RelativeLayout.LayoutParams(select_width, select_height); 
196.  
197.          rl.leftMargin = old.getLeft() + ((RelativeLayout)old.getParent()).getLeft(); 
198.  
199.          rl.topMargin = old.getTop() + ((RelativeLayout)old.getParent()).getTop(); 
200.  
201.          
202.  
203.          // 获取起始位置 
204.  
205.          firstLeft = old.getLeft() + ((RelativeLayout)old.getParent()).getLeft(); 
206.  
207.          
208.  
209.          ImageView iv = new ImageView(this); 
210.  
211.          iv.setTag("move"); 
212.  
213.          iv.setImageResource(R.drawable.topbar_select); 
214.  
215.          
216.  
217.          layout.addView(iv , rl); 
218.  
219.          relativeLayout.removeView(old); 
220.  
221.      } 
222.  
223.      
224.  
225.      private OnClickListener onClickListener = new OnClickListener(){ 
226.  
227.          public void onClick(View v) { 
228.  
229.              if(!isAdd){ 
230.  
231.                  replace(); // 初次使用移除old 添加新的top_select为RelativeLayout所使用 
232.  
233.                  isAdd = true; 
234.  
235.              } 
236.  
237.              
238.  
239.              ImageView top_select = (ImageView) layout.findViewWithTag("move"); 
240.  
241.              int tabLeft; 
242.  
243.              int endLeft = 0; 
244.  
245.              
246.  
247.              boolean run = false; 
248.  
249.  
250.  
251.  
252.              switch (v.getId()) { 
253.  
254.              case R.id.tab1: 
255.  
256.                  if (current != R.id.tab1) { 
257.  
258.                      // 中心位置 
259.  
260.                      tabLeft = ((RelativeLayout) tab1.getParent()).getLeft() + tab1.getLeft() + tab1.getWidth() / 2; 
261.  
262.                      // 最终位置 
263.  
264.                      endLeft = tabLeft - select_width / 2; 
265.  
266.                      current = R.id.tab1; 
267.  
268.                      run = true; 
269.  
270.                      bodylayout.removeAllViews(); 
271.  
272.                      View view = getLocalActivityManager().startActivity("index", 
273.  
274.                              new Intent(MainActivity.this, Tab1.class)) 
275.  
276.                              .getDecorView(); 
277.  
278.                      bodylayout.addView(view); 
279.  
280.                  } 
281.  
282.                  break; 
283.  
284.              case R.id.tab2: 
285.  
286.                  if (current != R.id.tab2) { 
287.  
288.                      tabLeft = ((RelativeLayout) tab2.getParent()).getLeft() + tab2.getLeft() + tab2.getWidth() / 2; 
289.  
290.                      endLeft = tabLeft - select_width / 2; 
291.  
292.                      current = R.id.tab2; 
293.  
294.                      run = true; 
295.  
296.                      bodylayout.removeAllViews(); 
297.  
298.                      View view = getLocalActivityManager().startActivity("index", 
299.  
300.                              new Intent(MainActivity.this, Tab2.class)) 
301.  
302.                              .getDecorView(); 
303.  
304.                      bodylayout.addView(view); 
305.  
306.                  } 
307.  
308.                  break; 
309.  
310.              case R.id.tab3: 
311.  
312.                  if (current != R.id.tab3) { 
313.  
314.                      tabLeft = ((RelativeLayout) tab3.getParent()).getLeft() + tab3.getLeft() + tab3.getWidth() / 2; 
315.  
316.                      endLeft = tabLeft - select_width/2; 
317.  
318.                      current = R.id.tab3; 
319.  
320.                      run = true; 
321.  
322.                      bodylayout.removeAllViews(); 
323.  
324.                      View view = getLocalActivityManager().startActivity("index", 
325.  
326.                              new Intent(MainActivity.this, Tab3.class)) 
327.  
328.                              .getDecorView(); 
329.  
330.                      bodylayout.addView(view); 
331.  
332.                  } 
333.  
334.                  break; 
335.  
336.              default: 
337.  
338.                  break; 
339.  
340.              } 
341.  
342.              
343.  
344.              if(run){ 
345.  
346.                  TranslateAnimation animation = new TranslateAnimation(startLeft, endLeft - firstLeft, 0, 0); 
347.  
348.                  startLeft = endLeft - firstLeft; // 重新设定起始位置 
349.  
350.                  animation.setDuration(400); 
351.  
352.                  animation.setFillAfter(true); 
353.  
354.                  top_select.bringToFront(); 
355.  
356.                  top_select.startAnimation(animation); 
357.  
358.              } 
359.  
360.              
361.  
362.          } 
363.  
364.  
365.  
366.  
367.      }; 
368.  
369.  
370.  
371.  
372. } 

1. <?xml version="1.0" encoding="utf-8"?> 
2.  
3. <RelativeLayout  
4.  
5.      xmlns:android="http://schemas.android.com/apk/res/android" 
6.  
7.      android:id="@+id/root" 
8.  
9.      android:layout_width="fill_parent"  
10.  
11.      android:layout_height="fill_parent"  
12.  
13.      > 
14.  
15.      <LinearLayout  
16.  
17.          android:orientation="vertical" 
18.  
19.          android:layout_width="fill_parent"  
20.  
21.          android:layout_height="fill_parent"  
22.  
23.          android:background="@drawable/default_bg" 
24.  
25.          > 
26.  
27.          <LinearLayout  
28.  
29.              android:orientation="horizontal" 
30.  
31.              android:layout_width="fill_parent"  
32.  
33.              android:layout_height="fill_parent"  
34.  
35.              android:layout_weight="6.0" 
36.  
37.              > 
38.  
39.              <RelativeLayout  
40.  
41.                  android:id="@+id/layout1" 
42.  
43.                  android:layout_width="fill_parent"  
44.  
45.                  android:layout_height="wrap_content"  
46.  
47.                  android:layout_weight="1.0" 
48.  
49.                  android:layout_gravity="center_vertical" 
50.  
51.                  > 
52.  
53.                  <ImageView 
54.  
55.                      android:id="@+id/tab1" 
56.  
57.                      android:layout_width="wrap_content"  
58.  
59.                      android:layout_height="wrap_content"  
60.  
61.                      android:src="@drawable/tab1" 
62.  
63.                      android:layout_centerInParent="true" 
64.  
65.                      /> 
66.  
67.              </RelativeLayout> 
68.  
69.              <RelativeLayout  
70.  
71.                  android:id="@+id/layout2" 
72.  
73.                  android:layout_width="fill_parent"  
74.  
75.                  android:layout_height="wrap_content"  
76.  
77.                  android:layout_weight="1.0" 
78.  
79.                  android:layout_gravity="center_vertical" 
80.  
81.                  > 
82.  
83.                  <ImageView 
84.  
85.                      android:id="@+id/tab2" 
86.  
87.                      android:layout_width="wrap_content"  
88.  
89.                      android:layout_height="wrap_content"  
90.  
91.                      android:src="@drawable/tab2" 
92.  
93.                      android:layout_centerInParent="true" 
94.  
95.                      /> 
96.  
97.              </RelativeLayout> 
98.  
99.              <RelativeLayout  
100.  
101.                  android:id="@+id/layout3" 
102.  
103.                  android:layout_width="fill_parent"  
104.  
105.                  android:layout_height="wrap_content"  
106.  
107.                  android:layout_weight="1.0" 
108.  
109.                  android:layout_gravity="center_vertical" 
110.  
111.                  > 
112.  
113.                  <ImageView 
114.  
115.                      android:id="@+id/tab3" 
116.  
117.                      android:layout_width="wrap_content"  
118.  
119.                      android:layout_height="wrap_content"  
120.  
121.                      android:src="@drawable/tab3" 
122.  
123.                      android:layout_centerInParent="true" 
124.  
125.                      /> 
126.  
127.              </RelativeLayout> 
128.  
129.          </LinearLayout> 
130.  
131.          <RelativeLayout  
132.  
133.              android:orientation="horizontal" 
134.  
135.              android:layout_width="fill_parent"  
136.  
137.              android:layout_height="fill_parent"  
138.  
139.              android:layout_weight="1.0" 
140.  
141.              android:background="#ffffff" 
142.  
143.              android:gravity="center" 
144.  
145.              android:id="@+id/bodylayout" 
146.  
147.              > 
148.  
149.              
150.  
151.          </RelativeLayout> 
152.  
153.      </LinearLayout> 
154.  
155. </RelativeLayout>