Android studio 微信界面设计

一、微信界面的功能

1、可展示出四个可切换界面：微信、联系人、朋友圈、设置；
2、上方栏标题居中，界面中间显示内容，内容随下方栏的选择而切换，下方栏可点击切换，点击过的界面的图标为绿色，没有点击的界面的图标为灰色；
3.主要从top、bottom、中间布局以及MainActivity四个方面分析。

二、top布局

在res->layout新建top.xml文件，将将标题栏的内容居中，并将背景色调为黑色，文字调为白色。

三、bottom布局

1.将图标文件夹粘贴到drawable中；
2.在res文件夹的layout中新建bottom.xml，拖入TextView拖入ImageButton后会调用drawable，选取所需的图标；
3.复制粘贴四个并调整水平平铺布局

四、中间布局

四个tab.xml分别对应四个界面的中间内容，此处以微信界面为例。

五、activity_main.xml

activity_main.xml里面需要加上FragmentLayout（重叠布局）和include

六、MainActivity

实现fragment的切换、图标颜色的改变、隐藏未使用界面等功能

package com.example.mywork;


import android.app.Activity;
import android.os.Bundle;
import android.view.Window;
import android.view.View;
import android.app.FragmentManager;
import android.app.Fragment;
import android.app.FragmentTransaction;
import android.widget.ImageButton;
import android.widget.LinearLayout;


public class MainActivity extends Activity implements View.OnClickListener{
    private Fragment mTab01=new weixinFragment();
    private Fragment mTab02=new lianxirenFragment();
    private Fragment mTab03=new pengyouquanFragment();
    private Fragment mTab04=new shezhiFragment();

    private FragmentManager fm;

    LinearLayout mTabWechat;
    LinearLayout mTabFriend;
    LinearLayout mTabContact;
    LinearLayout mTabSettings;

    ImageButton mimgWechat;
    ImageButton mimgFriend;
    ImageButton mimgContact;
    ImageButton mimgSettings;

    @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 initEvent(){
        mTabWechat.setOnClickListener(this);
        mTabFriend.setOnClickListener(this);
        mTabContact.setOnClickListener(this);
        mTabSettings.setOnClickListener(this);
    }
    private void initFragment(){
        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 initView(){
        mTabWechat=findViewById(R.id.LinearLayout_weixin);
        mTabFriend = findViewById(R.id.LinearLayout_lianxiren);
        mTabContact = findViewById(R.id.LinearLayout_pengyouquan);
        mTabSettings = findViewById(R.id.LinearLayout_shezhi);

        mimgWechat = findViewById(R.id.id_tab_wechat_image);
        mimgFriend = findViewById(R.id.id_tab_friend_image);
        mimgContact = findViewById(R.id.id_tab_contact_image);
        mimgSettings = findViewById(R.id.id_tab_settings_image);
    }
    private void hideFragment(FragmentTransaction transaction){
        transaction.hide(mTab01);
        transaction.hide(mTab02);
        transaction.hide(mTab03);
        transaction.hide(mTab04);
    }
    private void resetImgs(){
        mimgWechat.setImageResource(R.drawable.p1);
        mimgFriend.setImageResource(R.drawable.p2);
        mimgContact.setImageResource(R.drawable.p3);
        mimgSettings.setImageResource(R.drawable.p4);
    }
    private void selectfragment(int i){
        FragmentTransaction transaction=fm.beginTransaction();
        hideFragment(transaction);
        switch (i){
            case 0:
                transaction.show(mTab01);
                mimgWechat.setImageResource(R.drawable.p1_press);
                break;
            case 1:
                transaction.show(mTab02);
                mimgFriend.setImageResource(R.drawable.p2_press);
                break;
            case 2:
                transaction.show(mTab03);
                mimgContact.setImageResource(R.drawable.p3_press);
                break;
            case 3:
                transaction.show(mTab04);
                mimgSettings.setImageResource(R.drawable.p4_press);
                break;
            default:
                break;
        }
        transaction.commit();
    }
    public void onClick(View v){
        resetImgs();
        switch (v.getId()){
            case R.id.LinearLayout_weixin:
                selectfragment(0);
                break;
            case R.id.LinearLayout_lianxiren:
                selectfragment(1);
                break;
            case R.id.LinearLayout_pengyouquan:
                selectfragment(2);
                break;
            case R.id.LinearLayout_shezhi:
                selectfragment(3);
                break;

        }
    }
}

七、其余文件 1、weixinFragment

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 weixinFragment extends Fragment {

    private static final String ARG_PARAM1 = "param1";
    private static final String ARG_PARAM2 = "param2";

    private String mParam1;
    private String mParam2;

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

        
        // 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.fragment_weixin, container, false);
        }
    }

2、lianxirenFragment

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 lianxirenFragment extends Fragment {

    private static final String ARG_PARAM1 = "param1";
    private static final String ARG_PARAM2 = "param2";

    private String mParam1;
    private String mParam2;

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

    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.fragment_lianxiren, container, false);
    }
}

3、pengyouquanFragment

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 pengyouquanFragment extends Fragment {

    private static final String ARG_PARAM1 = "param1";
    private static final String ARG_PARAM2 = "param2";

    private String mParam1;
    private String mParam2;

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

    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.fragment_pengyouquan, container, false);
    }
}

4、shezhiFragment

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 shezhiFragment extends Fragment {
    private static final String ARG_PARAM1 = "param1";
    private static final String ARG_PARAM2 = "param2";

    private String mParam1;
    private String mParam2;

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

    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.fragment_shezhi, container, false);
    }
}

八、运行界面

![请添加图片描述](https://img-blog.csdnimg.cn/36da37bffea847c1a1a334c85a532370.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5Y-95q2q5q2q5Y-9,size_16,color_FFFFFF,t_70,g_se,x_16

源码GitHub地址：
链接: https://github.com/Tsundere12/Mywork01.git

Android studio 微信界面设计

Java相关栏目本月热门文章