Android界面篇【仿QQ的滑动Tab】

 

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

使用了ActivityGroup。

[java]  view plain copy print ?

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

 

[html]  view plain copy print ?

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>