Android 布局讲解

举报
SHQ5785 发表于 2022/08/20 21:54:42 2022/08/20
【摘要】 在开发Android应用时,UI布局是一件令人烦恼的事情。下面主要讲解一下Android中的界面布局。一、线性布局(LinearLayout)     线性布局分为:(1)垂直线性布局;(2)水平线性布局;针对这两种区别,只是一个属性的区别<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"andro...

在开发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" /><TextViewandroid:text="导入..."android:padding="3dip" /></TableRow><TableRow><TextViewandroid: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();

  }

  });

}
【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。