今天带大家实现一组studio的界面实现 主要实现效果如下：
通过图片 不难看出今天我们需要掌握的主要有三点
1. 掌握相对布局、线性布局的使用
2. 掌握样式的使用
3. 掌握如何对程序进行国际化
好 首先大体浏览我们需要的布局 我呢准备用LinearLayout的布局嵌套实现大体思路那最底层一张图一LinearLayout包裹然后每一行一LinearLayout包裹
共四行 最后加一LinearLayout实现背景颜色灰白的反差
布局代码如下：
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:background="@android:color/darker_gray" android:orientation="vertical" tools:context="bzu.edn.cn.phone.MainActivity"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginBottom="10dp" android:layout_weight="1"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" android:layout_marginRight="5dp" android:orientation="vertical" android:background="@android:color/white" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/clound" android:layout_gravity="center" android:layout_weight="1" /> <TextView android:text="@string/_cloud" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/textView" android:layout_gravity="center" android:layout_weight="1" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" android:layout_marginLeft="5dp" android:orientation="vertical" android:background="@android:color/white"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/bluetooth" android:layout_gravity="center" android:layout_weight="1" /> <TextView android:text="@string/_bluetooth" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/textView4" android:layout_gravity="center" android:layout_weight="1" /> </LinearLayout> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginBottom="10dp" android:layout_weight="1"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" android:layout_marginRight="5dp" android:orientation="vertical" android:background="@android:color/white"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:src="@drawable/gesture" android:layout_weight="1"/> <TextView android:text="@string/_gesture" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_weight="1" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" android:layout_marginLeft="5dp" android:orientation="vertical" android:background="@android:color/white"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/gps" android:layout_gravity="center" android:layout_weight="1" android:id="@+id/imageView" /> <TextView android:text="@string/_gps" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_weight="1" android:id="@+id/textView2" /> </LinearLayout> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginBottom="10dp" android:layout_weight="1"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" android:layout_marginRight="5dp" android:orientation="vertical" android:background="@android:color/white"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/info" android:layout_gravity="center" android:layout_weight="1" android:id="@+id/imageView2" /> <TextView android:text="@string/_system_info" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_weight="1" android:id="@+id/textView3" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" android:layout_marginLeft="5dp" android:orientation="vertical" android:background="@android:color/white"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:src="@drawable/internet" android:layout_weight="1" /> <TextView android:text="@string/_internet" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_weight="1" /> </LinearLayout> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" android:layout_marginRight="5dp" android:orientation="vertical" android:background="@android:color/white"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/language" android:layout_gravity="center" android:layout_weight="1" /> <TextView android:text="@string/_language" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_weight="1" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" android:layout_marginLeft="5dp" android:orientation="vertical" android:background="@android:color/white"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:src="@drawable/theme" android:layout_weight="1" /> <TextView android:text="@string/_set_notifycation" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_weight="1" /> </LinearLayout> </LinearLayout> </LinearLayout>
乍一看或许有些繁琐所以 我选择在Design视角下操作
通过代码可以看出
android:layout_marginLeft="5dp"实现组件间间距 android:orientation="vertical"控制水平数值操作android:layout_gravity="center"实现控件居中操作android:layout_weight="1" 实现控件在空间上的合理分配 为了实现国际化指语言的合理性需要在values文件夹下建立2个子文件夹values-zh-rCN and values-en-rUS用来实现语言上的通用 说道这里大体上的布局已经可以 相对界面也有很好的实现 基本效果图如下可以看到已经很接近我们的目标了 这个时候细心的朋友 或许会发现 我们定下的目标那只实现了两个并没有使用到样式这个概念 那么所以接下来呢 我准备用样式做一下很简单首先那先提取样式代码如下：
<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>
所谓样式那 我理解的是就是给组件啥的一个模板 大量组件类型相似 一个个代码量太大所以抽去相似之处做一个框架用的时候
style="@style/tv_style"直接调用会省好多事
这样今天的任务就圆满完成了
