android界面布局

（一）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>

页面截图：

（二）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>

程序截屏：

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

那么我们想要错开可以使用，在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>

应用截图：

（三）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_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>

程序截图：

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

我们重新对其编排一下

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

程序截图：

　　　　

原文地址：https://www.cnblogs.com/xiaofengzai/p/12238649.html

时间： 2024-11-19 16:47:42

android界面布局的相关文章

iOS中xib与storyboard原理，与Android界面布局的异同

用文本标记语言来进行布局,用的最多的应该是HTML语言.HTML可以理解为有一组特殊标记的XML语言. 一.iOS中xib与storyboard显示原理 在iOS中主要的布置界面的方式有3种:代码,xib,storyboard. 1. 代码 代码布置界面是万能的,但通常很复杂.布置一个简单的界面可能需要很多行代码,因此十分繁琐. 下面为创建一个按钮的代码,最少也要3行: UIButton *btn = [UIButton buttonWithType:UIButtonTypeContactAdd

解决Android界面布局添加EditText组件后界面无法预览

错误报告: Exception raised during rendering: java.lang.System.arraycopy([CI[CII)V Exception details are logged in Window > Show View > Error Log 问题分析: 进入xml源文件里发现一个警告,提示添加inputType或者hint元素,添加后界面仍然无法预览... 仔细查看了当前使用的API等级 API 20:Android 4.4w,这是Android官网发布

Android 界面布局

Android布局是所有带界面的Android应用的开端,布局应用的好坏直接决定了用户体验. Android共有五种布局,分别为FrameLayout(堆栈布局). LinearLayout(线性布局). RelativeLayout(相对布局). TableLayout(表格布局). AbsoluteLayout(绝对布局).最常用的布局是FrameLayout.LinearLayout和RelativeLayout. FrameLayout:在布局文件中使用<FrameLayout>标签标

android 界面布局 很好的一篇总结[转]

??在?android?中我们常用的布局方式有这么几种: 1.LinearLayout (?线性布局?)?:(里面只可以有一个控件,并且不能设计这个控件的位置,控件会放到左上角) ???????????????????????????????????????????线性布局分为水平线性和垂直线性二者的属性分别为:android:orientation=?"?horizontal?"???android:orientation=?"vertical"?. 2.Rela

Android 界面布局之RelativeLayout

Android 的 RelaliveLayout 布局的参数定义: android:layout_above="@id/xxx"  --将控件置于给定ID控件之上android:layout_below="@id/xxx"  --将控件置于给定ID控件之下 android:layout_toLeftOf="@id/xxx"  --将控件的右边缘和给定ID控件的左边缘对齐android:layout_toRightOf="@id/xxx&

[Android]继承式UI界面布局设计

一般而言,Android界面布局使用聚合的方式比较多,这种方式要求首先构建一批能够复用的组件,然后在Activity的布局文件中进行聚合.尽管这种方式能够完成组件的复用,但如果这些组件在不同Activity中的布局有很多相同点的时候,也还是会带来很大程度的冗余(代码).本文介绍一种比聚合更加有效的界面布局方式--继承式布局. 对于类的继承和对象的聚合之间有哪些相同点和不同点,分别适用于哪种场景,相信大家已经深有体会.在此就不多讲了.其实类比过来,Android的界面布局也是如此.假设我们需要实现

android界面设计之布局管理

谈到android界面设计,各种布局样式不得不提!传统的布局方式有6种,我们会一一介绍. 在android studio2.2版本之后出现了一款超棒的布局方式,真正意义上的所见即所得,后面我们也会讲到! 1.LinearLayout:线性布局:线性布局又有两种,"垂直布局"和"水平布局". 垂直布局每一行只能有一个控件(自己嵌套的不算): 水平布局只有一行,所有的控件依次从左向右排列: linearLayout中有一个重要的属性 android:layout_wei

android界面设计之布局

一.线性布局 <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="match_parent" android:orie

[转]Android：布局实例之模仿QQ登录界面

Android:布局实例之模仿QQ登录界面 预览图: 准备: 1.找到模仿对象 QQ登陆界面UI下载>>>>> 2.导入工程 3.查看布局结构和使用控件 其对应效果图分布为 4.分析样式选择器 下拉箭头2种样式:点击和默认状态 文本框2种样式:聚焦和默认状态 复选框3种样式:选择.不选择和鼠标点着不放 左下角按钮2种样式:点击和默认 登录按钮2样式:点击和默认 ============================================帖代码===========