類微信界面設計

一、程式運行效果及界面

程式的界面包括上邊框、下邊框和中間的內容，上邊框顯示軟體名“微信”，下邊框內有四個部分，分別為“訊息”、“好友”、“通訊錄”和“設定”，四個部分可以隨意點擊，點擊不同的部分中間的內容也會隨之變化，

二、實作代碼

1.xml檔案界面設計

創建top.xml檔案，制作頂部的邊框，邊框的寬度選擇65dp，背景顏色選擇"#000000"（純黑），center居中，使用一個TextView來顯示文字“微信”，字體大小為30sp，顏色選擇"#ffffff"（純白）

<?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="微信"
        android:textColor="#ffffff"
        android:textSize="30sp" />
</LinearLayout>

創建bottom.xml檔案，制作底部的部分，寬度選擇100dp，背景選擇事先準備好的圖片檔案“bottom_bar.9.png”，使用LinearLayout（選擇垂直樣式vertical）；在LinearLayout中建立圖片按鈕控制元件ImageButton和文字控制元件TextView，圖片選擇事先準備好的相應圖示，TextView中文字對應圖示，例如訊息（其他三個同理，并為每一個LinearLayout、ImageButton和TextView取好相應的id）：

<?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="100dp"
    android:background="@drawable/bottom_bar"
    android:orientation="horizontal"
    android:baselineAligned="false">

    <LinearLayout
        android:id="@+id/id_tab_news"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">


        <ImageButton
            android:id="@+id/id_tab_news_img"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:clickable="false"
            android:background="#000000"
            android:contentDescription="@string/app_name"
            app:srcCompat="@drawable/tab_weixin_pressed" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:text="    訊息"
            android:clickable="false"
            android:textColor="#ffffff"
            android:textSize="30sp" />
    </LinearLayout>
</LinearLayout>

創建tab01.xml、tab02.xml、tab03.xml、tab04.xml檔案，分別制作中間的四個不同界面，由于這四個界面都只有一行文字，因此只需分別使用一個TextView，“bold”加粗字體，例如tab01：

<?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:gravity="center"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="這是微信聊天界面"
        android:textSize="30sp"
        android:textStyle="bold" />
</LinearLayout>

最后activity_main.xml檔案中，將剛剛的top和bottom加入進來，top在最上面，中間用FrameLayout留出空白，bottom在最下面：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".MainActivity">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

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

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

        </FrameLayout>

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

    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

2.class類檔案控制

創建四個Fragment，將剛剛創建的四個tab頁面通過Fragment傳遞到主類，例如newsFragment回傳tab01：

package com.example.mywechat;

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

import androidx.fragment.app.Fragment;


/**
 * A simple {@link Fragment} subclass.
 */
public class newsFragment extends Fragment {

    public newsFragment() {
        // Required empty public constructor
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.tab01, container, false);
    }

}

3.主類

相應模塊以及變數宣告：

package com.example.mywechat;

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

import androidx.appcompat.app.AppCompatActivity;

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.ImageButton;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private LinearLayout mTabweixin;
    private LinearLayout mTabfriend;
    private LinearLayout mTabaddress;
    private LinearLayout mTabsetting;

    private ImageButton mImgweixin;
    private ImageButton mImgfriend;
    private ImageButton mImgaddress;
    private ImageButton mImgsetting;

    private final Fragment mTab01=new newsFragment();//將Tab01傳遞給fragment型別的變數mTab01
    private final Fragment mTab02=new friendFragment();
    private final Fragment mTab03=new addressFragment();
    private final Fragment mTab04=new settingFragment();

    private FragmentManager fragmentManager;

調整頁面的顯示，requestWindowFeature去掉界面上多余的部分，呼叫四個相關的功能函式：

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

        initView();
        initEvent();
        initFragment();
        setSelect(0);
    }

