类微信界面设计 v1.0

• • 一、程序运行效果及界面
  • 二、实现代码
  • • 1.xml文件界面设计
    • 2.class类文件控制
    • 3.主类

一、程序运行效果及界面

程序的界面包括上边框、下边框和中间的内容，上边框显示软件名“微信”，下边框内有四个部分，分别为“消息”、“好友”、“通讯录”和“设置”，四个部分可以随意点击，点击不同的部分中间的内容也会随之变化。

二、实现代码

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;



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