Android Studio实现简单的QQ应用

一、项目概述

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

二、开发环境android开发工具

Android Studio实现简单的QQ应用

三、详细设计

1、android开发文档主界面的搭建

在最外层选择的是LinearLayout布局,里面放置一个FrameLayoandroid开发ut,用于显示主体内容。

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

Android Studio实现简单的QQ应用

布局文件的代码如下࿱android开发a;

<?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>

2、消息界面的搭建

在消息界面的设置中,放置了android开发环境搭建步骤一个TextViewandroid开发环境的搭建f0c;字体颜色为白色,背android开发者景颜色为绿色,用android开发环境搭建步骤于显示 “ 消息 ” 标题。底下是ListViewandroid开发环境搭建步骤,用于显示好友列表。预览图如下:

完整代码如下:

<?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>

3、联系人界面的搭建

联系人界面展示的是QQ联系人的截图,android开发工具放在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>

4、动态界面的搭建

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

Android Studio实现简单的QQ应用

5、聊天界面的搭建

本次项目的核心界面,在消息界面中选中一个好友,点进去,就会跳转到此聊天界面。

最上面的Texandroid开发tView就是用来显示传递过来的昵称,字体颜色android开发为深青android开发语言色ÿandroid开发工具箱0c;背景颜色为天蓝色。

android开发工具箱面的ImageView就放置了一张聊天截图,一切从简嘛。

Android Studio实现简单的QQ应用

<?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>

6、跳转功能实现

6.1、选项卡的切换

在MainActivity调用了一个onClickandroid开发语言方法,点击选项android开发工具箱卡,跳android开发工程师转到不同的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();
    }

6.2、消息列表的适配器

主要实现了好友的头像用定义好的iconsandroid开发环境的搭建数组显示,昵称用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;
        }
    }

7、传值的实现

在Chat.java中,先用setContentandroid开发框架View方法设置布局文件,接着绑定好声明的TextViewandroid开发语言&#xandroid开发环境搭建步骤ff0c;然后获得跳转过来的意图ÿandroid开发0c;取出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、主界面默认显示为消息界面,显示消息列表。

Android Studio实现简单的QQ应用

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

Android Studio实现简单的QQ应用

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

Android Studio实现简单的QQ应用

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

五、项目总结

本次QQ应用项目主要考验学生对于ListView和intent的使用,对多个页面之间的跳转和传值要熟稔于心,这些知识点在今后的Andandroid开发文档roid项目中会经常使用,熟练掌握上述知识点的使用,可以在此基础上延伸各种项目。

六、项目下载

项目的drawable文件夹里面的图片都是博主自己的截图&android开发文档#xff0c;大家下载下android开发文档来源码后按照自己的需求用自己的空间和联系人截图替换掉我的图片就可以了。