实验二、Android界面布局实验

最新推荐文章于 2024-06-27 19:22:57 发布
最新推荐文章于 2024-06-27 19:22:57 发布
阅读量4.7k 收藏 25
点赞数 2
文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42090791/article/details/105150491
版权

Andriod开发实验二

@author: 068赖昌平

  • Android布局实验

一、实验环境:

Android Studio + Android 5.0

二、实验内容

1.利用线性布局实现如下界面

这里可以看出，题目是要我们用线性布局生成一个4*4的表格是的textView，这个布局不难实现，只需要贴上四块LinearLayout，每块LinearLayout包含4个textView，横向布局，设置marginRight的值进行间隔就可以了，然后在最外面包含一个总的线性布局框，垂直布局，设置marginBottom值，就可以实现了

代码：
<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"
    tools:context=".MainActivity"
    android:orientation="vertical">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal"
        >


    <TextView
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:layout_weight="1"
        android:text="One,One"
        android:background="#4DB38A"
        android:textColor="#333333"
        android:textSize="12dp"
        android:gravity="center"
        />
    <TextView
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:layout_weight="1.3"
        android:layout_marginLeft="3dp"
        android:text="One,Two"
        android:background="#4DB38A"
        android:textColor="#333333"
        android:textSize="12dp"
        android:gravity="center"/>
    <TextView
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:layout_marginLeft="3dp"
        android:layout_weight="1"
        android:text="One,Three"
        android:background="#4DB38A"
        android:textColor="#333333"
        android:textSize="12dp"
        android:gravity="center"/>
    <TextView
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:layout_weight="1"
        android:layout_marginLeft="3dp"
        android:text="One,Four"
        android:background="#4DB38A"
        android:textColor="#333333"
        android:textSize="12dp"
        android:gravity="center"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:paddingTop="3dp"
        android:orientation="horizontal">


        <TextView
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:text="Two,One"
            android:background="#4DB38A"
            android:textColor="#333333"
            android:layout_gravity="center_horizontal"
            android:gravity="center"
            android:textSize="12dp"
            />
        <TextView
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="1.3"
            android:layout_marginLeft="3dp"
            android:text="Two,Two"
            android:background="#4DB38A"
            android:textColor="#333333"
            android:textSize="12dp"
            android:gravity="center"/>
        <TextView
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_marginLeft="3dp"
            android:layout_weight="1"
            android:text="Two,Three"
            android:background="#4DB38A"
            android:textColor="#333333"
            android:textSize="12dp"
            android:gravity="center"/>
        <TextView
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:layout_marginLeft="3dp"
            android:text="Two,Four"
            android:background="#4DB38A"
            android:textColor="#333333"
            android:textSize="12dp"
            android:gravity="center"/>
    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:paddingTop="3dp"
        android:orientation="horizontal"
        >


        <TextView
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:text="One, One"
            android:background="#4DB38A"
            android:textColor="#333333"
            android:gravity="center"
            android:textSize="12dp"

            />
        <TextView
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:layout_marginLeft="3dp"
            android:text="Three, Two"
            android:background="#4DB38A"
            android:textColor="#333333"
            android:textSize="12dp"
            android:gravity="center"/>
        <TextView
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_marginLeft="3dp"
            android:layout_weight="1"
            android:text="Three,Three"
            android:background="#4DB38A"
            android:textColor="#333333"
            android:textSize="11dp"
            android:gravity="center"/>
        <TextView
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:layout_marginLeft="3dp"
            android:text="Three,Four"
            android:background="#4DB38A"
            android:textColor="#333333"
            android:textSize="12dp"
            android:gravity="center"
            />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:paddingTop="3dp"
        android:layout_marginTop="3dp"
        android:orientation="horizontal"
        android:layout_weight="1"
        >

        <TextView
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:text="Four, One"
            android:background="#4DB38A"
            android:textColor="#333333"
            android:gravity="center"
            android:textSize="12dp"
            />
        <TextView
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:layout_marginLeft="3dp"
            android:text="Four,Two"
            android:background="#4DB38A"
            android:textColor="#333333"
            android:textSize="12dp"
            android:gravity="center"/>
        <TextView
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_marginLeft="3dp"
            android:layout_weight="1"
            android:text="Four,Three"
            android:background="#4DB38A"
            android:textColor="#333333"
            android:textSize="12dp"
            android:gravity="center"/>
        <TextView
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:layout_marginLeft="3dp"
            android:text="Four,Four"
            android:background="#4DB38A"
            android:textColor="#333333"
            android:textSize="12sp"
            android:gravity="center"
            />
    </LinearLayout>
