AS从入门到放弃（二）页面设计基础篇2.1

目录

一、基本页面布局设计

（一）组件介绍

（二）  整体页面布局设计 res文件-> layout->activity_main.xml 

（三）各子页面设计   res文件->layout-> fragment.xml   

 · view1_fragment.xml （页面一 首页）

· view2_fragment.xml （页面二 社区）

​编辑

· view3_fragment.xml （页面三 vip）

· view4_fragment.xml （页面四 小卖部）

· view5_fragment.xml （页面五 个人主页）

注：以上TextView中加入了边框 ，时为区别其他TextView组件

二、主页面功能实现 功能设计

（一）针对页面切换，设计函数 Mainactivity.java

---

接上一回，恭喜你已然入坑! 但不要担心，（小心翼翼的说）学这个可以拿来吃饭的，可是能做饭碗的~~（Mrs.YL say）哈哈哈哈

项目构建完成后，那必然是轮到虚拟机了

可以选择新建一个也可以使用自己的手机，但是要注意，项目的版本与虚拟机的配置要相对应，不然运行项目的时候会出现  与虚拟机 连接超时!!!!!!!!!

项目初始时会自动新建一个Hello World界面，如图

now 让我们开始项目开发之旅吧~~~~~

这里项目模拟做一个  纸条APP   类似如图，下方五个选项 即有 五个页面设计

一、基本页面布局设计

（一）组件介绍

TextView ：文本控件

Switch：开关选择控件

LinearLayout ：类似于数据结构中的栈、队列等，可以将其他控件装入其中进行排版

（有vertical 和 horizontal 两类，表 横向和竖向）

RecyclerView：用于大量数据的展示，能够显示列表实现视图的复用，类似于页面下滑或上拉刷新

（二）  整体页面布局设计 res文件-> layout->activity_main.xml 

进入res->layout->activity_main.xml  删除 原有“Hello World”

将第二行的“xmlns”前面改为 LinerLaout 同时设置 orientation布局为vertical 垂直布局

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

在搜索框中取出对应属性 ，长按拉至Component Tree中LinearLayout下

要注意，最后添加的LinearLayout，其中五个textView是在此目录下而不是总目录下

选择 textVew 组件在右方 Attributes 可以修改宽度（layout_width)高度（layout_height)字符大小（textSize）字符名称（text），未找到属性可以查询搜索
例选中 首页 的 textView  ，设置如下 （gravity ：center表示居中 ;

match_parent表示让当前控件的大小和父布局的大小一样，也就是由父布局来决定当前控件的大小

wrap_content表示让当前的控件大小能够刚好包含里面的内容，也就是由控件内容决定当前控件的大小）

若是要加上图标的话可以自己加入自定义图片到mipmap中

也可以将下面导航页做成 “图片加文字” 的效果

这时就虚假将图片和文字装进一个垂直的Linear Layout中

这个时候的页面设计就相当于 

                        第一部分 上方的title

垂直结构         第二部分 中间各子页面信息

                        第三部分 导航页             

对于导航页中  做水平结构     五个子页面fragment 

又对子页面作出垂直结构 上方放图片下面配文字  以达到这种效果

        

整个部分源代码如下，需要注意的是，我在其中修改了组件的id 以及 text内容 ，并且写入 res中的string.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"
    tools:context=".MainActivity"
    android:orientation="vertical">

    <TextView
        android:id="@+id/top"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:gravity="center"
        android:text="@string/AppName"
        android:textSize="20sp"
        android:textColor="@color/white"
        android:background="@color/black"
        tools:ignore="InvalidId" />

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="575dp">

    </FrameLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        >

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

            <ImageView
                android:id="@+id/imageView1"
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:layout_weight="1"
                android:src="@drawable/main1" />

            <TextView
                android:id="@+id/textView1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="@string/view1topic"
                android:background="@color/greenyellow"
                android:textSize="20sp" />
        </LinearLayout>

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

            <ImageView
                android:id="@+id/imageView2"
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:layout_weight="1"
                android:src="@drawable/main2" />

            <TextView
                android:id="@+id/textView2"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="@string/view2topic"
                android:background="@color/greenyellow"
                android:textSize="20sp" />

        </LinearLayout>

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

            <ImageView
                android:id="@+id/imageView3"
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:layout_weight="1"
                android:src="@drawable/main3" />

            <TextView
                android:id="@+id/textView3"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="@string/view3topic"
                android:background="@color/greenyellow"
                android:textSize="20sp" />
        </LinearLayout>

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

            <ImageView
                android:id="@+id/imageView4"
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:layout_weight="1"
                android:src="@drawable/main4" />

            <TextView
                android:id="@+id/textView4"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="@string/view4topic"
                android:background="@color/greenyellow"
                android:textSize="20sp" />
        </LinearLayout>

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

            <ImageView
                android:id="@+id/imageView5"
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:layout_weight="1"
                android:src="@drawable/main5" />

            <TextView
                android:id="@+id/textView5"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="@string/view5topic"
                android:background="@color/greenyellow"
                android:textSize="20sp" />
        </LinearLayout>

    </LinearLayout>
