Android进阶(二十七)Android原生扰人烦的布局
Android原生扰人烦的布局
在开发Android应用时，UI布局是一件令人烦恼的事情。下面主要讲解一下Android中的界面布局。
一、线性布局（LinearLayout）
线性布局分为：
（1）垂直线性布局；
（2）水平线性布局；
针对这两种区别，只是一个属性的区别
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> </LinearLayout>
水平线性布局的话，android:orientation="horizontal" 即可。
二、 相对布局（RelativeLayout）
一般线性布局满足不了们实际项目中的需要，就是一般做Web界面的UI设计一样，也是存在相对元素的一些CSS样式的布局。RelativeLayout参数有：Width，Height，Below，AlignTop，ToLeft，Padding，和MerginLeft。
关键源码：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:id="@+id/label" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="请输入:"/> <EditText android:id="@+id/entry" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@android:drawable/editbox_background" android:layout_below="@id/label"/> <Button android:id="@+id/ok" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/entry" android:layout_alignParentRight="true" android:layout_marginLeft="10dip" android:text="确定" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toLeftOf="@id/ok" android:layout_alignTop="@id/ok" android:text="取消" /> </RelativeLayout>
其中，android:layout_below=”@id/label”设置了EditText处于TextView下方；在Button中android:layout_below=”@id/entry”设置该Button位于EditText下。
实例效果：
三、表单布局（TableLayout）
TableLayout由许多TableRow组成，每个TableRow都会定义一个Row。TableLayout容器不会显示Row,Column或Cell的边框线，每个Row拥有0个或多个Cell，每个Cell拥有一个View对象。表格由行和列组成许多单元个，允许单元格为空。但是单元格不能跨列，这与Html不同。
<View android:layout_height="2dip" android:background="#FF909090" /><TableRow> <TextView android:text="*" android:padding="3dip" /> <TextView android:text="导入..." android:padding="3dip" /> </TableRow> <TableRow> <TextView android:text="*" android:padding="3dip" /> <TextView android:text="导出..." android:padding="3dip" /> <TextView android:text="Ctrl-E" android:gravity="right" android:padding="3dip" /> </TableRow>
实例效果：
android:gravity="center"书面解释是权重比。其时就是让它居中显示。
android:stretchColumns="1,2,3,4"它的意思就是自动拉伸1,2,3,4列。
注
若需实现组件居中显示，布局应如下：
android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical|center_horizontal"
TableRow平分列
每一列的宽度设置为android:layout_width="0.0dip"，在设置每一列的android:layout_weight=“1”
因为ayout_weight是将剩余空间按权重分配，而不是将全部空间按权重分配。
代码如下：
<TableRow android:paddingTop="15px"> <Button android:id="@+id/Register" android:text="@string/register" android:layout_width="0.0dip" android:layout_weight="1" android:onClick="register"/> <Button android:id="@+id/cancel" android:layout_width="0.0dip" android:layout_weight="1" android:text="@string/button_cancel" /> </TableRow>
视图如下：
四、切换卡（TabWidget）
切换卡经常用在一下选项上，类似于电话簿界面，通过多个标签切换显示不同内容。而其中，TabHost是一个用来存放Tab标签的容器，通过getTabHost方法来获取TabHost的对象，通过addTab方法向容器里添加Tab。Tab在切换时都会产生一个事件，可以通过TabActivity的事件监听setOnTabChangedListener.
【扩展点】TabHost
类概述
提供选项卡（Tab页）的窗口视图容器。此对象包含两个子对象：一组是用户可以选择指定Tab页的标签；另一组是FrameLayout用来显示该Tab页的内容。个别元素通常控制使用这个容器对象，而不是设置在子元素本身的值。
（译者madgoat注：即使使用的是单个元素，也最好把它放到容器对象ViewGroup里）
内部类
interface TabHost.OnTabChangeListener
接口定义了当选项卡更改时被调用的回调函数
interface TabHost.TabContentFactory
当某一选项卡被选中时生成选项卡的内容
class TabHost.TabSpec
单独的选项卡，每个选项卡都有一个选项卡指示符,内容和tag标签,以便于记录.。
关键源码
<TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/tabhost" android:layout_width="fill_parent" android:layout_height="fill_parent"> <LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TabWidget android:id="@android:id/tabs" android:layout_width="fill_parent" android:layout_height="wrap_content" /> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:id="@+id/textview1" android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="this is a tab" /> <TextView android:id="@+id/textview2" android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="this is another tab" /> <TextView android:id="@+id/textview3" android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="this is a third tab" /> </FrameLayout> </LinearLayout> </TabHost>
处理类
//声明TabHost对象 TabHost mTabHost; public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); //取得TabHost对象 mTabHost = getTabHost(); /* 为TabHost添加标签 */ //新建一个newTabSpec(newTabSpec) //设置其标签和图标(setIndicator) //设置内容(setContent) mTabHost.addTab(mTabHost.newTabSpec("tab_test1") .setIndicator("TAB 1",getResources().getDrawable(R.drawable.img1)) .setContent(R.id.textview1)); mTabHost.addTab(mTabHost.newTabSpec("tab_test2") .setIndicator("TAB 2",getResources().getDrawable(R.drawable.img2)) .setContent(R.id.textview2)); mTabHost.addTab(mTabHost.newTabSpec("tab_test3") .setIndicator("TAB 3",getResources().getDrawable(R.drawable.img3)) .setContent(R.id.textview3)); //设置TabHost的背景颜色 mTabHost.setBackgroundColor(Color.argb(150, 22, 70, 150)); //设置TabHost的背景图片资源 //mTabHost.setBackgroundResource(R.drawable.bg0); //设置当前显示哪一个标签,默认下标从0开始 mTabHost.setCurrentTab(0); //标签切换事件处理，setOnTabChangedListener mTabHost.setOnTabChangedListener(new OnTabChangeListener(){ public void onTabChanged(String tabId) { Dialog dialog = new AlertDialog.Builder(Examples_04_29Activity.this) .setTitle("提示") .setMessage("当前选中："+tabId+"标签") .setPositiveButton("确定", new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int whichButton){ dialog.cancel(); } }).create();//创建按钮 dialog.show(); } }); } 实例效果：
参考文献
1.http://blog.csdn.net/fancylovejava/article/details/45787729/
美文美图
