Android应用程序UI设计(1)_布局

1.AndroidUI 元素简介

Android使用xml文件进行布局。在布局文件中体现了一些UI元素。

1.Android.view.View（视图）

View是最基础的一个类，几乎所有的高级UI组件都是继承View类，如TextView，EditText，Button...。

一个视图（View）在屏幕上占据了一个矩形区域，它负责渲染这块矩形区域，也可以处理这块区域发生的事件，并且可以设置这块区域是否可见，是否可以获取焦点等。

2.Adroid.view.ViewGroup（视图容器）

View的容器，负责对这些view布局，并且允许嵌套。这是一个抽象类。他的实现类有：

a)LinearLayout进行水平或垂直布局。将元素进行线性的布局。

b)RelativeLayout进行相对布局。根据元素的相对位置布局。注意的是，出于性能考虑，位置只能计算一次，所以，如果控件A依赖B，那么B必须在A的前面。

c)FrameLayout窗体布局，所有元素都防止在屏幕左上方，如果有多个元素，将重叠。

3.LayoutParameter（布局参数）

决定View的显示属性，比如长度、宽度、位置。

2.控件的布局

案例：

使用linearLayout布局

布局文件为：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    >    <Button        android:id="@+id/bt_1"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:text="@string/frameLayout"/>        <Button        android:id="@+id/bt_2"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:text="@string/relativeLayout"/>        <Button        android:id="@+id/bt_3"        android:layout_width="fill_parent"        android:layout_height="wrap_content" android:text="@string/linearLayoutANDrelativeLayout"/>        <Button        android:id="@+id/bt_4"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:text="@string/tableLayout"/>    </LinearLayout>

使用FrameLayout布局

布局文件为：

<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent" >      <ImageView       android:id="@+id/photo"       android:src="@drawable/meinv"android:contentDescription="@string/meinv"       android:layout_width="wrap_content"       android:layout_height="wrap_content"    /></FrameLayout>

linearLayout和RelativeLayout并用（视图容器的嵌套）

布局文件和Activity类代码

Left.xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="#000000"     >    <TextView     android:id="@+id/tv_left_1"    android:text="@string/left_1"        android:layout_width="fill_parent"    android:layout_height="wrap_content"            />    <TextView     android:id="@+id/tv_left_2"    android:text="@string/left_2"        android:layout_width="fill_parent"    android:layout_height="wrap_content"        android:layout_below="@id/tv_left_1"    />    </RelativeLayout>

Right.xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"     android:background="#ffffff"    >    <TextView     android:id="@+id/tv_right_1"    android:text="@string/right_1"        android:layout_width="fill_parent"    android:layout_height="50dip"    />    <TextView     android:id="@+id/tv_right_2"    android:text="@string/right_2"        android:layout_width="fill_parent"    android:layout_height="50dip"        android:layout_below="@id/tv_right_1"    />    </RelativeLayout>

Activity代码

@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);//实例化一个线性视图容器对象LinearLayout layout = new LinearLayout(this);layout.setOrientation(LinearLayout.HORIZONTAL);setContentView(layout);//实例化一个inflater对象，这个对象可以把xml解析成ViewLayoutInflater inflater = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);//使用inflater把xml布局文件解析称ViewRelativeLayout left = (RelativeLayout)inflater.inflate(R.layout.left, null);RelativeLayout right = (RelativeLayout)inflater.inflate(R.layout.right, null);//实例化一个布局参数对象RelativeLayout.LayoutParams  layoutParameter = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,RelativeLayout.LayoutParams.WRAP_CONTENT);//向视图容器中添加视图（在此处是视图容器，属于嵌套）//可见，除了在布局文件中对activity布局之外，也完全可以在activity类中布局layout.addView(left,100,100);layout.addView(right,layoutParameter);}

relativeLayout

布局文件为：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:background="#888888"    android:padding="10dip"    >        <TextView        android:id="@+id/tv_input_name"        android:text="@string/input_name"        android:layout_height="wrap_content"android:layout_width="wrap_content"        />    <EditText        android:id="@+id/et_name"        android:background="@android:drawable/editbox_background"        android:layout_height="wrap_content"android:layout_width="fill_parent"android:hint="@string/input"android:layout_below="@id/tv_input_name"        />             <Button        android:id="@+id/bt_input_name_cancel"        android:layout_height="wrap_content"android:layout_width="wrap_content"android:text="@string/cancel"android:layout_below="@id/et_name"android:layout_alignParentRight="true"android:layout_marginRight="10dip"        />              <Button        android:id="@+id/bt_input_name_ok"        android:layout_below="@id/et_name"        android:layout_height="wrap_content"android:layout_width="wrap_content"android:text="@string/ok"android:layout_toLeftOf="@id/bt_input_name_cancel"android:layout_alignTop="@id/bt_input_name_cancel"android:layout_marginRight="10dip"        />            </RelativeLayout>

TableLayout

<?xml version="1.0" encoding="utf-8"?><TableLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"   android:stretchColumns="1"      >    <TableRow >        <TextView        android:text="@string/name"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        />    <EditText         android:hint="@string/input"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        /></TableRow>        <TableRow >        <TextView        android:text="@string/password"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        />    <EditText         android:hint="@string/input"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        /></TableRow>    <TableRow >        <Button        android:text="@string/ok"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        />    <Button        android:text="@string/cancel"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        /></TableRow>    </TableLayout>

更多相关文章

随机推荐