</LinearLayout>

（三）各子页面设计   res文件->layout-> fragment.xml   

在layout目录下新建->fragment->Fragment(Blank) 
（因下面导航页设置五个，所以这里设置 5 个fragment设计页面）

现针对各个页面进行设计

 · view1_fragment.xml （页面一 首页）

这里对第一个页面（首页）进行设计，添加了一个LinearLayout组件用于其他内容的存放

新建一个switch1 和RecyclerView （学习内容存放，数据推送等）

<?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=".view1_fragment">

    <!-- TODO: Update blank fragment layout -->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <Switch
            android:id="@+id/switch1"
            android:layout_width="match_parent"
            android:layout_height="53dp"
            android:gravity="center"
            android:text="开始学习"
            android:background="@color/bisque"/>

        <androidx.recyclerview.widget.RecyclerView
            android:layout_width="match_parent"
            android:layout_height="686dp"
            android:orientation="vertical" />
    </LinearLayout>

</FrameLayout>

· view2_fragment.xml （页面二 社区）

针对第二个页面（社区） 存放各优秀作品，提供搜索平台

依次 添加  SerchView（提供搜索关键字） 、RecyclerView （各栏目选择<横向>）、

ImageView（每日优秀主题照片推选）、RecyclerView（优秀作品集 <竖向>）

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

    <!-- TODO: Update blank fragment layout -->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <SearchView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/bisque">

        </SearchView>

        <androidx.recyclerview.widget.RecyclerView
            android:layout_width="match_parent"
            android:layout_height="83dp"
            android:orientation="horizontal" />

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="match_parent"
            android:layout_height="137dp"
            android:layout_gravity="center"
            android:src="@drawable/view2main" />

        <androidx.recyclerview.widget.RecyclerView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center" />
    </LinearLayout>

</FrameLayout>

· view3_fragment.xml （页面三 vip）

实现vip用户内容推广，针对各主题提供便捷通道以及优秀作品

<?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=".view3_fragment">

    <!-- TODO: Update blank fragment layout -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="74dp"
            android:gravity="center"
            android:text="这里是VIP界面"
            android:background="@color/bisque"
            android:textSize="20sp"/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="77dp"
                android:orientation="horizontal">

                <TextView
                    android:id="@+id/textView"
                    android:layout_width="wrap_content"
                    android:layout_height="76dp"
                    android:layout_weight="1"
                    android:text="人文素养"
                    android:shadowColor="#099"
                    android:textSize="20sp"
                    android:background="@drawable/tvbar"
                    android:gravity="center"/>

                <TextView
                    android:id="@+id/textView6"
                    android:layout_width="wrap_content"
                    android:layout_height="76dp"
                    android:layout_weight="1"
                    android:text="短句素材"
                    android:textColorHighlight="#907"
                    android:textSize="20sp"
                    android:background="@drawable/tvbar"
                    android:gravity="center"/>
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="77dp"
                android:orientation="horizontal">

                <TextView
                    android:id="@+id/textView7"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:textSize="20sp"
                    android:background="@drawable/tvbar"
                    android:text="审题立意"
                    android:gravity="center"/>

                <TextView
                    android:id="@+id/textView8"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:textSize="20sp"
                    android:background="@drawable/tvbar"
                    android:text="结构模板"
                    android:gravity="center"/>
            </LinearLayout>
        </LinearLayout>

    </LinearLayout>

</FrameLayout>

· view4_fragment.xml （页面四 小卖部）

作为一个优秀的产品，怎么能没有交易界面呢，这里设置shop页面供用户进行文化用品的购买

<?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=".view4_fragment">

    <!-- TODO: Update blank fragment layout -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="54dp"
            android:gravity="center"
            android:text="纸条小卖部"
            android:background="@color/bisque"
            android:textSize="20sp" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="92dp"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/textView12"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="shop1"
                android:background="@drawable/tvbar"
                android:textSize="20sp" />

            <TextView
                android:id="@+id/textView13"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="shop2"
                android:background="@drawable/tvbar"
                android:textSize="20sp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="92dp"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/textView14"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="shop3"
                android:background="@drawable/tvbar"
                android:textSize="20sp" />

            <TextView
                android:id="@+id/textView15"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="shop4"
                android:background="@drawable/tvbar"
                android:textSize="20sp" />
        </LinearLayout>
    </LinearLayout>

</FrameLayout>

· view5_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=".view5_fragment">

    <!-- TODO: Update blank fragment layout -->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <TextView
            android:id="@+id/textView9"
            android:layout_width="match_parent"
            android:layout_height="68dp"
            android:background="@color/blanchedalmond"
            android:gravity="center"
            android:text="myplace" />

        <ImageView
            android:id="@+id/imageView6"
            android:layout_width="match_parent"
            android:layout_height="207dp"
            android:src="@drawable/img" />

        <TextView
            android:id="@+id/textView10"
            android:layout_width="match_parent"
            android:layout_height="73dp"
            android:gravity="center"
            android:background="@color/gray_cc"
            android:text="个人主页" />

        <TextView
            android:id="@+id/textView11"
            android:layout_width="match_parent"
            android:layout_height="73dp"
            android:gravity="center"
            android:text="收藏" />

        <TextView
            android:id="@+id/textView16"
            android:layout_width="match_parent"
            android:layout_height="73dp"
            android:gravity="center"
            android:background="@color/gray_cc"
            android:text="设置" />
    </LinearLayout>

