UI篇--android实现底部按钮布局

1.采用LinearLayout布局：

<LinearLayout

        android:id="@+id/main"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:orientation="vertical"

        >

        <LinearLayout

            android:id="@+id/content"

            android:layout_width="fill_parent"

            android:layout_height="0dp"

            android:layout_weight="1"

            android:orientation="vertical"

            />

             

        <LinearLayout

            android:id="@+id/bottom_panel"

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            android:orientation="horizontal"

            >

            <Button

                android:id="@+id/done"

                android:layout_width="0dp"

                android:layout_height="wrap_content"

                android:layout_weight="1"

                android:layout_gravity="center_vertical"

                android:text="done"

                />

            <Button

                android:id="@+id/revert"

                android:layout_width="0dp"

                android:layout_height="wrap_content"

                android:layout_weight="1"

                android:layout_gravity="center_vertical"

                android:text="revert"

                />

        </LinearLayout>

    </LinearLayout>

或者：

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

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

    android:orientation="vertical" android:layout_width="fill_parent"

    android:gravity="clip_horizontal"

    android:layout_height="fill_parent" android:id="@+id/toplayout">

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

        android:orientation="horizontal" android:layout_width="fill_parent"

        android:layout_height="30dip" android:background="@drawable/header"

        android:gravity="center">

        <TextView android:layout_width="wrap_content"

            android:layout_height="wrap_content" android:id="@+id/toptv"

            android:gravity="center" android:textSize="20dip"

            android:layout_gravity="center" android:text="@string/home"/>

    </LinearLayout>

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

        android:orientation="vertical" android:layout_width="fill_parent"

        android:layout_height="fill_parent">

                <TextView android:layout_width="wrap_content"

            android:gravity="center" android:textSize="20dip"

            android:layout_gravity="center" android:text="@string/home" android:layout_height="fill_parent"/>

    </LinearLayout>

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

        android:orientation="vertical" android:layout_width="fill_parent" android:layout_marginTop="-50dip"

        android:layout_height="50dip" android:gravity="bottom" android:background="@drawable/header">

        <include layout="@layout/foot" />

    </LinearLayout>

</LinearLayout>

 

2. 采用relativelayout布局：

<RelativeLayout

        android:id="@+id/main"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        >

        <LinearLayout

            android:id="@+id/content"

            android:layout_width="fill_parent"

            android:layout_height="fill_parent"

            android:orientation="vertical"

            />

             

        <LinearLayout

            android:id="@+id/bottom_panel"

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            android:orientation="horizontal" android:layout_alignParentBottom="true"

            >

            <Button

                android:id="@+id/done"

                android:layout_width="0dp"

                android:layout_height="wrap_content"

                android:layout_weight="1"

                android:layout_gravity="center_vertical"

                android:text="done"

                />

            <Button

                android:id="@+id/revert"

                android:layout_width="0dp"

                android:layout_height="wrap_content"

                android:layout_weight="1"

                android:layout_gravity="center_vertical"

                android:text="revert"

                />

        </LinearLayout>

    </RelativeLayout>

 

android实现底部布局往往使用RelativeLayout的布局方式，并且设置android:layout_alignParentBottom=”true”，这样很容易实现底部布局。然而对于比较复杂的布局简单的属性设置无法达到这样的效果，例如top，center，bottom三层的布局，很可能因为中间层(center)的数据太多而将无法显示全或者将bottom层挤下去。解决这个问题，在采用RelativeLayout布局时，除了设置android:layout_alignParentBottom=”true”外，还需要对中间层进行属性进行设置:android:layout_above=”@id/bottom”
android:layout_below=”@id/top”。这样的设置即确保center层能处于中间位置，也可以通过自适应显示滚动条。

以下的例子就是实现三层布局的底部布局的功能。如图1，2。

图-1 三层的底部布局界面

图 2 弹出输入法时显示的底部按钮

项目只是实现主要的数据填充及布局，故只是简单的文件加载。以下是源码：

1.BottomTestActivity.java

package com.BottomTest.main;  

  

import java.util.ArrayList;  

import java.util.HashMap;  

  

import android.app.Activity;  

import android.os.Bundle;  

import android.widget.ListView;  

import android.widget.SimpleAdapter;  

  