</LinearLayout>
效果图：

在这里插入图片描述

2.利用ConstraintLayout实现如下界面

在这里插入图片描述
估算每个方块的大小，并填上相应文字，慢慢调位置就好了

代码：
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".Main2Activity"
    android:orientation="vertical">
    <TextView
        android:id="@+id/red_view"
        android:layout_width="65dp"
        android:layout_height="60dp"
        android:layout_marginLeft="3dp"
        android:background="@android:color/holo_red_light"
        android:text="RED"
        android:gravity="center"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent">

    </TextView>
    <TextView
        android:id="@+id/orange_view"
        android:layout_width="90dp"
        android:layout_height="60dp"
        android:layout_marginLeft="150dp"
        android:background="@android:color/holo_orange_light"
        android:text="ORANGE"
        android:gravity="center"
        app:layout_constraintLeft_toLeftOf="@+id/red_view"
        app:layout_constraintTop_toTopOf="parent">
    </TextView>

    <TextView
        android:id="@+id/yellow_view"
        android:layout_width="90dp"
        android:layout_height="60dp"
        android:layout_marginRight="3dp"
        android:background="#FFFF00"
        android:text="YELLOW"
        android:gravity="center"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">
    </TextView>
    <TextView
        android:id="@+id/green_view"
        android:layout_width="90dp"
        android:layout_height="60dp"
        android:layout_marginLeft="60dp"
        android:layout_marginTop="25dp"
        android:background="#00FF00"
        android:text="GREEN"
        android:gravity="center"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/orange_view">
    </TextView>
    <TextView
        android:id="@+id/blue_view"
        android:layout_width="67dp"
        android:layout_height="60dp"
        android:layout_marginLeft="15dp"
        android:layout_marginTop="25dp"
        android:background="#0000FF"
        android:text="BLUE"
        android:gravity="center"
        app:layout_constraintLeft_toRightOf="@+id/green_view"
        app:layout_constraintTop_toBottomOf="@+id/orange_view">
    </TextView>
    <TextView
        android:id="@+id/INDIGO_view"
        android:layout_width="85dp"
        android:layout_height="60dp"
        android:layout_marginLeft="7dp"
        android:layout_marginTop="25dp"
        android:background="#484259"
        android:text="INDIGO"
        android:gravity="center"
        app:layout_constraintLeft_toRightOf="@+id/blue_view"
        app:layout_constraintTop_toBottomOf="@+id/orange_view">
    </TextView>
    <TextView
        android:id="@+id/violet_view"
        android:layout_width="fill_parent"
        android:layout_height="60dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="15dp"
        android:background="#DB7093"
        android:text="VIOLET"
        android:gravity="center"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/green_view">
    </TextView>
</androidx.constraintlayout.widget.ConstraintLayout>
效果图：

在这里插入图片描述

3.利用表格布局实现如下界面

在这里插入图片描述

