Android 移动开发 | UI基础页面布局案例实现国际化效果

直入主题,效果图:
自己写的页面布局小demo


废话不多说…

页面布局

MianActivity页面布局文件:

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:id="@+id/pagebg"
    android:background="@drawable/c1"
    tools:context=".LYXForecastHieghtActivity">

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/title_name"
        android:gravity="center"
        android:textStyle="bold"
        android:textColor="#64AC58"
        android:layout_margin="30dp"
        android:textSize="24dp"/>
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp">
        <TextView
            android:id="@+id/tv_birthday"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/tv_birthday"
            android:layout_marginTop="20dp"
            android:textSize="16dp"/>
        <EditText
            android:id="@+id/edt_birthday"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:width="140dp"
            android:ems="10"
            android:layout_marginLeft="15dp"
            android:layout_toRightOf="@id/tv_birthday"
            android:inputType="date"/>
        <Button
            android:id="@+id/btn_date"
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:background="@drawable/button"
            android:shadowRadius="@android:integer/config_longAnimTime"
            android:text="@string/btn_date"
            android:layout_toRightOf="@id/edt_birthday"
            android:layout_marginLeft="15dp"
            android:textColor="#FFFFFF"/>
        <TextView
            android:id="@+id/tv_fatherheight"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/father_height"
            android:layout_below="@id/tv_birthday"
            android:layout_marginTop="40dp"
            android:textSize="16dp"/>
        <EditText
            android:id="@+id/edt_fatherHeight"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:ems="12"
            android:layout_marginLeft="15dp"
            android:layout_toRightOf="@id/tv_fatherheight"
            android:layout_marginTop="20dp"
            android:hint="@string/hint_text"
            android:layout_below="@id/tv_birthday"
            android:inputType="number"/>
        <TextView
            android:id="@+id/tv_motherheight"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/mother_height"
            android:layout_below="@id/tv_fatherheight"
            android:layout_marginTop="30dp"
            android:textSize="16dp"/>
        <EditText
            android:id="@+id/edt_motherheight"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:ems="12"
            android:layout_marginLeft="15dp"
            android:layout_toRightOf="@id/tv_fatherheight"
            android:layout_marginTop="10dp"
            android:hint="@string/hint_text"
            android:layout_below="@id/edt_fatherHeight"
            android:inputType="number"/>
        <RadioGroup
            android:id="@+id/rg_gender"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/tv_motherheight"
            android:orientation="horizontal">
            <TextView
                android:id="@+id/tv_sex"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:textSize="16dp"
                android:text="@string/sex"/>
            <RadioButton
                android:id="@+id/rb_man"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:layout_marginLeft="20dp"
                android:text="@string/gener_man"/>
            <RadioButton
                android:id="@+id/rb_wom"
                android:layout_width="wrap_content"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"
                android:layout_toRightOf="@id/rb_man"
                android:layout_height="wrap_content"
                android:text="@string/gener_wom"/>
        </RadioGroup>
        <TextView
            android:id="@+id/tv_grow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:textSize="16dp"
            android:layout_below="@+id/rg_gender"
            android:text="@string/growth"/>
        <TextView
            android:id="@+id/sp_from"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:textSize="16dp"
            android:layout_toRightOf="@+id/tv_grow"
            android:layout_below="@+id/rg_gender"
            android:layout_marginLeft="60dp"
            android:text="@string/from"/>
        <Spinner
            android:id="@+id/spin_from"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:entries="@array/date"
            android:prompt="@string/from"
            android:layout_marginTop="20sp"
            android:layout_toRightOf="@+id/sp_from"
            android:layout_below="@+id/rg_gender"
            android:spinnerMode="dialog"/>
        <LinearLayout
            android:id="@+id/ly_grow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/tv_grow"
            android:layout_marginTop="15dp"
            android:orientation="horizontal">
            <CheckBox
                android:id="@+id/checkBox"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:text="@string/checkBox1"/>
            <CheckBox
                android:id="@+id/checkBox2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:text="@string/checkBox2"/>
            <CheckBox
                android:id="@+id/checkBox3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:text="@string/checkBox3"/>
            <CheckBox
                android:id="@+id/checkBox4"
                android:layout_marginLeft="10dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/checkBox4"/>
        </LinearLayout>
        <Button
            android:id="@+id/btn_foreget"
            android:layout_width="120dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:text="@string/btn_foreget"
            android:textSize="18dp"
            android:layout_marginLeft="36dp"
            android:background="@drawable/button"
            android:shadowRadius="@android:integer/config_longAnimTime"
            android:textColor="#FFFFFF"
            android:layout_below="@+id/ly_grow"/>
        <Button
            android:id="@+id/btn_reset"
            android:layout_width="120dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:layout_marginLeft="30dp"
            android:text="@string/btn_reset"
            android:textSize="18dp"
            android:background="@drawable/button"
            android:shadowRadius="@android:integer/config_longAnimTime"
            android:textColor="#FFFFFF"
            android:layout_below="@+id/ly_grow"
            android:layout_toRightOf="@+id/btn_foreget"/>
        <ProgressBar
            android:id="@+id/progressbar"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="match_parent"
            android:layout_height="15dp"
            android:layout_weight="1"
            android:layout_gravity="center_vertical"
            android:layout_marginTop="15dp"
            android:progressDrawable="@drawable/my_progress_bar"
            android:max="100"
            android:progress="75"
            android:layout_below="@id/btn_foreget"
            android:visibility="visible"/>
        <TextView
            android:id="@+id/tv_message"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/tv_message"
            android:layout_marginTop="20dp"
            android:textSize="16dp"
            android:layout_below="@+id/progressbar"/>
        <TextView
            android:id="@+id/tv_msgContent1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:textSize="16dp"
            android:layout_below="@+id/tv_message"/>
        <TextView
            android:id="@+id/tv_msgContent2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:textSize="16dp"
            android:layout_below="@+id/tv_msgContent1"/>
        <TextView
            android:id="@+id/tv_msgContent3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:textSize="16dp"
            android:layout_below="@+id/tv_msgContent2"/>
        <TextView
            android:id="@+id/tv_about"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/page"
            android:layout_marginTop="20dp"
            android:textSize="16dp"
            android:layout_marginLeft="200dp"
            android:autoLink="web"
            android:textColor="#5d9839"
            android:layout_below="@+id/progressbar"/>
    </RelativeLayout>
