第二篇Android零基础自学笔记——线性布局(LinearLayout)

Android的前生今世,感兴趣的小伙伴点击百度一下吧
百度回来的各位,接下来我们进入项目实战学习
首先我们就先从看得到的入手,探究UI开发吧——实战两个常用基本布局
           1. 线性布局(LinearLayout)——本篇讲解
           2. 相对布局(RelativeLayout)——下篇
简单说说线性布局的特点:
           1.线性布局是将放入其中的组件按照垂直或水平方向来布局
           2.控制放入其中的组件横向排列或纵向排列
           3.在线性布局中,每一行(针对垂直排列)或每一列(针对水平排列)中只能放一个组件
           4.Android的线性布局不会换行,当组件一个挨着一个排列到窗体的边缘后,剩下的组件将不会被显示出来


使用线性布局(LinearLayout)来仿一个微信我的界面吧


——界面布局解析图及效果图——



相信这个界面还原度可以高达99.999999999999999%

贴上界面的完整代码

仅用一种布局完成,导致代码比较复杂,请结合上面的界面解析图看哦


<?xml version="1.0" encoding="utf-8"?>
<!--最外层的线性布局水平-->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#F1EEEE"
>
    <!--装载相机按钮的线性布局-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#fff"
        android:orientation="vertical"
        >
        <!--相机按钮-->
        <ImageView
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:src="@drawable/photo"
            android:layout_gravity="right"
            android:layout_marginTop="12dp"
            android:layout_marginRight="12dp"
            />
    </LinearLayout>
<!--个人信息栏线性布局水平-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:orientation="horizontal"
        android:gravity="center_vertical"
        android:background="#fff"
        >
        <!--头像-->
        <ImageView
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:src="@drawable/abc"
            android:layout_marginLeft="15dp"
            />
        <!--线性布局垂直-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_marginLeft="10dp"
            >
            <!--网名-->
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Lionel Wang"
                android:textColor="#000"
                android:textSize="24sp"
                />
            <!--线性布局水平-->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:gravity="center_vertical"
                >
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="微信号:"
                    android:textSize="18sp"
                    />
                <!--微信号id-->
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="MESSI1240xxxxx50"
                    android:layout_weight="1"
                    android:textSize="18sp"
                    />
                <!--二维码-->
                <ImageView
                    android:layout_width="24dp"
                    android:layout_height="24dp"
                    android:src="@drawable/ma"
                    />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text=">"
                    android:textSize="24sp"
                    android:padding="12dp"
                    />
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>
<!--支付功能的线性布局水平-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:orientation="horizontal"
        android:gravity="center_vertical"
        android:background="#fff"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        >
        <!--功能图标-->
        <ImageView
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:src="@drawable/pay"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            />
        <!--功能名-->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="支付"
            android:textColor="#000"
            android:textSize="20sp"
            android:layout_weight="1"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=">"
            android:padding="12dp"
            android:textSize="22sp"
            />
    </LinearLayout>
<!--收藏功能的线性布局水平-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:orientation="horizontal"
        android:gravity="center_vertical"
        android:background="#fff"
        android:layout_marginBottom="1dp"
        >
        <ImageView
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:src="@drawable/collect"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="收藏"
            android:textColor="#000"
            android:textSize="20sp"
            android:layout_weight="1"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=">"
            android:padding="12dp"
            android:textSize="22sp"
            />
    </LinearLayout>
<!--相册功能的线性布局水平-->    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:orientation="horizontal"
        android:gravity="center_vertical"
        android:background="#fff"
        android:layout_marginBottom="1dp"
        >
        <ImageView
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:src="@drawable/xc"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="相册"
            android:textColor="#000"
            android:textSize="20sp"
            android:layout_weight="1"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=">"
            android:padding="12dp"
            android:textSize="22sp"
            />
    </LinearLayout>
<!--卡包功能的线性布局水平-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:orientation="horizontal"
        android:gravity="center_vertical"
        android:background="#fff"
        android:layout_marginBottom="1dp"
        >
        <ImageView
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:src="@drawable/card"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="卡包"
            android:textColor="#000"
            android:textSize="20sp"
            android:layout_weight="1"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=">"
            android:padding="12dp"
            android:textSize="22sp"
            />
    </LinearLayout>
<!--表情功能的线性布局水平-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:orientation="horizontal"
        android:gravity="center_vertical"
        android:background="#fff"
        >
        <ImageView
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:src="@drawable/face"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="表情"
            android:textColor="#000"
            android:textSize="20sp"
            android:layout_weight="1"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=">"
            android:padding="12dp"
            android:textSize="22sp"
            />
    </LinearLayout>
<!--设置功能的线性布局水平-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:orientation="horizontal"
        android:gravity="center_vertical"
        android:background="#fff"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        >
        <ImageView
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:src="@drawable/set"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="设置"
            android:textColor="#000"
            android:textSize="20sp"
            android:layout_weight="1"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=">"
            android:textSize="22sp"
            android:padding="12dp"
            />
    </LinearLayout>
</LinearLayout>

复杂吧hahahahhah...(故意为之(^V^))
下一篇将结合相对布局(RelativeLayout)共同完成这个界面,到时再来看看复杂度吧,一定就简洁很多了。


猜你喜欢

转载自blog.csdn.net/weixin_45879630/article/details/108801302
今日推荐