2021-10-09

最新推荐文章于 2025-12-11 19:27:08 发布

原创最新推荐文章于 2025-12-11 19:27:08 发布 · 84 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android

该博客详细介绍了如何使用Android布局和Fragment来创建一个包含4个tab页的应用门户界面。通过XML布局文件设计了顶部导航栏和底部按钮，并实现了点击切换不同tab页的功能。每个tab页由不同的Fragment呈现，如微信、通讯录、发现和个人页。在MainActivity中，通过监听按钮点击事件并管理Fragment的显示与隐藏，实现了界面的动态切换。最终展示了运行效果及代码仓库地址。

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

一、实验内容

实现APP门户界面框架设计，至少包含4个tab页，能实现tab页之间的点击切换。

1.效果图

在这里插入图片描述

2.工程目录结构

工程结构

二、核心技术

使用布局（layout）和分段（fragment），对控件进行点击监听。

三、实验步骤

主要的实验步骤如下

1.Top界面

布局文件(top.xml)

在这里插入图片描述

设计界面

在这里插入图片描述

2.Button界面

控件关系

在这里插入图片描述

资源图片

在这里插入图片描述
图片来源阿里巴巴矢量库

布局文件(button.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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="65dp"

        android:baselineAligned="false"
        android:orientation="horizontal"
        app:layout_constraintBottom_toBottomOf="parent">

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

            <ImageView
                android:id="@+id/imageView_1"
                android:layout_width="wrap_content"
                android:layout_height="45dp"
                android:contentDescription="@string/app_wechat"
                app:srcCompat="@drawable/wechat" />

            <TextView
                android:id="@+id/textView_1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:gravity="center"
                android:text="@string/app_wechat"

                android:textSize="15sp" />

        </LinearLayout>

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

            <ImageView
                android:id="@+id/imageView_2"
                android:layout_width="wrap_content"
                android:layout_height="45dp"
                android:contentDescription="@string/app_address"
                app:srcCompat="@drawable/addr" />

            <TextView
                android:id="@+id/textView_2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="@string/app_address"
                android:textSize="15sp" />
        </LinearLayout>

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

            <ImageView
                android:id="@+id/imageView_3"
                android:layout_width="wrap_content"
                android:layout_height="45dp"
                android:contentDescription="@string/app_find"
                app:srcCompat="@drawable/find" />

            <TextView
                android:id="@+id/textView_3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="@string/app_find"
                android:textSize="15sp" />
        </LinearLayout>

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

            <ImageView
                android:id="@+id/imageView_4"
                android:layout_width="wrap_content"
                android:layout_height="45dp"
                android:contentDescription="@string/app_me"
                app:srcCompat="@drawable/me" />

            <TextView
                android:id="@+id/textView_4"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="@string/app_me"
                android:textSize="15sp" />
        </LinearLayout>
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

设计界面

在这里插入图片描述

3.activity_main界面

布局文件

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

    <include
        layout="@layout/top"
        app:layout_constraintTop_toTopOf="@+id/fl_content" />

    <FrameLayout
        android:id="@+id/fl_content"
        android:layout_marginTop="55dp"
        android:layout_marginBottom="65dp"
        android:background="#f0f0f0"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        />

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

</androidx.constraintlayout.widget.ConstraintLayout>

设计界面

在这里插入图片描述

控件关系

在这里插入图片描述

4.Fragment部分

需要的类：

在这里插入图片描述

布局文件目录：

在这里插入图片描述
在类简单的重写onCreateView()方法，其他方法可以按需重写!
（如下，其余三个文件改写方法相同）

package com.firsttest.myapplication;

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

import androidx.fragment.app.Fragment;

public class addrFragment extends Fragment {

    private View view;
    private String content;

    public addrFragment(String content){
        this.content=content;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        view=inflater.inflate(R.layout.fragment_addr,container,false);
        TextView textView=(TextView)view.findViewById(R.id.textView_addr);
        textView.setText(content);
        return view;
    }
}

布局文件：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/textView_wechat"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:textSize="24sp"
            android:text="@string/wechatPrint" />
    </RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

设计界面（之一）

在这里插入图片描述

5.编写MainActivity.java


package com.firsttest.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.SurfaceControl;
import android.view.View;
import android.widget.Button;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import static com.firsttest.myapplication.R.id.imageView_1;
import static com.firsttest.myapplication.R.id.imageView_2;
import static com.firsttest.myapplication.R.id.imageView_3;
import static com.firsttest.myapplication.R.id.imageView_4;
import static com.firsttest.myapplication.R.id.textView_1;
import static com.firsttest.myapplication.R.id.textView_2;
import static com.firsttest.myapplication.R.id.textView_3;
import static com.firsttest.myapplication.R.id.textView_4;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private LinearLayout ll_1;
    private LinearLayout ll_2;
    private LinearLayout ll_3;
    private LinearLayout ll_4;

    private TextView tv_1;
    private TextView tv_2;
    private TextView tv_3;
    private TextView tv_4;

    private ImageView iv_1;
    private ImageView iv_2;
    private ImageView iv_3;
    private ImageView iv_4;

    private TextView txt_setting;
    private FrameLayout fl_content;

    private wechatFragment fg1;
    private addrFragment fg2;
    private findFragment fg3;
    private meFragment fg4;

    private FragmentManager fManager;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        fManager=getSupportFragmentManager();
        bindViews();
        ll_1.performClick();
    }
