一、设计目标

根据课程教学内容完成类微信的门户页面框架设计。

要求：

1.类微信APP最少必须包含四个可切换界面：微信、通讯录、发现、我；

2.上方栏标题居中，界面中间显示内容，内容随下方栏的选择而切换；

3.下方栏可点击切换，点击过的界面的图标为绿色，没有点击的界面的图标为灰色；

4..框架设计需要使用fragment，activity，不得使用UNIAPP技术进行开发。

二、功能说明

我设计的类微信界面主要包括三个部分

1.top.xml文件，设置一个LinearLayout布局器存放TextView组件。

2.fragment.java文件，通过相关代码实现内容切换。

3.bottom.xml文件，设置一个LinearLayout布局器，再在其中设置四个小LinearLayout布局器，每个小LinearLayout布局器中TextView对应文字，ImageView对应图标

三、代码解析

1.xml文件界面设计

top.xml文件，制作顶部的边框。使用一个TextView来显示文字“MyWeChat”

<?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="65dp"
    android:gravity="center"
    android:background="#000000"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="MyWeChat"
        android:textColor="#ffffff"
        android:textSize="20sp" />
</LinearLayout>

bottom.xml文件，制作底部的部分。图标文件夹粘贴到drawable，在LinearLayout中选择事先准备好的图片，其中TextView对应文字，ImageView对应图标。

<?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:id="@+id/tab_bottom"
    android:layout_width="match_parent"
    android:layout_height="70dp"
    android:background="@color/white"
    android:gravity="center">

    <LinearLayout
        android:id="@+id/tab_chat"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:clickable="true"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView_chat"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/chat" />

        <TextView
            android:id="@+id/textView_chat"
            android:layout_width="match_parent"
            android:layout_height="60sp"
            android:layout_weight="1"
            android:gravity="center"
            android:text="微信"
            android:textColor="@color/black"
            android:textSize="24sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/id_tab_contacts"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:clickable="true"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView_contacts"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/contacts" />

        <TextView
            android:id="@+id/textView_contacts"
            android:layout_width="match_parent"
            android:layout_height="60sp"
            android:layout_weight="1"
            android:gravity="center"
            android:text="微信"
            android:textColor="@color/black"
            android:textSize="24sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/id_tab_discover"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:clickable="true"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView_discover"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/discover" />

        <TextView
            android:id="@+id/textView_discover"
            android:layout_width="match_parent"
            android:layout_height="60sp"
            android:layout_weight="1"
            android:gravity="center"
            android:text="微信"
            android:textColor="@color/black"
            android:textSize="24sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/id_tab_me"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:clickable="true"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView_me"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/me" />

        <TextView
            android:id="@+id/textView_me"
            android:layout_width="match_parent"
            android:layout_height="60sp"
            android:layout_weight="1"
            android:gravity="center"
            android:text="微信"
            android:textColor="@color/black"
            android:textSize="24sp" />
    </LinearLayout>
</LinearLayout>

四个tab界面存放内容

tap_chat.xml

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

    <TextView
        android:id="@+id/textView6"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:text="这是微信聊天界面"
        android:textSize="50sp" />
</LinearLayout>

tap_contacts.xml

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

    <TextView
        android:id="@+id/textView6"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:text="这是微信通讯录界面"
        android:textSize="50sp" />
</LinearLayout>

tap_discover.xml

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

    <TextView
        android:id="@+id/textView6"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:text="这是微信发现界面"
        android:textSize="50sp" />
</LinearLayout>

tap_me.xml

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

    <TextView
        android:id="@+id/textView6"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:text="这是微信我的界面"
        android:textSize="50sp" />
</LinearLayout>

activity_main.xml文件,导入设置好的top.xml和bottom.xml文件

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

    <include layout="@layout/top" />

    <FrameLayout
        android:id="@+id/id_contet"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">
    </FrameLayout>

    <include layout="@layout/bottom" />
</LinearLayout>

2.四个Fragment子类

ChatFragment

package com.example.myapplication;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import android.app.Fragment;

public class ChatFragment extends Fragment {



    public ChatFragment() {
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.tap_chat,container,false);
//        return null;
    }
}

ContactsFragment

package com.example.myapplication;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import android.app.Fragment;

public class ContactsFragment extends Fragment {



    public ContactsFragment() {
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.tap_contacts,container,false);
//        return null;
    }
}

DiscoverFragment

package com.example.myapplication;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import android.app.Fragment;

public class DiscoverFragment extends Fragment {



    public DiscoverFragment() {
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.tap_discover,container,false);
//        return null;
    }
}

MeFragment

package com.example.myapplication;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import android.app.Fragment;

public class MeFragment extends Fragment {



    public MeFragment() {
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.tap_me,container,false);
//        return null;
    }
}

?????????????????????3.MainActivity主类

package com.example.myapplication;
import static com.example.myapplication.R.*;

import androidx.appcompat.app.AppCompatActivity;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.app.Fragment;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;


