用AS实现微信界面设计

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

设计目标

提示：这里可以添加本文要记录的大概内容：

通过使用AS控件结合虚拟机来实现微信界面设计，使用控件有TextView，FrameLayout，Linerlayout，imageView，并通过fragment.java(4个java文件对应4个fragment界面)，MainActivity.java来实现。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、结果展示

bottom.xml

chat.xml（剩余3个fragment.xml类似）

top.xml

activity_main.xml

虚拟机上结果

二、top.xml

微信界面顶部标题

代码如下（示例）：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    >

    <TextView
        android:id="@+id/textView5"
        android:layout_width="414dp"
        android:layout_height="57dp"
        android:background="#426F42"
        android:orientation="vertical"
        android:text="微信界面设计"
        android:gravity="center"
        android:textColor="#ffffff"
        app:layout_constraintTop_toTopOf="parent"
        tools:layout_editor_absoluteX="2dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

三、bottom.xml

在Linerlayout下添加4个linerlayout布局对应的4个textview

代码如下（示例）：

<?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:id="@+id/Linerlayout"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:background="@color/white"
    tools:context=".MainActivity"

    >

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView5"
            android:layout_width="match_parent"
            android:layout_height="51dp"
            app:srcCompat="@android:drawable/sym_action_chat" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="103dp"
            android:layout_height="63dp"
            android:gravity="center"
            android:text="聊天"
            android:textColor="@color/black"
            android:textSize="24sp" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayout2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView6"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="@android:drawable/btn_radio" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="match_parent"
            android:layout_height="65dp"
            android:gravity="center"
            android:text="看点"
            android:textColor="@color/black"
            android:textSize="24sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayout3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView7"
            android:layout_width="103dp"
            android:layout_height="50dp"
            app:srcCompat="@android:drawable/ic_menu_add" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="match_parent"
            android:layout_height="63dp"
            android:gravity="center"
            android:text="设置"
            android:textColor="@color/black"
            android:textSize="24sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayout4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView8"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            app:srcCompat="@android:drawable/sym_action_call" />

        <TextView
            android:id="@+id/textView"
            android:layout_width="match_parent"
            android:layout_height="66dp"
            android:gravity="center"
            android:text="联系人"
            android:textColor="@color/black"
            android:textSize="24sp" />

    </LinearLayout>

</LinearLayout>

---

四、4个fragment.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"
    tools:context=".Fragment1">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:textSize="50sp"
        android:text="这是聊天界面" />

</FrameLayout>

看点界面

<?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"
    tools:context=".Fragment2">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="50sp"
        android:layout_weight="1"
        android:text="这是看点界面" />

</FrameLayout>

设置界面

<?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"
    tools:context=".Fragment3">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="50sp"
        android:text="这是设置界面" />

</FrameLayout>

联系人界面

<?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"
    tools:context=".Fragment4">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="50sp"
        android:text="这是联系界面" />

</FrameLayout>

五、activity_main.xml

将top.xml，bottom.xml和4个fragment.xml结合起来

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

    <include
        layout="@layout/top"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />


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

    </FrameLayout>

    <include
        layout="@layout/bottom"
        android:gravity="bottom" />

</LinearLayout>

六、java文件

fragment.java文件（剩余3个类似）

package com.example.myapplication;

import android.os.Bundle;

import android.app.Fragment;

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


public class Fragment1 extends Fragment {
    public Fragment1() {
        // Required empty public constructor
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.chat, container, false);
    }
}

MainActivity.java文件

