一、项目内容

进行仿微信界面框架设计，包含微信、朋友、联系人、设置四个tab页面，点击相应图标进行切换，且选中图标变为绿色，未选中为灰色。

开发环境：Android Studio、Android SDK 11.0

二、代码实现

1、项目结构

2.头部代码

top.xml，使用LinearLayout布局

<?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="wrap_content"
    android:background="@color/black"
    >

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="My WeChat"
        android:textColor="@color/white"
        android:textSize="30sp" />
</LinearLayout>

3.底部代码

bottom.xml，每个垂直的LinearLayout插入一个ImageView图像与一个TextView文本框

<?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"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <LinearLayout
        android:id="@+id/tab01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/tab01_img"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/weixin_pressed" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="微信" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/tab02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/tab02_img"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/friend" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="朋友" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/tab03"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/tab03_img"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/contact" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="联系人" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/tab04"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/tab04_img"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/setting" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="设置" />
    </LinearLayout>
</LinearLayout>

4.四个内容界面

fragment.xml，以fragment_weixin.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="horizontal"
    tools:context=".weixinFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="50sp"
        android:gravity="center"
        android:text="这是微信界面" />

</LinearLayout>

5.窗体总布局

activity_main.xml，使用include语法将头部top.xml与底部bottom.xml引入。

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

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

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

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

6.MainActivity实现点击图标与页面的互动

在MainActivity中，编写了相应方法，实现了页面显示的初始化、图标点击事件与页面切换的互动、图标变色事件等。

package com.example.weixin;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;

import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    private Fragment weixinFragment = new weixinFragment();
    private Fragment friendFragment = new friendFragment();
    private Fragment contactFragment = new contactFragment();
    private Fragment settingFragment = new settingFragment();

    private FragmentManager fm;

    private LinearLayout tab01,tab02,tab03,tab04;
    private ImageView tab01_img;
    private ImageView tab02_img;
    private ImageView tab03_img;
    private ImageView tab04_img;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        weixinFragment = new weixinFragment();
        friendFragment = new friendFragment();
        contactFragment = new contactFragment();
        settingFragment = new settingFragment();

        tab01 = findViewById(R.id.tab01);
        tab02 = findViewById(R.id.tab02);
        tab03 = findViewById(R.id.tab03);
        tab04 = findViewById(R.id.tab04);

        fm = getSupportFragmentManager();

        initialfragment();
        tab01_img = findViewById(R.id.tab01_img);
        tab02_img = findViewById(R.id.tab02_img);
        tab03_img = findViewById(R.id.tab03_img);
        tab04_img = findViewById(R.id.tab04_img);
        tab01.setOnClickListener(this);
        tab02.setOnClickListener(this);
        tab03.setOnClickListener(this);
        tab04.setOnClickListener(this);
    }
    private void initialfragment(){
        FragmentTransaction transaction = fm.beginTransaction();
        transaction.add(androidx.appcompat.R.id.content,weixinFragment);
        transaction.add(androidx.appcompat.R.id.content,friendFragment);
        transaction.add(androidx.appcompat.R.id.content,contactFragment);
        transaction.add(androidx.appcompat.R.id.content,settingFragment);
        Hide(transaction);
        transaction.show(weixinFragment);
        transaction.commit();
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.tab01: show(1); reset(); tab01_img.setImageResource(R.drawable.weixin_pressed); break;
            case R.id.tab02: show(2); reset(); tab02_img.setImageResource(R.drawable.friend_pressed); break;
            case R.id.tab03: show(3); reset(); tab03_img.setImageResource(R.drawable.contact_pressed); break;
            case R.id.tab04: show(4); reset(); tab04_img.setImageResource(R.drawable.setting_pressed); break;
            default: break;
        }
    }

    private void show(int i) {
        FragmentTransaction transaction = fm.beginTransaction();
        Hide(transaction);
        switch (i){
            case 1:transaction.show(weixinFragment);break;
            case 2:transaction.show(friendFragment);break;
            case 3:transaction.show(contactFragment);break;
            case 4:transaction.show(settingFragment);break;
            default:break;
        }
        transaction.commit();
    }

    private void Hide(FragmentTransaction transaction) {
        transaction.hide(weixinFragment);
        transaction.hide(friendFragment);
        transaction.hide(contactFragment);
        transaction.hide(settingFragment);
    }

    private void reset(){
        tab01_img.setImageResource(R.drawable.weixin);
        tab02_img.setImageResource(R.drawable.friend);
        tab03_img.setImageResource(R.drawable.contact);
        tab04_img.setImageResource(R.drawable.setting);
    }
}