【Android进阶】多抽屉效果 （类似最早QQ使用的效果）

也不知道该怎么取名，暂且就叫他多抽屉效果吧~~  最早QQ就是这样的效果，点一下，还有声音，呵呵。

 

一晃，都过去那么多年了...

 

 

废话不多说了，看下效果：

 

 

 

这个就是类似抽屉的效果，这边做了三个抽屉，点击抽屉既可打开，同时关闭其他抽屉。

 

有人猜到怎么做的了吗？

 

其实很简单，就是三个 TextView + 三个Layout。 关键就在于控制Layout的显示、消失。同时也要注意Layoout的权重值weight。

 

下面看一下代码吧。

 

页面 main.xml :

[c-sharp] view plaincopyprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:orientation="vertical" android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent">  
5.     <TextView android:id="@+id/tv01" android:layout_width="fill_parent"  
6.         android:layout_height="wrap_content" android:text="@string/label1"  
7.         android:background="@drawable/line" android:clickable="true" />  
8.     <LinearLayout android:id="@+id/layout1"  
9.         android:layout_width="fill_parent" android:layout_height="wrap_content"  
10.         android:layout_weight="1">  
11.         <TextView android:layout_width="fill_parent"  
12.             android:layout_height="wrap_content" android:text="内容1" />  
13.     </LinearLayout>  
14.     <TextView android:id="@+id/tv02" android:layout_width="fill_parent"  
15.         android:layout_height="wrap_content" android:text="@string/label2"  
16.         android:background="@drawable/line" android:clickable="true" />  
17.     <LinearLayout android:id="@+id/layout2"  
18.         android:layout_width="fill_parent" android:layout_height="wrap_content"  
19.         android:layout_weight="1">  
20.         <TextView android:layout_width="fill_parent"  
21.             android:layout_height="wrap_content" android:text="内容2" />  
22.     </LinearLayout>  
23.     <TextView android:id="@+id/tv03" android:layout_width="fill_parent"  
24.         android:layout_height="wrap_content" android:text="@string/label2"  
25.         android:background="@drawable/line" android:clickable="true" />  
26.     <LinearLayout android:id="@+id/layout3"  
27.         android:layout_width="fill_parent" android:layout_height="fill_parent"  
28.         android:layout_weight="0">  
29.         <TextView android:layout_width="fill_parent"  
30.             android:layout_height="wrap_content" android:text="内容3" />  
31.     </LinearLayout>  
32. </LinearLayout>  

 

 

Java代码，就一个类：

[java] view plaincopyprint?

1. package com.yfz;  
2. import android.app.Activity;  
3. import android.os.Bundle;  
4. import android.view.View;  
5. import android.widget.LinearLayout;  
6. import android.widget.TextView;  
7. public class QQ extends Activity {  
8.     private TextView tv1;  
9.     private TextView tv2;  
10.     private TextView tv3;  
11.       
12.     private LinearLayout layout1;  
13.     private LinearLayout layout2;  
14.     private LinearLayout layout3;  
15.       
16.     /** Called when the activity is first created. */  
17.     @Override  
18.     public void onCreate(Bundle savedInstanceState) {  
19.         super.onCreate(savedInstanceState);  
20.         setContentView(R.layout.main);  
21.         setupView();  
22.     }  
23.     private void setupView() {  
24.         tv1 =(TextView) findViewById(R.id.tv01);  
25.         tv2 =(TextView) findViewById(R.id.tv02);  
26.         tv3 =(TextView) findViewById(R.id.tv03);  
27.           
28.         layout1 = (LinearLayout)findViewById(R.id.layout1);  
29.         layout2 = (LinearLayout)findViewById(R.id.layout2);  
30.         layout3 = (LinearLayout)findViewById(R.id.layout3);  
31.           
32.         tv1.setOnClickListener(new View.OnClickListener() {  
33.               
34.             @Override  
35.             public void onClick(View v) {  
36.                 layout1.setVisibility(View.VISIBLE);  
37.                 layout2.setVisibility(View.GONE);  
38.                 layout3.setVisibility(View.GONE);  
39.             }  
40.         });  
41.           
42.         tv2.setOnClickListener(new View.OnClickListener() {  
43.               
44.             @Override  
45.             public void onClick(View v) {  
46.                 layout1.setVisibility(View.GONE);  
47.                 layout2.setVisibility(View.VISIBLE);  
48.                 layout3.setVisibility(View.GONE);  
49.             }  
50.         });  
51.           
52.         tv3.setOnClickListener(new View.OnClickListener() {  
53.               
54.             @Override  
55.             public void onClick(View v) {  
56.                 layout1.setVisibility(View.GONE);  
57.                 layout2.setVisibility(View.GONE);  
58.                 layout3.setVisibility(View.VISIBLE);  
59.             }  
60.         });  
61.     }  
62. }  

 

 

Demo程序中考虑将抽屉都放在上面，所以最后一个Layout的权重最高：android:layout_weight="0" ；

另外注意，Layout的android:layout_height属性都必须是wrap_content 。 用fill_parent就没戏啦！

 

如果有人想要讲抽屉放在最下面，那么局部文件需要小改一下。 

1. 换一下TextView 和 Layout的位置

2. 讲最上面的Layout的权重设为最高

 

Demo源码上传后会给出地址。

 

谢谢。