</LinearLayout>

实现国际化:

1. 在res/values目录下的string.xml文件写入字符串资源;

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">身高测试系统</string>
    <string name="title_name">身高测试系统</string>
    <string name="tv_birthday">出生日期:</string>
    <string name="father_height">父亲身高:</string>
    <string name="mother_height">母亲身高:</string>
    <string name="sex">你的性别:</string>
    <string name="btn_date">选择日期:</string>
    <string name="hint_text">单位/CM</string>
    <string name="gener_man">男</string>
    <string name="from">出生地区:</string>
    <string name="gener_wom">女</string>
    <string name="growth">你的生活习惯:</string>
    <string name="checkBox1">爱运动</string>
    <string name="checkBox2">喝牛奶</string>
    <string name="checkBox3">爱睡觉</string>
    <string name="checkBox4">营养好</string>
    <string name="btn_foreget">立即测试</string>
    <string name="btn_reset">重置</string>
    <string name="page"><a href="www.baidu.com">身高测试常识了解</a></string>
    <string name="tv_message">身高预测参考详情:</string>
</resources>

2. 在res/values目录下分别新建中文资源文件:values-zh和英文资源文件:values-en,写入字符串资源

values-en/string.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">Height testing system</string>
    <string name="title_name">Height testing system</string>
    <string name="tv_birthday">your birthday:</string>
    <string name="father_height">father height:</string>
    <string name="mother_height">mother height:</string>
    <string name="sex">your gender:</string>
    <string name="btn_date">option date</string>
    <string name="hint_text">use centimeter</string>
    <string name="gener_man">male</string>
    <string name="gener_wom">woman</string>
    <string name="growth">your lifestyle hobits:</string>
    <string name="checkBox1">sports</string>
    <string name="checkBox2">milk</string>
    <string name="checkBox3">sleep</string>
    <string name="from">from:</string>
    <string name="checkBox4">nutrition</string>
    <string name="btn_foreget">now foreget</string>
    <string name="btn_reset">reset</string>
    <string name="page"><a href="www.baidu.com">Height forecast commonsenen</a></string>
    <string name="tv_message">Height forecast message:</string>
    <string-array name="date">
        <item name="spin_title">guangdong</item>
        <item>beijing</item>
        <item>shanghai</item>
        <item>zhejiang</item>
        <item>hunan</item>
        <item>shandong</item>
        <item>jiangsu</item>
        <item>jiangxi</item>
    </string-array>
