APP门户界面设计

最新推荐文章于 2024-05-13 17:17:53 发布
最新推荐文章于 2024-05-13 17:17:53 发布
阅读量180 收藏
点赞数
文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46622597/article/details/120680335
版权

文章目录

项目内容

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

主要技术

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

具体过程及代码

分为四个板块，包括xml文件设计和java文件设计

顶部设计top.xml

点击新建top.xml文件，选择水平排列，拖入组件标题，调整背景颜色，字体颜色和大小，文字居中

请添加图片描述
请添加图片描述

代码

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

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="55dp"
        android:layout_weight="1"
        android:gravity="center"
        android:text="微信"
        android:background="#ECECEA"
        android:textColor="@color/black"
        android:textSize="30sp" />
</LinearLayout>

效果展示
请添加图片描述

底部设计bottom.xml

底部设计共八个板块，包括图片和文字，运用LinearLayout（horizontal）构造外部，内部包括四个Linearlayout（vertical)，每个中包括image和text。为了让内部四板块垂直布局均匀分布，设置android:layout_weight=“1”。文字更改字号，android:gravity="center"居中。

请添加图片描述
代码

<?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"
    android:layout_width="match_parent"
    android:layout_height="70dp"
    android:background="#ECECEA">

    <LinearLayout
        android:id="@+id/vx"
        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="40dp"
            app:srcCompat="@android:drawable/sym_action_chat" />
        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:gravity="center"
            android:textSize="15sp"
            android:text="微信" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/people"
        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="40dp"
            app:srcCompat="@android:drawable/ic_menu_my_calendar" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:gravity="center"
            android:textSize="15sp"
            android:text="通讯录" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/find"
        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="40dp"
            app:srcCompat="@android:drawable/ic_menu_search" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:gravity="center"
            android:textSize="15sp"
            android:text="发现" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/my"
        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="40dp"
            app:srcCompat="@android:drawable/star_big_off" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:gravity="center"
            android:textSize="15sp"
            android:text="我的"
/>
    </LinearLayout>
</LinearLayout>

效果展示
请添加图片描述

主要页面activity_main.xml

运用LinearLayout布局，拖入FragmentLayout，运用include引入顶部界面top.xml和底部界面bottom.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"
    android:orientation="vertical"
    tools:context=".MainActivity">

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

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

    </FrameLayout>

    <include
        layout="@layout/bottom"/>
</LinearLayout>

效果展示
请添加图片描述

Fragment实现页面切换

  1. 建立四个fragment java文件，分别对应不同xml界面
    请添加图片描述
    2.“微信”界面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=".wxFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="这里是微信页面"
        android:textSize="50sp" />

</FrameLayout>

效果展示
请添加图片描述
3.完成文件MainActivity实现监听和切换功能

创建对象并进行初始化

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    private  Fragment wxFragment = new wxFragment();
    private  Fragment peopleFragment = new peopleFragment();
    private  Fragment findFragment = new findFragment();
    private  Fragment myFragment = new myFragment();
    private FragmentManager fragmentManager;
    private LinearLayout linearLayout1;
    private LinearLayout linearLayout2;
    private LinearLayout linearLayout3;
    private LinearLayout linearLayout4;

    private ImageView imageView1;
    private ImageView imageView2;
    private ImageView imageView3;
    private ImageView imageView4;

    private TextView textView1;
    private TextView textView2;
    private TextView textView3;
    private TextView textView4;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        linearLayout1 = findViewById(R.id.vx);
        linearLayout2 = findViewById(R.id.people);
        linearLayout3 = findViewById(R.id.find);
        linearLayout4 = findViewById(R.id.my);

        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);

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

        initFragment();
        ShowFragment(0);
    }

配置对象进行监听

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        linearLayout1 = findViewById(R.id.vx);
        linearLayout2 = findViewById(R.id.people);
        linearLayout3 = findViewById(R.id.find);
        linearLayout4 = findViewById(R.id.my);

        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);

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

        initFragment();
        ShowFragment(0);
    }

添加切换的三个界面

  private void initFragment() {
        fragmentManager = getFragmentManager();
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        transaction.add(R.id.frame,wxFragment);
        transaction.add(R.id.frame,peopleFragment);
        transaction.add(R.id.frame,findFragment);
        transaction.add(R.id.frame,myFragment);
        transaction.commit();

    }

隐藏除该展示页面外的其他页面

    private void hideFragment(FragmentTransaction transaction){
        transaction.hide(wxFragment);
        transaction.hide(findFragment);
        transaction.hide(peopleFragment);
        transaction.hide(myFragment);
    }

