Android Studio-App门户页面设计与开发

一、设计目标

设计一个app的门户框架，能够实现4个tab页面的切换效果。
能够在任一tab页面中实现列表效果。

二、功能说明

设计一个类微信界面，主要分为上中下三个部分，通过下方按钮实现“聊天”、“联系人”、“发现”以及“设置”这四个页面的切换，并在“聊天”页面中实现列表功能。

三、效果展示

Android Studio-App门户页面设计与开发

四、技术说明

Activity：
Activity 是 Android 应用程序中的一个基本组件，它提供了一个用户界面。每个 Activity 都有一个布局文件，用于定义其用户界面。Activity 可以通过 Intent 启动其他 Activity，也可以接收其他 Activity 发送的 Intent。
XML：
XML 是一种标记语言，用于描述数据。在 Android 应用程序中，XML 通常用于定义用户界面，用来编写布局文件。
Fragment：
Fragment 是 Android 应用程序中的另一个基本组件，它可以嵌入到 Activity 中。Fragment 可以有自己的布局文件和生命周期，可以在运行时添加、删除或替换。
RecyclerView：
RecyclerView 是 Android 应用程序中的一个高级控件，用于显示大量数据列表。与 ListView 不同，RecyclerView 允许自定义列表项的布局和交互方式，并提供了更好的性能和灵活性。

五、设计流程

主页面布局activity_main1.xml

主页面布局分为上中下三个部分，顶部由top.xml文件实现，因为需要切换四个页面，所以中间的内容分别包含在fragment1.xml、fragment2.xml、fragment3.xml和fragment4.xml中，底部由buttom.xml文件实现。使用include插入top.xml、中间的fragment.xml以及buttom.xml文件。

Android Studio-App门户页面设计与开发

具体代码：

top.xml

Android Studio-App门户页面设计与开发

content

Android Studio-App门户页面设计与开发

fragment1.xml——聊天界面

Android Studio-App门户页面设计与开发

fragment2.xml——联系人界面
fragment3.xml及fragment4.xml类似

buttom.xml

Android Studio-App门户页面设计与开发

页面内容Fragment.java
在Fragment.java中，将Fragment.java与布局文件中的fragment.xml进行连接，如Fragment2.java文件（fragment3.xml及fragment4.xml方法相同）：

Android Studio-App门户页面设计与开发

package com.example.myapplication1;

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

import androidx.fragment.app.Fragment;

public class Fragment2 extends Fragment {

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

        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment2, container, false);
    }
}

在Fragment1中实现列表功能：

package com.example.myapplication1;

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

    RecyclerView recyclerView;
    Myadapter myadapter;
    View view1;
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        view1=new View(getContext());

        view1= inflater.inflate(R.layout.fragment1, container, false);
        recyclerView= view1.findViewById(R.id.recyclerview);

        List list=new ArrayList();
        for (int i=1;i<10;i++){
            list.add("这是第"+i+"行：");
        }

        myadapter=new Myadapter(list,view1.getContext());
        recyclerView.setAdapter(myadapter);

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

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

代码说明：主要功能是为Fragment绑定一个列表视图RecycleView。通过findViewById()方法获取RecyclerView对象，并将其设置为垂直方向的线性布局。然后创建了一个List对象list，用于存储数据。接着创建一个Myadapter对象，并将其设置为RecyclerView的适配器。

Myadapter.java
为RecyclerView提供数据并创建对应的视图项

package com.example.myapplication1;

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 {
    List list1;
    Context context1;

    // 构造函数，传入数据源和内容
    public Myadapter(List list, Context context){
        list1=list;
        context1=context;
    }
    //  创建 ViewHolder，即创建 RecyclerView 中 item 的布局
    @NonNull
    @Override
    public Myholder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {

        // 加载 item 的布局文件
        View view=LayoutInflater.from(context1).inflate(R.layout.item,parent,false);
        // 创建 ViewHolder 对象
        Myholder myholder=new Myholder(view);

        return myholder;
    }
    // 绑定数据到 ViewHolder 上
    public void onBindViewHolder(@NonNull Myholder holder, int position) {
        holder.textView.setText(list1.get(position));

    }
    // 返回数据源的大小
    @Override
    public int getItemCount() {
        return list1.size();
    }

    // ViewHolder 类，用于保存 item 中的控件对象
    class Myholder extends RecyclerView.ViewHolder{
        TextView textView;

        public Myholder(@NonNull View itemView) {

            super(itemView);
            // 找到 item 中的 TextView 控件
            textView=itemView.findViewById(R.id.textView9);
        }
    }

}

