Android开发笔记-明天计划（三）（主页分页）

原型图

首先复盘一下原型图，常规的上中下结构，即标题、内容、导航栏，不同的页面切换不同的标题栏，所以这个标题栏可能会跟内容并在一起，也可能单独放在最外层，这个不重要。分页的逻辑是将四个页面作为四个子view，放置在当前activity下，简单的点击哪个显示哪个，再隐藏其他的，因为主页可能会做一些手势滑动切换之类的动作，所以页面切换就不用ViewPager做左右滑动切换页面了。

布局框架

框架就是简单的把中间内容和底部导航的位置固定一下，这里采用的是线性布局，然后内容显示的容器设置layout_weight自适应撑开，底部导航就是直接写死46dp的高度。因为是沉浸式状态栏，所以需要这两条：android:clipToPadding="true" android:fitsSystemWindows="true"

Android开发笔记-明天计划（三）（主页分页）

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

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


        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="@color/app_background" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="46dp"
            android:background="@color/white"
            android:orientation="horizontal">


        </LinearLayout>

    </LinearLayout>

</RelativeLayout>

底部导航栏

首先需要准备4个图标，每个图标是两种颜色，如果有条件的话设计师会帮你切好图，没条件的就跟我一起去白嫖吧，白嫖网址：https://www.iconfont.cn/search/index

可以预估一下图标大概多大，这里的话可以用20dp,我习惯性是采用4x的图标，也就是20dp的图标需要的像素大小大概是80X80像素，放在drawable-xxxhdpi中。

drawable文件夹的话一般不放图片，放一些颜色、状态之类的xml文件。字体颜色的话就是txt_开头，纯色（通常是描边、圆角、填充色）只有1中状态的就是bg_开头，如果是多种状态，如按钮这种，就是btn_开头。

将图标导入进来，再写好颜色、状态xml之后，资源如下图所示：

Android开发笔记-明天计划（三）（主页分页）

效果为：

Android开发笔记-明天计划（三）（主页分页）

布局的话尽量不要写得太生硬，尽量灵活一些，多用些自适应的布局逻辑，因为Android的屏幕的比例千奇百怪，如果写得太生硬的话，16:9可能正常，20:9的时候就严重变形，那就不太美丽了。

其他需要注意的地方我都写代码里面注释了。

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

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


        <RelativeLayout
            android:id="@+id/rly_content"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="@color/app_background" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="46dp"
            android:background="@color/white"
            android:orientation="horizontal">

<!--            如果觉得写在同一个xml里面会显得太过臃肿的话，也可以新建一个xml，然后通过include标签引用进来（一些复用性比较多的布局都可以这么处理）-->

            <!--            Space用于占位，以保证每个图标之间的间隔是一样的-->
            <Space
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1" />

            <RelativeLayout
                android:id="@+id/rly_task"
                android:layout_width="wrap_content"
                android:layout_height="match_parent">

                <!--                用RelativeLayout再嵌套一个LinearLayout的意思是让LinearLayout上下居中，从而可以上下的位置一致，会随着图片和文字的高度而动态调整-->
                <LinearLayout
                    android:layout_width="60dp"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:orientation="vertical">

                    <!--                    把LinearLayout宽度固定60，高度自适应，这样可以固定宽度不会变形，高度也可以根据imageView和TextView的高度自适应-->
                    <!--                    ImageView的宽度写最大，高度自适应，然后高度会根据图标的真是高度进行显示，并且是居中的-->
                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:src="@drawable/btn_home_bar_task" />

                    <!--                    文字正常是用sp单位,但是sp会随着系统设置的字体大小发生改变，会导致部分页面变形，所以我不太想他自己定义，就用dp写死-->
                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="4dp"
                        android:gravity="center"
                        android:text="任务"
                        android:textColor="@drawable/txt_home_bar"
                        android:textSize="12dp" />


                </LinearLayout>

            </RelativeLayout>

            <Space
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1" />

            <RelativeLayout
                android:id="@+id/rly_tool"
                android:layout_width="wrap_content"
                android:layout_height="match_parent">

                <LinearLayout
                    android:layout_width="60dp"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:orientation="vertical">

                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:src="@drawable/btn_home_bar_tool" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="4dp"
                        android:gravity="center"
                        android:text="工具"
                        android:textColor="@drawable/txt_home_bar"
                        android:textSize="12dp" />


                </LinearLayout>

            </RelativeLayout>

            <Space
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1" />

            <RelativeLayout
                android:id="@+id/rly_table"
                android:layout_width="wrap_content"
                android:layout_height="match_parent">

                <LinearLayout
                    android:layout_width="60dp"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:orientation="vertical">

                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:src="@drawable/btn_home_bar_tablel" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="4dp"
                        android:gravity="center"
                        android:text="统计数据"
                        android:textColor="@drawable/txt_home_bar"
                        android:textSize="12dp" />


                </LinearLayout>

            </RelativeLayout>

            <Space
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1" />

            <RelativeLayout
                android:id="@+id/rly_personal"
                android:layout_width="wrap_content"
                android:layout_height="match_parent">

                <LinearLayout
                    android:layout_width="60dp"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:orientation="vertical">

                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:src="@drawable/btn_home_bar_personal" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="4dp"
                        android:gravity="center"
                        android:text="我的"
                        android:textColor="@drawable/txt_home_bar"
                        android:textSize="12dp" />


                </LinearLayout>

            </RelativeLayout>

            <Space
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1" />

        </LinearLayout>

    </LinearLayout>

