用android studio 写一个通讯录的界面布局
时间: 2023-08-07 20:53:50 浏览: 189
好的,我可以为您提供一个简单的通讯录界面布局代码示例。请按照以下步骤操作:
1. 打开 Android Studio,创建一个新的项目,选择 Empty Activity 模板。
2. 在 res/layout 目录下创建一个名为 activity_contact.xml 的布局文件,用于定义通讯录界面的布局。
3. 将以下代码复制到 activity_contact.xml 文件中:
```xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- 顶部搜索栏 -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp">
<EditText
android:id="@+id/et_search"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="搜索联系人"
android:padding="8dp"
android:textSize="16sp" />
<Button
android:id="@+id/btn_search"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="搜索" />
</RelativeLayout>
<!-- 中间联系人列表 -->
<ListView
android:id="@+id/list_view"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<!-- 底部功能栏 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center_vertical"
android:padding="8dp">
<Button
android:id="@+id/btn_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="添加联系人" />
<Button
android:id="@+id/btn_group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="群组" />
<Button
android:id="@+id/btn_setting"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="设置" />
</LinearLayout>
</LinearLayout>
```
4. 在 MainActivity.java 文件中,添加以下代码来设置 ListView 的适配器,并向其中添加测试数据:
```java
public class MainActivity extends AppCompatActivity {
private ListView mListView;
private ContactAdapter mAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_contact);
// 初始化 ListView
mListView = (ListView) findViewById(R.id.list_view);
// 添加测试数据
List<Contact> contacts = new ArrayList<>();
contacts.add(new Contact("张三", "13888888888"));
contacts.add(new Contact("李四", "13999999999"));
contacts.add(new Contact("王五", "13666666666"));
// 设置 ListView 的适配器
mAdapter = new ContactAdapter(this, contacts);
mListView.setAdapter(mAdapter);
}
/**
* 联系人数据模型类
*/
private static class Contact {
String name;
String phone;
public Contact(String name, String phone) {
this.name = name;
this.phone = phone;
}
}
/**
* 联系人列表适配器类
*/
private static class ContactAdapter extends ArrayAdapter<Contact> {
private Context mContext;
public ContactAdapter(Context context, List<Contact> contacts) {
super(context, 0, contacts);
mContext = context;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
if (convertView == null) {
convertView = LayoutInflater.from(mContext).inflate(R.layout.item_contact, parent, false);
}
// 获取当前位置的联系人数据
Contact contact = getItem(position);
// 显示联系人的姓名和电话号码
TextView tvName = (TextView) convertView.findViewById(R.id.tv_name);
TextView tvPhone = (TextView) convertView.findViewById(R.id.tv_phone);
tvName.setText(contact.name);
tvPhone.setText(contact.phone);
return convertView;
}
}
}
```
5. 在 res/layout 目录下创建一个名为 item_contact.xml 的布局文件,用于定义 ListView 的列表项布局。
6. 将以下代码复制到 item_contact.xml 文件中:
```xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="16dp">
<TextView
android:id="@+id/tv_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="@+id/tv_phone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="14sp"
android:textColor="@android:color/darker_gray" />
</LinearLayout>
```
7. 运行应用程序,您将看到一个简单的通讯录界面,其中包含搜索栏、联系人列表和功能按钮栏,如下图所示:
![通讯录界面](https://i.imgur.com/a4XgQn3.png)
这只是一个简单的示例代码,您可以根据自己的需要进行修改和扩展。
阅读全文