Android UI手机信息页面设计

发布时间 - 2026-01-11 00:07:38    点击率:

本文实例为大家分享了Android UI 手机信息页面展示的具体代码,供大家参考,具体内容如下

1. 运行效果图

2. 设计思路(实现原理)

1.将准备好的八个图标复制到res/drawable文件夹下
2.创建一个垂直的线性布局,并在线性布局中创建4个相对布局
3.在相对布局中添加相应的TextView
4.在values文件下的style.xml文件中存放抽取出来的样式
5.创建values-zh-rCN、values-en-rUS文件夹,并在文件夹中创建strings.xml文件夹

3.案例实现

(1)创建“手机信息页面”程序

创建一个名为“手机信息页面”的程序,该程序用于展示手机设置页面的信息。程序界面对应布局文件activity_mian.xml如下所示:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="@android:color/darker_gray"
 android:orientation="vertical"
 tools:context=".MainActivity" >
 <RelativeLayout style="@style/h_wrap_content" 
  android:layout_marginTop="10dp">
  <TextView
   style="@style/tv_style"
   android:layout_alignParentLeft="true"
   android:layout_marginLeft="10dp"
   android:drawableTop="@drawable/clound"
   android:text="@string/_cloud" />
  <TextView
   style="@style/tv_style"
   android:layout_alignParentRight="true"
   android:layout_marginRight="10dp"
   android:drawableTop="@drawable/bluetooth"
   android:text="@string/_bluetooth" />
 </RelativeLayout>
 <RelativeLayout style="@style/h_wrap_content" 
  android:layout_marginTop="10dp">
  <TextView
   style="@style/tv_style"
   android:layout_alignParentLeft="true"
   android:layout_marginLeft="10dp"
   android:drawableTop="@drawable/gesture"
   android:text="@string/_gesture" />
  <TextView
   style="@style/tv_style"
   android:layout_alignParentRight="true"
   android:layout_marginRight="10dp"
   android:drawableTop="@drawable/gps"
   android:text="@string/_gps" />
 </RelativeLayout>
 <RelativeLayout style="@style/h_wrap_content" 
  android:layout_marginTop="10dp">
  <TextView
   style="@style/tv_style"
   android:layout_alignParentLeft="true"
   android:layout_marginLeft="10dp"
   android:drawableTop="@drawable/info"
   android:text="@string/_system_info" />
  <TextView
   style="@style/tv_style"
   android:layout_alignParentRight="true"
   android:layout_marginRight="10dp"
   android:drawableTop="@drawable/internet"
   android:text="@string/_internet" />
 </RelativeLayout>
 <RelativeLayout style="@style/h_wrap_content" 
  android:layout_marginTop="10dp">
  <TextView
   style="@style/tv_style"
   android:layout_alignParentLeft="true"
   android:layout_marginLeft="10dp"
   android:drawableTop="@drawable/language"
   android:text="@string/_language" />
  <TextView
   style="@style/tv_style"
   android:layout_alignParentRight="true"
   android:layout_marginRight="10dp"
   android:drawableTop="@drawable/notifycation"
   android:text="@string/_set_notifycation" />
 </RelativeLayout>
 </LinearLayout>

(2)抽取样式

由于编写布局文件时,相同控件之间的外边距和宽高都是固定的。因此会产生大量重复的布局代码,为了代码简洁和重复使用可以将相同代码抽取为样式单独放在一个styles.xml文件中。一般情况下 在app的vlaue文件夹下会自带一个styles.xml文件styles.xml文件如下所示:

<resources>
 <style name="AppBaseTheme" parent="android:Theme.Light">
 </style>
 <style name="AppTheme" parent="AppBaseTheme">
 </style>
 <!-- 宽 match——parent 高 wrap_content-->
 <style name="h_wrap_content">
  <item name="android:layout_width">match_parent</item>
  <item name="android:layout_height">wrap_content</item>
 </style>
  <!-- 宽高都 match——parent -->
 <style name="tv_style">
  <item name="android:layout_width">145dp</item>
  <item name="android:layout_height">90dp</item>
  <item name="android:gravity">center</item>
  <item name="android:paddingTop">8dp</item>
  <item name="android:paddingBottom">8dp</item>
  <item name="android:drawablePadding">5dp</item>
  <item name="android:background">@android:color/white</item>
 </style>
</resources> 

(3)创建values-zh-rCN、values-en-rUS文件夹

切换到project打开MyApplication->app->src->main->res,创建values-zh-rCN、values-en-rUS文件夹,并在这两个文件夹下创建相应的strings.xml文件。

values-zh-rCN文件夹下的strings.xml文件如下所示:

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <string name="app_name">手机信息页面</string>
 <string name="menu_settings">设置</string>
 <string name="hello_world">你好,世界!</string>
 <string name="_cloud">云通信</string>
 <string name="_bluetooth">蓝牙</string>
 <string name="_gesture">自定义手势</string>
 <string name="_gps">定位</string>
 <string name="_system_info">系统信息</string>
 <string name="_internet">网络</string>
 <string name="_language">语言设置</string>
 <string name="_set_notifycation">通知栏设置</string>
