Android初学之类微信门户页面设计与开发

一、设计要求及功能

1、设计一个app的门户框架，实现3-4个tab切换效果；本功能要求需要的技术为：activity、xml、fragment

2、在任一tab页中实现列表效果；本功能的实现需要使用recycleview；

二、界面分析

主界面分为上中下三个部分，顶端使用top.xml,底部使用bottom.xml，中间部分由4个fragment页面叠加，在bottom点击时进行页面切换。

最后我选择在联系人界面采用 recycleview控件去实现列表效果。

三、界面布局代码展示

主函数文件MainActivity.java

窗体总布局的activity_main.xml

顶端top.xml

底部bottom.xml

中间四个分页面fragment.xml

四个分页面fragment.xml对应的.java文件

item.xml文件，用来存放RecycleView的TextView

自定义设配器adapter.java，用来将list内容适配到recycleview中

XML文件代码：

顶端top.xml

创建top.xml文件，使用LinearLayout布局，内嵌TextView设置app名称。

<?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="60dp"
    android:background="@color/black"
    android:gravity="center"
    android:orientation="vertical">


    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:gravity="center"
        android:text="微信"
        android:textColor="@color/white"
        android:textSize="30sp" />

</LinearLayout>

底部bottom.xml

创建bottom.xml文件，外层使用LinearLayout垂直布局（android:gravity属性可以定义布局内控件的对齐方式，居中、水平居中和垂直居中），内层使用LinearLayout水平布局，内嵌四个导行按钮（android:orientation属性可以定义布局内控件的排列方式，一般有水平式和垂直式），分别对应聊天，联系人，发现和设置（此处仅展示“聊天”的界面设计，另外三个相似）

<?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="wrap_content"
    android:orientation="horizontal"
    android:gravity="bottom"
    android:baselineAligned="false">
    <LinearLayout
        android:id="@+id/linear_layout1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:onClick="onClick"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView12"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:clickable="false"
            android:src="@mipmap/ic_launcher" />

        <TextView
            android:id="@+id/textView13"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:text="微信"
            android:textColor="@color/black"
            android:textSize="20sp" />


    </LinearLayout>

fragment1：chat.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="match_parent">

    <TextView
        android:id="@+id/textView3"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:layout_gravity="center"
        android:text="这是聊天界面"
        android:textSize="40sp" />

</LinearLayout>

fragment2：contacts.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="match_parent"
    android:orientation="vertical">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/RecyclerView2"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

fragment3：find.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="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView3"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:text="这是发现界面"
        android:textSize="40sp" />

</LinearLayout>

fragment4:setting.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="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView3"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:text="这是设置界面"
        android:textSize="40sp" />

</LinearLayout>

activity_main.xml

包含top、container、bottom三个部分id，用 include 语句导入顶端和底部导航栏两个xml文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    tools:context=".MainActivity1">

    <include layout="@layout/top"   />

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

    <include
        android:id="@+id/bottom"
        layout="@layout/bottom" />
</LinearLayout>

item.xml

item.xml主要为recycleview实现文本的显示

<?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="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView21"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@color/white"
        android:textColor="@color/black"
        android:gravity="center"
        android:text="TextView"
        android:textSize="40sp" />

</LinearLayout>

Java文件代码：

ActivityMain.java

(进行点击监听，实现点击的界面转变)

package com.example.myapplication;

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

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

import com.example.myapplication.databinding.ActivityMain1Binding;
public class MainActivity1 extends AppCompatActivity {
    ActivityMain1Binding activityMain1Binding;
    Fragment chat, contacts, find, setting;
    FragmentManager fragmentManager;
    FragmentTransaction fragmentTransaction;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main1);
        activityMain1Binding = ActivityMain1Binding.inflate(getLayoutInflater());
        View view = activityMain1Binding.getRoot();
        setContentView(view);
        chat = new chat();
        contacts = new contacts();
        find = new find();
        setting = new setting();
        fragmentManager = getSupportFragmentManager();
        fragmentTransaction = fragmentManager.beginTransaction().show(chat);

        inntial();
        fragmentTransaction.commit();

        activityMain1Binding.bottom.linearLayout1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                fragmentHide();
                fragmentTransaction = fragmentManager.beginTransaction().show(chat);
                fragmentTransaction.commit();
            }
        });

        activityMain1Binding.bottom.linearLayout2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                fragmentHide();
                fragmentTransaction = fragmentManager.beginTransaction().show(contacts);
                fragmentTransaction.commit();
            }
        });

        activityMain1Binding.bottom.linearLayout3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                fragmentHide();
                fragmentTransaction = fragmentManager.beginTransaction().show(find);
                fragmentTransaction.commit();
            }
        });

        activityMain1Binding.bottom.linearLayout4.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                fragmentHide();
                fragmentTransaction = fragmentManager.beginTransaction().show(setting);
                fragmentTransaction.commit();
            }
        });
