Android Studio实现简单的QQ应用

Android项目大全 专栏收录该内容
23 篇文章 46 订阅

一、项目概述

本次项目主要包含了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:text="消息"
            android:textSize="25sp"
            android:layout_weight="1"/>
        <TextView
            android:id="@+id/menu2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="联系人"
            android:textSize="25sp"
            android:layout_weight="1"/>
        <TextView
            android:id="@+id/menu3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="动态"
            android:textSize="25sp"
            android:layout_weight="1"/>
    </LinearLayout>

</LinearLayout>

2、消息界面的搭建

在消息界面的设置中,最上面是一个子LinearLayout(线性布局),左侧放置头像ImageView,右侧是TextView,用于显示用户昵称。

接着放置了一个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">

    <LinearLayout
        android:id="@+id/img"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#00BCD4">

        <ImageView
            android:id="@+id/head"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="@drawable/head"/>
        <TextView
            android:id="@+id/num"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:textSize="25sp"
            android:gravity="bottom"/>
    </LinearLayout>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:background="#8BC34A"
        android:gravity="center"
        android:text="消息"
        android:textColor="#FFFFFF"
        android:textSize="28sp" />

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

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>

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/It_name"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:textColor="#000000"
        android:textSize="60dp"
        android:textAlignment="center"
        android:background="#8BC34A"
        android:gravity="center_horizontal">
    </TextView>

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

</LinearLayout>

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();
    }

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

7、传值的实现

在check.java中,先用setContentView方法设置好布局文件,接着将声明好的TextView也就是tv_name和activity_check中的It_name进行绑定,完了之后就是声明意图intent,取出key对应的value值,获取name,然后再用setText方法显示出来。

public class check extends AppCompatActivity {
    private TextView tv_name;
    @Override
    protected void onCreate(Bundle savedInstanceState){
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_check);
        tv_name=findViewById(R.id.It_name);
        Intent intent=getIntent();
        //取出key对应的value值
        String name=intent.getStringExtra("name");
        tv_name.setText(name);
    }
}

四、项目效果

1、主界面默认显示为消息界面,显示消息列表。
在这里插入图片描述

2、选择好友腾讯并点击,进入聊天界面,好友的昵称也被传递过来。
在这里插入图片描述

3、点击联系人选项卡,跳转到联系人界面。
在这里插入图片描述

4、点击动态选项卡,跳转到动态界面。
在这里插入图片描述

五、项目总结

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

六、项目下载

项目的drawable文件夹里面的图片都是博主自己截取的,大家下载下来源码后按照自己的需求用自己的截图替换掉就可以了,在博主的公众号里面回复:QQ应用,即可获取源码,还有很多Android项目等你来学习,还等什么,加入我们吧。
在这里插入图片描述


🚀这有你错过的精彩内容

你人生的每一步都必须靠自己的能力完成,自己肚子没有料,手上没本事,认识再多的人也没用。人脉只能给你机会,但抓住机会还是要靠真本事。所以啊,提升自己,比到处逢迎别人更重要。 ​​​​

©️2021 CSDN 皮肤主题: 程序猿惹谁了 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值