正文

Android开发 ---xml布局元素

IP云
IP云V管理员/7 阅读
08/14
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1、android:orientation="vertical/horizontal"

vertical为垂直布局，

horizontal为水平布局

2、android:layout_width="wrap_content",android:layout_height="wrap_content"

描述：

高亮部分的layout_width的值和layout_height的值都设置为wrap_content，那么这个布局将会和内容自适应，内容多大，布局就多大

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_main"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="内容1"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="内容2"
/>
</LinearLayout>

效果：

3、android:layout_width="",android:layout_height=""

描述：

1部分：layout_width和layout_height的值都设置为match_parent，则它们会找到它们的父级元素，父级元素有多宽，它就会多宽，父级元素有多高，它就会多高。

2部分：layout_width和layout_height的值都设置为wrap_content,则它们会与内容自适应，内容有多宽，布局就会有多宽，内容有多高，布局就会多高。

3部分：layout_width的值设置为match_parent,则布局的宽会是父级元素的宽，layout_height的值设置为wrap_content，则布局的高是与内容自适应的。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"----------------1部分
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"--------------2部分
android:text="内容1"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"-----------------------3部分
android:text="内容2"
/>
</LinearLayout>

效果图：

4、文本输入控件 ---EditText

描述：

EdiText控件是专门用来接收用户输入的信息的控件

inputType用来设置该控件的类型， 值为textPassword是用来输入密码的，

android:inputType="none"

android:inputType="text"

android:inputType="textCapCharacters"//前3个输入普通字符

android:inputType="textCapWords"//单词首字母大写

android:inputType="textCapSentences"//仅第一个字母大写
android:inputType="textAutoCorrect"
android:inputType="textAutoComplete"//前两个自动完成
android:inputType="textMultiLine"//多行输入
android:inputType="textImeMultiLine"//输入法多行（不一定支持）
android:inputType="textNoSuggestions"//不提示
android:inputType="textUri"//URI格式
android:inputType="textEmailAddress"//电子邮件地址格式
android:inputType="textEmailSubject"//邮件主题格式
android:inputType="textShortMessage"//短消息格式
android:inputType="textLongMessage"
android:inputType="textPersonName"//人名格式
android:inputType="textPostalAddress"//邮政格式
android:inputType="textPassword"//密码格式
android:inputType="textVisiblePassword"//密码可见格式
android:inputType="textWebEditText"//作为网页表单的文本格式
android:inputType="textFilter"//文本筛选格式
android:inputType="textPhonetic"//拼音输入格式
android:inputType="number"//数字格式
android:inputType="numberSigned"//有符号数字格式
android:inputType="numberDecimal"//可以带小数点的浮点格式
android:inputType="phone"//拨号键盘
android:inputType="datetime"
android:inputType="date"//日期键盘
android:inputType="time"//时间键盘
 
hint用来显示文字提示信息

<EditText
android:id="@+id/upwd"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:inputType="textPassword" --密码输入框
android:hint="请输入密码"
/>

5、按钮控件 --Button

<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="30sp"
android:onClick="toRegister" --给按钮设置单击事件
android:text="用户注册"
/>

6、线性布局---LinearLayout

描述：

线性布局下，每个元素占一行，或一列，这取决于orientation的值是vertical还是horizontal

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="内容1"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="内容2"
/>
</LinearLayout>

效果图：

描述：内容1占一行，内容2占一行

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="内容1"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="内容2"
/>
</LinearLayout>

效果图：

描述：内容1占一列，内容2占一列

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="内容1"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="内容2"
/>
</LinearLayout>

效果图：

描述：只显示内容1，内容2不见了，原因就是第一个TextView中的layout_width的值设置为fill_parent造成的

7、layout_weight ---按比例分布，值为数字

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="内容1"
/>
<TextView
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="内容2"
/>
</LinearLayout>

效果图：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="内容1"
/>
<TextView
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="内容2"
/>
</LinearLayout>

效果图：

8、RelativeLayout--相对布局

dimens.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Default screen margins, per the Android Design guidelines. -->
<dimen name="activity_horizontal_margin">16dp</dimen>
<dimen name="activity_vertical_margin">16dp</dimen>
</resources>

引用dimens.xml文件中的数据设置边距的值，符号@

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_dialog"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin" ---内边距
android:paddingLeft="@dimen/activity_horizontal_margin"---左内边距
android:paddingRight="@dimen/activity_horizontal_margin"---右内边距
android:paddingTop="@dimen/activity_vertical_margin"---上内边距
>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="30sp"
android:text="用户登录"
/>
</RelativeLayout>

效果图：

9、RadioGroup ---单选按钮组

描述：一组单选按钮中选取其中一个

RadioButton --一个单选按钮

