Android之实例界面设计

最近很久没冒泡了。刚学Android没多久，就开始在搞界面。layout文件。

越搞才越觉得有意思。废话不多说，先送上我的layout文件，然后解说。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/background_login">

<TextView android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="15dip"
android:paddingRight="15dip"
android:layout_marginTop="10dip"
android:textColor="@android:color/white"
android:textSize="17dip"
android:ellipsize="marquee"
android:focusable="true"
android:marqueeRepeatLimit="marquee_forever"
android:focusableInTouchMode="true"
android:scrollHorizontally="true"
android:text="@string/runtext"
/>

<!--
padding 内边距   layout_margin 外边距
android:layout_alignParentTop 布局的位置是否处于顶部
-->

<RelativeLayout
android:id="@+id/login_div"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="17dp"
android:background="@drawable/background_login_div_bg"
android:padding="15dip" >

<!-- 账号 -->
<TableRow android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:id="@+id/account"
>
<TextView
style="@style/normalText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="@string/login_label_username" />

<EditText
android:id="@+id/login_edit_username"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="@string/login_username_hint"
android:inputType="text"
android:singleLine="true" />

</TableRow>

<TableRow android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_below="@id/account"
android:id="@+id/password"
>
<!-- 密码text  -->

<TextView
style="@style/normalText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="3dp"
android:text="@string/login_label_password"  />

<EditText
android:id="@+id/login_edit_password"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="@string/login_password_hint"
android:inputType="textPassword"
android:minWidth="180dip"
android:password="true"
android:singleLine="true" />
</TableRow>

<TableRow android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_below="@id/password"
android:id="@+id/funButton"
android:layout_marginTop="10dp"
>
<!-- 登录button -->
<Button
android:id="@+id/login_btn_login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
style="@style/button"
android:text="@string/login_label_signin" />

<!-- 清空button -->
<Button
android:id="@+id/login_btn_cleanup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
style="@style/button"
android:text="@string/login_label_cleanup" />

<!-- 注册button -->
<Button
android:id="@+id/login_btn_reg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/button"
android:text="@string/login_label_register"  />

</TableRow>
</RelativeLayout>

<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<!-- 家居掌 中宝，捧在手心里的至爱 -->
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="25dip"
android:layout_marginTop="15dp"
android:src="@drawable/title" />

<!-- 钓鱼岛 -->
<ImageView

android:src="@drawable/chinese"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_margin="15dp"
/>

</RelativeLayout>
</LinearLayout>

这些都是素材。网上找了点，自己改了点。



这是总体效果，还有两个文件。背景文件

background_login.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#80BA55D3"
android:endColor="#FFEE82EE"
android:angle="45"
/>
</shape>

background_login_div_bg.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#55FFFFFF" />

<!--
设置圆角
注意：	bottomRightRadius是左下角而不是右下角  bottomLeftRadius右下角
-->

<corners android:topLeftRadius="10dp" android:topRightRadius="10dp"
android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp"/>
</shape>

首先，看到<LinearLayout....>。线性布局。

在线性布局中，你所添加的Widget会一个挨一下放。这里就是一个Widget一行。

android:orientation="vertical" 。这个就是设置线性的方向吧。垂直线性。

android:background="@drawable/background_login" 整个界面的背景，这里采用一个xml内容设置背景

下面是一个<TextView> 其实很多都很简单的。width。height这些是宽高设置。wrap_content是适应内容大小。

而fill_parent是指填充满父布局。这里就是宽是占满整个LinearLayout

padding是内边距的意思。加个left就是左内边距了。这些应该知道了。

margin是外边距的意思。而textColor是指字体颜色，这里用的是android本身定义好的。

textsize是文字大小。

android:ellipsize=”marquee”–以跑马灯的方式显示(动画横向移动)

android:focusable="true" 获取焦点

android:marqueeRepeatLimit="marquee_forever" 表示一直滚动

android:focusableInTouchMode="true" 可以通过touch获得焦点

android:scrollHorizontally="true"表示一个EditText满了后是自动横着移动不是默认的换行。

<RelativeLayout>是相关布局。在这个布局中，所有你所添加的Widget都要加上相对位置。不然就会重叠在一块了。

例如密码，密码是放在账号下面吧。所以在密码的TableRow.中会有一行android:layout_below="@id/account"

而这里的account是在添加账号TableRow的时候添加的id。这是安卓中为了找到对象的方便而提供的。

这里说到的TableRow是一种表格。横向表格。一行里你可以放几个Widget，它会自动帮你对齐，即使在RelativeLayout中，

也不需要加相对位置。

<TextView>是显示文本的Widget。而<EditText>是输入文本的框。

android:hint=""这个是用在，当你没在EditText中输入内容时，默认显示的文字。而当你输入内容后就会消失。

android:password="true"会把你输入的内容当成密码，显示圆点

android:signleLine，当你输入的内容超过框之后，不会换行，而是向左移动。

<ImageView>是插入图片的Widget。