编写首页布局

图片描述

# 领券联盟-编写首页布局

前面我们实现了tab的切换,我们学习了其他的tab实现方式,比如说,radioButton,对吧,也有我们使用第三方的开源框架。

详情,同学们可以去看这篇文章啦

领券联盟-使用RadioGroup+RadioButton实现导航栏 (opens new window)

# 页面结构

接下来我们去编写一下首页的布局

首页呢,我们分成上下结构

顶部是搜索栏

然后是指示器,也就是Indicator,或者说是tab,标签对吧。

然后就是下面部分的内容,那里可以算成一个坑。后面进行填充。

所以,大概的结果如图

图片描述

# 代码布局

按前面的一个分析,我们大概可以先把布局写成这样子

<?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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="@color/colorPrimaryDark"
        android:gravity="center_vertical">

        <TextView
            android:id="@+id/logo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:text="SOB"
            android:textColor="@color/white"
            android:textSize="20sp" />

        <ImageView
            android:id="@+id/scan_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_marginRight="10dp"
            android:src="@mipmap/scan_white" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_toLeftOf="@id/scan_icon"
            android:layout_toRightOf="@id/logo"
            android:background="@drawable/shape_edit_box_bg"
            android:focusable="false"
            android:hint="@string/text_search_tips"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:textSize="14sp" />

    </RelativeLayout>

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/home_indicator"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        app:tabBackground="@color/colorPrimary"
        app:tabIndicatorColor="@color/colorTabSelected"
        app:tabMode="scrollable"
        app:tabRippleColor="@color/colorTabNormal"
        app:tabSelectedTextColor="@color/colorTabSelected"
        app:tabTextColor="@color/colorTabNormal" />


    <androidx.viewpager.widget.ViewPager
        android:id="@+id/home_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:overScrollMode="never" />

</LinearLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

搜索部分

图片描述

 <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="@color/colorPrimaryDark"
        android:gravity="center_vertical">

        <TextView
            android:id="@+id/logo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:text="SOB"
            android:textColor="@color/white"
            android:textSize="20sp" />

        <ImageView
            android:id="@+id/scan_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_marginRight="10dp"
            android:src="@mipmap/scan_white" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_toLeftOf="@id/scan_icon"
            android:layout_toRightOf="@id/logo"
            android:background="@drawable/shape_edit_box_bg"
            android:focusable="false"
            android:hint="@string/text_search_tips"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:textSize="14sp" />

    </RelativeLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

下面则是tab以及一个ViewPager,数据没有回来,所以没有显示内容。

其实还有多种状态呢,比如说loading呀,error,empty这些状态。

我们后面再去处理。

上次更新: 2021/09/22, 18:06:43