APP门户界面设计

移动开发 2021-10-10 19:23:43 阅读次数: 0

实验环境

Android Studio

image.png

AVD环境

image.png

要求

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

实现的运行界面

@I3J1QUQW$)AXD3UIQAB81E.png

image.png

实现功能的.xml文件与.java文件

  1. 界面顶部top.xml
  2. 界面底端bottom.xml
  3. 中间部分的四个fragment.xml
  4. 界面的主文件activity_main.xml
  5. 四个分段fragment.xml对应的.java文件
  6. 主函数文件MainActivity.java

image.png

botton(底部界面)

使用一个纵向（horizontal）的LinearLayout，在其中嵌套四个横向（vertical）的LinearLayout，并在四个横向的LinearLayout中分别放入图片控件（Imageview i)与文本控件（TextView i）。

注意：设置LinearLayout以及imageview与textview的ID，以及后面其他的id，调用时会用到，养成习惯。

image.png

<?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="100dp"
    android:background="@color/black"
    android:layout_gravity="bottom">

    <LinearLayout
        android:id="@+id/weixin"
        android:layout_width="wrap_content"
        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="60dp"
            app:srcCompat="@drawable/wechat2"
            tools:srcCompat="@drawable/wechat2" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:gravity="center"
            android:text="微信"
            android:textColor="@color/white"
            android:textSize="24sp"
            android:textStyle="bold" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/contact"
        android:layout_width="wrap_content"
        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="60dp"
            app:srcCompat="@drawable/contact2"
            tools:srcCompat="@drawable/contact2" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:gravity="center"
            android:text="联系人"
            android:textColor="@color/white"
            android:textSize="24sp"
            android:textStyle="bold" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/friend"
        android:layout_width="wrap_content"
        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="60dp"
            app:srcCompat="@drawable/friend2"
            tools:srcCompat="@drawable/friend2" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:gravity="center"
            android:text="朋友"
            android:textColor="@color/white"
            android:textSize="24sp"
            android:textStyle="bold" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/config"
        android:layout_width="wrap_content"
        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="60dp"
            app:srcCompat="@drawable/config2"
            tools:srcCompat="@drawable/config2" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:gravity="center"
            android:text="设置"
            android:textColor="@color/white"
            android:textSize="24sp"
            android:textStyle="bold" />
    </LinearLayout>
</LinearLayout>
复制代码

top（顶部界面）

使用一个纵向的LinearLayout放入一个TextView显示文本

image.png android:background="@color/black" ：设置背景颜色

android:layout_gravity="top"：设置布局位置

android:textStyle="bold"：字体加粗

android:textSize="26sp"：字体大小

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:background="@color/black"
    android:layout_gravity="top">

    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:text="我的微信"
        android:textColor="@color/white"
        android:textStyle="bold"
        android:textSize="26sp" />
</LinearLayout>
复制代码

四个Fragement.java文件

先分别建好四个fragment.java 对应的是：config（设置）；contact（联系人）；friend（朋友）；weixin(微信)。

image.png

其中的一个Fragement.java文件，新建好即可，可以删点没用，也可以不用管。

其他的类似

package com.example.myapplication;

import android.os.Bundle;

import android.app.Fragment;

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

/**
 * A simple {@link Fragment} subclass.
 * Use the {@link configFragment#newInstance} factory method to
 * create an instance of this fragment.
 */
public class configFragment extends Fragment {

    // TODO: Rename parameter arguments, choose names that match
    // the fragment initialization parameters, e.g. ARG_ITEM_NUMBER
    private static final String ARG_PARAM1 = "param1";
    private static final String ARG_PARAM2 = "param2";

    // TODO: Rename and change types of parameters
    private String mParam1;
    private String mParam2;

    public configFragment() {
        // Required empty public constructor
    }

    /**
     * Use this factory method to create a new instance of
     * this fragment using the provided parameters.
     *
     * @param param1 Parameter 1.
     * @param param2 Parameter 2.
     * @return A new instance of fragment configFragment.
     */
    // TODO: Rename and change types and number of parameters
    public static configFragment newInstance(String param1, String param2) {
        configFragment fragment = new configFragment();
        Bundle args = new Bundle();
        args.putString(ARG_PARAM1, param1);
        args.putString(ARG_PARAM2, param2);
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null) {
            mParam1 = getArguments().getString(ARG_PARAM1);
            mParam2 = getArguments().getString(ARG_PARAM2);
        }
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_config, container, false);
    }
}
复制代码

中间部分的四个fragment.xml文件

这四个是当你建好.java文件时自动建好的。

image.png

image.png

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

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="这是设置界面"
        android:textSize="30dp" />
</FrameLayout>
复制代码

其他的类似，改动一下TextView的内容与属性即可。

android:gravity="center"：设置text布局位置。

android:textSize="30dp"：设置字体大小

界面的主文件activity_main.xml

image.png

使用include将两个top与bottom放到其中。并分别设置gravity为top与bottom。使用一个Framelayout显示中间的可切换的界面，设置好ID。

注：若没有Framelayout是无法是top与bottom显示与在顶部和底部，因为weight都设置为1，会使这两个平分页面。
<?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"
    android:baselineAligned="false"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <include
        layout="@layout/top"
        android:layout_width="match_parent"
        android:layout_height="51dp"
        android:gravity="top" />

    <FrameLayout
        android:id="@+id/id_content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
    </FrameLayout>


    <include
        layout="@layout/botton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="bottom|top|center_vertical" />
</LinearLayout>
复制代码

主函数文件MainActivity.java

supportRequestWindowFeature(Window.FEATURE_NO_TITLE)：取消默认title

transaction.add(R.id.id_content,xxxxFragment)：把fragment加入到id_content

