Android Studio實現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: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項目中會經常使用，因此希望大家能夠熟練掌握上述知識點的使用，方便後續開發項目。

你人生的每一步都必須靠自己的能力完成,自己肚子沒有料，手上沒本事，認識再多的人也沒用。人脈只能給你機會，但抓住機會還是要靠真本事。所以啊，提升自己，比到處逢迎別人更重要。 ​​​​