Android基础之UI布局篇(待完善)

常用的Layout

常见的Layout有FrameLayout   LinearLayout   TableLayout    ReletiveLayout

FrameLayout

一般里面只放入一个元素,后面放入的元素会覆盖之前的元素,比如说一张张图片.

LinearLayout

线性布局,orientation属性决定是横向还是竖直的

gravity属性决定局中,左,右,上,下等

weight属性来决定控件之间相对大小    默认值为0,按照定义好的长宽显示

background属性决定背景

TableLayout

<TableLayout  >  stretchColumns属性决定哪一列可以被扩展成多列

表格每行标签为<TableRow>

RelativeLayout

相对布局可以让控件依照父控件或者其他控件的相对位置来安排布局

android:layout_above="@id/xxx"     below   toLeftOf   toRightOf       //把当前控件放在XXX的上下左右

android:layout_alignBaseline="@id/xxx" alignBottom alignLeft alignRight alignTop //同时把两个控件的上/下/左/右边缘对齐，类似嵌套

android:layout_alignParentBottom alignParentLeft alignParentRight alignParentTop        //和父控件对齐边缘,值为true false

android:layout_centerHorizontal        centerInParent   centerVertical              //值为true false

<?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="wrap_content"                android:background="@drawable/blue"                android:padding="10px" >    <TextView android:id="@+id/label"               android:layout_width="fill_parent"               android:layout_height="wrap_content"               android:text="Type here:" />    <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" />         <!--在label控件下--!>      <Button android:id="@+id/ok"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:layout_below="@id/entry"             <!--在entry控件下方--!>            android:layout_alignParentRight="true"        <!--与父控件右侧对齐--!>            android:layout_marginLeft="10px"            android:text="OK" />    <Button android:layout_width="wrap_content"             android:layout_height="wrap_content"            android:layout_toLeftOf="@id/ok"              <!--在ok控件左侧--!>            android:layout_alignTop="@id/ok"             <!--和ok控件顶部对齐--!>            android:text="Cancel" /></RelativeLayout>

常见UI布局分析

1.类似微信聊天界面的布局

其实这个布局是一个ListView,设置一下Activity的background,每一条消息代表一个ListViewItem

首先,主Activity的main.xml中设置一个<ListView>元素

  <ListView
        android:id="@+id/listView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" 
        android:scrollbars="none"
        android:clickable="false"
        android:background="@drawable/chat_bg_blue"
        >

然后,设置每一个Item的view_item.xml

<TextView 
    android:id="@+id/text"
    android:paddingTop="10dip"
    android:paddingLeft="20dip"
    android:textColor="#FFA07A"
    android:background="@drawable/chatfrom_bg"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    />

最关键的,自定义的Adapter,继承自BaseAdapter,会要求重写很多方法,其中最重要的是getView方法,决定了每个Item的样子

public class MyAdapter extends BaseAdapter{
        private int size;
        private LayoutInflater inflater;

        //构造函数,主要是获得inflater的context和总共多少个item
        public MyAdapter(Context context,int size){
                this.size=size;
                inflater=LayoutInflater.from(context);
         }
public int getCount() {
return size;
}

                //比如要处理这条信息是发送来的还是发出去的,或者发来的信息中有没有图片等需要更换别的布局,都是在getView中进行逻辑处理
                 public View getView(int position, View convertView, ViewGroup parent) {
                          //这个View就是最后每个Item的样子,所以对其进行操作

                          //这里是使用LayoutInflater对象从XML文件构造View

                         convertView=inflater.inflate(R.layout.view_item, null);
                          //改变View中的text
                         TextView text=(TextView)convertView.findViewById(R.id.text);
                         text.setText("this is a test");
                         convertView.setEnabled(false);

                        return convertView;
                }
   }

最后在Activity的onCreate函数中

ListView listView=(ListView)findViewById(R.id.listView);

listView.setDividerHeight(0);                     //设置分隔符宽度,这里就是设置分隔符不可见

MyAdapter adapter=new MyAdapter(this,5);

listView.setAdapter(adapter);

2.类似微博菜单的布局

实现这样的登录界面:

用ReletiveLayout进行布局  

ImageView在中间 centerInParent="true"

EditText设置一个background加边框

ImageButton  alignTop="@id/iconSelector" alignBottom="@id/iconSelector" 上下边对齐  alignRight="@id/iconSelector"右边对齐selector的右边,实现内嵌

实现这样的弹出Dialog:

这样的效果需要使用自定义的Dialog控件进行实现:

首先,在res/layout下建立一个dialog.xml文件进行dialog的布局

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="wrap_content"  
android:layout_height="wrap_content"  
android:orientation="vertical"  
android:padding="4dip">  
<ListView  
android:id="@+id/list"  
android:layout_width="240px"  
android:layout_height="220px"  
android:divider="#f1f2f2"  
android:dividerHeight="1px"  
android:layout_margin="5px"  
android:background="#ffffff"  
android:cacheColorHint="#00000000">  
</ListView>  
</LinearLayout>  

在res/value下新建一个dialog_style.xml

<?xml version="1.0" encoding="utf-8"?>  
<resources>  
<style name="dialog2" parent="@android:style/Theme.Dialog">

<item name="android:windowFrame">@null</item>  
<item name="android:windowIsFloating">true</item>  
<item name="android:windowIsTranslucent">false</item>  
<item name="android:windowNoTitle">true</item>  
<item name="android:windowBackground">@drawable/mask_bg</item>  
<item name="android:backgroundDimEnabled">true</item></style>  
</resources>  

在LoginActivity中selector的onClick方法中生成并显示dialog

Dialog dialog=new Dialog(LoginActivity.this,R.style.dialog_style);//上下文和style实例化Dialog对象

View diaView=View.inflate(LoginActivity.this,R.layout.dialog);  //从layout中dialog.xml文件得到一个View

dialog.setContentView(diaView);                                                      //设置布局

dialog.show();