Android之实例界面设计

匿名 (未验证) 提交于 2019-12-03 00:03:02

最近很久没冒泡了。刚学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" 。这个就是设置线性的方向吧。垂直线性。

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

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

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


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。


转载于:https://my.oschina.net/u/860952/blog/549197

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!