代码：
<TableLayout 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"
    tools:context=".Main3Activity"
    android:stretchColumns="1">

    <TableRow>
        <TextView
            android:text="Open...."
            android:paddingLeft="10dp"/>
        <TextView
            android:text="Ctrl+O"
            android:gravity="right"
            android:paddingRight="10dp"/>
    </TableRow>
    <TableRow>
        <TextView
            android:text="Save...."
            android:paddingLeft="10dp"/>
        <TextView
            android:text="Ctrl+S"
            android:gravity="right"
            android:paddingRight="10dp"/>
    </TableRow>
    <TableRow>
        <TextView
            android:text="Save as...."
            android:paddingLeft="10dp"/>
        <TextView
            android:text="Ctrl+Shift+S"
            android:gravity="right"
            android:paddingRight="10dp"/>
    </TableRow>
    <TableRow>
        <TextView
            android:text="X Import...."
            android:paddingLeft="10dp"/>
    </TableRow>
    <TableRow>
        <TextView
            android:text="X Export...."
            android:paddingLeft="10dp"/>
        <TextView
            android:text="Ctrl+E"
            android:gravity="right"
            android:paddingRight="10dp"/>
    </TableRow>
    <TableRow>
        <TextView
            android:text="  Quit"
            android:paddingLeft="10dp"/>
    </TableRow>
</TableLayout>
效果图：

在这里插入图片描述

三、结语

本次实验内容是我接触Android开发的首次尝试，内容不难，但是调整各个组件的位置让人抓狂，需要比较细心的进行调整，既是收获了Android开发的新知识，也回去重新巩固了一下html和css的相关内容，这次实验总体收获蛮大的，但第一次使用markdown语言比较生疏，写了一个晚上熟悉了一下，也算是不小的收获。