主函数MainActivity1.java
隐藏界面

private void fragmentHide() {
        FragmentTransaction ft=fm.beginTransaction()
                .hide(fragment1)
                .hide(fragment2)
                .hide(fragment3)
                .hide(fragment4);
        ft.commit();
    }

显示当前界面

private void  fragmentshow(Fragment fragment){
        fragmentHide();
        FragmentTransaction ft=fm.beginTransaction()
                .show(fragment);
        ft.commit();
    }

将Fragment文件进行压缩，加入content中

private void innitial() {
        FragmentTransaction ft=fm.beginTransaction()
                .add(R.id.content,fragment1)
                .add(R.id.content,fragment2)
                .add(R.id.content,fragment3)
                .add(R.id.content,fragment4);
        ft.commit();
    }

设置监听
可用switch case语句或if else语句执行

@Override
    public void onClick(View view) {
        if (view.getId() == l1) {
            fragmentshow(fragment1);
        }
        else if (view.getId() == l2) {
            fragmentshow(fragment2);
        }
        else if (view.getId() == l3) {
            fragmentshow(fragment3);
        }
        else if (view.getId() == l4) {
            fragmentshow(fragment4);
        }

    }

主函数完整代码：

package com.example.myapplication1;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.widget.LinearLayout;

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

public class MainActivity1 extends AppCompatActivity implements View.OnClickListener {
    Fragment fragment1,fragment2,fragment3,fragment4;
    LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;
    static final int l1=R.id.linearLayout1;
    static final int l2=R.id.linearLayout2;
    static final int l3=R.id.linearLayout3;
    static final int l4=R.id.linearLayout4;
    FragmentManager fm;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main1);

        linearLayout1=findViewById(R.id.linearLayout1);
        linearLayout2=findViewById(R.id.linearLayout2);
        linearLayout3=findViewById(R.id.linearLayout3);
        linearLayout4=findViewById(R.id.linearLayout4);

        fm=getSupportFragmentManager();
        fragment1=new Fragment1();
        fragment2=new Fragment2();
        fragment3=new Fragment3();
        fragment4=new Fragment4();

        innitial();
        fragmentHide();
        fragmentshow(fragment1);
        linearLayout1.setOnClickListener(this);
        linearLayout2.setOnClickListener(this);
        linearLayout3.setOnClickListener(this);
        linearLayout4.setOnClickListener(this);

    }

    private void fragmentHide() {
        FragmentTransaction ft=fm.beginTransaction()
                .hide(fragment1)
                .hide(fragment2)
                .hide(fragment3)
                .hide(fragment4);
        ft.commit();
    }

    private void  fragmentshow(Fragment fragment){
        fragmentHide();
        FragmentTransaction ft=fm.beginTransaction()
                .show(fragment);
        ft.commit();
    }

    private void innitial() {
        FragmentTransaction ft=fm.beginTransaction()
                .add(R.id.content,fragment1)
                .add(R.id.content,fragment2)
                .add(R.id.content,fragment3)
                .add(R.id.content,fragment4);
        ft.commit();
    }

    @Override
    public void onClick(View view) {
        if (view.getId() == l1) {
            fragmentshow(fragment1);
        }
        else if (view.getId() == l2) {
            fragmentshow(fragment2);
        }
        else if (view.getId() == l3) {
            fragmentshow(fragment3);
        }
        else if (view.getId() == l4) {
            fragmentshow(fragment4);
        }

    }

}

源码地址：yoact/MyApplication1 · GitHub

六、总结

设置背景颜色或文本颜色
可在colors.xml文件中加入所需要的颜色，颜色参数为16进制代码。（详解：android中所有颜色代码 Android 颜色对照表_绿色怎么表示android-CSDN博客）

Android Studio-App门户页面设计与开发

插入图片并设置大小
图片的大小可通过layout_width和layout_height来设置，scaleType=centerInside就是将图片的内容完整居中显示，通过按比例缩小或原来的size使得图片长/宽等于或小于View的长/宽。（详解：【Android Studio】ImageView / ImageButton 图片太大或者太小解决方法_imagebutton设置图片大小-CSDN博客）

Android Studio-App门户页面设计与开发