Android UI 手机信息页面(作业)

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

    1)将准备好的八个图标复制到res/drawable文件夹下

    2)创建一个垂直的线性布局,并在线性布局中创建4个相对布局 

    3)在相对布局中添加相应的TextView

    4)在values文件下的style.xml文件中存放抽取出来的样式

    5)创建values-zh-rCN、values-en-rUS文件夹,并在文件夹中创建strings.xml文件

2.    具体步骤

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

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

<?xml version="1.0"encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
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"
   
tools:context="cn.edu.bzu.phonelnfo.MainActivity"
>

    <LinearLayout
       
android:layout_width="match_parent"
       
android:layout_height="match_parent"
       
android:background="@android:color/darker_gray"
       
android:orientation="vertical"
       
tools:context=".MainActivity"
       
android:layout_alignParentTop="true"
       
android:layout_alignParentLeft="true"
       
android:layout_alignParentStart="true"
>
        <RelativeLayout style="@style/h_wrap_content"
            
android:layout_marginTop="10dp"
           
android:layout_width="wrap_content"
           
android:layout_height="wrap_content"
>

            <TextView
               
style="@style/tv_style"
               
android:drawableTop="@drawable/bluetooth"
                
android:text="@string/_bluetooth"
               
android:layout_alignParentTop="true"
               
android:layout_toRightOf="@+id/textView"
               
android:layout_toEndOf="@+id/textView"
               
android:layout_marginLeft="43dp"
               
android:layout_marginStart="43dp"
               
android:id="@+id/textView2"
/>

            <TextView
               
style="@style/tv_style"
               
android:layout_marginLeft="63dp"
               
android:drawableTop="@drawable/clound"
               
android:text="@string/_cloud"
               
android:layout_marginStart="63dp"
               
android:id="@+id/textView"
               
android:layout_alignParentTop="true"
               
android:layout_alignParentLeft="true"
               
android:layout_alignParentStart="true"
/>
        </RelativeLayout>

        <RelativeLayout style="@style/h_wrap_content"
           
android:layout_alignParentRight="true"
           
android:layout_marginTop="10dp"
>

            <TextView
               
android:id="@+id/tv1"
               
style="@style/tv_style"
               
android:drawableTop="@drawable/gesture"
               
android:text="@string/_gesture"
               
android:layout_marginRight="42dp"
                
android:layout_marginEnd="42dp"
               
android:layout_alignParentTop="true"
               
android:layout_toLeftOf="@+id/textView3"
               
android:layout_toStartOf="@+id/textView3"
/>

            <TextView
               
style="@style/tv_style"
               
android:layout_marginRight="45dp"
               
android:drawableTop="@drawable/gps"
               
android:text="@string/_gps"
               
android:layout_marginEnd="45dp"
               
android:id="@+id/textView3"
                
android:layout_alignParentTop="true"
               
android:layout_alignParentRight="true"
               
android:layout_alignParentEnd="true"
/>
        </RelativeLayout>

        <RelativeLayout style="@style/h_wrap_content"
           
android:layout_marginTop="10dp"
>

            <TextView
               
style="@style/tv_style"
               
android:drawableTop="@drawable/info"
               
android:text="@string/_system_info"
               
android:id="@+id/textView4"
               
android:layout_marginRight="43dp"
               
android:layout_marginEnd="43dp"
               
android:layout_alignParentTop="true"
               
android:layout_toLeftOf="@+id/textView5"
               
android:layout_toStartOf="@+id/textView5"
/>

            <TextView
               
style="@style/tv_style"
               
android:layout_marginRight="46dp"
               
android:drawableTop="@drawable/internet"
               
android:text="@string/_internet"
               
android:layout_marginEnd="46dp"
               
android:id="@+id/textView5"
               
android:layout_alignParentTop="true"
               
android:layout_alignParentRight="true"
               
android:layout_alignParentEnd="true"
/>
        </RelativeLayout>

        <RelativeLayout style="@style/h_wrap_content"
           
android:layout_marginTop="10dp"
>

            <TextView
               
style="@style/tv_style"
               
android:layout_marginRight="48dp"
               
android:drawableTop="@drawable/notifycation"
               
android:text="@string/_set_notifycation"
               
android:id="@+id/textView6"
               
android:layout_marginEnd="48dp"
               
android:layout_alignParentTop="true"
               
android:layout_alignParentRight="true"
               
android:layout_alignParentEnd="true"
/>

            <TextView
               
style="@style/tv_style"
               
android:drawableTop="@drawable/language"
               
android:text="@string/_language"
               
android:layout_marginRight="41dp"
               
android:layout_marginEnd="41dp"
               
android:id="@+id/textView7"
               
android:layout_alignParentTop="true"
               
android:layout_toLeftOf="@+id/textView6"
               
android:layout_toStartOf="@+id/textView6"
/>
        </RelativeLayout>
    </LinearLayout>

</RelativeLayout>

 

(2)抽取样式

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

<resources>

    <style name="AppBaseTheme"parent="android:Theme.Light">

    </style>

    <style name="AppTheme"parent="AppBaseTheme">

    </style>

    <!-- 宽 match——parent 高 wrap_content-->

    <stylename="h_wrap_content">

        <item name="android:layout_width">match_parent</item>

        <itemname="android:layout_height">wrap_content</item>

    </style>

     <!-- 宽高都 match——parent -->

    <style name="tv_style">

        <itemname="android:layout_width">145dp</item>

        <item name="android:layout_height">90dp</item>

        <itemname="android:gravity">center</item>

        <itemname="android:paddingTop">8dp</item>

        <itemname="android:paddingBottom">8dp</item>

        <itemname="android:drawablePadding">5dp</item>

        <item name="android:background">@android:color/white</item>

    </style>

</resources> 

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

  在res目录下创建values-zh-rCN、values-en-rUS文件夹,并在这两个文件夹下创建相应的strings.xml文件。

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

<?xmlversion="1.0" encoding="utf-8"?>

<resources>

    <string name="app_name">手机信息页面</string>

    <stringname="menu_settings">设置</string>

    <string name="hello_world">你好,世界!</string>

    <string name="_cloud">云通信</string>

    <string name="_bluetooth">蓝牙</string>

    <string name="_gesture">自定义手势</string>

    <string name="_gps">定位</string>

    <stringname="_system_info">系统信息</string>

    <string name="_internet">网络</string>

    <string name="_language">语言设置</string>

    <stringname="_set_notifycation">通知栏设置</string>

</resources>

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

<?xmlversion="1.0" encoding="utf-8"?>

<resources>

    <stringname="app_name">phoneInfo</string>

    <stringname="menu_settings">Settings</string>

    <stringname="hello_world">Hello world!</string>

    <stringname="_cloud">Cloud</string>

    <stringname="_bluetooth">Bluetooth</string>

    <stringname="_gesture">Gesture</string>

    <stringname="_gps">Gps</string>

    <stringname="_system_info">SystemInfo</string>

    <stringname="_internet">Internet</string>

    <stringname="_language">Language</string>

    <string name="_set_notifycation">Notifycation</string>

</resources>

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

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

publicclass MainActivity extends Activity {

  @Override

  protected void onCreate(BundlesavedInstanceState) {

      super.onCreate(savedInstanceState);

      setContentView(R.layout.activity_main);

  }

}


在本次作业中,在布局方面遇到了一些问题,没有将信息控件做到和预想的那样,说明我对布局这方面的知识还不够完善,我会在学习中不断提高,我会慢慢改进,做出一个完美的手机信息页面。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值