package com.example.myapplication;
import androidx.appcompat.app.AppCompatActivity;
import android.app.Fragment;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.LinearLayout;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private Fragment fragment1=new Fragment1();
    private Fragment fragment2=new Fragment2();
    private Fragment fragment3=new Fragment3();
    private Fragment fragment4=new Fragment4();
    private FragmentManager fragmentManager;
    private LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        linearLayout1=findViewById(R.id.linearLayout1);
        linearLayout2=findViewById(R.id.linearLayout2);
        linearLayout3=findViewById(R.id.linearLayout3);
        linearLayout4=findViewById(R.id.linearLayout4);

        linearLayout1.setOnClickListener(this);
        linearLayout2.setOnClickListener(this);
        linearLayout3.setOnClickListener(this);
        linearLayout4.setOnClickListener(this);

        initFragment();
    }

    private void initFragment(){
        fragmentManager=getFragmentManager();
        FragmentTransaction transaction=fragmentManager.beginTransaction();
        transaction.add(R.id.id_content,fragment1);
        transaction.add(R.id.id_content,fragment2);
        transaction.add(R.id.id_content,fragment3);
        transaction.add(R.id.id_content,fragment4);
        hideFragment(transaction);
        transaction.commit();
    }


    private void hideFragment(FragmentTransaction transaction){
        transaction.hide(fragment1);
        transaction.hide(fragment2);
        transaction.hide(fragment3);
        transaction.hide(fragment4);
    }
    private void background(View v) {
        switch (v.getId()) {
            case R.id.linearLayout1:
                linearLayout1.setBackgroundColor(Color.parseColor("#426F42"));
                break;
            case R.id.linearLayout2:
                linearLayout2.setBackgroundColor(Color.parseColor("#426F42"));
                break;
            case R.id.linearLayout3:
                linearLayout3.setBackgroundColor(Color.parseColor("#426F42"));
                break;
            case R.id.linearLayout4:
                linearLayout4.setBackgroundColor(Color.parseColor("#426F42"));
                break;
            default:
                break;
        }
    }

    private void backgroundreturn(View v) {
        switch (v.getId()) {
            case R.id.linearLayout1:
                linearLayout1.setBackgroundColor(Color.parseColor("#426F42"));
                break;
            case R.id.linearLayout2:
                linearLayout2.setBackgroundColor(Color.parseColor("#426F42"));
                break;
            case R.id.linearLayout3:
                linearLayout3.setBackgroundColor(Color.parseColor("#426F42"));
                break;
            case R.id.linearLayout4:
                linearLayout4.setBackgroundColor(Color.parseColor("#426F42"));
                break;
            default:
                break;
        }
    }

    private void showfragmnet(int i) {

        FragmentTransaction transaction=fragmentManager.beginTransaction();
        hideFragment(transaction);
        switch (i){
            case 0:
                transaction.show(fragment1);
                background(linearLayout1);
                backgroundreturn(linearLayout3);
                backgroundreturn(linearLayout2);
                backgroundreturn(linearLayout4);
                break;
            case 1:
                transaction.show(fragment2);
                background(linearLayout2);
                backgroundreturn(linearLayout4);
                backgroundreturn(linearLayout1);
                backgroundreturn(linearLayout3);
                break;
            case 2:
                transaction.show(fragment3);
                background(linearLayout3);
                backgroundreturn(linearLayout4);
                backgroundreturn(linearLayout2);
                backgroundreturn(linearLayout1);
                break;
            case 3:
                transaction.show(fragment4);
                background(linearLayout4);
                backgroundreturn(linearLayout1);
                backgroundreturn(linearLayout2);
                backgroundreturn(linearLayout3);
                break;
            default:
                break;
        }
        transaction.commit();
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.linearLayout1:
                showfragmnet(0);
                break;
            case R.id.linearLayout2:
                showfragmnet(1);
                break;
            case R.id.linearLayout3:
                showfragmnet(2);
                break;
            case R.id.linearLayout4:
                showfragmnet(3);
                break;
            default:
                break;
        }
    }

}

总结

通过这次实验，我学会了如何布局和使用AS中的相关空间，以及结合所学的java知识来编写，还学会了使用提示器通过提示器来快速使用所需要的函数。在编写MainActivity.java时遇到了些许问题，比如如何实现当点击一个控件时只显示该控件的界面，这里需要编写隐藏函数，当点击事件发生时隐藏其余界面。通过这次实验，知道了自己的不足之处要想有进步则需花时间认真完成。

仓库

https://gitee.com/liupeng321/gitee-liupeng