</RelativeLayout>

编写切换页面的代码

新建HomeActivity继承BaseAppActivity，新建4个子页面的View，继承BaseAppView，并在MainActivity中编写跳转逻辑，跳转到HomeActivity。

Android开发笔记-明天计划（三）（主页分页）

HomeActivity代码：

package com.imxiaoyu.tomorrowplan.module.home;

import android.view.View;
import android.widget.RelativeLayout;

import com.imxiaoyu.tomorrowplan.R;
import com.imxiaoyu.tomorrowplan.common.base.BaseAppActivity;
import com.imxiaoyu.tomorrowplan.module.home.view.PersonalView;
import com.imxiaoyu.tomorrowplan.module.home.view.TableView;
import com.imxiaoyu.tomorrowplan.module.home.view.TaskView;
import com.imxiaoyu.tomorrowplan.module.home.view.ToolView;

public class HomeActivity extends BaseAppActivity implements View.OnClickListener {

    /**
     * 常量
     */
    public final static int PAGE_TASK = 0;
    public final static int PAGE_TOOL = 1;
    public final static int PAGE_TABLE = 2;
    public final static int PAGE_PERSONAL = 3;
    /**
     * view
     */
    private TaskView taskView;
    private ToolView toolView;
    private TableView tableView;
    private PersonalView personalView;
    /**
     * ui
     */
    private RelativeLayout rlyContent;
    private RelativeLayout rlyTask;
    private RelativeLayout rlyTool;
    private RelativeLayout rlyTable;
    private RelativeLayout rlyPersonal;


    @Override
    protected int getLayoutId() {
        return R.layout.activity_home;
    }

    @Override
    protected void initData() {

    }

    @Override
    protected void initView() {
        //找控件的话，我更喜欢这种近乎原始的方式，不太喜欢用注解的方式，1是并不会比现在更省事，也会增加内容支出。
        rlyContent = findView(R.id.rly_content);
        rlyTask = findView(R.id.rly_task, this);
        rlyTool = findView(R.id.rly_tool, this);
        rlyTable = findView(R.id.rly_table, this);
        rlyPersonal = findView(R.id.rly_personal, this);


        taskView = new TaskView(getActivity());
        toolView = new ToolView(getActivity());
        tableView = new TableView(getActivity());
        personalView = new PersonalView(getActivity());

        rlyContent.addView(taskView.getView());
        rlyContent.addView(toolView.getView());
        rlyContent.addView(tableView.getView());
        rlyContent.addView(personalView.getView());

        switchPage(PAGE_TASK);//初始化页面
    }

    @Override
    protected void onCreateActivity() {

    }

    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.rly_task:
                switchPage(PAGE_TASK);
                break;
            case R.id.rly_tool:
                switchPage(PAGE_TOOL);
                break;
            case R.id.rly_table:
                switchPage(PAGE_TABLE);
                break;
            case R.id.rly_personal:
                switchPage(PAGE_PERSONAL);
                break;
        }
    }

    /**
     * 切换页面
     *
     * @param page
     */
    private void switchPage(int page) {
        rlyTask.setSelected(false);
        rlyTool.setSelected(false);
        rlyTable.setSelected(false);
        rlyPersonal.setSelected(false);

        taskView.dismiss();
        toolView.dismiss();
        tableView.dismiss();
        personalView.dismiss();

        switch (page) {
            case PAGE_TASK:
                rlyTask.setSelected(true);
                taskView.show();
                break;
            case PAGE_TOOL:
                rlyTool.setSelected(true);
                toolView.show();
                break;
            case PAGE_TABLE:
                rlyTable.setSelected(true);
                tableView.show();
                break;
            case PAGE_PERSONAL:
                rlyPersonal.setSelected(true);
                personalView.show();
                break;
        }
    }
}

其他

码云地址：https://gitee.com/imxiaoyu_admin/tomorrow

本次提交时间：2020年7月17日

本次完成的预览包apk：http://file.doutugongchang.com/app/upload/tomorrow-plan-debug-2020-7-17.apk