</FrameLayout>

注：以上TextView中加入了边框 ，时为区别其他TextView组件

需要在 drawable 中新建xml文件修改shape，这里新建的时 tvbar.xml

可参考  给TextView加边框_textview 边框-CSDN博客

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- 实心 -->
    <solid android:color="@android:color/white" />
    <!-- 边框 -->
    <stroke
        android:width="0.5dp"
        android:color="@android:color/black" />
    <!-- 圆角 -->
    <corners android:radius="3dp" />
    <!-- 边距 -->
    <padding
        android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp" />

</shape>

二、主页面功能实现 功能设计

（一）针对页面切换，设计函数 Mainactivity.java

定义 mainBinding 用于获取主页面 类别为ActivityMainBinding 此名称前面一部分为layout中主页面的xml文件名

定义各子页面 Fragment ，以及页面控件 FragmentManager 和 页面切换用具FragmentTransaction

    ActivityMainBinding mainBinding;
    Fragment view1_fragment,view2_fragment,view3_fragment,view4_fragment,view5_fragment;
    FragmentManager fragmentManager;
    FragmentTransaction fragmentTransaction;

同时需要在 Gradle Scripts中添加关于 ActivityMainBinding 的相关信息

build.gradle(project)

// Top-level build file where you can add configuration options common to all sub-projects/modules.
plugins {
    id("com.android.application") version "8.1.1" apply false
}
buildscript{
    val agp_version by extra("8.1.1")
    repositories{
        google()
        mavenCentral()
    }

}

build.gradle(Moudle) ->android下

viewBinding {
        enable = true
    }

Mainactivity.java代码

package com.example.onlyofmy;

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.onlyofmy.databinding.ActivityMainBinding;

public class MainActivity extends AppCompatActivity {
    ActivityMainBinding mainBinding;
    Fragment view1_fragment,view2_fragment,view3_fragment,view4_fragment,view5_fragment;
    FragmentManager fragmentManager;
    FragmentTransaction fragmentTransaction;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mainBinding=ActivityMainBinding.inflate(getLayoutInflater()); // 获取主页面
        View view=mainBinding.getRoot();  // 初始化
        setContentView(view);  // 将内容切换为主页面
        view1_fragment=new view1_fragment();
        view2_fragment=new view2_fragment();
        view3_fragment=new view3_fragment();
        view4_fragment=new view4_fragment();
        view5_fragment=new view5_fragment();
        fragmentManager=getSupportFragmentManager();  // 页面控制
        initial(); // 初始化函数
        fragmentTransaction=fragmentManager.beginTransaction().show(view1_fragment);         // 初始化为第一个页面
        fragmentTransaction.commit(); // 提交
        // 现在设计点击切换页面效果  设置监听器
        mainBinding.View1LinearLayout.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                fragment_hide();
                fragmentTransaction=fragmentManager.beginTransaction().show(view1_fragment);
                fragmentTransaction.commit();
            }
        });
        mainBinding.View2LinearLayout.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                fragment_hide();
                fragmentTransaction=fragmentManager.beginTransaction().show(view2_fragment);
                fragmentTransaction.commit();
            }
        });
        mainBinding.View3LinearLayout.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                fragment_hide();
                fragmentTransaction=fragmentManager.beginTransaction().show(view3_fragment);
                fragmentTransaction.commit();
            }
        });
        mainBinding.View4LinearLayout.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                fragment_hide();
                fragmentTransaction=fragmentManager.beginTransaction().show(view4_fragment);
                fragmentTransaction.commit();
            }
        });
        mainBinding.View5LinearLayout.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                fragment_hide();
                fragmentTransaction=fragmentManager.beginTransaction().show(view5_fragment);
                fragmentTransaction.commit();
            }
        });
    }

    private void fragment_hide() {  // 隐藏函数，将各个页面放在show的后面
        fragmentTransaction=fragmentManager.beginTransaction()
                .hide(view1_fragment)
                .hide(view2_fragment)
                .hide(view3_fragment)
                .hide(view4_fragment)
                .hide(view5_fragment);
        fragmentTransaction.commit();
    }


    private void initial() {
        // 添加组件，获取id 保存 最后进行页面覆盖
        fragmentTransaction=fragmentManager.beginTransaction()
                .add(R.id.content,view1_fragment)
                .add(R.id.content,view2_fragment)
                .add(R.id.content,view3_fragment)
                .add(R.id.content,view4_fragment)
                .add(R.id.content,view5_fragment);
        fragmentTransaction.commit();
        fragment_hide();
    }
}

现在可以运行项目啦，点击运行后会出现以下主页面，下方会有四个导航栏，各自点击会有不同效果，后续会出对各个子页面的其他功能实现，记得关注哦~

，