//事件绑定
    private void bindViews() {
        tv_1=(TextView) findViewById(textView_1);
        tv_2=(TextView)findViewById(textView_2);
        tv_3=(TextView)findViewById(textView_3);
        tv_4=(TextView)findViewById(textView_4);

        iv_1=(ImageView)findViewById(imageView_1);
        iv_2=(ImageView)findViewById(imageView_2);
        iv_3=(ImageView)findViewById(imageView_3);
        iv_4=(ImageView)findViewById(imageView_4);


        ll_1=(LinearLayout)findViewById(R.id.linearlayout_1);
        ll_2=(LinearLayout)findViewById(R.id.linearlayout_2);
        ll_3=(LinearLayout)findViewById(R.id.linearlayout_3);
        ll_4=(LinearLayout)findViewById(R.id.linearlayout_4);

        fl_content=(FrameLayout)findViewById(R.id.fl_content);

        ll_1.setOnClickListener(this);//点击事件绑定
        ll_2.setOnClickListener(this);
        ll_3.setOnClickListener(this);
        ll_4.setOnClickListener(this);



    }

    //重置选中状态
    private void setSelected(){
        ll_1.setSelected(false);
        ll_2.setSelected(false);
        ll_3.setSelected(false);
        ll_4.setSelected(false);
    }

    private void hideAllFragment(FragmentTransaction fragmentTransaction){
        if(fg1!=null)fragmentTransaction.hide(fg1);
        if(fg2!=null)fragmentTransaction.hide(fg2);
        if(fg3!=null)fragmentTransaction.hide(fg3);
        if(fg4!=null)fragmentTransaction.hide(fg4);
    }


//重置颜色，没有选中就为灰色
    private void turnColorToGray(){
        tv_1.setTextColor(0xd0d0d0d0);//灰色
        tv_2.setTextColor(0xd0d0d0d0);
        tv_3.setTextColor(0xd0d0d0d0);
        tv_4.setTextColor(0xd0d0d0d0);
       iv_1.setImageResource(R.drawable.wechat_);//替换为灰色的图片
       iv_2.setImageResource(R.drawable.addr_);
       iv_3.setImageResource(R.drawable.find_);
       iv_4.setImageResource(R.drawable.me_);
    }

    @Override
    public void onClick(View view) {
        FragmentTransaction fTransaction=fManager.beginTransaction();
        hideAllFragment(fTransaction);turnColorToGray();
        switch(view.getId()){
            case R.id.linearlayout_1:
                setSelected();
                tv_1.setTextColor(0xff1B940A);iv_1.setImageResource(R.drawable.wechat);
               //选中就着色
                ll_1.setSelected(true);
                if(fg1==null) {
                    fg1 = new wechatFragment("这是微信界面");
                    fTransaction.add(R.id.fl_content,fg1);
                }
                else{
                    fTransaction.show(fg1);
                }
                break;
            case R.id.linearlayout_2:
                setSelected();
                tv_2.setTextColor(0xff1B940A);iv_2.setImageResource(R.drawable.addr);
                ll_2.setSelected(true);
                if(fg2==null) {
                    fg2 = new addrFragment("这是通讯录界面");
                    fTransaction.add(R.id.fl_content,fg2);
                }
                else{
                    fTransaction.show(fg2);
                }break;
            case R.id.linearlayout_3:
                setSelected();
                tv_3.setTextColor(0xff1B940A);iv_3.setImageResource(R.drawable.find);
                ll_3.setSelected(true);
                if(fg3==null) {
                    fg3 = new findFragment("这是发现页");
                    fTransaction.add(R.id.fl_content,fg3);
                }
                else{
                    fTransaction.show(fg3);
                }break;
            case R.id.linearlayout_4:
                setSelected();
                tv_4.setTextColor(0xff1B940A);iv_4.setImageResource(R.drawable.me);
                ll_4.setSelected(true);
                if(fg4==null) {
                    fg4 = new meFragment("这是个人页");
                    fTransaction.add(R.id.fl_content,fg4);
                }
                else{
                    fTransaction.show(fg4);
                }break;
        }
        fTransaction.commit();
    }
}