微信门户界面设计

一、功能要求
实现微信门户界面设计。主要展现为四个界面（微信、联系人、发现、设置）可切换的形式。点击界面下方图片文字进行切换，切换到该页面时，相应页面下面图标变亮，字体变色。主要使用布局（layouts）和分段（fragment）。
整个主要分为三块：顶部，底部，中部（中部有四个fragment构成，实现不同界面展示）。
我设计的大致界面：

二、代码
首先是.mxl文件编写，包括top、bottom、四个fragment、activity_main。
调试界面展示出来的效果。
top.xml

bottom.xml

fragment_weixin.xml

fragment_friend.xml

fragment_contact.xml

fragment_config.xml

activity_main.xml

然后是.java文件的编写
weixinFragment.java、friendFragment.java、contactFragment.java、configFragment.java类似（以weixinFragment.java为例）

package com.example.myapplication1;

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

import android.app.Fragment;

public class weixinFragment extends Fragment {
    public weixinFragment(){

    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
        return inflater.inflate(R.layout.fragment_weixin,container,false);

    }
}

MainActivity.java部分实现了界面切换、下标变化、文字变化等功能。

package com.example.myapplication1;

import androidx.appcompat.app.AppCompatActivity;
import android.app.Fragment;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.graphics.Color;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

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 configFragment=new configFragment();

    private TextView textView1;
    private TextView textView2;
    private TextView textView3;
    private TextView textView4;

    private ImageView imageView1;
    private ImageView imageView2;
    private ImageView imageView3;
    private ImageView imageView4;

    private FragmentManager fragmentManager;

    private LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;

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

        linearLayout1=findViewById(R.id.LinerLayout_weixin);
        linearLayout2=findViewById(R.id.LinerLayout_friend);
        linearLayout3=findViewById(R.id.LinerLayout_contact);
        linearLayout4=findViewById(R.id.LinerLayout_config);

        textView1=findViewById(R.id.textView1);
        textView2=findViewById(R.id.textView2);
        textView3=findViewById(R.id.textView3);
        textView4=findViewById(R.id.textView4);
        imageView1=findViewById(R.id.imageView1);
        imageView2=findViewById(R.id.imageView2);
        imageView3=findViewById(R.id.imageView3);
        imageView4=findViewById(R.id.imageView4);

        linearLayout1.setOnClickListener(this);
        linearLayout2.setOnClickListener(this);
        linearLayout3.setOnClickListener(this);
        linearLayout4.setOnClickListener(this);

        initFragment();
    }

    private void initFragment(){
        fragmentManager=getFragmentManager();
        FragmentTransaction transaction=fragmentManager.beginTransaction();
        transaction.add(R.id.content,weixinFragment);
        transaction.add(R.id.content,friendFragment);
        transaction.add(R.id.content,contactFragment);
        transaction.add(R.id.content,configFragment);
        transaction.commit();
    }

    private void hideFragment(FragmentTransaction transaction){
        transaction.hide(weixinFragment);
        transaction.hide(friendFragment);
        transaction.hide(contactFragment);
        transaction.hide(configFragment);
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.LinerLayout_weixin:
                selectFragment(0);
                break;
            case R.id.LinerLayout_friend:
                selectFragment(1);
                break;
            case R.id.LinerLayout_contact:
                selectFragment(2);
                break;
            case R.id.LinerLayout_config:
                selectFragment(3);
                break;
            default:
                break;
        }
    }

    private void ChangeBottom(){
        textView1.setTextColor(Color.BLACK);
        imageView1.setImageResource(R.drawable.imp1);
        textView2.setTextColor(Color.BLACK);
        imageView2.setImageResource(R.drawable.imp3);
        textView3.setTextColor(Color.BLACK);
        imageView3.setImageResource(R.drawable.imp5);
        textView4.setTextColor(Color.BLACK);
        imageView4.setImageResource(R.drawable.imp7);
    }

    private void selectFragment(int i){
        FragmentTransaction transaction=fragmentManager.beginTransaction();
        hideFragment(transaction);
        ChangeBottom();
        switch (i){
            case 0:
                transaction.show(weixinFragment);
                textView1.setTextColor(Color.GREEN);
                imageView1.setImageResource(R.drawable.imp2);
                break;
            case 1:
                transaction.show(friendFragment);
                textView2.setTextColor(Color.GREEN);
                imageView2.setImageResource(R.drawable.imp4);
                break;
            case 2:
                transaction.show(contactFragment);
                textView3.setTextColor(Color.GREEN);
                imageView3.setImageResource(R.drawable.imp6);
                break;
            case 3:
                transaction.show(configFragment);
                textView4.setTextColor(Color.GREEN);
                imageView4.setImageResource(R.drawable.imp8);
                break;
            default:
                break;
        }
        transaction.commit();
    }

}

三、底部图标文字变化部分
我主要通过图片的切换来实现图标变亮、变灰这一过程，通过改变文字的颜色（黑色、绿色转变）来实现文字变亮、变灰的效果。
主要代码为以下部分：

private void ChangeBottom(){
        textView1.setTextColor(Color.BLACK);
        imageView1.setImageResource(R.drawable.imp1);
        textView2.setTextColor(Color.BLACK);
        imageView2.setImageResource(R.drawable.imp3);
        textView3.setTextColor(Color.BLACK);
        imageView3.setImageResource(R.drawable.imp5);
        textView4.setTextColor(Color.BLACK);
        imageView4.setImageResource(R.drawable.imp7);
    }

    private void selectFragment(int i){
        FragmentTransaction transaction=fragmentManager.beginTransaction();
        hideFragment(transaction);
        ChangeBottom();
        switch (i){
            case 0:
                transaction.show(weixinFragment);
                textView1.setTextColor(Color.GREEN);
                imageView1.setImageResource(R.drawable.imp2);
                break;
            case 1:
                transaction.show(friendFragment);
                textView2.setTextColor(Color.GREEN);
                imageView2.setImageResource(R.drawable.imp4);
                break;
            case 2:
                transaction.show(contactFragment);
                textView3.setTextColor(Color.GREEN);
                imageView3.setImageResource(R.drawable.imp6);
                break;
            case 3:
                transaction.show(configFragment);
                textView4.setTextColor(Color.GREEN);
                imageView4.setImageResource(R.drawable.imp8);
                break;
            default:
                break;
        }
        transaction.commit();
    }

四、结果展示
以下展示了微信和设置页面。

五、仓库地址
https://gitee.com/muxinji/windows.git