public class BottomTestActivity extends Activity {  

  

/** Called when the activity is first created. */  

@Override  

public void onCreate(Bundle savedInstanceState) {  

super.onCreate(savedInstanceState);  

setContentView(R.layout.main);  

ListView list = (ListView) findViewById(R.id.friends);  

//存储数据的数组列表  

ArrayList<HashMap<String, Object>> listData=new ArrayList<HashMap<String,Object>>();  

String []name={"William","Charles","Linng","Json","Bob","Carli"};  

String []id={"12","16","33","21","34","22"};  

for(int i=0;i<6;i++){  

HashMap<String, Object> map=new HashMap<String, Object>();  

map.put("friend_image", R.drawable.icon);  

map.put("friend_username", name[i]);  

map.put("friend_id", id[i]);  

listData.add(map);  

}  

//适配器  

SimpleAdapter listItemAdapter= new SimpleAdapter(this,  

listData,  

R.layout.item,  

new String[] { "friend_image", "friend_username", "friend_id" },  

new int[] { R.id.friend_image, R.id.friend_username, R.id.friend_id });  

list.setAdapter(listItemAdapter);  

}  

} 

 

主要布局文件

2.main.xml

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

<LinearLayout  

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

android:layout_width="fill_parent"  

android:layout_height="wrap_content"  

android:orientation="vertical">  

<RelativeLayout android:id="@+id/wrap1"  

android:layout_width="fill_parent"  

android:layout_height="wrap_content"   >  

<LinearLayout android:id="@+id/top"  

android:layout_width="fill_parent"  

android:layout_height="wrap_content"  

android:orientation="horizontal"  >  

<EditText android:id="@+id/view_user_input"  

android:layout_width="fill_parent"  

android:layout_height="wrap_content"  

android:layout_marginTop="6dip"  

android:layout_marginLeft="12dip"  

android:singleLine="true"  

android:numeric="integer"  

android:imeOptions="actionDone"  

android:hint="输入用户ID"  

android:layout_weight="1"/>  

<Button android:id="@+id/view_user"  

android:layout_width="fill_parent"  

android:layout_height="wrap_content"  

android:layout_marginTop="4dip"  

android:layout_weight="3"  

android:text="查看"/>  

</LinearLayout>  

<LinearLayout android:id="@+id/center"  

android:layout_width="fill_parent"  

android:layout_height="wrap_content"  

android:orientation="vertical"  

android:layout_above="@id/bottom"  

android:layout_below="@id/top" >  

<TextView android:id="@+id/my_friends_list"  

android:layout_width="fill_parent"  

android:layout_height="wrap_content"  

android:text="好友列表"  

android:paddingTop="6dip"  

android:paddingLeft="2dip"  

android:layout_marginLeft="10dip"/>  

<ListView android:id="@+id/friends"  

android:layout_width="fill_parent"  

android:layout_height="wrap_content"  

android:layout_marginBottom="6dip"/>  

</LinearLayout>  

<LinearLayout android:id="@+id/bottom"  

android:background="@drawable/bg"  

android:layout_width="fill_parent"  

android:layout_height="wrap_content"  

android:orientation="horizontal"  

android:layout_alignParentBottom="true"  >  

<Button android:id="@+id/refresh"  

android:layout_width="fill_parent"  

android:layout_height="wrap_content"  

android:layout_marginTop="2dip"  

android:text="刷新用户列表"  

android:layout_weight="1"/>  

<Button android:id="@+id/back"  

android:layout_width="fill_parent"  

android:layout_height="wrap_content"  

android:layout_marginTop="2dip"  

android:text="返回"  

android:layout_weight="1"/>  

</LinearLayout>  

</RelativeLayout>  

</LinearLayout> 

listview item内容的布局文件

3.item.xml

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

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

android:id="@+id/RelativeLayout"  

android:layout_width="fill_parent"  

android:layout_height="wrap_content"  

android:paddingBottom="4dip"  

android:paddingRight="12dip" >  

<ImageView android:id="@+id/friend_image"  

android:layout_width="wrap_content"  

android:layout_height="wrap_content"  

android:paddingTop="6dip"  

android:paddingLeft="2dip"  

android:layout_centerVertical="true"  

android:layout_alignParentLeft="true" />  

<TextView android:id="@+id/friend_username"  

android:layout_width="fill_parent"  

android:layout_height="wrap_content"  

android:textSize="18dip"  

android:textColor="#ccc"  

android:paddingTop="6dip"  

android:paddingRight="2dip"  

android:layout_toRightOf="@id/friend_image"    />  

<TextView android:id="@+id/friend_id"  

android:layout_width="fill_parent"  

android:layout_height="wrap_content"  

android:layout_below="@+id/friend_username"  

android:layout_marginRight="36dip"  

android:paddingRight="2dip"  

android:layout_toRightOf="@id/friend_image"  

android:textColor="#fff"  

android:maxLines="2" />  

</RelativeLayout>

 

源码下载:BottomTest.zip