Android studio实现类微信界面

1.需要实现的功能：

• 页面具有标题微信
• 页面具有中间显示框
• 页面具有底部选择框，并且具有选择事件
• 页面底部选择框在进行改变的时候，我们需要中间显示框的页面同步改变
• 页面的布局清晰

效果展示如下

 

 

1.按钮图标文件准备：

这里是从阿里图标库获得的图标，可以自行选择图片格式和大小下载，由于需要做一个类微信界面，所以选择了微信，朋友，通讯录和我四个初始图标还有对应的四个点击按钮之后颜色变化的图标。
图标文件可以通过ctrl+C/V粘贴在res下的drawable文件夹下，注意图片命名不要有空格汉字。

 2.主界面布局

首先可以观察到微信界面分为两部分部分：底部四个按钮，中间部分通过点击会显示不同的界面。
所以我们需要通过res新建两个layout xml文件，底部按钮的bottom.xml文件，包括了底部四个按钮的内容最后再在activity_main.xml文件里引入这些xml文件，中间加入一个FrameLayout开辟出一块空白区域可以自己加一些控件。

bottom_layout.xml内容如下：

<?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="55dp"
    android:background="@color/grey"
    android:orientation="horizontal">
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:layout_gravity="center"
        android:gravity="center"
        android:orientation="vertical"
        android:id="@+id/id_tab_weichat">
        <ImageView
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:background="@drawable/tab_wechat"
            android:id="@+id/tab_iv_wechat">
        </ImageView>
        <TextView
            android:layout_width="32dp"
            android:layout_height="wrap_content"
            android:id="@+id/text_wexin"
            android:gravity="center"
            android:text="微信"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:layout_gravity="center"
        android:gravity="center"
        android:orientation="vertical"
        android:id="@+id/id_tab_contact">
        <ImageView
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:background="@drawable/tab_contact"
            android:id="@+id/tab_iv_contact">
        </ImageView>
        <TextView
            android:layout_width="48dp"
            android:layout_height="wrap_content"
            android:id="@+id/text_contact"
            android:gravity="center"
            android:text="通讯录"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:layout_gravity="center"
        android:gravity="center"
        android:orientation="vertical"
        android:id="@+id/id_tab_find">
        <ImageView
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:background="@drawable/tab_find"
            android:id="@+id/tab_iv_find">
        </ImageView>
        <TextView
            android:layout_width="32dp"
            android:layout_height="wrap_content"
            android:id="@+id/text_find"
            android:gravity="center"
            android:text="发现"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:layout_gravity="center"
        android:gravity="center"
        android:orientation="vertical"
        android:id="@+id/id_tab_profile">
        <ImageView
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:background="@drawable/tab_profile"
            android:id="@+id/tab_iv_profile">
        </ImageView>
        <TextView
            android:layout_width="32dp"
            android:layout_height="wrap_content"
            android:id="@+id/text_profile"
            android:gravity="center"
            android:text="我"/>
    </LinearLayout>
</LinearLayout>

到这里页面按钮设置全部完成。

activity_main.xml配置
LinearLayout设置为vertical，通过include引入底部和头部文件，中间再加一个FrameLayout设置layout_width，layout_height，layout_weight属性。

配置如下：

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <androidx.viewpager2.widget.ViewPager2
        android:layout_height="0dp"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:id="@+id/id_viewpager"/>
    <include layout="@layout/bottom_layout"></include>
</LinearLayout>

这样主界面布局基本完成

3.主程序编写

编写的整体思路就是我们点击不同的按钮，主布局文件里的framelayout能够转换显示不同的界面，所以这里需要新建四个对应的fragment类为了添加显示framelayout的不同布局文件。

主程序代码如下：

package com.example.wechat2;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.viewpager2.widget.ViewPager2;

import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{
    ViewPager2 viewPager;
    private LinearLayout llChat, llContact, llFind, llProfile;
    private ImageView ivChat, ivContact, ivFind, ivProfile, ivCurrent;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initPager();
        initTabView();
    }

    private void initTabView() {
        llChat = findViewById(R.id.id_tab_weichat);
        llChat.setOnClickListener(this);
        llContact = findViewById(R.id.id_tab_contact);
        llContact.setOnClickListener(this);
        llFind = findViewById(R.id.id_tab_find);
        llFind.setOnClickListener(this);
        llProfile = findViewById(R.id.id_tab_profile);
        llProfile.setOnClickListener(this);
        ivChat = findViewById(R.id.tab_iv_wechat);
        ivContact = findViewById(R.id.tab_iv_contact);
        ivFind = findViewById(R.id.tab_iv_find);
        ivProfile = findViewById(R.id.tab_iv_profile);
        ivChat.setSelected(true);
        ivCurrent = ivChat;

    }

    private void initPager() {
        viewPager = findViewById(R.id.id_viewpager);
        ArrayList<Fragment> fragments = new ArrayList<>();
        fragments.add(BlankFragment.newInstance("微信聊天界面"));
        fragments.add(BlankFragment.newInstance("通讯录界面"));
        fragments.add(BlankFragment.newInstance("发现界面"));
        fragments.add(BlankFragment.newInstance("我"));
        MyFragmentPagerAdapter pagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager(),getLifecycle(),fragments);
        viewPager.setAdapter(pagerAdapter);
        viewPager.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                super.onPageScrolled(position, positionOffset, positionOffsetPixels);
            }

            @Override
            public void onPageSelected(int position) {
                super.onPageSelected(position);
                changeTab(position);
            }

            @Override
            public void onPageScrollStateChanged(int state) {
                super.onPageScrollStateChanged(state);
            }
        });
    }

    private void changeTab(int position) {
        ivCurrent.setSelected(false);
        switch (position){
            case  R.id.id_tab_weichat:
                viewPager.setCurrentItem(0);
            case 0:
                ivChat.setSelected(true);
                ivCurrent = ivChat;
                break;
            case  R.id.id_tab_contact:
                viewPager.setCurrentItem(1);
            case 1:
                ivContact.setSelected(true);
                ivCurrent = ivContact;
                break;
            case  R.id.id_tab_find:
                viewPager.setCurrentItem(2);
            case 2:
                ivFind.setSelected(true);
                ivCurrent = ivFind;
                break;
            case  R.id.id_tab_profile:
                viewPager.setCurrentItem(3);
            case 3:
                ivProfile.setSelected(true);
                ivCurrent = ivProfile;
                break;

        }
    }

    @Override
    public void onClick(View view) {
        changeTab(view.getId());

    }
}

4.完整代码如下

完整代码