Android Studio实现简单的QQ应用_安卓实验qq项目

一、项目概述

本次项目主要包含了QQ消息、联系人和动态三个选项卡界面的切换，其中消息界面设计的很详细，有消息列表和消息内容，在点击消息对话框后，会跳转到聊天界面，还会把联系人姓名传值过来。联系人和动态的界面就是很简单的两张截图，点击底下的TextView实现切换。

二、开发环境

三、详细设计

1、主界面的搭建

在最外层选择的是LinearLayout布局，里面放置一个FrameLayout，用于显示主体内容。

最底下放置了一个子布局，里面是三个TextView，分别为消息、联系人和动态，三个id分别命名为menu1、menu2、menu3，占比都是1，字体大小相同，都是居中显示。预览图如下：

布局文件的代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="9">
    </FrameLayout>

    <LinearLayout
        android:id="@+id/menu"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.5">
        <TextView
            android:id="@+id/menu1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:background="@drawable/textview_selector"
            android:text="消息"
            android:textSize="30sp"
            android:layout_weight="1"/>
        <View
            android:background="@color/DarkSlateGray"
            android:layout_width="2dp"
            android:layout_height="match_parent" />
        <TextView
            android:id="@+id/menu2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:background="@drawable/textview_selector"
            android:text="联系人"
            android:textSize="30sp"
            android:layout_weight="1"/>
        <View
            android:background="@color/DarkSlateGray"
            android:layout_width="2dp"
            android:layout_height="match_parent" />
        <TextView
            android:id="@+id/menu3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:background="@drawable/textview_selector"
            android:text="动态"
            android:textSize="30sp"
            android:layout_weight="1"/>
    </LinearLayout>

</LinearLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

2、消息界面的搭建

在消息界面的设置中，放置了一个TextView，字体颜色为白色，背景颜色为绿色，用于显示 “ 消息 ” 标题。底下是ListView，用于显示好友列表。预览图如下：

完整代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Frag1"
    android:orientation="vertical">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@color/LimeGreen"
        android:gravity="center"
        android:text="消息"
        android:textColor="#FFFFFF"
        android:textSize="30sp" />

    <ListView
        android:id="@+id/lv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="5dp"/>

</LinearLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

3、联系人界面的搭建

联系人界面展示的是QQ联系人的截图，放在drawable文件夹中引用。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/lxr"></ImageView>

</LinearLayout>
1
2
3
4
5
6
7
8
9
10
11
12

4、动态界面的搭建

同联系人界面，展示的是QQ的动态截图。

5、聊天界面的搭建

本次项目的核心界面，在消息界面中选中一个好友，点进去，就会跳转到此聊天界面。最上面的TextView就是用来显示传递过来的昵称，字体颜色为深青色，背景颜色为天蓝色。下面的ImageView就放置了一张聊天截图，一切从简嘛。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <TextView
        android:id="@+id/name"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:textColor="@color/DarkCyan"
        android:text="永曜之星"
        android:textSize="60dp"
        android:textAlignment="center"
        android:background="@color/SkyBlue"
        android:gravity="center">
    </TextView>

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/lt"/>

</LinearLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

6、跳转功能实现

6.1、选项卡的切换

在MainActivity调用了一个onClick方法，点击选项卡，跳转到不同的activity。

public void onClick(View v) {
        ft=fm.beginTransaction();
        switch(v.getId()){
            case R.id.menu1:
                ft.replace(R.id.content,new frag1());
                break;
            case R.id.menu2:
                ft.replace(R.id.content,new frag2());
                break;
            case R.id.menu3:
                ft.replace(R.id.content,new frag3());
                break;

            default:
                break;
        }
        ft.commit();
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

6.2、消息列表的适配器

主要实现了好友的头像用定义好的icons数组显示，昵称用name数组显示，消息内容用message数组显示。

class MyBaseAdapter extends BaseAdapter{
        @Override
        public int getCount(){
            //返回ListView Item条目代表的对象
            return name.length;
        }
        //得到item的id
        @Override
        public Object getItem(int i){
            return name[i];
        }
        @Override
        public long getItemId(int i){
            return i;
        }
        @Override
        public View getView(int i, View convertView, ViewGroup viewGroup){
        	//获取item中的View视图
            View view=View.inflate(frag1.this.getContext(),R.layout.friend_item, null);
            //初始化view对象的控件
            TextView tv_name=view.findViewById(R.id.item_name);
            TextView tv_message=view.findViewById(R.id.item_message);
            ImageView iv=view.findViewById(R.id.iv);

            tv_name.setText(name[i]);
            tv_message.setText(message[i]);
            iv.setImageResource(icons[i]);
            return view;
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

7、传值的实现

在Chat.java中，先用setContentView方法设置布局文件，接着绑定好声明的TextView，然后获得跳转过来的意图，取出name键对应的value值，然后再用setText方法显示出来。

public class Chat extends AppCompatActivity {
    private TextView tvName;
    @Override
    protected void onCreate(Bundle savedInstanceState){
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_chat);
        //绑定控件
        tvName=findViewById(R.id.name);
        Intent intent=getIntent();
        //取出key对应的value值
        String name=intent.getStringExtra("name");
        tvName.setText(name);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

四、项目效果

1、主界面默认显示为消息界面，显示消息列表。

2、选择好友腾讯并点击，进入聊天界面，好友的昵称也被传递过来。

3、点击联系人选项卡，跳转到联系人界面。

4、点击动态选项卡，跳转到动态界面。

五、项目总结

本次QQ应用项目属于最简单的Android项目之一，主要考验学生对于ListView和intent的使用，对多个页面之间的跳转和传值要熟稔于心，这些知识点在今后的Android项目中会经常使用，熟练掌握上述知识点的使用，可以在此基础上延伸各种项目。项目的drawable文件夹里面的图片都是博主自己的截图，大家下载源码后按照自己的需求换成自己的空间和联系人截图就可以了。

六、项目下载

以下两种方式都可以获取源代码：

---