private void fragmentHide() {
        FragmentTransaction ft = fragmentManager.beginTransaction()
                .hide(chat)
                .hide(contacts)
                .hide(find)
                .hide(setting);
        ft.commit();

    }

    private void inntial() {
        FragmentTransaction ft = fragmentManager.beginTransaction()
                .add(R.id.content, chat)
                .add(R.id.content, contacts)
                .add(R.id.content, find)
                .add(R.id.content, setting);
        ft.commit();
        fragmentHide();

    }

}

chat.java

package com.example.myapplication;

import android.os.Bundle;

import androidx.fragment.app.Fragment;

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

public class chat extends Fragment {


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {

        return inflater.inflate(R.layout.chat,container,false);
    }
}

contacts.java

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

import androidx.fragment.app.Fragment;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import java.util.ArrayList;
import java.util.List;

public class contacts extends Fragment {

    Context context;
    RecyclerView recyclerView;
    View view;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        view = inflater.inflate(R.layout.contacts,container,false);
        recyclerView = view.findViewById(R.id.RecyclerView2);

        List<String> contacts = new ArrayList<>();
        contacts.add("小新");
        contacts.add("汤姆");
        contacts.add("杰瑞");
        //contacts.add("...");
        Myadapter myadapter = new Myadapter(getContext(),contacts);
        recyclerView.setAdapter(myadapter);

        LinearLayoutManager manager = new LinearLayoutManager(getContext());
        manager.setOrientation(LinearLayoutManager.VERTICAL);

        recyclerView.setLayoutManager(manager);
        return view;
    }
}

find.java

(因只在联系人页面实现列表效果，其他三个页面为展示更多功能。此处代码与chat.java相同）

setting.java

（同上）

MyAdapter.java

package com.example.myapplication;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import java.util.List;

public class Myadapter extends RecyclerView.Adapter<Myadapter.Myholder> {
    List<String> list1;
    Context context1;
    public Myadapter( Context context,List<String> list) {
        context1 = context;
        list1 = list;
    }

    @NonNull
    @Override
    public Myholder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(context1).inflate(R.layout.item,parent,false);
        Myholder myholder = new Myholder(view);
        myholder.setIsRecyclable(false);
        return new Myholder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull Myadapter.Myholder holder, int position) {
        holder.textView.setText(list1.get(position));
    }

    @Override
    public int getItemCount() {
        return list1.size();
    }

     class Myholder extends RecyclerView.ViewHolder {
        TextView textView;
        public Myholder(@NonNull View itemView) {
            super(itemView);
            textView = itemView.findViewById(R.id.textView21);
        }
    }

}

四、效果展示

五、小结：

        在Android Studio中设计和实现了一个简单的A类微信门户界面。该界面包括一个顶部导航栏和一个底部导航栏，以及一个中间的片段区域，可以隐藏和切换不同的图层。当用户点击菜单时，会切换到不同的界面。
        顶部导航栏包含了一个TextView，显示了应用的名称底部导航栏包含了多个按钮，分别对应不同的功能模块。
        在中间的片段区域，使用了LinearLayout布局，将不同的图层隐藏和切换。通过使用Fragment组件，可以在不同界面之间进行切换。
        在实现点击事件方面，使用了OnClickListener接口，为按钮编写了点击事件。在菜单点击时，会切换到不同的界面。此外，还使用了RecycleView组件，通过自己编写的MyAdapter进行适配，实现了列表显示的功能。可以显示不同类型的数据，并且可以响应点击事件。

具体代码已上传 https://gitee.com/yjwl102/as_app_ui_1/tree/master/AS%20Project1