</resources>

values-en-rUS文件夹下的strings.xml文件如下所示:

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <string name="app_name">phoneInfo</string>
 <string name="menu_settings">Settings</string>
 <string name="hello_world">Hello world!</string>
 <string name="_cloud">Cloud</string>
 <string name="_bluetooth">Bluetooth</string>
 <string name="_gesture">Gesture</string>
 <string name="_gps">Gps</string>
 <string name="_system_info">SystemInfo</string>
 <string name="_internet">Internet</string>
 <string name="_language">Language</string>
 <string name="_set_notifycation">Notifycation</string>
</resources>

你会看到如下效果:

(4)编写与界面交互的代码

接下来需要在MainActivity中编写与用户交互的逻辑代码,MainActivity对应的代码如下所示:

public class MainActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
  }
}


(5)查看运行结果


 

各控件及其属性可根据情况进行修改。


# Android  # UI手机信息页面  # UI手机页面  # Android手机信息页面  # 详解Android 手机卫士设置向导页面  # Android自定义手机界面状态栏实例代码  # Android获取手机通讯录、sim卡联系人及调用拨号界面方法  # Android仿Win8的metro的UI界面(上)  # 解析Android开发优化之:对界面UI的优化详解(二)  # 解析Android开发优化之:对界面UI的优化详解(一)  # 所示  # 并在  # 创建一个  # 都是  # 放在  # 你会  # 这两个  # 自定义  # 自带  # 大家分享  # 具体内容  # 切换到  # 重复使用  # 你好  # 可根据  # 夹中  # background  # layout_height  # match_parent  # color 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: 如何获取PHP WAP自助建站系统源码?  Laravel如何创建自定义Facades?(详细步骤)  如何正确选择百度移动适配建站域名?  百度浏览器如何管理插件 百度浏览器插件管理方法  Laravel怎么发送邮件_Laravel Mail类SMTP配置教程  PythonWeb开发入门教程_Flask快速构建Web应用  zabbix利用python脚本发送报警邮件的方法  Laravel Livewire是什么_使用Laravel Livewire构建动态前端界面  网站图片在线制作软件,怎么在图片上做链接?  黑客如何通过漏洞一步步攻陷网站服务器?  Win11怎么恢复误删照片_Win11数据恢复工具使用【推荐】  Laravel如何使用Blade组件和插槽?(Component代码示例)  Firefox Developer Edition开发者版本入口  手机怎么制作网站教程步骤,手机怎么做自己的网页链接?  如何获取上海专业网站定制建站电话?  Laravel如何处理跨站请求伪造(CSRF)保护_Laravel表单安全机制与令牌校验  如何在 Go 中优雅地映射具有动态字段的 JSON 对象到结构体  php后缀怎么变mp4格式错误_修改扩展名提示格式不对怎么办【技巧】  怎么制作一个起泡网,水泡粪全漏粪育肥舍冬季氨气超过25ppm,可以有哪些措施降低舍内氨气水平?  详解一款开源免费的.NET文档操作组件DocX(.NET组件介绍之一)  Laravel如何使用API Resources格式化JSON响应_Laravel数据资源封装与格式化输出  Win11摄像头无法使用怎么办_Win11相机隐私权限开启教程【详解】  北京企业网站设计制作公司,北京铁路集团官方网站?  javascript中数组(Array)对象和字符串(String)对象的常用方法总结  html5audio标签播放结束怎么触发事件_onended回调方法【教程】  如何在万网开始建站?分步指南解析  Bootstrap整体框架之JavaScript插件架构  javascript基本数据类型及类型检测常用方法小结  ChatGPT回答中断怎么办 引导AI继续输出完整内容的方法  node.js报错:Cannot find module &#39;ejs&#39;的解决办法  Laravel项目怎么部署到Linux_Laravel Nginx配置详解  佛山企业网站制作公司有哪些,沟通100网上服务官网?  Laravel的路由模型绑定怎么用_Laravel Route Model Binding简化控制器逻辑  如何获取免费开源的自助建站系统源码?  湖南网站制作公司,湖南上善若水科技有限公司做什么的?  如何快速查询域名建站关键信息?  Swift中swift中的switch 语句  如何在阿里云购买域名并搭建网站?  北京网站制作公司哪家好一点,北京租房网站有哪些?  装修招标网站设计制作流程,装修招标流程?  Android okhttputils现在进度显示实例代码  Laravel如何实现数据导出到PDF_Laravel使用snappy生成网页快照PDF【方案】  香港服务器如何优化才能显著提升网站加载速度?  什么是JavaScript解构赋值_解构赋值有哪些实用技巧  如何快速完成中国万网建站详细流程?  如何在 Python 中将列表项按字母顺序编号(a.、b.、c. …)  网站制作软件免费下载安装,有哪些免费下载的软件网站?  Laravel如何编写单元测试和功能测试?(PHPUnit示例)  phpredis提高消息队列的实时性方法(推荐)  Laravel DB事务怎么使用_Laravel数据库事务回滚操作