championn69
关注
Android Studio 实验二
m0_56385869的博客
06-21 1716
Android Studio 实验二
【Android Studio】实验三 Android Activity界面布局（二）
最新发布
08-24
移动编程实验报告 实验目的：掌握Android程序的基本布局设计方法。 实验内容：熟悉Activity五种基本布局,上机实现例3.6~ 3.11, 仅供参考，共勉。
【Android Studio】实验二 Android Activity界面布局
07-07
实验目的：掌握Activity的生命周期和界面元素的设置及访问方法。 实验内容：熟悉Activity界面的各元素。
Android studio各种布局，UI界面交互功能
qq_52898134的博客
06-27 1564
在这个示例中，使用GestureDetectorCompat类来创建一个gestureDetector对象，并通过实现GestureDetector.OnGestureListener接口中的方法来处理用户的滑动操作。在实际项目中，可以通过设置控件之间的相对位置关系来实现灵活的布局效果。可以根据自己的需求添加更多的菜单项，并在MainActivity.java中相应地处理它们的点击事件。在Java文件中找到对应的Button控件，并设置点击事件监听器，然后在事件处理方法中编写相应的逻辑代码。
android开发——界面五大布局
u013265457的专栏
02-11 646
Android开发之盘点界面五大布局 　　1.Android开发——线性布局(LinearLayout) 　　线性布局的形式可以分为两种，第一种横向线性布局 第二种纵向线性布局，总而言之都是以线性的形式 一个个排列出来的，纯线性布局的缺点是很不方便修改控件的显示位置，所以开发中经常会 以 线性布局与相对布局嵌套的形式设置布局。 　　使用了线性布局的水平方向与垂直方向，从图中可以清晰的看出来所
android实验2
城南的花
04-04 350
&lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_...
Android实验2：简易计算器
weixin_42429385的博客
06-25 1808
1.     完成一个计算器的设计，可以以手机自带的计算器为参考。设计过程中，注意考虑界面的美观性，不同机型的适应性，以及功能的完备性。2.     注意结合Activity的生命周期，考虑不同情况下计算器的界面状态。3.      如有余力，可以考虑实现一个高精度科学计算型的计算器。activity_main.xml&lt;?xml version="1.0" encoding="utf-8"?...
实验二android的使用方法,实验2 Android应用界面开发(1)
weixin_34026053的博客
05-26 389
实验2 Android应用界面开发(1)一、实验目的1、了解View类、ViewGroup的作用2、掌握常用布局管理器的使用3、掌握XML界面控制的设计方法4、从本周起，以后每次小课的实验内容，要求上传至小课老师的FTP。二、实验步骤1、简要概括View和ViewGroup作用。答：2、相对布局管理器的使用，补充代码，使程序运行的效果如下图所示： 图1 实验效果图Relativ...
Android控件布局实验1
08-08
本次实验是关于Android开发的控件布局实践，主要涵盖了多个常见的Android控件和布局方式的使用，包括Relative Layout、GridView、Chronometer、Calculator以及可扩展的ExpandableListView和CardView。 1、**...
Android课程实验-线性布局实验-限制布局实验-表格布局实验-自制的浏览器.zip
06-02
在本压缩包“Android课程实验-线性布局实验-限制布局实验-表格布局实验-自制的浏览器.zip”中，包含了多个Android开发相关的实验项目，这些项目涵盖了Android UI设计的基础元素和核心概念。以下是对每个实验项目的...
实验二 布局管理器及简单控件的使用
05-24
实验指导文档“实验二 布局管理器及简单控件的使用.doc”会详细讲解如何在实际项目中应用上述概念。同时，“作业完成版.doc”可能是实验的完成情况记录或解答，包含了对实验内容的理解和应用。 通过这个实验，...
Android实验报告(实验二)2018240174余世龙.docx
04-16
安卓课后实验习题学习Android的界面设计，熟悉常用组件的调用和配置，设计实现包含常用组件的“用户注册”应用程序界面
用户界面设计的实验报告
11-20
用户界面设计实验报告，心得体会等等，来自于中南民族大学
Android页面布局实验,android 页面布局
weixin_33488923的博客
05-26 186
同一个页面的两种效果第一种效果android:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="vertical" >android:id="@+id/txt_loginerror"android:layout_height="wrap_content"android:layou...
【Android】实验二 Android GUI开发
二琳爱吃肉的博客
05-20 1731
一、实验目的 1、学习android程序GUI的开发方法。 2、学习android程序一个RelativeLayout布局的开发方法。 二、实验内容 1、实现个人爱好的设置界面，包含4种个人爱好，分别为运动、学习、看书和爬山，并且用户能同时选择多个爱好。 2、使用RelativeLayout布局完成如下界面的设计，可以尝试对按钮进行事件处理。 三、实验步骤 1、建立一个android工程，修改main.xml文件并编写程序代码，设计一个个人爱好的设置界面，包含4种个人爱好，分别为运动.
移动开发技术（Android）——实验2 Android布局管理器的应用
weixin_44652589的博客
09-01 4493
移动开发技术（Android）——实验2 Android布局管理器的应用一、实验目的二、实验内容（一）创建一个Android项目，名称为“shiyan0201_专业_×××”1.文字说明2.代码（二）创建一个Android项目，名称为“shiyan0202_专业_×××”①linearlayout.xml②relativelayout.xml③tablelayout.xml④framelayout.xml⑤gridlayout.xml 一、实验目的 1．掌握几种布局管理器的特点； 2．掌握几种布局管理器定义
实验二 Android 简单事件
weixin_41879980的博客
07-13 333
一：效果图 二：布局代码 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-aut...
android应用大实验报告,android布局实验报告
weixin_29197051的博客
05-26 457
android布局实验报告 Java网络编程 (实验) 实验题目：Java基于JDBC的数据库应用 指导老师：吴学辉 班 级：计算机科学与技术系1202班 姓 名：范婧(2012100232) 1、 实验目的 1.了解JDBC-ODBC工作原理。 2.掌握JDBC-ODBC桥接驱动程序。 3.掌握数据库的基本编程技术。 二、实验设备 1、硬件：PC机一台； 2、软件：Eclipse编程工具 三、实...
Android第五课-----界面布局
贝勒里恩的博客
07-08 597
一个丰富的界面是由很多个控件组成的，那么我们如何才能让各个控件都有条不紊地摆放在界面上，而不是乱糟糟的呢？ 这就需要借助布局来实现了。布局是一种可用于放置很多控件的容器，它可以按照一定的规律调整内部控件的位置，从而编写出精美的界面。 当然，布局的内部除了放置控件外，也可以放置布局，通过多层布局的嵌套，我们就能够完成一些比较复杂的界面实现。 在Android Studio中，对界面进行布局，可以选择纯代码布局，也可以选择拖拽布局，可以通过右上侧按钮进行切换 LinearLayout又称线性布局，这个布局会将
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值