完成上一个博客的界面设计
效果如下:
Main.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" android:background="#EEEEEE"> <!-- 导航栏开始 --> <RelativeLayout android:id="@+id/Relativelayout01" android:background="@drawable/repeat_bg" android:layout_width="fill_parent" android:layout_height="42px"> <!-- 返回按钮 与父控件左边缘对齐android:layout_toLeftOf=@id/Relativelayout01 --> <ImageButton android:id="@+id/a" android:layout_width="36px" android:layout_height="27px" android:layout_toLeftOf="@id/Relativelayout01" android:src="@drawable/back" android:layout_marginTop="10px" /> <!-- 中间的Logo,在父控件中居中 android:layout_centerInParent=true --> <ImageView android:id="@+id/b" android:layout_width="125px" android:layout_height="27px" android:layout_centerInParent="true" android:src="@drawable/logo" /> <!-- 登入按钮 在父控件中居右 android:layout_alignParentRight="true"--> <ImageButton android:id="@+id/c" android:layout_width="48px" android:layout_height="27px" android:layout_alignParentRight="true" android:src="@drawable/login" android:layout_marginTop="10px" /> </RelativeLayout> <!-- 导航栏结束 --> <!-- 立即登入的图片 --> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical"> <ImageView android:id="@+id/b" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:src="@drawable/logtext" android:layout_marginLeft="10px" android:layout_marginTop="8px" /> </LinearLayout> <!-- 登陆框主体开始 --> <RelativeLayout android:id="@+id/Relativelayout02" android:background="@drawable/login_bg" android:layout_width="304px" android:layout_height="90px" android:layout_marginTop="5px" android:layout_marginLeft="8px" > <!-- 登陆帐号的文本提示,设置的是对齐父控件的左边缘 ,android:layout_alignParentLeft="true"--> <TextView android:id="@+id/LoginIDx" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="10px" android:layout_marginTop="12px" android:layout_alignParentLeft="true" android:text="Email帐号" /> <!-- 登陆帐号的输入框,设置的位置是放在 登陆帐号的文本提示这个控件的右边,android:layout_toRightOf="@id/LoginIDx"--> <EditText android:id="@+id/LoginID" android:layout_width="240px" android:layout_height="40px" android:background="@null" android:layout_marginLeft="10px" android:textColor="#b9b9b9" android:textSize="14px" android:paddingTop="5px" android:layout_toRightOf="@id/LoginIDx" /> <!-- 登陆密码的文本提示,设置的是放在登陆帐号文本提示的下面, android:layout_below="@id/LoginIDx"--> <TextView android:id="@+id/PassWordx" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="10px" android:layout_alignParentLeft="true" android:text="密码" android:layout_marginTop="25px" android:layout_below="@id/LoginIDx" /> <!-- 登陆密码的输入框,设置的位置是放在 登陆密码的文本提示这个控件的右边,android:layout_toRightOf="@id/PassWordx"--> <EditText android:id="@+id/PassWord" android:layout_width="240px" android:layout_height="40px" android:layout_below="@id/LoginID" android:background="@null" android:layout_marginLeft="10px" android:textColor="#b9b9b9" android:textSize="14px" android:paddingTop="5px" android:layout_toRightOf="@id/PassWordx" /> </RelativeLayout> <!-- 登陆框主体结果 --> <!-- 登陆框下面的贴心小提醒区域开始 --> <RelativeLayout android:id="@+id/LinearLayout02" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="5px" android:layout_marginLeft="8px" > <!-- 贴心小提醒旁边的感叹号图片,设置的是对齐父控件的左边缘,android:layout_alignParentLeft="true"--> <ImageView android:id="@+id/tipsimg" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/tips" android:layout_alignParentLeft="true" /> <!--贴心小提醒的文字控件 ,设置的是放在感叹号图片的右边 ,android:layout_toRightOf="@id/tipsimg"--> <TextView android:id="@+id/Tips1" android:text="贴心小提醒" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#4f4f4f" android:textSize="15px" android:layout_marginLeft="5dp" android:layout_toRightOf="@id/tipsimg" /> <!-- 文本提示内容1,设置的是放在感叹号图片的下面,android:layout_below="@id/tipsimg" --> <TextView android:id="@+id/Tipstxt1" android:text="1.若未注册请与电脑版注册" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#4f4f4f" android:textSize="12px" android:layout_marginLeft="5dp" android:layout_below="@id/tipsimg" android:layout_marginTop="5px" /> <!-- 文本提示内容2, 设置的是放在文本提示内容1的下面,android:layout_below="@id/Tipstxt1"--> <TextView android:id="@+id/Tipstxt2" android:text="2.若你登入有问题请来电客户中心" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#4f4f4f" android:textSize="12px" android:layout_marginLeft="5dp" android:layout_below="@id/Tipstxt1" android:layout_marginTop="5px" /> </RelativeLayout> <!-- 登陆框下面的贴心小提醒区域结束 --> </LinearLayout>
总结:
开始搞Android第二天,勉强把我想要做的界面做出来了。
还有有Html+css的经验,所以一些layout的东西可以大致看得懂,在做规划的时候先想把Html+css是怎么处理,然后再去找对应的方式!
Android的代码分离做得真彻底,再之界面设计的ide功能太弱了,很多时候都是手写代码,还是怀念Vs的IDE啊。
++++
对于按钮的一些便捷控制可以再图片中直接添加xml文件如下
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/v5_0_1_guide_blue_default" android:state_focused="true" android:state_pressed="false"/>
<item android:drawable="@drawable/v5_0_1_guide_blue_press" android:state_pressed="true"/>
<item android:drawable="@drawable/v5_0_1_guide_blue_default"/>
</selector>