Android中的界面布局之帧布局，相对布局

一、相关知识
1、Android盒模型（与css,html相同）
Android中的界面布局之帧布局，相对布局_第1张图片

2、Android坐标系
Android中的界面布局之帧布局，相对布局_第2张图片

二、Framelayout
帧布局顾名思义，为一层一层的显示，相互覆盖。如下图
Android中的界面布局之帧布局，相对布局_第3张图片

界面代码

<FrameLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context=".FrameLayoutActivity">    <View        android:layout_width="match_parent"        android:background="@color/colorAccent"        android:layout_height="match_parent">View>    <View        android:layout_width="100dp"        android:background="@color/colorPrimary"        android:layout_height="100dp">View>FrameLayout>

3、RelativeLayout

Android中的界面布局之帧布局，相对布局_第4张图片

界面代码

"http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.netease.study.ui.layout.RelativeLayout1Activity">    "@+id/head"        android:layout_width="wrap_content"        android:layout_centerInParent="true"        android:src="@drawable/head"        android:layout_height="wrap_content"/>    "wrap_content"        android:text="@string/name"        android:layout_above="@id/head"        android:layout_alignLeft="@id/head"        android:layout_height="wrap_content"/>    "wrap_content"        android:text="@string/name"        android:layout_below="@id/head"        android:layout_alignLeft="@id/head"        android:layout_height="wrap_content"/>    "wrap_content"        android:text="@string/name"        android:layout_toRightOf="@id/head"        android:layout_alignTop="@id/head"        android:layout_height="wrap_content"/></RelativeLayout>

朋友圈类似的界面
Android中的界面布局之帧布局，相对布局_第5张图片

界面代码

"http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.netease.study.ui.layout.RelativeLayout2Activity">    "@+id/head"        android:layout_width="wrap_content"        android:src="@drawable/head1"        android:layout_height="wrap_content"/>    "@+id/name"        android:layout_toRightOf="@id/head"        android:layout_width="wrap_content"        android:text="@string/name"        android:gravity="center"        android:textSize="16sp"        android:textColor="@color/black"        android:layout_marginLeft="10dp"        android:layout_alignTop="@id/head"        android:layout_alignBottom="@id/head"        android:layout_height="wrap_content"/>    "@+id/desc"        android:layout_below="@id/name"        android:layout_alignLeft="@id/name"        android:layout_width="wrap_content"        android:text="@string/desc"        android:layout_height="wrap_content"/>    "10dp"        android:id="@+id/toupie"        android:layout_width="wrap_content"        android:src="@drawable/toupie"        android:scaleType="center"        android:layout_alignLeft="@id/desc"        android:layout_below="@id/desc"        android:layout_height="wrap_content"/>    "10dp"        android:layout_below="@id/toupie"        android:layout_alignLeft="@id/toupie"        android:layout_width="wrap_content"        android:text="20分钟"        android:layout_height="wrap_content"/>    "10dp"        android:id="@+id/comment"        android:layout_width="wrap_content"        android:layout_alignRight="@id/desc"        android:layout_below="@id/toupie"        android:src="@drawable/comment"        android:layout_height="wrap_content"/>    "@id/comment"        android:layout_alignTop="@id/comment"        android:layout_marginRight="10dp"        android:layout_width="wrap_content"        android:src="@drawable/love_icon"        android:layout_height="wrap_content"/></RelativeLayout>

更多相关文章

随机推荐