控制展示不同页面

 private void ShowFragment(int i) {
        FragmentTransaction transaction=fragmentManager.beginTransaction();
        hideFragment(transaction);
        switch (i){
            case 0:
                transaction.show(wxFragment);
                break;
            case 1:
                transaction.show(peopleFragment);
                break;
            case 2:
                transaction.show(findFragment);
                break;
            case 3:
                transaction.show(myFragment);
                break;
            default:
                break;
        }
        transaction.commit();
    }

选择页面后，还原其他页面的图标和字体

private void hide(){
    imageView1.setColorFilter(Color.WHITE);
    imageView2.setColorFilter(Color.WHITE);
    imageView3.setColorFilter(Color.WHITE);
    imageView4.setColorFilter(Color.WHITE);
    textView1.setTextColor(Color.BLACK);
    textView2.setTextColor(Color.BLACK);
    textView3.setTextColor(Color.BLACK);
    textView4.setTextColor(Color.BLACK);
    }

图标和字体更改颜色

 @Override
    public void onClick(View view) {
        switch(view.getId()){
            case R.id.vx:
                ShowFragment(0);
                hide();
                imageView1.setColorFilter(Color.GREEN);
                textView1.setTextColor(Color.GREEN);
                break;
            case R.id.people:
                ShowFragment(1);
                hide();
                imageView2.setColorFilter(Color.GREEN);
                textView2.setTextColor(Color.GREEN);
                break;
            case R.id.find:
                ShowFragment(2);
                hide();
                imageView3.setColorFilter(Color.GREEN);
                textView3.setTextColor(Color.GREEN);
                break;
            case R.id.my:
                ShowFragment(3);
                hide();
                imageView4.setColorFilter(Color.GREEN);
                textView4.setTextColor(Color.GREEN);
                break;
            default:
                break;
        }

结果展示

请添加图片描述
请添加图片描述
请添加图片描述
请添加图片描述

gitee代码地址

项目gitee代码

木森41
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
移动开发——app门户设计
Goblin147的博客
10-09 329
（1）顶部界面设计（top.xml） ①layout下新建top.xml文件和拖入Linear Layout和TextView组件 ②效果图： ③对应代码： <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_h
APP的门户界面设计
胡涛的博客
10-09 594
APP门户界面设计一、项目总体介绍二、各页面(layout)设计展示1、顶部页界面：top.xml页面的设计2、底部页界面：bottom.xml页面的设计3、主题界面：activity_main.xml页面设计4、四个fragment页面设计三、关键步骤与核心技术说明1、为四个点击按钮绑定点击切换的方法微信部分java代码通讯录部分java代码发现部分java代码我的部分java代码2、写主函数MainActivityMainActivity总体代码四、项目总结五、源码地址 一、项目总体介绍 总体内容：.
移动开发技术一：微信门户界面设计
weixin_50281535的博客
09-29 904
2.底部代码 3.基本布局代码 4.中部布局代码 （1）fragment_liaotian.xml （2）fragment_lianxiren.xml （3）fragment_faxian.xml （4）fragment_shezhi.xml 5.MainActivity.java （1）onCreate函数 （2）onClick函数 （3）restartButton函数 （4）initFragment函数 （5）initView函数 （6）initEvent函数 （7）hideView函数 （8
关于门户网站设计方案
蜜我生活之牛仔“闺房”
02-17 818
门户网站有很多种。最为国人熟知的是象新浪搜狐那种信息类门户。主要以广告收入为主。现在也有博客门户等。象当当、淘宝那样的购物平台，其实也是一种门户，只不过陈列的是商品信息，赢利方式是依靠出售商品。门户网站有很多种。最为国人熟知的是象新浪搜狐那种信息类门户。主要以广告收入为主。现在也有博客门户等。象当当、淘宝那样的购物平台，其实也是一种门户，只不过陈列的是商品信息，赢利方式是依
MATLAB APP design-APP登录界面的设计
02-19
在账号和密码提示框中输入相关信息，当输入的账号和密码正确时，点击登录按钮后，登录界面会跳转到工作界面，如果输入的账号和密码错误，则会提示账号和密码错误的信息...跳转界面可以通过修改程序中的Run函数来实现。
app界面设计准则
07-22
资源名称：app界面设计准则资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
MATLAB APP Design 界面窗口化设计
05-29
MATLAB APP Design 是一套有关MATLAB APP窗口化设计的教程，...实例五：MATLAB APP design-APP登录界面的设计 实例六：MATLAB APP design- 凸透镜成像光学研究小工具 实例七：MATLAB APP design- 灰色预测-G（1，1）
APP登录界面源文件素材
07-16
1. **用户界面设计**：用户界面（UI）设计是连接用户与应用的关键。登录界面是用户首次接触APP的地方，因此必须直观易用。设计应简洁明了，避免过多复杂的元素，使用户能快速理解如何进行操作。常见的元素包括用户名...
门户APP开发
最新发布
qq_45843977的博客
05-13 305
一、门户APP开发概述二、门户APP开发流程三、门户APP开发技术门户APP开发涉及多种技术，包括：四、门户APP开发工具门户APP开发可以使用多种工具，包括：五、门户APP开发案例
Android开发——app门户设计
m0_61572100的博客
10-09 191
内容简介 源码地址：Android开发: 本人开发学习Androidhttps://gitee.com/kyrieIrving1/android-development 1.实现APP门户界面框架设计，至少包含4个tab页，能实现tab页之间的点击切换； 2.使用布局（layouts）和分段（fragment），对控件进行点击监听 3.使用git将项目传至gitee。 UI设计 以手机微信主界面为例：   应将主界面分为三个版块，top,content,bottom； top   在top版块应该展示
APP门户页面设计与开发
wht10031000310的博客
10-16 91
在此次APP门户设计实验中，我有许多课堂上没有搞明白的问题，老师的讲课速度我有点跟不上。根据id将4个fragment.xml 的文件内容导入4个对象fragment中，设置fragmentHide函数，使得4个子页面的文本内容隐藏起来，设置fragmentshow函数，显示所选参数的内容。通过linearLayout.setOnclickListener()监听用户点击，在onClick函数中通过对比获得到的id和linearLayout（1~4）的id，决定显示对应的fragment。
安卓开发APP门户界面
qq_45930996的博客
10-12 563
功能说明 设计app的门户界面，类似于微信那样 主要功能如下： 有四个界面 通过点击导航栏的图片按钮切换界面 代码思路分析 编写布局文件 看一下最终实现的效果，分析布局文件的编写 这个界面是app打开时的默认界面。可以看出这个界面由三部分组成 页面顶部的标题栏 中间的不同界面切换 底部的导航栏 这样我们就需要写多个xml布局文件，并将他们组合到一个xml布局文件中。 首先编写top.xml文件，实现顶部的标题栏 然后编写底部的导航栏bottom.xml。这个布局文件中包含四个ImageButton
app门户界面设计
weixin_51433038的博客
10-09 255
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
App门户界面设计
RRros的博客
10-10 124
App门户界面设计项目要求具体开发步骤项目建立top.xml页面设计chat.xmlFragment创建MainActivity修改GitHub代码库链接 项目要求 1、内容：请根据课程实操实现APP门户界面框架设计，至少包含4个tab页，能实现tab页之间的点击切换； 2、技术：使用布局（layouts）和分段（fragment），对控件进行点击监听； 具体开发步骤 项目建立 新建一个项目project,命名为myapp，在命名中不要出现中文字符以及空格等符号，以免在后续的开发中出现不必要的错误。
移动技术开发 APP门户界面设计
peanutaasdzz的博客
10-09 437
一、APP门户设计要求 1、内容：请根据课程实操实现APP门户界面框架设计，至少包含4个tab页，能实现tab页之间的点击切换； 2、技术：使用布局（layouts）和分段（fragment），对控件进行点击监听； 二、UI界面设计 1.制作顶部文件top.xml ...
移动开发技术1 app门户界面设计
Aedelas的博客
10-09 272
要求 1、内容：请根据课程实操实现APP门户界面框架设计，至少包含4个tab页，能实现tab页之间的点击切换； 2、技术：使用布局（layouts）和分段（fragment），对控件进行点击监听； （没有做出点击图标改变颜色的效果） 此界面分为三个部分 top：界面最上方的wechat，可在layout使用textview部件居中展示该文字效果。 content：下面四个标签，能够根据底部功能栏的切换而随之切换。可以使用FrameLayout实现该功能，在FrameLayout中包含四个frag
APP交互界面设计难点
05-15
APP交互界面设计的难点有以下几个方面： 1.用户体验设计：APP界面需要考虑用户的操作习惯、心理感受和需求，要让用户感受到操作的流畅和舒适，从而提高用户体验。 2.信息架构设计：APP界面需要考虑信息的组织和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值