public class MainActivity extends AppCompatActivity
//        implements View.OnClickListener
{
    //创建Fragment对象
    private final Fragment weixinFragment = new ChatFragment();
    private final Fragment xinwenFragment = new DiscoverFragment();
    private final Fragment lianxirenFragment = new ContactsFragment();
    private final Fragment shezhiFragment = new MeFragment();

    //底端菜单栏LinearLayout
    private LinearLayout linear_chat;
    private LinearLayout linear_contacts;
    private LinearLayout linear_discover;
    private LinearLayout linear_me;

    //底端菜单栏中的Imageview
    private ImageView imageView_chat;
    private ImageView imageView_contacts;
    private ImageView imageView_discover;
    private ImageView imageView_me;

    //底端菜单栏中的TextView
    private TextView textView_chat;
    private TextView textView_contacts;
    private TextView textView_discover;
    private TextView textView_me;

    //初始化fragment
    public void initFragment(){
        fm = getFragmentManager();
        FragmentTransaction transaction = fm.beginTransaction();
        transaction.add(id.id_contet,weixinFragment);
        transaction.add(id.id_contet,lianxirenFragment);
        transaction.add(id.id_contet,xinwenFragment);
        transaction.add(id.id_contet,shezhiFragment);

        transaction.commit();
    }

    public void initView(){
        //初始化底端菜单栏中的LinearLayout
        linear_chat = findViewById(id.tab_chat);
        linear_contacts = findViewById(id.id_tab_contacts);
        linear_discover = findViewById(id.id_tab_discover);
        linear_me = findViewById(id.id_tab_me);

        //初始化底端菜单栏中的Imageview
        imageView_chat = findViewById(id.imageView_chat);
        imageView_contacts = findViewById(id.imageView_contacts);
        imageView_discover = findViewById(id.imageView_discover);
        imageView_me = findViewById(id.imageView_me);

        //初始化底端菜单栏中的TextView
        textView_chat = findViewById(id.textView_chat);
        textView_contacts = findViewById(id.textView_contacts);
        textView_discover = findViewById(id.textView_discover);
        textView_me = findViewById(id.textView_me);
    }



    private FragmentManager fm;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(layout.activity_main);

        initFragment();
        initView();

        //默认开启的时候展示微信聊天的界面
        showFragment(0);
        //将聊天界面的图标和文字进行相应的修改(变绿)
        imageView_chat.setImageResource(drawable.chat_changed);
        textView_chat.setTextColor(getResources().getColor(color.black));

        //设置底部第一个LinearLayout的click事件监听器
        imageView_chat.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View view) {
                //复原底部的TextView和ImageView
                restartButton();
                //展示第一个fragment界面
                showFragment(0);
                //修改图表为对应的变绿的图标
                imageView_chat.setImageResource(drawable.chat_changed);
                //修改文字变绿
                textView_chat.setTextColor(getResources().getColor(color.black));
            }
        });
        //设置底部第二个LinearLayout的click事件监听器
        linear_contacts.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                restartButton();
                showFragment(1);
                imageView_contacts.setImageResource(drawable.contacts_changed);
                textView_contacts.setTextColor(getResources().getColor(color.black));
            }
        });
        //设置底部第三个LinearLayout的click事件监听器
        linear_discover.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                restartButton();
                showFragment(2);
                imageView_discover.setImageResource(drawable.discover_changed);
                textView_discover.setTextColor(getResources().getColor(color.black));
            }
        });
        //设置底部第四个LinearLayout的click事件监听器
        linear_me.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                restartButton();
                showFragment(3);
                imageView_me.setImageResource(drawable.me_changed);
                textView_me.setTextColor(getResources().getColor(color.black));
            }
        });

    }

    private void restartButton(){
        //复原底部第一个LinearLayout的TextView和ImageView的状态
        imageView_chat.setImageResource(drawable.chat);
        textView_chat.setTextColor(getResources().getColor(color.black));
        //复原底部第二个LinearLayout的TextView和ImageView的状态
        imageView_contacts.setImageResource(drawable.contacts);
        textView_contacts.setTextColor(getResources().getColor(color.black));
        //复原底部第三个LinearLayout的TextView和ImageView的状态
        imageView_discover.setImageResource(drawable.discover);
        textView_discover.setTextColor(getResources().getColor(color.black));
        //复原底部第四个LinearLayout的TextView和ImageView的状态
        imageView_me.setImageResource(drawable.me);
        textView_me.setTextColor(getResources().getColor(color.black));
    }

    private void hideFragment(FragmentTransaction transaction){
        //用于隐藏四个fragment界面
        transaction.hide(weixinFragment);
        transaction.hide(lianxirenFragment);
        transaction.hide(xinwenFragment);
        transaction.hide(shezhiFragment);
    }

    private void showFragment(int i) {
        FragmentTransaction transaction = fm.beginTransaction();
        hideFragment(transaction);
        //点击不同的区域就会对应不同的显示
        switch (i){
            case 0:
                transaction.show(weixinFragment);
                break;
            case 1:
                transaction.show(lianxirenFragment);
                break;
            case 2:
                transaction.show(xinwenFragment);
                break;
            case 3:
                transaction.show(shezhiFragment);
                break;
            default:
                break;
        }
        //提交本次操作
        transaction.commit();
    }
}