hideFragment：tag页面的隐藏

onClick:实现点击事件

showfragment：显示切换后的界面中间部分

changeColor：实现点击后图标的切换（图标是两套，一套未点击的，一套点击后乘绿色的。网上找的）

package com.example.myapplication;

import androidx.appcompat.app.AppCompatActivity;

import android.app.Fragment;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private Fragment weixinFragment=new weixinFragment();
    private Fragment friendFragment=new friendFragment();
    private Fragment contactFragment=new contactFragment();
    private Fragment configFragment=new configFragment();

    private FragmentManager fragmentManager;

    private LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;

    private ImageView imageView1,imageView2,imageView3,imageView4;
    private TextView textView1,textView2,textView3,textView4;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        supportRequestWindowFeature(Window.FEATURE_NO_TITLE);  //取消默认title
        setContentView(R.layout.activity_main);

        linearLayout1=findViewById(R.id.weixin);
        linearLayout2=findViewById(R.id.contact);
        linearLayout3=findViewById(R.id.friend);
        linearLayout4=findViewById(R.id.config);

        linearLayout1.setOnClickListener(this);
        linearLayout2.setOnClickListener(this);
        linearLayout3.setOnClickListener(this);
        linearLayout4.setOnClickListener(this);

        imageView1=findViewById(R.id.imageView1);
        imageView2=findViewById(R.id.imageView2);
        imageView3=findViewById(R.id.imageView3);
        imageView4=findViewById(R.id.imageView4);

        textView1=findViewById(R.id.textView1);
        textView2=findViewById(R.id.textView2);
        textView3=findViewById(R.id.textView3);
        textView4=findViewById(R.id.textView4);

        initFragment();
    }

    //fragment标准化
    private void initFragment(){
        fragmentManager=getFragmentManager();
        FragmentTransaction transaction=fragmentManager.beginTransaction();  
        transaction.add(R.id.id_content,weixinFragment);  
        transaction.add(R.id.id_content,contactFragment);
        transaction.add(R.id.id_content,friendFragment);
        transaction.add(R.id.id_content,configFragment);
        hideFragment(transaction);
        transaction.commit();
    }

    
    private void hideFragment(FragmentTransaction transaction){
        transaction.hide(weixinFragment);
        transaction.hide(contactFragment);
        transaction.hide(friendFragment);
        transaction.hide(configFragment);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.weixin:
                changeColor(0);
                showfragment(0);
                break;
            case R.id.contact:
                changeColor(1);
                showfragment(1);
                break;
            case R.id.friend:
                changeColor(2);
                showfragment(2);
                break;
            case R.id.config:
                changeColor(3);
                showfragment(3);
                break;
            default:
                break;
        }
    }

    //tag页面的显示
    private void showfragment(int i) {
        FragmentTransaction transaction=fragmentManager.beginTransaction();
        hideFragment(transaction);
        switch (i){
            case 0:
                transaction.show(weixinFragment);
                break;
            case 1:
                transaction.show(contactFragment);
                break;
            case 2:
                transaction.show(friendFragment);
                break;
            case 3:
                transaction.show(configFragment);
                break;
            default:
                break;
        }
        transaction.commit();
    }

    private void changeColor(int i){
        imageView1.setImageResource(R.drawable.wechat2);
        imageView2.setImageResource(R.drawable.contact2);
        imageView3.setImageResource(R.drawable.friend2);
        imageView4.setImageResource(R.drawable.config2);
        textView1.setTextColor(Color.rgb(255, 255, 255));
        textView2.setTextColor(Color.rgb(255, 255, 255));
        textView3.setTextColor(Color.rgb(255, 255, 255));
        textView4.setTextColor(Color.rgb(255, 255, 255));
        switch (i){
            case 0:
                imageView1.setImageResource(R.drawable.wechat1);
                textView1.setTextColor(Color.rgb(26,250,41));
                break;
            case 1:
                imageView2.setImageResource(R.drawable.contact1);
                textView2.setTextColor(Color.rgb(26,250,41));
                break;
            case 2:
                imageView3.setImageResource(R.drawable.friend1);
                textView3.setTextColor(Color.rgb(26,250,41));
                break;
            case 3:
                imageView4.setImageResource(R.drawable.config1);
                textView4.setTextColor(Color.rgb(26,250,41));
                break;
            default:
                break;
        }
    }
}
复制代码

小结

了解了创建界面的初步步骤，.xml为前端显示页面，.java算是后端实现功能的具体代码。调控件属性，使其正确排列，整体布局等等，尝试与查询控件属性也算是调好了，弥补了上课忘带电脑没跟上的一小段。之后，实现了top和bottom的设计，及中间片段图层之间的隐藏与切换，最后实现了点击菜单后的颜色切换问题即切换图片与对应的framelayout。用到了TextView、ImageView、LinearLayout、Fragment组件，了解了点击事件onClick函数的编写，初步了解了transaction与hideFragement的用法。

项目源码已经上传至gitee

猜你喜欢

转载自juejin.im/post/7017048587603312654
今日推荐
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
“百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
最强开源大模型 Llama 3 上架 Gitee AI
虽然老乡鸡开源的不是代码，但背后的原因却让人很暖心
周排行
决策树的部分理解
STM32软件IIC的实现
RocketMQ原理解析-HA
vue-动态路由（路由的传参和接参）
利用python对Excel中的特定数据提取并写入新表
【Ubuntu】 Ubuntu16.04搭建NFS服务
Elasticsearch基础操作与对应的curl命令行，python对接实现
JVM数据存储结构 & Java的值传递和址传递
yum命令使用指南
java基础（一）：java语法基础
每日归档
更多
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(5)
2024-04-16(70)
2024-04-15(42)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022