1.LinearLayout
LinearLayout又称为线性布局,这个布局会将它所包含的控件在线性方向上依次排列。
(1)android:orientation属性
<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:orientation="vertical" //垂直方向上排列
tools:context="com.example.uilayouttest.MainActivity" >
</LinearLayout>
android:orientation="vertical" //垂直方向上排列,控件高度不能指定为match_parent
android:orientation="horizontal" //水平方向上排列,控件宽度不能指定为match_parent
(2)android:layout_gravity属性
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:text="Button 1"
/>
此属性指定控件在布局中的对齐方式,当android:orientation="vertical"时,只有水平方向上的对齐方式才会生效, left,center_horizontal,right,
当android:orientation="horizontal" 时,只有垂直方向上的对齐方式才会生效,top,center_vertical,bottom
(3)android:layout_weight属性
<EditText
android:id="@+id/input_message"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint = "Type something"
/>
<Button
android:id="@+id/send"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Send"
/>
代码中将width属性设定为0,表示这个控件的属性不应该由width属性确定,android:layout_weight="1"表示EditText和Button将在水平方向平分宽度
原理:系统首先把LinearLayout下的所有控件指定的layout_weight值相加,得到一个总值,然后每个控件所占大小的比例就是用该控件的layout_weight值除以刚才算出的总值。
<EditText
android:id="@+id/input_message"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint = "Type something"
/>
<Button
android:id="@+id/send"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Send"
/>
以上代码实现了,Button宽度由wrap_content计算,EditText则会占满屏幕所有的剩余空间。
2.RelativeLayout
(1)控件相对于父布局进行定位
<RelativeLayout 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"
tools:context="com.example.uilayouttest.MainActivity" >
<Button
android:id = "@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true" //左上
android:layout_alignParentTop="true"
android:text="Button 1"
/>
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height = "wrap_content"
android:layout_alignParentRight="true" //右上
android:layout_alignParentTop="true"
android:text="Button 2"
/>
<Button
android:id = "@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" //居中
/>
<Button
android:id = "@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" //左上
android:layout_alignParentLeft="true"
android:text = "Button 4"
/>
<Button
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content" //右下
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="Button 5"
/>
</RelativeLayout>
(2)控件相对于控件进行定位
<RelativeLayout 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"
tools:context="com.example.uilayouttest.MainActivity" >
<Button
android:id = "@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
/>
<Button
android:id = "@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/button3" //button3左上方
android:layout_toLeftOf="@id/button3"
android:text="Button 1"
/>
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height = "wrap_content"
android:layout_above="@id/button3" //button3右上方
android:layout_toRightOf="@id/button3"
android:text="Button 2"
/>
<Button
android:id = "@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/button3" //button3左下方
android:layout_toLeftOf="@id/button3"
android:text = "Button 4"
/>
<Button
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/button3" //button3右下方
android:layout_toRightOf="@id/button3"
android:text="Button 5"
/>
</RelativeLayout>
注意:当一个控件去引用另一个控件的id时,该控件一定要定义在引用控件的后面,不然会出现找不到id的情况。
android:layout_alignLeft="@id/button3"表示一个控件的左边缘和另一个控件的左边缘对齐
android:layout_alignRight="@id/button3"表示一个控件的右边缘和另一个控件的右边缘对齐
android:layout_alignTop="@id/button3"表示一个控件的上边缘和另一个控件的上边缘对齐
android:layout_alignBottom="@id/button3"表示一个控件的下边缘和另一个控件的下边缘对齐
3.FrameLayout
此布局没有任何的定位方式,所有的控件都会摆放在布局的左上角
<FrameLayout 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"
tools:context="com.example.uilayouttest.MainActivity" >
<Button
android:id = "@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text = "Button"
/>
<ImageView
android:id="@+id/image_view"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:src="@drawable/ic_launcher"
/>
</FrameLayout>
4.TableLayout
此布局允许我们使用表格的方式来排列控件
<TableLayout 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:stretchColumns="1" //1表示如果表格不能完全占满屏幕宽度,就将第二列进行拉伸,0表示将第一列进行拉伸
tools:context="com.example.uilayouttest.MainActivity" >
<TableRow> //TableRow中的控件是不能指定宽度的
<TextView
android:id = "@+id/account_text_view"
android:layout_height="wrap_content"
android:text="Account:"
/>
<EditText
android:id="@+id/account_editText"
android:layout_height="wrap_content"
android:hint="Input your account"
/>
</TableRow>
<TableRow>
<TextView
android:id="@+id/passWord_textView"
android:layout_height="wrap_content"
android:text="PassWord:"
/>
<EditText
android:id="@+id/passWord_editText"
android:layout_height="wrap_content"
android:inputType="textPassword" //把EditText变为密码输入框
/>
</TableRow>
<TableRow >
<Button
android:id="@+id/logIn_button"
android:layout_height="wrap_content"
android:layout_span = "2" //对单元格进行合并,让登陆按钮占据两列的空间
android:text="Log in"
/>
</TableRow>
</TableLayout>
5.引入布局
通过创建一个新的布局,使其他布局调用他即可,避免代码重复。
title.xml文件代码:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/title_bg">
<Button
android:id="@+id/title_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="5dip"
android:background="@drawable/back_bg"
android:text="Back"
android:textColor="#fff"
/>
<TextView
android:id = "@+id/title_text"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:text="Title Text"
android:textColor="#fff"
android:textSize="24sp"
/>
<Button
android:id="@+id/title_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="5dip"
android:background="@drawable/edit_bg"
android:text="Edit"
android:textColor="#fff"
/>
</LinearLayout>
activity_main.xml代码:
<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.uicustomviews.MainActivity" >
<include layout = "@layout/title"/> //用此语句将标题栏布局引入即可
</RelativeLayout>
6.创建自定义控件
TitleLayout类做自定义控件:
package com.example.uicustomviews;
import android.app.Activity;
import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.Toast;
public class TitleLayout extends LinearLayout
{
public TitleLayout(Context context, AttributeSet attrs)
{
super(context, attrs);
LayoutInflater.from(context).inflate(R.layout.title, this); //实现动态加载布局文件R.layout.title,加载好的文件的父布局为this
Button titleBack = (Button)findViewById(R.id.title_back);
Button titleEdit = (Button)findViewById(R.id.title_back);
titleBack.setOnClickListener(new OnClickListener()
{
@Override
public void onClick(View v)
{
// TODO Auto-generated method stub
((Activity)getContext()).finish();
}
});
titleEdit.setOnClickListener(new OnClickListener()
{
@Override
public void onClick(View v)
{
// TODO Auto-generated method stub
Toast.makeText(getContext(), "You clicked Edit button", Toast.LENGTH_LONG).show();
}
});
// TODO Auto-generated constructor stub
}
}
7.在编写Android程序时,尽量将控件或布局的大小指定成match_parent或wrap_content,如果必须要指定一个固定值,则使用dp来作为单位,
指定文字大小的时候使用sp作为单位。
获得当前屏幕密度值:
float xdpi = getResources().getDisplayMetrics().xdpi;
float ydpi = getResources().getDisplayMetrics().ydpi;
Log.d("MainActivity", "xdpi is" + xdpi);
Log.d("MainActivity", "ydpi is" + ydpi);