app主页 ios swift APP主页设计

APP门户界面设计

• 1. 页面及技术要求
• 2. 设计静态页面

• 2.1 导航栏bottom.xml

• 2.1.1 整体思路
• 2.1.2 具体步骤

• 2.2 主题页面activity_main.xml
• 2.3 四个主题子页面fragment.xml

• 3. 点击导航栏icon切换效果

• 3.1 点击icon变换主题页面

• 3.1.1 4个fragment.java文件
• 3.1.2 为4个点击按钮绑定切换方法

• 3.2 选中icon高亮

• 4. 项目总结
• 5. 效果展示及代码链接

1. 页面及技术要求

• 页面要求：实现APP门户界面框架设计，至少包含4个tab页，能实现tab页之间的点击切换
• 技术要求：使用布局（layouts）和分段（fragment），对控件进行点击监听

2. 设计静态页面

进入常见的app首页页面，总体来看，页面设计大体分为三部分，此次仅搭建简单的框架，即有顶部标题栏、页面中部主体、底部导航栏

其中顶部标题栏和页面中部主体内容只包含文字，后续进行完善，下面着重导航栏的设计。

2.1 导航栏bottom.xml

2.1.1 整体思路

首先设置静态页面，导航栏页面设计如上，可以看出单个图标与对应文字作为一个布局，而导航栏整体在页面上也属于同一布局内。观察页面排布，导航栏为横向线性布局（horizontal LinearLayout），单个图标与对应文字呈纵向线性布局（vertical LinearLayout）。

由此易知，我们要设计四个tab布局，步骤如下：

• 首先需要一个horizontal LinearLayout控件，剩下的控件均在此布局中。
• 拉入一个vertical LinearLayout，其中装入一个ImageView放置图标和TextView放置文字。
• 将上一步的vertical LinearLayout整体复制到horizontal LinearLayout内三次，改变相应的图标和文字即可。

2.1.2 具体步骤

1. 新建xml文件后改变默认布局类型为LinearLayout —— 点击默认样式，右击Convert view更改
2. 在horizontal LinearLayout中拖入纵向线性布局、图片、文本控件 —— 控件分别为LinearLayout(vertical)、ImageView、TextView
   
   复制LinearLayout(vertical)粘贴3次到LinearLayout(horizontal)列级下
   完成页面如下：
3. 控件的属性设计
   ① LinearLayout(horizontal)
   可以自定义设置合适的布局高度
   
   ②每个LinearLayout(vertical)（仅以一个为例）
   
   id：命名只要能区分导航栏的四个功能名称即可。
   Layout_weight：均设置为1。代表每个导航布局被四等分（类似于前端flex布局方式的设置）
   完成页面如下：
   ③ 每个ImageView
   设置图片的id、高度：
   
   更换自己想要的图标：
   将本地图片存入drawable或者mipmap文件夹。然后点击ImageView的属性，找到srcCompat，即可找到存入的图片，更换即可。
   
   
   ④ 每个TextView
   设置id、文字、居中、颜色、大小

2.2 主题页面activity_main.xml

功能：将做好的部分页面（例如bottom、top页面）进行调整布局并类似于叠加图层形成整个页面效果

将做好的子页面添加进来 —— include layout

中间主体页面会进行切换，设置FrameLayout帧布局的id，便于后续代码的书写

2.3 四个主题子页面fragment.xml

FrameLayout布局：所有添加到这个布局中的视图都是以层叠的方式显示。上一层的视图会覆盖下一层的视图。

首先我们要做4个子视图，新建4个xml文件做页面展示。

控件属性设置如下：

文字居中：设置layout_gravity —— center

3. 点击导航栏icon切换效果

3.1 点击icon变换主题页面

3.1.1 4个fragment.java文件

① 新建4个Fragment(blank)文件

② fragment代码书写

如下图所示，4个fragment只需要修改inflater的参数中的页面id，即不同fragment对于的resource 布局的资源id(4个xml文件对应名称)。inflate方法的主要作用就是将xml转换成一个View对象，用于动态的创建布局。

下面给出buyfragment.java的代码，其余3个对应修改即可。

package com.example.work;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import android.app.Fragment;

public class buyfragment extends Fragment {

    public buyfragment() {
        // Required empty public constructor
    }
    
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_buy, container, false);
    }
}

3.1.2 为4个点击按钮绑定切换方法

用户在点击导航栏其中一个图标时，页面切换到相应主题，所以需要为图标按钮设置监听，当发生点击事件，则需切换页面。因此需要将bottom.xml里设计的导航栏的图标按钮与4个fragment(控制主题页面)进行绑定，在MainActivity与bottom里导航栏的每个linearLayout(vertical)绑定。

1. 对FragmentManager接口的实现类，管理四个主题页面

