手机手机信息页面实现

今天带大家实现一组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"直接调用会省好多事

这样今天的任务就圆满完成了