Android开发 ---xml布局元素

 

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>