Android图形化
Android里的图形界面都是由View和ViewGroup以及他们的子类构成的:
View:所有可视化控件的父类,提供组件描绘和时间处理方法 。
ViewGroup: View类的子类,可以拥有子控件,可以看作是容器 Android UI中的控件都是按照这种层次树的结构堆叠得。
创建UI布局的方式有两种:一种较为繁琐,即通过Java代码;另外一种是目前使用较多的,即通过XML定义布局。
另外我们一般很少直接用View和ViewGroup来写布局,一般通过其子类控件或容器来构建布局。
LinearLayout(线性布局)
常用属性
权重(Weight)
功能:等比列划分区域
示例目标:实现水平方向按比例划分
初级用法:
在线性布局中增加两个子线性布局
将其 layout_width 改为0db
设置权重 layout_weight 即可
<?xml version="1.0" encoding="utf-8"?>
//线性布局
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
//权重 = 1
<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:background="#4682B4 "
android:layout_weight="1"/>
//权重 = 3
<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:background="#008000 "
android:layout_weight="3"/>
</LinearLayout>
进阶用法:
将 layout_width 设置为 wrap_content(自适应) 效果与上图相同
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#4682B4 "
android:layout_weight="1"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#008000 "
android:layout_weight="3"/>
</LinearLayout>
将 layout_width 设置为match_parent / fill_parent
在API8之前只有fill_parent方法,没有match_parent方法;
在API8 之后,Android通过映射,将所有的fill_parent全部映射为match_parent
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#4682B4 "
android:layout_weight="1"/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#008000 "
android:layout_weight="3"/>
</LinearLayout>
为什么会出现这样与预期不同的效果呢?
其实其执行的思路是:
1.有两个布局为 fill_parent ,而屏幕只有一个;故1 - 2 fill_parent = -1 fill_parent
2.计算比例,蓝色部分权重为1,绿色为3;则蓝色部分1/4,绿色部分3/4
3.按顺序先到先分配,对于蓝色部分:1 +(-1fill_parent )*(1/4) = 3/4fill_parent
对于绿色部分:1 +(-1fill_parent )*(3/4) = 1/4fill_parent
4.最后得出的实际比例为3:1
divider分割线
1.直接在布局中添加view(为了演示效果,将分割线高度设置为100px)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:layout_width="match_parent"
android:layout_height="100px"
android:background="#000000" />
</LinearLayout>
2.使用LinearLayout的一个divider属性
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="@drawable/divider_test"
android:orientation="vertical"
android:showDividers="middle"
android:dividerPadding="1dp">
<TextView
android:id="@+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TextView" />
<TextView
android:id="@+id/textView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TextView" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮1" />
</LinearLayout>
divider:为分割线设置图片(示例中使用 @drawable/divider_test 则需保证app->src->main->res->drawable文件夹中已经添加了图片divider_test )
showDivider:设置分割位置,none(无)、middle(每两控件之间)、begining(布局起始处)、end(布局结尾)
dividerPadding:设置分割线Padding
注意事项:
当 android:orientation="vertical" (竖向)时, 只有水平方向的设置才起作用,垂直方向的设置不起作用。 即:left,right,center_horizontal 是生效的。 当 android:orientation="horizontal" (水平方向)时, 只有垂直方向的设置才起作用,水平方向的设置不起作用。 即:top,bottom,center_vertical 是生效的。