【AS基础篇二:线性布局和相对布局的使用】:设计一个简单的电影界面

利用LinearLayout和RelativeLayout设计一个简单的电影界面

首先需要注意的是:RelativeLayout几点布局需要注意的内容

1. 屏幕正中间 layout_centerInParent
2. 屏幕左上角 android:layout_alignLeft
3. 屏幕下方 android:layout_alignBottom
4. 屏幕右上角 android:layout_alignRight
5. 屏幕顶部 android:layout_alignTop
6. 屏幕水平居中 android:layout_centerHorizonal
7. 屏幕垂直居中 android:layout_centerVertial

这些都是可以进行重复的使用。


这个是配合id进行使用,一般需要定义父容器id,可以结合使用

然后就是接下来的设计开始:

【AS基础篇二:线性布局和相对布局的使用】:设计一个简单的电影界面_第1张图片
设计效果图:如上所示

实现代码:

"1.0" encoding="utf-8"?>
xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    android:background="#ff0000"
        android:orientation="horizontal"
        android:layout_weight="2"
        android:layout_width="match_parent"
        android:layout_height="0dp">
        android:background="@mipmap/fuchouzhelianmeng"
            android:orientation="vertical"
            android:layout_weight="2"
            android:layout_width="0dp"
            android:layout_height="match_parent">
            android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/imax"/>
            android:layout_width="match_parent"
                android:layout_height="36dp"
                android:background="#8492a6"
                android:text="复仇者联盟"
                android:textColor="#fff"
                android:textSize="16dp"
                android:layout_alignParentBottom="true"/>
        
        android:background="#ff5"
            android:orientation="vertical"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="match_parent">
            android:background="@mipmap/tianqizhizi"
                android:layout_height="0dp"
                android:layout_width="match_parent"
                android:layout_weight="1">
                android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@mipmap/third"/>
                android:layout_width="match_parent"
                    android:layout_height="24dp"
                    android:background="#8492a6"
                    android:text="天气之子"
                    android:textColor="#fff"
                    android:textSize="16dp"
                    android:layout_alignParentBottom="true"/>
            
            android:background="@mipmap/wusha"
                android:layout_height="0dp"
                android:layout_width="match_parent"
                android:layout_weight="1">
                android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@mipmap/four"/>
                android:layout_width="match_parent"
                    android:layout_height="24dp"
                    android:background="#8492a6"
                    android:text="误杀"
                    android:textColor="#fff"
                    android:textSize="16dp"
                    android:layout_alignParentBottom="true"/>
            
            android:background="@mipmap/dahuangfeng"
                android:layout_height="0dp"
                android:layout_width="match_parent"
                android:layout_weight="1">
                android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@mipmap/five"/>
                android:layout_width="match_parent"
                    android:layout_height="24dp"
                    android:background="#8492a6"
                    android:text="大黄蜂"
                    android:textColor="#fff"
                    android:textSize="16dp"
                    android:layout_alignParentBottom="true"/>
            
        
    
    android:background="#8492a6"
        android:orientation="horizontal"
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="0dp">
        android:background="@mipmap/nidemingzi"
            android:layout_height="match_parent"
            android:layout_width="0dp"
            android:layout_weight="1">
            android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/imax"/>
            android:layout_width="match_parent"
                android:layout_height="24dp"
                android:background="#8492a6"
                android:text="你的名字"
                android:textColor="#fff"
                android:textSize="16dp"
                android:layout_alignParentBottom="true"/>
        
        android:background="@mipmap/bianxingjinggang"
            android:layout_height="match_parent"
            android:layout_width="0dp"
            android:layout_weight="1">
            android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/five"/>
            android:layout_width="match_parent"
                android:layout_height="24dp"
                android:background="#8492a6"
                android:text="变形金刚"
                android:textColor="#fff"
                android:textSize="16dp"
                android:layout_alignParentBottom="true"/>
        
        android:background="@mipmap/yangyezhiting"
            android:layout_height="match_parent"
            android:layout_width="0dp"
            android:layout_weight="1">
            android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/four"/>
            android:layout_width="match_parent"
                android:layout_height="24dp"
                android:background="#8492a6"
                android:text="言叶之庭"
                android:textColor="#fff"
                android:textSize="16dp"
                android:layout_alignParentBottom="true"/>
        
    

通过以上的线性布局和相对布局的结合使用就可以实现出这种效果**,值得注意的是,线性布局一般是用来大范围的内容规划布局,而相对布局是进行小范围内的内容划分,**也就是块划分使用的是LinearLayout而内容编辑使用的是RelativeLayout进行。

相对布局可以用来调节里面的适配内容,进行定位等操作,这是线性布局所不能做的,RelativeLayout使用权重weight必须在LinearLayout下面,并且其已经设置方向。利用权重可以更好的划分出块的大小。

2020-03-14 记

你可能感兴趣的:(AS)