UI篇--android实现底部按钮布局
16lz
2021-12-04
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
更多相关文章
- Android(安卓)之 ProgressDialog用法介绍
- 设置android的versionCode
- android走马灯效果
- Item高度固定下动态设置ListView的高度
- Android(安卓)开发 下载
- android 仿微信demo————微信消息界面实现(移动端)
- android 仿微信demo————微信消息界面实现(服务端)
- android线性布局和相对布局的总结
- Android实现头像上传