安科网

android界面布局

pengjin

pengjin

2020-01-28

关注 关注

（一）LinearLayout界面编排模式

他的格式是按照线性顺序，由上往下或右左往右，逐一排列界面组件。

layout_width:中的“match_parent”表示要填满他所在的外框，而“wrap_content”表示它的大小只要满足内部所包含的界面组件即可。

android:orientation:“horizontal”表示排列方式为水平，而“vertical”表示排列方式为垂直

LinearLayout标签可以想象成一个外框，我们可以在其里面加入另外一个LinearLayout标签

我们将之前的婚姻建议程序改良一下，换成以下格式

第一层布局还是LinearLayout垂直布局，里面嵌套了一个LinearLayout水平布局，在该布局中包括性别TextView，和Spinner性别选择下拉框

再在第一层上嵌套一个LinearLayout水平布局，在该布局中包含年龄TextView和输入年龄框EditText

最后在第一层的布局上加入Button确定按钮和建议TextView

界面布局：

<?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"
    android:padding="@android:dimen/app_icon_size"
    tools:context=".MainActivity">

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/sex"
            android:textSize="25sp" />
        <Spinner
            android:id="@+id/spnSex"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:entries="@array/sex_list"
            android:spinnerMode="dialog"
            android:prompt="@string/spn_sex_list_prompt" />
    </LinearLayout>
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/age"
            android:textSize="25sp" />
        <EditText
            android:id="@+id/edtAge"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="10"
            android:inputType="number"
            android:hint="@string/edt_age_hint" />
    </LinearLayout>
    <Button
        android:id="@+id/btnOk"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="@string/btn_ok"
        android:textSize="25sp" />
    <TextView
        android:id="@+id/txtR"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="25sp" />

</LinearLayout>

页面截图：

android界面布局

 （二）TableLayout界面布局

顾名思义，tabel就是按照表格的形式来进行排列，也就是由上往下一行接着一行，而且每一个字段都上下对齐

每一行用标签用TableRow标签包裹起来，如果想让一个TableRow中的足见按照比例使用整个Table的宽度，可以借助android:layout_weight属性

例如：

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:layout_gravity="center_horizontal"
    android:layout_margin="10dp"
    tools:context=".MainActivity">
    <TableRow>
        <TextView
            android:text="姓名："
            android:layout_weight="1"/>
        <TextView android:text="性别："
            android:layout_weight="1"/>
        <TextView android:text="生日："
            android:layout_weight="1"/>
    </TableRow>
    <TableRow>
        <EditText android:text="输入姓名"
            android:layout_weight="1"/>
        <EditText android:text="输入性别"
            android:layout_weight="1"/>
        <EditText android:text="输入生日"
            android:layout_weight="1"/>
    </TableRow>
    <Button android:text="确定"/>
</TableLayout>

程序截屏：

android界面布局

 TableRow中的组件和上一个组件对齐，无法错开，就会形成如下图：

android界面布局

 那么我们想要错开可以使用，在TableLayout标签中再增加一个TableLayout标签，这样就可以让不同行的字段错开

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:layout_gravity="center_horizontal"
    android:layout_margin="10dp"
    tools:context=".MainActivity">
    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TableRow>
            <TextView
                android:text="姓名："
                android:layout_weight="1"/>
            <TextView android:text="性别："
                android:layout_weight="1"/>
            <TextView android:text="生日："
                android:layout_weight="1"/>
        </TableRow>
        <TableRow>
            <EditText android:text="输入姓名"
                android:layout_weight="1"/>
            <EditText android:text="输入性别"
                android:layout_weight="1"/>
            <EditText android:text="输入生日"
                android:layout_weight="1"/>
        </TableRow>
    </TableLayout>
    <TableRow>
        <TextView android:text="电话：" />
        <TextView android:text="地址：" />
    </TableRow>
    <TableRow>
        <EditText android:text="请输入电话："/>
        <EditText android:text="请输入地址"/>
    </TableRow>
    <Button android:text="确定"/>
</TableLayout>

应用截图：

android界面布局

 （三）RelativeLayout界面编排

android界面布局

先做个小案例试试手：

<?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-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center_horizontal"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/txt1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="txt1" />
    <TextView
        android:id="@+id/txt2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="txt2"
        android:layout_toRightOf="@+id/txt1" />
    <EditText
        android:id="@+id/edt1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="edt1"
        android:layout_below="@+id/txt1" />
    <EditText
        android:id="@+id/edt2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="edt2"
        android:layout_toRightOf="@+id/edt1" />
    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="btn1"
        android:layout_below="@+id/edt1" />