private Fragment shopfragment=new shopfragment();
private Fragment messagefragment=new messagefragment();
private Fragment buyfragment=new buyfragment();
private Fragment minefragment=new minefragment();

private FragmentManager fragmentManager;

2. linearLayout绑定监听事件，监听四个图标按钮

private LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    supportRequestWindowFeature(Window.FEATURE_NO_TITLE); // 换掉自带标题
    setContentView(R.layout.activity_main);

    linearLayout1=findViewById(R.id.LinearLayout_shop);
    linearLayout2=findViewById(R.id.LinearLayout_message);
    linearLayout3=findViewById(R.id.LinearLayout_buy);
    linearLayout4=findViewById(R.id.LinearLayout_mine);

    linearLayout1.setOnClickListener(this); //接口
    linearLayout2.setOnClickListener(this);
    linearLayout3.setOnClickListener(this);
    linearLayout4.setOnClickListener(this);

    initFragment();
    showFragment(0); //初始页面为第一页
}

3. 初始化fragment

// 初始化fragment
    private void initFragment(){
        fragmentManager=getFragmentManager(); // fragment管理器
        FragmentTransaction transaction=fragmentManager.beginTransaction(); // 启动
        transaction.add(R.id.id_content,shopfragment);
        transaction.add(R.id.id_content,messagefragment);
        transaction.add(R.id.id_content,buyfragment);
        transaction.add(R.id.id_content,minefragment);
        transaction.commit();
    }

4. 监听点击事件

// 监听
    @Override
    public void onClick(View v) {
        switch(v.getId()){
            case R.id.LinearLayout_shop:
                showFragment(0);
                break;
            case R.id.LinearLayout_message:
                showFragment(1);
                break;
            case R.id.LinearLayout_buy:
                showFragment(2);
                break;
            case R.id.LinearLayout_mine:
                showFragment(3);
                break;
            default:
                break;
        }
    }

5. 隐藏与显示
   切换的具体实现是层叠，先将4个主题页面都隐藏，当发生按钮点击事件，显示按钮对应的主题页面即可。

// 隐藏
    private void hideFragment(FragmentTransaction transaction){
        transaction.hide(shopfragment);
        transaction.hide(messagefragment);
        transaction.hide(buyfragment);
        transaction.hide(minefragment);
    }
    // 显示
    private void showFragment(int i) {
        FragmentTransaction transaction=fragmentManager.beginTransaction();
        hideFragment(transaction);
        switch (i){
            case 0:
                transaction.show(shopfragment);
                break;
            case 1:
                transaction.show(messagefragment);
                break;
            case 2:
                transaction.show(buyfragment);
                break;
            case 3:
                transaction.show(minefragment);
                break;
            default:
                break;

        }
        transaction.commit();
    }

3.2 选中icon高亮

1. 声明四个ImageView对象

private ImageView Image1,Image2,Image3,Image4;
Image1=findViewById(R.id.imageView1);
Image2=findViewById(R.id.imageView2);
Image3=findViewById(R.id.imageView3);
Image4=findViewById(R.id.imageView4);

2. 隐藏图标高亮

// 修改图标颜色
private void hideIcon(){
    Image1.setColorFilter(Color.BLACK);
    Image2.setColorFilter(Color.BLACK);
    Image3.setColorFilter(Color.BLACK);
    Image4.setColorFilter(Color.BLACK);
    }

3. 点击LinearLayout时，图标高亮

@Override
    public void onClick(View v) {
        hideIcon();// 所有图标不高亮，当被点击到高亮
        switch(v.getId()){
            case R.id.LinearLayout_shop:
                showFragment(0);
                Image1.setColorFilter(Color.GREEN);
                break;
            case R.id.LinearLayout_message:
                showFragment(1);
                Image2.setColorFilter(Color.GREEN);
                break;
            case R.id.LinearLayout_buy:
                showFragment(2);
                Image3.setColorFilter(Color.GREEN);
                break;
            case R.id.LinearLayout_mine:
                showFragment(3);
                Image4.setColorFilter(Color.GREEN);
                break;
            default:
                break;
        }

4. 项目总结

对于设计app页面及跳转功能，之前有接触过html/css/js等，也完成过相似的项目实践。利用Android开发通过控件和相关函数的实现，相比于更加简单及方便。这次实验遇到的问题，例如实现点击按钮跳转时，监听事件绑定的是bottom里面的四个linearLayout，而不是fragment里面的linearLayout。以及怎么实现监听、层叠图层的隐藏和显示等具体功能，还需多加代码实操。

5. 效果展示及代码链接

由于实现按钮点击高亮，当图标有其他颜色，高亮时并不美观。因此换成了黑白简约图标。后续再试着实现点击时切换图标。