AS中类微信界面设计

1.首先编写xml文件

分析要做一个类似微信的界面，由三部分组成，上面的顶部文件，中间部分的文件和底部的文件

顶部文件的编写

创造一个名为top的XML文件

写入代码

就会做出微信上方的界面

第二步设置底下四个按键部分，要求每按一个按键，就会切换出相应的界面，创建一个bottom的XML文件,在管理图片的文件夹drawable里插入四个灰色图片，分别对应四个按钮灰色状态时的图片

代码 

 然后就是中间界面的编写

创建四个tab的XML文件

微信界面的代码

          android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:layout_weight="1"
        android:text="这是微信聊天界面"
        android:textSize="25sp" />

朋友界面

        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:layout_weight="1"
        android:text="这是朋友界面"
        android:textSize="25sp" />

通讯录界面

        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:layout_weight="1"
        android:text="这是通讯录界面"
        android:textSize="25sp" />

设置界面

        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:layout_weight="1"
        android:text="这是设置界面"
        android:textSize="25sp" />

 再是activity_main.xml里需要加上frameLayout(重叠布局)和include

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

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

    

界面如下

创造其余四个JAVA文件

用来调用四个界面

 WeChatBlankFragment代码

package com.example.mywork;

import android.os.Bundle;

import android.app.Fragment;

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


public class WeChatBlankFragment 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 WeChatBlankFragment() {
        // Required empty public constructor
    }

    
    // TODO: Rename and change types and number of parameters
    public static WeChatBlankFragment newInstance(String param1, String param2) {
        WeChatBlankFragment fragment = new WeChatBlankFragment();
        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.tab, container, false);
    }
}

 SettingBlankFragment代码

package com.example.mywork;

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

import android.app.Fragment;


public class SettingBlankFragment 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 SettingBlankFragment() {
        // Required empty public constructor
    }

    
    // TODO: Rename and change types and number of parameters
    public static SettingBlankFragment newInstance(String param1, String param2) {
        SettingBlankFragment fragment = new SettingBlankFragment();
        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.tab4, container, false);
    }
}

FrdBlankFragment 代码

package com.example.mywork;

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

import android.app.Fragment;


public class FrdBlankFragment 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 FrdBlankFragment() {
        // Required empty public constructor
    }

    
    // TODO: Rename and change types and number of parameters
    public static FrdBlankFragment newInstance(String param1, String param2) {
        FrdBlankFragment fragment = new FrdBlankFragment();
        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.tab2, container, false);
    }
}

BlankFragment代码

package com.example.mywork;

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

import android.app.Fragment;


public class BlankFragment 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 BlankFragment() {
        // Required empty public constructor
    }

    
    // TODO: Rename and change types and number of parameters
    public static BlankFragment newInstance(String param1, String param2) {
        BlankFragment fragment = new BlankFragment();
        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.tab3, container, false);
    }
}

最后设置MainActivity中的代码，在管理图片的drawable中插入四个绿色图片，作为点击之后变绿的界面

package com.example.mywork;

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

import android.os.Bundle;
import android.util.Log;
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 mTabfrd;
    private LinearLayout mTabcontact;
    private LinearLayout mTabsetting;

    private ImageButton mImgWeixin;
    private ImageButton mImgFrd;
    private ImageButton mImgcontact;
    private ImageButton mImgSettings;

    private Fragment mTab05;
    private Fragment mTab01 = new WeChatBlankFragment();
    private Fragment mTab02 = new FrdBlankFragment();
    private Fragment mTab03 = new BlankFragment();
    private Fragment mTab04 = new SettingBlankFragment();

    private FragmentManager fm;

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

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

    private void initFragment(){
        //fragment的切换
        fm = getFragmentManager();
        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 initEvent(){
        mTabweixin.setonClickListener(this);
        mTabfrd.setonClickListener(this);
        mTabcontact.setonClickListener(this);
        mTabsetting.setonClickListener(this);
    }

    private void initView() {
        //改变图标的颜色
        mTabweixin = (LinearLayout)findViewById(R.id.id_tab_weixin);
        mTabfrd = (LinearLayout)findViewById(R.id.id_tab_frd);
        mTabcontact = (LinearLayout)findViewById(R.id.id_tab_contact);
        mTabsetting = (LinearLayout)findViewById(R.id.id_tab_settings);

        mImgWeixin = (ImageButton)findViewById(R.id.id_tab_weixin_img);
        mImgFrd = (ImageButton) findViewById(R.id.id_tab_frd_img);
        mImgcontact = (ImageButton)findViewById(R.id.id_tab_contact_img);
        mImgSettings = (ImageButton)findViewById(R.id.id_tab_settings_img);
    }

    private void selectfragment(int i){
        //显示选中界面的内容，选中界面图标为绿色
        FragmentTransaction transaction = fm.beginTransaction();
        hideFragment(transaction);
        switch (i){
            case 0:
                Log.d("setSelect","1");
                transaction.show(mTab01);
                mImgWeixin.setImageResource(R.drawable.weixin1);
                break;
            case 1:
                transaction.show(mTab02);
                mImgFrd.setImageResource(R.drawable.penyou1);
                break;
            case 2:
                transaction.show(mTab03);
                mImgcontact.setImageResource(R.drawable.tongxunlu1);
                break;
            case 3:
                transaction.show(mTab04);
                mImgSettings.setImageResource(R.drawable.shezhi1);
                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 view) {
        //监听函数，监听到底是哪一个图标被击中从而显示哪一个界面的内容
        resetimg();
        switch (view.getId()){
            case R.id.id_tab_weixin:
                selectfragment(0);
                break;
            case R.id.id_tab_frd:
                selectfragment(1);
                break;
            case R.id.id_tab_contact:
                selectfragment(2);
                break;
            case R.id.id_tab_settings:
                selectfragment(3);
                break;
        }
    }

    public void resetimg(){
        //没有使用的界面的图标为灰色
        mImgWeixin.setImageResource(R.drawable.weixin);
        mImgFrd.setImageResource(R.drawable.penyou);
        mImgcontact.setImageResource(R.drawable.tongxunlu);
        mImgSettings.setImageResource(R.drawable.shezhi);
    }
}

 源码GitHub的地址：
链接: https://github.com/GODFF556/MyWechat.