</resources>

values-zh/string.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">身高测试系统</string>
    <string name="title_name">身高测试系统</string>
    <string name="tv_birthday">出生日期:</string>
    <string name="father_height">父亲身高:</string>
    <string name="mother_height">母亲身高:</string>
    <string name="sex">你的性别:</string>
    <string name="btn_date">选择日期</string>
    <string name="hint_text">单位/CM</string>
    <string name="gener_man">男</string>
    <string name="gener_wom">女</string>
    <string name="growth">你的生活习惯:</string>
    <string name="checkBox1">爱运动</string>
    <string name="checkBox2">喝牛奶</string>
    <string name="checkBox3">爱睡觉</string>
    <string name="checkBox4">营养好</string>
    <string name="btn_foreget">立即测试</string>
    <string name="from">出生地区:</string>
    <string name="btn_reset">重置</string>
    <string name="page"><a href="www.baidu.com">身高测试常识了解</a></string>
    <string name="tv_message">身高预测参考详情:</string>
    <string-array name="date">
        <item name="spin_title">广东</item>
        <item>北京</item>
        <item>上海</item>
        <item>浙江</item>
        <item>湖南</item>
        <item>山东</item>
        <item>江苏</item>
        <item>江西</item>
    </string-array>    
</resources>

array.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="date">
        <item name="spin_title">广东</item>
        <item>北京</item>
        <item>上海</item>
        <item>浙江</item>
        <item>湖南</item>
        <item>山东</item>
        <item>江苏</item>
        <item>江西</item>
    </string-array>
</resources>

进度条 & 按钮美化效果

右键res–>new–>Drawable resource file 新建xml文件

进度条:
把进度条美化:在res/drawable下新建自定义的my_progress_bar.xml文件,写入以下代码并在activity_lyxforcaset_hieght.xml中利用background属性引入文件实现进度条渐变效果:@drawable/xml文件名

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--    背景从左到右色值, 渐变-->
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <corners android:radius="20dp"/>
            <gradient
                android:angle="0"
                android:centerColor="#F5F5F5"
                android:centerY="0.75"
                android:endColor="#F5F5F5"
                android:startColor="#F5F5F5"/>
        </shape>
    </item>

<!--    缓冲区的进度-->
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="20dp"/>
                <gradient
                    android:startColor="#80ffb300"
                    android:centerColor="#80ffb600"
                    android:centerY="0.75"
                    android:endColor="#a0ffcb00"/>
            </shape>
        </clip>
    </item>

    <!--    背景从左到右色值, 渐变-->
    <item android:id="@android:id/progress">
      <clip>
          <shape>
              <corners android:radius="20dp"/>
              <gradient
                  android:angle="0"
                  android:endColor="#9FCF57"
                  android:startColor="#DFF488"/>
          </shape>
      </clip>
    </item>
</layer-list>

button:
给button设置圆角弧度,也是新建一个button.xml文件,与美化进度条的方法是一样的…

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
<!--  填充的颜色-->
    <solid android:color="#9FCF57"/>
    <!--设置四个角的圆角-->
    <corners android:radius="5dp"/>
<!--   设置文字的paading-->
    <paading
        android:left="10dp"
        android:right="10dp"
        android:top="10dp"
        android:bottom="10dp"/>
</shape>