</RelativeLayout>

程序截图：

android界面布局

 可以看到两个EditText出现一高一低，没有对齐。因此我们需要给edt2加上：android:layout_alighTop="@+id/edt1"

我们重新对其编排一下

android界面布局

<?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-auto"
    xmlns:tools="http://schemas.android.com/tools"

    android:layout_height="match_parent"
    android:layout_width="400dp"
    android:layout_gravity="center_horizontal"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/txt1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="txt1" />
    <TextView
        android:id="@+id/txt2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="txt2"
        android:layout_above="@+id/edt2"
        android:layout_alignLeft="@+id/edt2" />
    <EditText
        android:id="@+id/edt1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="edt1"
        android:layout_below="@+id/txt1" />
    <EditText
        android:id="@+id/edt2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="edt2"
        android:layout_toRightOf="@+id/edt1"
        android:layout_alignTop="@+id/edt1" />
    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="btn1"
        android:layout_below="@+id/edt1" />
</RelativeLayout>

猜拳游戏：

界面布局文件：

<?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-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_height="match_parent"
    android:layout_width="400dp"
    android:layout_gravity="center_horizontal"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/txtTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/prompt_title"
        android:textColor="#FF00FF"
        android:textSize="40sp"
        android:textStyle="bold"
        android:layout_centerHorizontal="true"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="20dp"/>
    <TextView
        android:id="@+id/txtCom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/prompt_com_play"
        android:layout_below="@+id/txtTitle"
        android:layout_alignLeft="@+id/txtTitle"
        android:textSize="20sp"
        android:layout_marginBottom="20dp"
        android:layout_alignStart="@+id/txtTitle" />
    <TextView
        android:id="@+id/txtMyPlay"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/prompt_my_play"
        android:layout_below="@id/txtTitle"
        android:layout_alignRight="@id/txtTitle"
        android:textSize="20sp"
        android:layout_marginBottom="20dp"
        android:layout_alignEnd="@id/txtTitle" />
    <Button
        android:id="@+id/btnScissors"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/play_scissors"
        android:layout_below="@+id/txtMyPlay"
        android:layout_alignLeft="@+id/txtMyPlay"
        android:textSize="20sp"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        android:layout_alignStart="@+id/txtMyPlay" />
    <TextView
        android:id="@+id/txtComPlay"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/btnScissors"
        android:layout_alignLeft="@+id/txtCom"
        android:textSize="30sp"
        android:textColor="#FF00FF"
        android:layout_alignStart="@+id/txtCom" />
    <Button
        android:id="@+id/btnStone"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/play_stone"
        android:layout_below="@id/btnScissors"
        android:layout_alignLeft="@id/btnScissors"
        android:textSize="20sp"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        android:layout_alignStart="@id/btnScissors" />
    <Button
        android:id="@+id/btnPaper"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/play_paper"
        android:layout_below="@id/btnStone"
        android:layout_alignLeft="@id/btnStone"
        android:textSize="20sp"
        android:paddingLeft="25dp"
        android:paddingRight="25dp"
        android:layout_alignStart="@id/btnStone" />
    <TextView
        android:id="@+id/txtResult"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/result"
        android:layout_below="@id/btnPaper"
        android:layout_alignLeft="@id/txtCom"
        android:textSize="20sp"
        android:textColor="#0000FF"
        android:layout_marginTop="20dp"
        android:layout_alignStart="@id/txtCom" />

</RelativeLayout>

字符串资源文件：

<resources>
    <string name="app_name">RelativeLayout</string>
    <string name="prompt_com_play">电脑出拳：</string>
    <string name="prompt_my_play">玩家出拳：</string>
    <string name="play_scissors">剪刀</string>
    <string name="play_stone">石头</string>
    <string name="play_paper">布</string>
    <string name="player_win">恭喜，你赢了</string>
    <string name="player_lose">很可惜，你输了</string>
    <string name="player_draw">双方平手！</string>
    <string name="prompt_title">和电脑猜拳</string>
    <string name="result">判断输赢：</string>
</resources>

程序文件：

package com.example.relativelayout;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

import org.w3c.dom.Text;

