当前位置:   article > 正文

用Android Studio实现类微信界面设计_用android sutido完成一个作业,要求仿照微信聊天界面设计一个类似的界面,将制作好

用android sutido完成一个作业,要求仿照微信聊天界面设计一个类似的界面,将制作好

用Android Studio实现类微信界面设计

要求:
1.界面分为三部分,上面是标题,中间显示内容,下面有四个小按钮
2.中间显示的内容随着下面按钮的选择而变化
3.点击下面按钮,按钮状态会变化
效果展示:

前端页面设计:
顶部:顶部用来显示标题,只需要一个textvew组件即可。布局为垂直,输入标题,调整一下位置和大小。
在这里插入图片描述效果如图:
在这里插入图片描述

中部:同样只需要一个textview组件。其他配置见图。
在这里插入图片描述在这里插入图片描述

如法炮制,再设置另外三个页面。
底部:底部的布局比上部和中部复杂些。共分四个板块,布局为水平,板块内部又有两部分,一个图标,一行文字。用一个水平布局嵌套四个垂直布局。添加imagebutton组件,将准备好的图片插入(可以选择自己喜欢的图标)。
布局结构如下:
在这里插入图片描述

效果如图:
在这里插入图片描述
用一个framelayout将三个组件组合在一起,将标题放在顶部,中间是介绍界面,下面是四个小组件。
代码如下:

<?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"
    android:orientation="vertical">

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


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

    </FrameLayout>

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

</LinearLayout>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

最终的界面:
在这里插入图片描述

界面动态实现
这里用Fragment来实现界面的切换。

Fragment的优势有以下几点:
模块化(Modularity):我们不必把所有代码全部写在Activity中,而是把代码写在各自的Fragment中。
可重用(Reusability):多个Activity可以重用一个Fragment。
可适配(Adaptability):根据硬件的屏幕尺寸、屏幕方向,能够方便地实现不同的布局,这样用户体验更好。

用Fragment将中间界面包装成一个类,在MainActivity中调用实现界面动态切换。可以用一个BlankFragment自动生成代码,在最下面修改要压缩的界面名称。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/知新_RL/article/detail/676327
推荐阅读
相关标签
  

闽ICP备14008679号