安卓开发制作微信界面

一，结果展示

二，在activity——main中编写底部界面

三，编写顶部界面

四，编写四个内容区

五，编写MainActivity以及activity_main.xml

六，上传的仓库地址

一，结果展示：

当分别按动底部下方四个按钮时，显示如下界面：

二：在activity_main中编写底部界面

使用LinearLayout布局，布局嵌套，使用水平布局嵌套四个垂直布局

其中一个被嵌套的垂直布局如下所示：

<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:layout_weight="1"
            android:id="@+id/linearLayout1"
            android:orientation="vertical">

            <ImageButton
                android:id="@+id/imageButton1"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_weight="1"
                android:background="@color/cardview_dark_background"
                android:clickable="false"
                tools:ignore="SpeakableTextPresentCheck"

                app:srcCompat="@android:drawable/sym_action_chat" />

            <TextView
                android:id="@+id/textView5"
                android:layout_width="match_parent"
                android:layout_height="30dp"
                android:layout_weight="1"
                android:background="@color/cardview_dark_background"
                android:textColor="@color/white"
                android:gravity="center"
                android:textSize="25dp"
                android:text="微信" />

        </LinearLayout>

 三：编写顶部界面top.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MainActivity"
    android:layout_height="50dp">

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:background="@color/cardview_dark_background"
        android:textColor="@color/white"
        android:textSize="35dp"
        android:text="Wechat" />
</LinearLayout>

四：编写四个内容区

使用Fragment，使之当按动底部四个按纽时，显示各自对应的界面。将四个Fragment界面压缩到主函数界面中，即activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/fragment_chat"
    tools:context=".chatFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="40dp"
        android:textColor="@color/cardview_dark_background"
        android:text="这里是聊天界面哇~~" />

</FrameLayout>

五：编写MainActivity以及activity_main.xml

在activity_main.xml中调用top.xml，使之在一个界面中显示

<include
        android:id="@+id/include"
        layout="@layout/top" />
<!-- 将头部文件加入-->

编写MainActivity

①在主类中创建四个不同的Fragment类，并创建一个FragmentManager管理四个Fragment

 private FragmentManager fm = getSupportFragmentManager();
    //    在主类中创建四个不同的fragment类并命名并创建fragmentmanager类来管理
    private Fragment chat = new chatFragment();
    private Fragment find = new findFragment();
    private Fragment people = new peopleFragment();
    private Fragment me = new meFragment();

②在onCreat函数中使用 findViewById() 获取四个按钮Imagebutton和四个LinearLayout,使用Transaction对四个Fragment加入到一个大的容器进行管理，而且可以进行一系列操作。然后为四个Linearlayout创建监听(注意，在获取之后才可以建立监听)

        initFragment();
//        将获取的fragment加入到主界面
        initImageButton();
//        获取linearlayout以及按钮
        linearLayout1=findViewById(R.id.linearLayout1);
        linearLayout1.setOnClickListener(this::onClick);
        linearLayout2.setOnClickListener(this::onClick);
        linearLayout3.setOnClickListener(this::onClick);
        linearLayout4.setOnClickListener(this::onClick);
        showFragment(0);

//       给linearlayout设置一个点击事件监听器

    }

    private void initImageButton() {
        imageButton1 = findViewById(R.id.imageButton1);
        imageButton2 = findViewById(R.id.imageButton2);
        imageButton3 = findViewById(R.id.imageButton3);
        imageButton4 = findViewById(R.id.imageButton4);
//        在activity获取某按钮就需要该函数
        linearLayout1 = findViewById(R.id.linearLayout1);
        linearLayout2 = findViewById(R.id.linearLayout2);
        linearLayout3 = findViewById(R.id.linearLayout3);
        linearLayout4 = findViewById(R.id.linearLayout4);
    }

    private void initFragment() {
        FragmentTransaction transaction = fm.beginTransaction();
//        fragmentmanager可以对fragment进行一系列操作，这些操作都是通过transaction完成的
        transaction.add(R.id.main_fragment, chat);
        transaction.add(R.id.main_fragment, find);
        transaction.add(R.id.main_fragment, people);
        transaction.add(R.id.main_fragment, me);
//        transaction.add增加的是对应fragment的帧布局，也就是父类的id
        transaction.commit();
    }

③编辑点击事件Onclick

public void onClick(View view)
    {
        FragmentTransaction fragmentTransaction=fm.beginTransaction();
        hideFragment(fragmentTransaction);

        switch (view.getId())
        {
            case R.id.linearLayout1:
                showFragment(0);
                break;
            case R.id.linearLayout2:
                showFragment(1);
                break;
            case R.id.linearLayout3:
                showFragment(2);
                break;
            case R.id.linearLayout4:
                showFragment(3);
                break;
        }

    }

    private void showFragment(int i) {
        FragmentTransaction transaction=fm.beginTransaction();
        hideFragment(transaction);
        switch (i)
        {
            case 0:transaction.show(chat);
                break;
            case 1:transaction.show(find);
                break;
            case 2:transaction.show(people);
                break;
            case 3:transaction.show(me);
                break;
        }
        transaction.commit();
    }

六，上传的仓库地址：

MY PROGRAM_new: My first program我的仓库