public class MainActivity extends AppCompatActivity {
    private TextView mTxtComPlay,mTxtResult;
    private Button mBtnScissors,mBtnStone,mBtnPaper;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mTxtComPlay=(TextView)findViewById(R.id.txtComPlay);
        mTxtResult=(TextView)findViewById(R.id.txtResult);
        mBtnScissors=(Button)findViewById(R.id.btnScissors);
        mBtnPaper=(Button)findViewById(R.id.btnPaper);
        mBtnStone=(Button)findViewById(R.id.btnStone);

        mBtnScissors.setOnClickListener(btnScissorsOnClick);
        mBtnStone.setOnClickListener(btnStoneOnClick);
        mBtnPaper.setOnClickListener(btnPaperOnClick);
    }

    private Button.OnClickListener btnScissorsOnClick=new Button.OnClickListener(){
        @Override
        public void onClick(View v) {
            int iComPlay=(int)(Math.random()*3+1);
            //1.剪刀，2.石头，3.布
            if(iComPlay==1)
            {
                mTxtComPlay.setText(R.string.play_scissors);
                mTxtResult.setText(getString(R.string.result)+getString(R.string.player_draw));
            }
            else if(iComPlay==2)
            {
                mTxtComPlay.setText(R.string.play_stone);
                mTxtResult.setText(getString(R.string.result)+getString(R.string.player_lose));
            }
            else
            {
                mTxtComPlay.setText(R.string.play_paper);
                mTxtResult.setText(getString(R.string.result)+getString(R.string.player_win));
            }
        }
    };
    private Button.OnClickListener btnStoneOnClick=new Button.OnClickListener(){
        @Override
        public void onClick(View v) {
            int iComPlay=(int)(Math.random()*3+1);
            //1.剪刀，2.石头，3.布
            if(iComPlay==1)
            {
                mTxtComPlay.setText(R.string.play_scissors);
                mTxtResult.setText(getString(R.string.result)+getString(R.string.player_win));
            }
            else if(iComPlay==2)
            {
                mTxtComPlay.setText(R.string.play_stone);
                mTxtResult.setText(getString(R.string.result)+getString(R.string.player_draw));
            }
            else
            {
                mTxtComPlay.setText(R.string.play_paper);
                mTxtResult.setText(getString(R.string.result)+getString(R.string.player_lose));
            }
        }
    };
    private Button.OnClickListener btnPaperOnClick=new Button.OnClickListener(){
        @Override
        public void onClick(View v) {
            int iComPlay=(int)(Math.random()*3+1);
            //1.剪刀，2.石头，3.布
            if(iComPlay==1)
            {
                mTxtComPlay.setText(R.string.play_scissors);
                mTxtResult.setText(getString(R.string.result)+getString(R.string.player_lose));
            }
            else if(iComPlay==2)
            {
                mTxtComPlay.setText(R.string.play_stone);
                mTxtResult.setText(getString(R.string.result)+getString(R.string.player_win));
            }
            else
            {
                mTxtComPlay.setText(R.string.play_paper);
                mTxtResult.setText(getString(R.string.result)+getString(R.string.player_draw));
            }
        }
    };
}

程序截图：

android界面布局　　android界面布局　　android界面布局

android布局

pengjin

pengjin

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

Android学习（Week1）

第一周学了了安卓的各种布局结构，有线性布局，这是一种普适性较强，较受欢迎的布局结构，自由度高，可以方便自由的定义控件的位置。结构比较干净不冗余，且适合初学者学习研究。除此之外还介绍了相对布局，这是一种位置感较强的布局，可以较好的把握控件的空间感和位置结构，

hqulyc 2020-02-21

Android常用布局和控件

4、公共属性1) layout_width -宽 fill_parent: 宽度和父元素相同，wrap_content: 宽度随本身的内容所调整，或者指定 px值来设置宽2) layout_height - 高 fill_parent: 高度和父元素相

fengyeezju 2020-02-02

Android 的UI基础布局的学习

　　　　一、　　今天学习了Android 的UI基础布局的部分，绝大多数的布局都在Androidstudio的这个界面里，如下：。　　　　　　UI布局共有三种方法，xml文件进行布局，java编译进行布局，xml+java同时布局；　　　　　　xml文件布

fengyeezju 2020-02-02

Android Studio阶段性学习总结_1

在建立第一个Android studio项目时，我遇到了很大的阻碍，像这种问题ERROR: Cause: unable to find valid certification path to requested target等等，我以为会像安装ecplis

安辉 2020-01-30

Android：UI界面设计基础知识总结