initView( )將bottom中設計的四個部分中的圖示和文字系結，讓用戶不管是點擊圖示還是點擊文字都能跳轉到相應頁面

    private void initView(){
        mTabweixin=(LinearLayout)findViewById(R.id.id_tab_news);
        mTabfriend=(LinearLayout)findViewById(R.id.id_tab_friend);
        mTabaddress=(LinearLayout)findViewById(R.id.id_tab_address);
        mTabsetting=(LinearLayout)findViewById(R.id.id_tab_setting);

        mImgweixin=(ImageButton)findViewById(R.id.id_tab_news_img);
        mImgfriend=(ImageButton)findViewById(R.id.id_tab_friend_img);
        mImgaddress=(ImageButton)findViewById(R.id.id_tab_address_img);
        mImgsetting=(ImageButton)findViewById(R.id.id_tab_setting_img);
    }

initEvent( )控制監聽范圍，只監聽螢屏下方四個部分的點擊行為

    private void initEvent(){
        mTabweixin.setOnClickListener(this);
        mTabfriend.setOnClickListener(this);
        mTabaddress.setOnClickListener(this);
        mTabsetting.setOnClickListener(this);
    }

initFragment( )將Fragment初始化，將四個Fragment放入id_content

    private void initFragment(){
        fragmentManager=getSupportFragmentManager();
        FragmentTransaction transaction=fragmentManager.beginTransaction();
        transaction.add(R.id.id_content,mTab01);
        transaction.add(R.id.id_content,mTab02);
        transaction.add(R.id.id_content,mTab03);
        transaction.add(R.id.id_content,mTab04);
        transaction.commit();
    }

將訊息、好友、通訊錄和設定四個模塊分別標號0、1、2、3，setSelect(int i)在收到 i 的值為0時，顯示mTab01界面，并且將圖示改成tab_news_pressed（圖示未點擊時是灰色，點擊后是綠色），同理，當 i 的值為1、2、3時，也會做相應的改變：

    private void setSelect(int i){
        FragmentTransaction transaction =fragmentManager.beginTransaction();
        hideFragment(transaction);
        switch (i){
            case 0:
                transaction.show(mTab01);
                mImgweixin.setImageResource(R.drawable.tab_news_pressed);
                break;
            case 1:
                transaction.show(mTab02);
                mImgfriend.setImageResource(R.drawable.tab_friend_pressed);
                break;
            case 2:
                transaction.show(mTab03);
                mImgaddress.setImageResource(R.drawable.tab_address_pressed);
                break;
            case 3:
                transaction.show(mTab04);
                mImgsetting.setImageResource(R.drawable.tab_settings_pressed);
                break;
            default:
                break;
        }
        transaction.commit();
    }

hideFragment( )在顯示一個tab界面時，將其他幾個界面隱藏起來

    private void hideFragment(FragmentTransaction transaction){
        transaction.hide(mTab01);
        transaction.hide(mTab02);
        transaction.hide(mTab03);
        transaction.hide(mTab04);
    }

onClick( )對用戶的行為傳遞不同的引數，當用戶點擊訊息部分時，將 0 傳遞給setSelect( )，其他部分同以此類推：

    @SuppressLint("NonConstantResourceId")
    @Override
    public void onClick(View v) {
        resetImgs();
        switch(v.getId()){
            case R.id.id_tab_news:
                setSelect(0);
                break;
            case R.id.id_tab_friend:
                setSelect(1);
                break;
            case R.id.id_tab_address:
                setSelect(2);
                break;
            case R.id.id_tab_setting:
                setSelect(3);
                break;
            default:
                break;
        }
    }

點擊其他圖示后，將之前的圖示變為灰色

    private void resetImgs(){
        mImgweixin.setImageResource(R.drawable.tab_news_normal);
        mImgfriend.setImageResource(R.drawable.tab_friend_normal);
        mImgaddress.setImageResource(R.drawable.tab_address_normal);
        mImgsetting.setImageResource(R.drawable.tab_settings_normal);
    }
}

代碼倉庫地址：https://gitee.com/wyy-52/my-wechat/tree/master