类微信界面编写

界面展示

界面要求是有微信，朋友，通讯录，设置四个界面，若点击其中一个按键，被点中按键变绿，其余变灰，并且每个按钮会显示不同的界面（文字）

如下图所示

代码

于是我们有了一个大致的布局想法，首先是顶部的top，然后中间的文本界面，最后就是底部的按钮。

top

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

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_weight="1"
        android:text="@string/app_name"
        android:textColor="#ffffff"
        android:textSize="30sp" />
</LinearLayout>

framelayout

中间最为复杂，因为涉及四个界面的切换，我们这里将四个界面融合在一起
先设置四个tab01，tab02等四个xml文件，编辑文本

在java文件夹下面new四个fragment文件一一对应

package com.example.mywechat;//wxfragment对应tab01，后面依次对应

import android.os.Bundle;

import androidx.fragment.app.Fragment;

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

/**
 * A simple {@link Fragment} subclass.
 * Use the {@link weixinFragment#newInstance} factory method to
 * create an instance of this fragment.
 */
public class weixinFragment extends Fragment {

    // TODO: Rename parameter arguments, choose names that match
    // the fragment initialization parameters, e.g. ARG_ITEM_NUMBER
    private static final String ARG_PARAM1 = "param1";
    private static final String ARG_PARAM2 = "param2";

    // TODO: Rename and change types of parameters
    private String mParam1;
    private String mParam2;

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

    /**
     * Use this factory method to create a new instance of
     * this fragment using the provided parameters.
     *
     * @param param1 Parameter 1.
     * @param param2 Parameter 2.
     * @return A new instance of fragment weixinFragment.
     */
    // TODO: Rename and change types and number of parameters
    public static weixinFragment newInstance(String param1, String param2) {
        weixinFragment fragment = new weixinFragment();
        Bundle args = new Bundle();
        args.putString(ARG_PARAM1, param1);
        args.putString(ARG_PARAM2, param2);
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null) {
            mParam1 = getArguments().getString(ARG_PARAM1);
            mParam2 = getArguments().getString(ARG_PARAM2);
        }
    }

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

button

需要设置四个按钮，但是按钮下方还需要文字，于是配置四个LinearLayout，上图下字

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


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

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

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

            android:textColor="#ffffff"
            android:clickable="false"
            android:textSize="20dp" />

    </LinearLayout>

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

        <ImageButton
            android:id="@+id/id_tab_frd.img"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/background_dark"
            android:contentDescription="@string/app_name"
            android:clickable="false"
            app:srcCompat="@drawable/frd" />

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

            android:textColor="#ffffff"
            android:clickable="false"
            android:textSize="20dp" />

    </LinearLayout>

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

        <ImageButton
            android:id="@+id/id_tab_con.img"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/background_dark"
            android:contentDescription="@string/app_name"
            android:clickable="false"
            app:srcCompat="@drawable/lxr" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="通讯录"

            android:textColor="#ffffff"
            android:clickable="false"
            android:textSize="20dp" />

    </LinearLayout>

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

        <ImageButton
            android:id="@+id/id_tab_setting.img"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/background_dark"
            android:contentDescription="@string/app_name"
            android:clickable="false"
            app:srcCompat="@drawable/set" />

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

            android:textColor="#ffffff"
            android:clickable="false"
            android:textSize="20dp" />

    </LinearLayout>
</LinearLayout>

总体布局

使用include来使界面达到我们想要的样子，最上显示top，中间显示文本界面，最下面显示bottum

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

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

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

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

主函数

package com.example.mywechat;

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

import android.app.Activity;
import android.util.Log;
import android.view.View;
import  android.view.Window;
import android.os.Bundle;
import android.widget.ImageButton;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
//若把AppCompatActivity改为Activity会导致下面的getSupportFragmentManager报错
    private Fragment mTab01 = new weixinFragment();
    private Fragment mTab02 = new frdFragment();
    private Fragment mTab03 = new contactFragment();
    private Fragment mTab04 = new settingFragment();

    private LinearLayout mTabWeixin;
    private LinearLayout mTabFrd;
    private LinearLayout mTabAddress;
    private LinearLayout mTabSettings;
    private ImageButton mImgWeixin;
    private ImageButton mImgFrd;
    private ImageButton mImgAddress;
    private ImageButton mImgSettings;

    private FragmentManager fm;



    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //this.requestWindowFeature(Window.FEATURE_NO_TITLE);设置无标题但是会导致闪退，于是使用下面代码代替
        if (getSupportActionBar() != null){
            getSupportActionBar().hide();
        }
        initView();
        initFragment();
        initEvent();
        setSelect(0);


    }

    private void initFragment(){
        fm = getSupportFragmentManager();
        FragmentTransaction transaction=fm.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();
    }

    private void initView(){
        mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);
        mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);
        mTabAddress = (LinearLayout) findViewById(R.id.id_tab_con);
        mTabSettings = (LinearLayout) findViewById(R.id.id_tab_setting);
        mImgWeixin = (ImageButton) findViewById(R.id.id_tab_wx_img);
        mImgFrd = (ImageButton) findViewById(R.id.id_tab_frd_img);
        mImgAddress = (ImageButton) findViewById(R.id.id_tab_con_img);
        mImgSettings = (ImageButton) findViewById(R.id.id_tab_setting_img);}

    private  void setSelect(int i){
    //点击哪个按钮，就显示哪个界面的文本，同时将按钮变为绿色
        FragmentTransaction transaction=fm.beginTransaction();
        hideFragment(transaction);//其余置灰
        switch (i){
            case 0:
            
                transaction.show(mTab01);
                mImgWeixin.setImageResource(R.drawable.gwx);
                break;
            case 1:

                transaction.show(mTab02);
                mImgFrd.setImageResource(R.drawable.gfr);
                break;
            case 2:

                transaction.show(mTab03);
                mImgAddress.setImageResource(R.drawable.glxr);
                break;
            case 3:

                transaction.show(mTab04);
                mImgSettings.setImageResource(R.drawable.gset);
                break;
            default:
                break;
        }
        transaction.commit();
    }
    private void hideFragment(FragmentTransaction transaction)
        {transaction.hide (mTab01);
         transaction.hide (mTab02);
         transaction.hide (mTab03);
         transaction.hide (mTab04);}

    @Override
    public void onClick(View v) {
    //点击整个layout布局，都可以用来切换
        //Log.d("onClick","1");
        resetImgs();
        switch (v.getId()){
            case R.id.id_tab_weixin:
                setSelect(0);
                break;
            case R.id.id_tab_frd:
                setSelect(1);
                break;
            case R.id.id_tab_con:
                setSelect(2);
                break;
            case R.id.id_tab_setting:
                setSelect(3);
                break;
            default:
                break;
        }
    }

    private void initEvent(){
        mTabWeixin.setOnClickListener(this);
        mTabFrd.setOnClickListener(this);
        mTabAddress.setOnClickListener(this);
        mTabSettings.setOnClickListener(this);}

    private void resetImgs(){
        mImgWeixin.setImageResource(R.drawable.wx);
        mImgFrd.setImageResource(R.drawable.frd);
        mImgAddress.setImageResource (R.drawable.lxr);
        mImgSettings.setImageResource(R.drawable.set);

    }
    }

gitee

源代码上传至gitee：https://gitee.com/cold-rivers/Mywechat