checked ="true" 表示默认选中

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_linear"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RadioGroup
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:checkedButton="0">
<RadioButton
android:id="@+id/usex1"
android:checked="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="男"/>
<RadioButton
android:id="@+id/usex2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="女"/>
</RadioGroup></LinearLayout>

效果图：

10、CheckBox ---复选按钮

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_linear"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<CheckBox
android:id="@+id/showPwd"
android:text="显示密码"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>

效果图：

11、maxLength ---设置文本框能输入的最大值

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_linear"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<EditText
android:id="@+id/uname"
android:hint="请输入6-12位用户名"
android:maxLength="12"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>

效果图：

12、minLines ---至少3行 maxLines---最大三行

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_linear"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<EditText
android:id="@+id/uname"
android:hint="请输入6-12位用户名"
android:minLines="3"
android:maxLength="12"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>

效果图：

13、在相对布局下：

layout_alignBaseline = "@id/*" ---新元件与特定元件的基准线对齐

layout_toRightOf="@id/*" ---新元素与特定元素的右基准线对齐

layout_below="@id/*" ---新元素位于特定元素的下方

layout_alignBottom="@id/*" ---新元素与特定元素的底部基准线对齐

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_relative"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="3dp"> <TextView
android:id="@+id/title"
android:text="添加学生"
android:textSize="30sp"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content" /> <TextView
android:id="@+id/lblsname"
android:text="姓名:"
android:layout_below="@id/title"
android:textSize="25sp"
android:layout_marginTop="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" /> <EditText
android:id="@+id/sname"
android:hint="请输入姓名"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBaseline="@id/lblsname"
android:layout_toRightOf="@id/lblsname" />
</RelativeLayout>

效果图：

14、表格布局

详细属性请看博客：

Android开发 -- 界面布局:边距、线性布局、表格布局、相对布局、框架(层叠)布局、绝对布局

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_table"
android:layout_width="match_parent"
android:stretchColumns="0,1,2,3"
android:collapseColumns="0"
android:shrinkColumns="3"
android:layout_height="match_parent"> <TableRow>
<TextView android:text="编号" android:gravity="center" android:textStyle="bold" android:textSize="25sp"/>
<TextView android:text="姓名" android:gravity="center" android:textStyle="bold" android:textSize="25sp"/>
<TextView android:text="年龄" android:gravity="center" android:textStyle="bold" android:textSize="25sp"/>
<TextView android:text="地址" android:gravity="center" android:textStyle="bold" android:textSize="25sp"/>
</TableRow>
<TableRow>
<TextView android:text="1" android:gravity="center" android:textSize="25sp"/>
<TextView android:text="Jack" android:gravity="center" android:textSize="25sp"/>
<TextView android:text="20" android:gravity="center" android:textSize="25sp"/>
<TextView android:text="南方IT学院教学楼" android:gravity="center" android:textSize="25sp"/>
</TableRow>
<TableRow>
<TextView android:text="2" android:gravity="center" android:textSize="25sp"/>
<TextView android:text="Lucy" android:gravity="center" android:textSize="25sp"/>
<TextView android:text="22" android:gravity="center" android:textSize="25sp"/>
<TextView android:text="南方IT学院教学楼" android:gravity="center" android:textSize="25sp"/>
</TableRow>
<TableRow>
<TextView android:text="3" android:gravity="center" android:textSize="25sp"/>
<TextView android:text="Toms" android:gravity="center" android:textSize="25sp"/>
<TextView android:text="23" android:gravity="center" android:textSize="25sp"/>
<TextView android:text="南方IT学院教学楼" android:gravity="center" android:textSize="25sp"/>
</TableRow>
<TableRow>
<TextView android:text="4" android:gravity="center" android:textSize="25sp"/>
<TextView android:text="Marry" android:gravity="center" android:textSize="25sp"/>
<TextView android:text="20" android:gravity="center" android:textSize="25sp"/>
<TextView android:text="南方IT学院教学楼" android:gravity="center" android:textSize="25sp"/>
</TableRow>
<TableRow>
<Button
android:layout_width="150dp"
android:layout_height="wrap_content"
android:text="点击返回"
android:layout_column="2"
android:layout_span="2"
android:onClick="doBack"
/>
</TableRow>
</TableLayout>

15、FrameLayout ---层叠布局

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
> <LinearLayout
android:id="@+id/one"
android:orientation="vertical"
android:background="@android:color/holo_blue_light"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<LinearLayout
android:id="@+id/two"
android:orientation="vertical"
android:background="@android:color/holo_red_light"
android:layout_width="match_parent"
android:layout_height="400dp"/>
<LinearLayout
android:id="@+id/three"
android:orientation="vertical"
android:background="@android:color/holo_orange_light"
android:layout_width="match_parent"
android:layout_height="300dp"/>
</FrameLayout>

效果图：

