PHPer学android之页面布局
2017-07-13 15:50
387 查看
1. 这次主要讲的是登录页面,首先,我们新建一个基本的Activity后在工程目录下的res/layout文件夹下可以看到activity_login.xml文件,其内容如下
2.这里面有一行是include指令,content_login在相同目录下可以看到content_login.xml文件,这里就是我们的主战场了,在这里面页面内容编辑,LinearLayout布局方式,就是要么横向,要么纵向展示在布局内部的所有控件。在超出屏幕的部分将会消失,LinearLayout的宽度取决于最宽的控件,LinearLayout的高度取决于最高的控件,看下其中一个LinearLayout
这里需要注意的几个地方android:background="@null" 将输入框的边框去掉 还可以看到无论是TextView还是EditText 都有一句android:layout_gravity="center_vertical" ,指的是 TextView或者EditText位置在LinearLayout中是垂直居中还有密码输入布局文件
6. 整体content_login.xml文件如下
<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout 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:fitsSystemWindows="true" tools:context="com.example.john.android_map.LoginActivity"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/AppTheme.AppBarOverlay"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay" /> </android.support.design.widget.AppBarLayout> <include layout="@layout/content_login" /> </android.support.design.widget.CoordinatorLayout>
2.这里面有一行是include指令,content_login在相同目录下可以看到content_login.xml文件,这里就是我们的主战场了,在这里面页面内容编辑,LinearLayout布局方式,就是要么横向,要么纵向展示在布局内部的所有控件。在超出屏幕的部分将会消失,LinearLayout的宽度取决于最宽的控件,LinearLayout的高度取决于最高的控件,看下其中一个LinearLayout
<LinearLayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="60dp" android:background="@color/colorLogin" android:id="@+id/layout_uid" android:layout_alignParentTop="true" android:layout_alignParentStart="true" android:layout_marginTop="143dp"> <TextView android:text="手机号" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:id="@+id/tips_zhanghao" android:layout_weight="1" /> <EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:inputType="phone" android:layout_gravity="center_vertical" android:background="@null" android:ems="10" android:id="@+id/edit_uid" android:layout_weight="1" /> </LinearLayout>
这里需要注意的几个地方android:background="@null" 将输入框的边框去掉 还可以看到无论是TextView还是EditText 都有一句android:layout_gravity="center_vertical" ,指的是 TextView或者EditText位置在LinearLayout中是垂直居中还有密码输入布局文件
<LinearLayout android:orientation="horizontal" android:layout_width="match_parent" android:background="@color/colorLogin" android:layout_height="60dp" android:id="@+id/layout_pwd" android:layout_marginTop="19dp" android:layout_below="@+id/layout_uid" android:layout_alignParentStart="true"> <TextView android:text="密 码" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:id="@+id/tips_pwd" android:layout_weight="1" /> <EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:inputType="textPassword" android:layout_gravity="center_vertical" android:background="@null" android:ems="10" android:id="@+id/edit_pass" android:layout_weight="1" /> </LinearLayout>4. 和之前不同的有两点 android:layout_below="@+id/layout_uid" 整个密码输入布局是在上面的用户输入LinearLayout布局的下方如果需要在上方android:layout_above="@+id/layout_uid"就行需要在密码布局输入下面的按钮是登录按钮
<Button android:layout_width="wrap_content" style="@style/Base.Widget.AppCompat.Button.Borderless.Colored" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:background="@color/colorLogin" android:layout_marginTop="25dp" android:text="登录" android:id="@+id/btn_login" android:layout_below="@+id/layout_pwd" android:layout_centerHorizontal="true" />5. 看下这里也有一个android:layout_below="@+id/layout_uid"
6. 整体content_login.xml文件如下
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="@+id/content_login"
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"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="com.example.john.android_map.LoginActivity"
tools:showIn="@layout/activity_login">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="@color/colorLogin"
android:id="@+id/layout_uid"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:layout_marginTop="143dp">
<TextView
android:text="手机号"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:id="@+id/tips_zhanghao"
android:layout_weight="1"
/>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="phone"
android:layout_gravity="center_vertical"
android:background="@null"
android:ems="10"
android:id="@+id/edit_uid"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout android:orientation="horizontal" android:layout_width="match_parent" android:background="@color/colorLogin" android:layout_height="60dp" android:id="@+id/layout_pwd" android:layout_marginTop="19dp" android:layout_below="@+id/layout_uid" android:layout_alignParentStart="true"> <TextView android:text="密 码" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:id="@+id/tips_pwd" android:layout_weight="1" /> <EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:inputType="textPassword" android:layout_gravity="center_vertical" android:background="@null" android:ems="10" android:id="@+id/edit_pass" android:layout_weight="1" /> </LinearLayout>
<Button
android:layout_width="wrap_content"
style="@style/Base.Widget.AppCompat.Button.Borderless.Colored"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:background="@color/colorLogin"
android:layout_marginTop="25dp"
android:text="登录"
android:id="@+id/btn_login"
android:layout_below="@+id/layout_pwd"
android:layout_centerHorizontal="true" />
</RelativeLayout>
相关文章推荐
- android布局页面中引入另一个布局页面
- Android修改Gallery页面布局
- SlidingMenu和ActionBarSherlock结合做出出色的App布局,Facebook 和 Path 2.0 滑动式菜单都可以实现(android页面布局效果)
- Android修改Gallery页面布局
- 【Android基础】页面布局
- 传智播客-Android(2)-页面布局和控制器Activity
- Android基于基于布局嵌套的页面导航实现
- android页面布局时定义控件ID时@id/XX和@+id/xx 有什么区别
- 页面的五种布局以及嵌套『Android系列八』
- Android的页面布局(框架结构)
- Android之页面5大布局
- android UI设计,android ui开发,android 页面设计,android页面布局
- 多种方式实现Android页面布局的切换
- android 页面布局
- Android程序开发基础之——页面布局
- Android修改Gallery页面布局
- android View页面布局总结 最全总结。
- Android中采用html页面布局以及调用JavaScript
- Android 使用HTML布局页面
- SlidingMenu和ActionBarSherlock结合做出出色的App布局,Facebook 和 Path 2.0 滑动式菜单都可以实现(android页面布局效果)