大年初一，这里有我。寒假过的很快，转眼间已经荒废了两周的学习时间，现在想来仍然是惭愧不已。但时间已经流逝，我能做的就是抓紧当下，真正地投入到学习，投入到Android的学习中去。现在学习主要是跟着视频教程边看边学，现将学习到的零星知识点总结如下：。Andr

安辉 2020-01-25

Android的四大组件及Activity 的生命周期 及五种布局

Activity： 是Android与用户交互的窗口，Service: 后台服务于Activity , 封装有一个完整的逻辑功能，Content Provider ： 是Android 提供的第三方应用数据的访问方案，创建activity时调用 ， 设置在

fengyeezju 2020-01-11

Android布局管理器-使用LinearLayout实现简单的登录窗口布局

线性布局LinearLayout,分为水平和垂直线性布局。设置其为竖直线型布局。然后添加一个按钮，设置其颜色。

csdnuuu 2020-01-04

Android布局管理器-从实例入手学习相对布局管理器的使用

相对布局只要是要有参照物，即谁在谁下方，谁在谁左边，和谁左对齐，等等。然后再添加一个按钮使其在textView的下方以及在立即更新按钮的左边。android:text="发现新的版本，您想现在更新吗？

magic00 2020-01-04

Android布局属性详解

设置EditText为空时输入框内的提示信息。android:gravity属性是对该view 内容的限定．比如一个button 上面的text. 你可以设置该text 在view的靠左，靠右等位置．以button为例，android:gravity=&q

安辉 2013-07-14

Android界面布局基本知识简述

做Android界面布局有点像写html，要先给Android定框架，然后再在框架里面放控件，Android提供了几种框架,AbsoluteLayout,LinearLayout,RelativeLayout,TableLayout,FrameLayout

冰川孤辰 2013-07-12

Android 众多的布局属性详解

Android功能强大，界面华丽，但是众多的布局属性就害苦了开发者，下面这篇文章结合了网上不少资料，花费本人一个下午搞出来的，希望对其他人有用。EditText的android:hint 设置EditText为空时输入框内的提示信息。** 要注意一点，Dr

Tom天天 2013-07-12

【2013.07.03】界面布局

3.通过include包含进某个布局的局部布局，其中的控件也就相当于在当前的布局中，可在Java代码中通过findViewById直接获取

WangWY 2013-07-03

android 布局中控件居中且向左偏移的写法

第二种方案 不限layout，但是在eclipse预览的时候发现很奇怪的问题，就是虽然view 移动了，但是图形工具里拿鼠标去点那个view的时候发现他还在原来的位置上，不知道这是adt的bug，还是什么原理。但是我有一种预感是，android 界面初始化

Lzn0 2013-09-05

android布局小总结

android:layout_centerHrizontal 水平居中 android:layout_centerVertical 垂直居中 android:layout_centerInparent 相对于父元素完全居中 android:layout_a

CrazyDavid 2013-09-03

android布局之layout_weight

其值越小，则对应的layout_width或layout_height的优先级就越低，一般横向布局中，决定的是layout_width的优先级；纵向布局中，决定的是layout_height的优先级。举例说明，如果parent长度是10，模式是horizo

tianhui 2013-08-23

Android六大布局详解——GridLayout（网格布局）

本章以一个小的实现示例讲述：

绿豆饼 2019-11-12

Android常见布局控件之LinearLayout和TableLayout

android:gravity:指定控件中内容的基本内容。分别表示水平排列和垂直排列。LinearLayout是线性布局控件，它包含的子控件将以横向或竖向的方式排列，按照相对位置来排列所有的widgets或者其他的containers,超过边界时，某些控件

Rgenxiao 2011-04-06

Android常用布局控件之RelativeLayout

我们使用LinearLayout和TableLayout可以满足开发应用程序界面基本的要求。RelativeLayout是一种相对布局的控件，这个容器内部的子元素们可以使用彼此之间的相对位置或者和容器间的相对位置来进行定位，类似于网页设计中的CSS。在指定

西木 2011-04-06

Android动态设置控件高度

[Java]代码

sgafdsg 2011-01-24

Android:layout_weight

layout_weight是LinearLayouts的view布局里一个很重要的值。所有的view的layout_weight缺省值都是为0，意味着他们只在屏幕上占据它们需要显示的空间大小。activity根据这个View的比0大的layout_weig

learningITwell 2010-11-15
pengjin

pengjin

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号