ImageView --图像控件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_frame2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"> <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="用户名:"
android:textSize="25dp"
/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/upwd"
android:inputType="textPassword"
android:maxLength="12"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<ImageView
android:layout_gravity="right"
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@mipmap/ic_launcher"
android:onClick="showPwd"
/>
</FrameLayout>
</LinearLayout>

效果图：

16、GridLayout ---网格布局

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_grid"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:rowCount="6"
android:columnCount="4"> <EditText
android:id="@+id/showNumber"
android:layout_columnSpan="4"
android:layout_width="251dp"
android:gravity="right"
android:inputType="none"
/>
<Button
android:id="@+id/b1"
android:text="%"
/>
<Button
android:id="@+id/b2"
android:text="√"
/>
<Button
android:id="@+id/b3"
android:text="x²"
/>
<Button
android:id="@+id/b4"
android:text="1/x"
/>
<Button
android:id="@+id/b5"
android:text="CE"
/>
<Button
android:id="@+id/b6"
android:text="C"
/>
<Button
android:id="@+id/b7"
android:text="x"
/>
<Button
android:id="@+id/b8"
android:text="÷"
/>
<Button
android:id="@+id/b9"
android:text="7"
/>
<Button
android:id="@+id/b10"
android:text="8"
/>
<Button
android:id="@+id/b11"
android:text="9"
/>
<Button
android:id="@+id/b12"
android:text="X"
/>
<Button
android:id="@+id/b13"
android:text="4"
/>
<Button
android:id="@+id/b14"
android:text="5"
/>
<Button
android:id="@+id/b15"
android:text="6"
/>
<Button
android:id="@+id/b16"
android:text="-"
/>
<Button
android:id="@+id/b17"
android:text="1"
/>
<Button
android:id="@+id/b18"
android:text="2"
/>
<Button
android:id="@+id/b19"
android:text="3"
/>
<Button
android:id="@+id/b20"
android:text="+"
android:layout_rowSpan="2" //该按钮占两行
android:layout_gravity="fill_vertical" //相对于父元素垂直布局
/>
<Button
android:id="@+id/b21"
android:layout_columnSpan="2" //该按钮占两列
android:layout_gravity="fill_horizontal" //相对于父元素水平布局
android:text="0"
/>
<Button
android:id="@+id/b22"
android:text="="
/>
</GridLayout>

效果图：

17、开关按钮

<ToggleButton
android:checked="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

效果图

18、进度条

<SeekBar
android:id="@+id/seekBar"
android:max="60"
android:progress="0"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

效果图：

19、平分条

<RatingBar
android:id="@+id/ratingBar"
android:max="5"
android:progress="0"
android:stepSize="0.5"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

效果图：

20、转圈式进度条

<ProgressBar
android:id="@+id/pb1"
android:max="100"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

效果图：

<ProgressBar
android:id="@+id/pb2"
android:max="100"
style="?android:progressBarStyleLarge"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

效果图：

21、进度条

<ProgressBar
android:id="@+id/pb3"
android:max="100"
android:progress="10"
style="?android:progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_height="wrap_content">
<Button
android:layout_width="match_parent"
android:layout_weight="1"
android:text="开始"
android:onClick="doStart"
android:layout_height="wrap_content" />
<Button
android:layout_width="match_parent"
android:layout_weight="1"
android:text="停止"
android:onClick="doStop"
android:layout_height="wrap_content" />
</LinearLayout>

效果图：

22、设置是否当文本为URL链接/email/电话号码/map时，文本显示为可点击的链接。可选值(none/web/email/phone/map/all)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_text_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"> <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/police"
android:textSize="30sp"
android:gravity="center"
android:autoLink="phone"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="http://192.168.0.168"
android:textSize="30sp"
android:gravity="center"
android:autoLink="web"
/>
<EditText
android:layout_width="match_parent"
android:layout_height="60dp"
android:hint="请输入电话号码"
android:maxLines="1"
android:inputType="phone"
/>
<EditText
android:layout_width="match_parent"
android:layout_height="60dp"
android:hint="请输入姓名"
android:maxLines="1"
android:inputType="text"
/>
<EditText
android:layout_width="match_parent"
android:layout_height="60dp"
android:hint="请输密码"
android:maxLines="1"
android:inputType="textPassword"
/>
</LinearLayout>

23、下拉列表

strings.xml

<resources>
<array name="jobs">
<item>法师</item>
<item>坦克</item>
<item>射手</item>
<item>刺客</item>
</array>
</resources>

<Spinner
android:id="@+id/hjob"
android:entries="@array/jobs"
android:spinnerMode="dropdown"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</Spinner>

24、实现动态匹配输入的内容

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_auto_complete"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"> <AutoCompleteTextView
android:id="@+id/autoText"
android:completionHint="根据名称查找"
android:completionThreshold="1"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>