04 Anykey右分页布局TableLayout

移动开发 waitig 701℃ 百度已收录 0评论

1. 先看最终效果图

右分页布局中的控件比较多,难度也比之前的三章难很多。
这里主要分成三大块来考虑:常规填表界面、扩展信息界面(图中的“创建日期……”所在的面板)以及所有功能按钮(本章只是做出个外形,数据绑定逻辑会在下章再讲)。

所以今天我们的重点仅放在制作界面布局上,只要让布局和效果图一样,我们的目标就算完成了。

在正式开始之前,我想说一下自己设计的初衷。在开始这个项目之前我在安卓手机上使用过一些密码管理软件,但多多少少在功能上没有达到预期:

软件缺点(2017年11月26日)
xykey 最新版的备注栏不支持换行;
2. “密码2”有些多余,对我来说不常用;
3. 自定义选项不能设为默认出现;
4. 自定义选项不支持换行;
5. 自定义选项中的文字不能被搜索到;
6. 分类数量有限制(最多只有10个);
7. 分类顺序不好修改;
8. 分类不能改自定义颜色;
9. 主页面切换分类时的表盘太小
记住密码 不支持全文搜索;
2. 不能搜索中文;
3. 自定义选项不能全局设置;
4. 分组不支持排序;
5. 列表排序混乱;
6. 图标的颜色是随机生成的,个人想要一种能根据分组、标签或者重要性来匹配颜色及颜色透明度的效果
账号本子 功能过于简洁,很多基本功能没有
LastPass 个人原因没有继续使用(遇到了几次输入主密码无法正常登录的问题)

当然还有很多软件没有试过,比如KeePass、1Password等。我希望能有一款自用省心的软件,所以开始入坑,也希望大家看这个项目的开发过程能有所收获。

2. 制作右分页上半部分的布局TableLayout

page_item_new.xml文件中输入以下代码:
(注:所有颜色均放在res/values/colors.xml文件中,后面提到了再写上)

<TableLayout 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/tableLayout1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="20dp"
    android:shrinkColumns="1,2,3,4,5,6,7"
    android:stretchColumns="1,2,3,4,5,6">
    <!--TableLayout是一个难点。我们假设屏幕宽度被八等分
    其中第0列(注意是从零开始数的)是普通宽度
    第1-6列合并单元格(利用android:layout_span="6"可以实现“合并横向的6个单元格”的功能),用于显示编辑框
    最后一列第7列是功能按钮
    也就是说每一行的控件宽度占比为“标题文字:编辑框:右侧按钮”=1:6:1

    shrinkColumns表示收缩列宽,stretchColumns表示扩展填充列宽。如果两个属性都设置,就表示该单元格在字数不多的时候扩展填充,字数单行容不下的时候会收缩到另起一行显示
    我们设定1-7列是shrinkColumns属性,1-6列是stretchColumns属性,这样就能满足下面的控件需求了-->

</TableLayout>

PS:所有颜色均放在res/values/colors.xml文件中,这里把本章中所有用到的颜色都写上了:

<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>

    <!--自制色卡-->
    <color name="mycolorLineShadow">#868686</color>
    <color name="mycolorText1">#000000</color>
    <color name="mycolorText2">#8e8e8e</color>
    <color name="mycolorPurple">#6000c0</color>
    <color name="mycolorPurpleInactive">#8668a5</color>
    <color name="mycolorBackground">#dedede</color>

    <!--selector点击变色-->
    <color name="selectorColor">#9848eafc</color>
    <color name="selectorColorPressed">#98297179</color>
</resources>

TableLayout设置好了以后,我们要在里面添加6行栏目。下面依次说明:

2.1. 第一行:标题

<TableLayout
    ...
    android:id="@+id/tableLayout1">

    <TableRow
        android:id="@+id/tableRow1">

        <!--设置第一行的三个控件,第一行是特例,因为它的右侧的按钮比较长,所以占比为1:5:2-->

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="标题 "
            android:textColor="@color/mycolorText1"
            android:textSize="22sp" />

        <!--标题编辑框userTitle。单行显示-->
        <EditText
            android:id="@+id/userTitle"
            android:layout_height="40dp"
            android:layout_marginLeft="10dp"
            android:layout_span="5"
            android:background="@drawable/shape_rectangular2"
            android:paddingLeft="5dp"
            android:paddingRight="5dp"
            android:singleLine="true"
            android:textSize="20sp" />
        <!--这里用到了shape背景,下面会给出说明-->

        <!--“分组”按钮,点击进入分组列表-->
        <TextView
            android:layout_width="60dp"
            android:layout_height="40dp"
            android:layout_marginLeft="10dp"
            android:layout_span="2"
            android:background="@drawable/shape_rectangular1"
            android:clickable="true"
            android:gravity="center"
            android:text="分组"
            android:textColor="@color/mycolorText1"
            android:textSize="20sp" />
            <!--这里用到了另一个shape背景,下面会给出说明
            注意一定要设置为clickable,只有设置为clickable,该控件在受到点击时的变色代码才能生效(变色代码是在shape背景的selector中写的)
            PS:后面所有的右侧按钮的代码都会设置为clickable-->

    </TableRow>

</TableLayout>

代码中的编辑框和按钮的背景用到了shape,这里简要讲解一下:

Android shape可以很方便地绘制矩形和椭圆(以及圆形),可以用作TextView、ImageView、Button等的背景。配合selector则可以做到点击时变色的功能。

这里用到了两个矩形的shape,一个是用于编辑框的背景——在res/drawable/中新建shape_rectangular2.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!--制作编辑框的矩形背景,点击时填充颜色会变浅,默认状态时颜色稍微深一些-->

    <!--建议先做点击时的,再做默认时的,否则可能会不起作用
    参考:设置的selector不起作用的原因:http://blog.csdn.net/lyankj/article/details/62871799-->

    <!--按压时的背景图片-->
    <item android:state_pressed="true">
        <shape>
            <!--圆角矩形的四个角的弧度-->
            <corners android:radius="4dp" />

            <!--填充色,几乎纯白-->
            <solid android:color="#fdfdfd"></solid>

            <!--矩形的描边色,深蓝色,接近黑色-->
            <stroke
                android:width="1dp"
                android:color="#1e005b" />
        </shape>
    </item>

    <!--默认状态的背景图片-->
    <item android:state_window_focused="false">
        <shape>
            <corners android:radius="4dp" />

            <!--填充色,稍微灰一点-->
            <solid android:color="#f9f9f9"></solid>

            <!--矩形的描边色,没变-->
            <stroke
                android:width="1dp"
                android:color="#1e005b" />
        </shape>
    </item>

</selector>

另一个则是用于按钮1的背景——shape_rectangular1.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!--制作“分组”按钮的矩形背景,点击时颜色会变深,松开颜色复原-->

    <!--按压时的背景图片-->
    <item android:state_pressed="true">
        <shape>
            <!--填充色为暗天蓝色-->
            <solid android:color="@color/selectorColorPressed" />

            <!--圆角矩形弧度值-->
            <corners android:radius="8dp" />
        </shape>
    </item>

    <!--默认状态的背景图片-->
    <item android:state_window_focused="false">
        <shape>
            <!--填充色为天蓝色-->
            <solid android:color="@color/selectorColor" />
            <corners android:radius="8dp" />
        </shape>
    </item>

</selector>

PS:按shift+f6可对res/drawable/中的文件改名,改名后所有应用该样式的代码也会自动变名的,所以不用担心。
由于我是先做的按钮背景,最后才去做编辑框背景,所以起名的顺序是这样的。

更多了解可参考:
1. Android必知必会–使用shape制作drawable素材 – 他叫自己Mr.张 – CSDN博客 http://blog.csdn.net/ys743276112/article/details/46227945#
2. android shape的使用 – 炽飞 – 博客园 https://www.cnblogs.com/cyanfei/archive/2012/07/27/2612023.html

2.2. 第二行:帐号

<TableLayout
    ...
    android:id="@+id/tableLayout1">

    <TableRow android:id="@+id/tableRow1">...</TableRow>

    <TableRow
        android:id="@+id/tableRow2">

        <!--设置第二行的三个控件,占比为1:6:1-->

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:text="帐号"
            android:textColor="@color/mycolorText1"
            android:textSize="22sp" />

        <!--帐号(用户名)编辑框userName。单行显示-->
        <EditText
            android:id="@+id/userName"
            android:layout_height="40dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="5dp"
            android:layout_span="6"
            android:background="@drawable/shape_rectangular2"
            android:paddingLeft="5dp"
            android:paddingRight="5dp"
            android:singleLine="true"
            android:textSize="20sp" />

        <!--动态生成头像按钮。这里用了一个开源插件AvatarImageView,用来根据标题的首字来动态地生成类似于通讯录中的圆形文字头像
        作者的博客为:http://blog.csdn.net/yeah0126/article/details/51543830-->
        <cn.carbs.android.avatarimageview.library.AvatarImageView
            android:id="@+id/generateUserHead"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:background="@drawable/shape_oval1"
            android:clickable="true" />
        <!--这里先用一个背景shape来填充上去。以后我们会在代码中完成与之相关的复杂功能(放在下章中讲)-->

    </TableRow>

</TableLayout>
  1. AvatarImageView控件的使用:首先在app:gradle/build中添加:
dependencies {
    ...
    compile 'cn.carbs.android:AvatarImageView:1.0.1'
}

然后点击该页面右上角的Sync Now,才能正常使用。

  1. 另外,代码中用到了一个新的shape,是圆形的shape_oval1.xml,同样在res/drawable/中新建此文件,代码如下:
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!--制作圆形背景,点击时颜色会变深,松开颜色复原
    参考1:http://blog.csdn.net/ys743276112/article/details/46227945#
    参考2:http://blog.csdn.net/qq_20785431/article/details/50198315-->

    <!--按压时的背景图片-->
    <item android:state_pressed="true">
        <shape android:shape="oval">
            <!--填充色为暗天蓝色-->
            <solid android:color="@color/selectorColorPressed" />
        </shape>
    </item>

    <!--默认状态的背景图片-->
    <item android:state_window_focused="false">
        <shape android:shape="oval">
            <!--填充色为天蓝色-->
            <solid android:color="@color/selectorColor" />
        </shape>
    </item>

    <!--PS:除了第一个“分组”按钮是矩形以外,后面的其他按钮都是用这个圆形作为背景的-->

</selector>

2.3. 第三行:密码

<TableLayout
    ...
    android:id="@+id/tableLayout1">

    <TableRow android:id="@+id/tableRow1">...</TableRow>

    <TableRow android:id="@+id/tableRow2">...</TableRow>

    <TableRow
        android:id="@+id/tableRow3"
        android:layout_height="80dp">
        <!--这里设置其高度为80dp,因为不知道为什么右侧的按钮总是显示不完整,所以高度设置足够高后解决了-->

        <!--设置第三行的三个控件,占比为1:6:1-->

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:text="密码"
            android:textColor="@color/mycolorText1"
            android:textSize="22sp" />

        <!--用户密码编辑框userPassword。单行显示-->
        <EditText
            android:id="@+id/userPassword"
            android:layout_height="40dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="5dp"
            android:layout_span="6"
            android:background="@drawable/shape_rectangular2"
            android:paddingLeft="5dp"
            android:paddingRight="5dp"
            android:singleLine="true"
            android:textSize="20sp" />

        <!--这里第一次用到了ImageView(前面两行的按钮一个用的是TextView,另一个用的是AvatarImageView)
        该按钮是用来随机生成密码,点击将跳转到随机规则页(下章会写相关代码)-->
        <ImageView
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:background="@drawable/shape_oval1"
            android:clickable="true"
            android:padding="5dp"
            android:src="@drawable/icon_random" />
        <!--图标是由src来加载的,本章中用到的图标的来源网站下面会贴出来
        由于放进去的图片超出了背景,所以用了padding属性让它往里缩了一点-->

    </TableRow>

</TableLayout>

* 图标素材来源网站:EasyIcon https://www.easyicon.net/ *
本章中用到的图标已打包为压缩包放在了我的百度网盘:链接: https://pan.baidu.com/s/1jIKOV0U 密码: ydke
使用时解压然后全部复制,再在res/drawable目录按Ctrl+V即可粘贴(注意可能需要自己改名字)。

2.4. 第四行:绑定

该行比较特殊,也是本次学习的一个难点。
首先要解决布局问题,我们要让中间的5个按钮平均分布,但利用weight会导致宽度不可调,会发现shape被拉伸成扁扁的椭圆。所以我们要换种思路:在控件之间垫上透明的小方块来分割图形,虽然小方块的宽度是人工制作的,但只要看不出来问题其实不大(以后会想办法再优化)。(点此返回
然后是加入图标。刚才我打包好的文件中已经包含了本次需要用到的所以图标。你也可以在EasyIcon网站自寻下载。

代码如下:

<TableLayout
    ...
    android:id="@+id/tableLayout1">

    <TableRow android:id="@+id/tableRow1">...</TableRow>

    <TableRow android:id="@+id/tableRow2">...</TableRow>

    <TableRow android:id="@+id/tableRow3">...</TableRow>

    <TableRow
        android:id="@+id/tableRow4"
        android:layout_marginBottom="5dp"
        android:layout_marginTop="5dp">

        <!--设置第四行的控件,这里比较特殊,占比为1:(1:0.25:1:0.25:1:0.25:1:0.25:1:0.25):1-->

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingTop="5dp"
            android:text="绑定"
            android:textColor="@color/mycolorText1"
            android:textSize="22sp" />

        <!--这里用来快捷地设置第三方绑定,一共有QQ、微信、微博、手机、邮箱、五个ImageView,被统一包含在LinearLayout中。外加一个More按钮
        LinearLayout利用android:divider、android:showDividers这两个属性来制作并填入分隔用的“透明小方块”
        参考:http://blog.csdn.net/u011494050/article/details/41774263-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_span="6"
            android:divider="@drawable/spacer_medium"
            android:paddingLeft="18dp"
            android:paddingRight="5dp"
            android:showDividers="middle">
        <!--@drawable/spacer_medium代码下面会说-->

            <ImageView
                android:id="@+id/boundQq"
                android:layout_width="40dp"
                android:layout_height="match_parent"
                android:background="@drawable/shape_oval1"
                android:clickable="true"
                android:padding="5dp"
                android:src="@drawable/icon_bound_qq" />

            <ImageView
                android:id="@+id/boundWeixin"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:background="@drawable/shape_oval1"
                android:clickable="true"
                android:padding="5dp"
                android:src="@drawable/icon_bound_weixin" />

            <ImageView
                android:id="@+id/boundWeibo"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:background="@drawable/shape_oval1"
                android:clickable="true"
                android:padding="5dp"
                android:src="@drawable/icon_bound_weibo" />

            <ImageView
                android:id="@+id/boundPhone"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:background="@drawable/shape_oval1"
                android:clickable="true"
                android:padding="6dp"
                android:src="@drawable/icon_bound_phone" />

            <ImageView
                android:id="@+id/boundEmail"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:background="@drawable/shape_oval1"
                android:clickable="true"
                android:padding="4dp"
                android:src="@drawable/icon_bound_email" />

        </LinearLayout>

        <ImageView
            android:id="@+id/generateUserMore"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:background="@drawable/shape_oval1"
            android:clickable="true"
            android:src="@drawable/icon_more" />

    </TableRow>

</TableLayout>

其中LinearLayout用到的小方块的代码如下(在res/drawable中新建/spacer_medium.xml文件):

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <size
        android:width="9dp"
        android:height="40dp" />
    <!--具体宽度值是反复调节得到的-->

    <!--设置颜色为透明-->
    <solid android:color="@android:color/transparent" />

</shape>

2.5. 第五行:URL

URL编辑框默认是单行的,而右边的按钮可以切换其属性为多行。

<TableLayout
    ...
    android:id="@+id/tableLayout1">

    <TableRow android:id="@+id/tableRow1">...</TableRow>

    <TableRow android:id="@+id/tableRow2">...</TableRow>

    <TableRow android:id="@+id/tableRow3">...</TableRow>

    <TableRow android:id="@+id/tableRow4">...</TableRow>

    <TableRow
        android:id="@+id/tableRow5">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:text="URL"
            android:textColor="@color/mycolorText1"
            android:textSize="22sp" />


        <!--URL编辑框userUrl。默认是单行,点击右边的按钮,则可以切换为多行模式(相关代码在下章)-->
        <EditText
            android:id="@+id/userUrl"
            android:layout_height="40dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="5dp"
            android:layout_span="6"
            android:background="@drawable/shape_rectangular2"
            android:paddingLeft="5dp"
            android:paddingRight="5dp"
            android:singleLine="true"
            android:textSize="20sp" />

        <ImageView
            android:id="@+id/userUrlMultilines"
            android:layout_width="22dp"
            android:layout_height="40dp"
            android:layout_gravity="center_vertical"
            android:layout_marginTop="2dp"
            android:clickable="true"
            android:scaleType="centerInside"
            android:src="@drawable/icon_add2" />
        <!--这个按钮没去设置背景shape,因为图标素材很小,所以就让它居中显示了-->

    </TableRow>

</TableLayout>

2.6. 最后一行:第六行:备注栏

注意备注栏是多行显示的。

<TableLayout
    ...
    android:id="@+id/tableLayout1">

    <TableRow android:id="@+id/tableRow1">...</TableRow>

    <TableRow android:id="@+id/tableRow2">...</TableRow>

    <TableRow android:id="@+id/tableRow3">...</TableRow>

    <TableRow android:id="@+id/tableRow4">...</TableRow>

    <TableRow android:id="@+id/tableRow5">...</TableRow>

    <TableRow
        android:id="@+id/tableRow6"
        android:layout_marginTop="5dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="备注"
            android:textColor="@color/mycolorText1"
            android:textSize="22sp" />

        <!--备注栏编辑框userNote。多行显示,注意android:layout_height="wrap_content"-->
        <EditText
            android:id="@+id/userNote"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_span="6"
            android:background="@drawable/shape_rectangular2"
            android:paddingBottom="5dp"
            android:paddingLeft="5dp"
            android:paddingRight="5dp"
            android:paddingTop="10dp"
            android:textSize="20sp" />

        <!--该按钮用来快捷地添加一条分割线,个人在写作时比较常用-->
        <ImageView
            android:id="@+id/userNoteSlash"
            android:layout_width="18dp"
            android:layout_height="20dp"
            android:baselineAlignBottom="true"
            android:clickable="true"
            android:scaleType="centerInside"
            android:src="@drawable/icon_slash" />
        <!--同样,这个按钮没去设置背景shape,因为图标素材很小,所以就让它居中显示了-->

    </TableRow>

</TableLayout>

至此,布局部分基本完成。实际运行一下,会发现行与行之间过于紧凑,其实是十分影响美观的。
而且更致命的是该页面尚不能滑动,因此被键盘遮挡住的部分是露不出来的。

所以下面我们还要给这个TableLayout美化一下:

3. 给TableLayout包裹“外衣”

3.1. 3层“外衣”

这里为了美观,一共给TableLayout包了3层“外衣”:

1. ScrollView > 2. LinearLayout > 3. CardView > 4. TableLayout

依次解释一下其作用:

  1. ScrollView是为了保证该页面可上下滑动,这样就解决了软键盘的遮挡问题
  2. 由于ScrollView规定只能包含一个子控件,所以为了后期添加新控件不会出问题,我们紧跟着用一个LinearLayout贴到它的内层,这样以后想在滑动布局中加入新控件,只需在LinearLayout中添加即可
  3. CardView是为了给TableLayout做一个卡片外观,比较好看

那么这样一来page_item_new.xml的代码就变成了:

<ScrollView 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:background="#f9f9f9"

    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="5dp">
    <!--注意把原TableLayout中的命名空间(xmlns...)以及背景值全部移到最外层布局里-->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:elevation="4dp"
            app:cardCornerRadius="8dp">
        <!--CardView的弧度和高度建议和左分页的卡片风格一致-->

            <TableLayout
                android:id="@+id/tableLayout1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="20dp"
                android:shrinkColumns="1,2,3,4,5,6,7"
                android:stretchColumns="1,2,3,4,5,6">

                ...

            </TableLayout>

        </android.support.v7.widget.CardView>

    </LinearLayout>

</ScrollView>

PS:使用Ctrl+Alt+L可以自动调整代码排版。如果该快捷键不管用,注意查看是否被第三方软件的热键占用了。

虽然解决了布局不能滑动的问题。实际运行一下,会发现行与行之间过于紧凑的问题还没有解决。

3.2. 在TableLayout中加入divider属性

这里我们使用上面的2.4章节中的办法(点此跳转)——给行与行之间垫入透明的“小方块”,使它们之间的间距变大:

  1. page_item_new.xml代码:
<ScrollView ...>
    <LinearLayout ...>
        <android.support.v7.widget.CardView ...>
            <TableLayout
                android:id="@+id/tableLayout1"
                ...
                android:divider="@drawable/spacer_small"
                android:showDividers="middle">
                ...
            </TableLayout>
        </android.support.v7.widget.CardView>
    </LinearLayout>
</ScrollView>
  1. res/drawable/目录下新建’spacer_small.xml’:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <size
        android:width="10dp"
        android:height="10dp" />
        <!--主要是看高度值。可按自己需要修改-->

    <solid android:color="@android:color/transparent" />

</shape>

至此,核心内容已经基本完成了。下面是一些细枝末节的处理工作。

4. 扩展信息面板及保存按钮

4.1. 扩展信息

扩展信息具体要做什么还没有设计好,目前主要是自动显示“创建日期”(不过功能代码是在下章写)。

新建一个卡片布局,里面暂时只放一个TextView:

page_item_new.xml整体代码:

<ScrollView ...>

    <LinearLayout ...>

        <android.support.v7.widget.CardView ...>

            <TableLayout
            android:id="@+id/tableLayout1"
            ...>
            ...
        </TableLayout>

        </android.support.v7.widget.CardView>

        <!--扩展信息卡片-->
        <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="20dp"
                android:elevation="4dp"
                app:cardCornerRadius="8dp">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="15dp"
                    android:text="创建日期"
                    android:textSize="18sp" />

            </android.support.v7.widget.CardView>

    </LinearLayout>

</ScrollView>

4.2. 保存按钮

保存按钮要放在屏幕的底部,这点有一个注意的事情,就是ScrollView做不到这件事情。所以我们要在ScrollView外面再包裹一个RelativeLayout(里面的TableLayout变成4层嵌套了),然后新增一个Button:

page_item_new.xml整体代码:

<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:background="#f9f9f9"

    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!--注意把原ScrollView中的命名空间(xmlns...)以及背景值全部移到最外层布局里-->

    <ScrollView ... />

    <Button
        android:id="@+id/userSave"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_margin="5dp"
        android:background="@drawable/shape_rectangular2"
        android:text="保存"
        android:textSize="22sp" />

</RelativeLayout>

至此,本章的布局已经全部制作完成。
实际运行一下,效果图如下所示:

点击按钮会变色,松开颜色复原。按Enter键会自动跳转到下一行输入(这是系统自动判断的)。
不过仍然存在一些问题,比如说左右滑动布局键盘不会自动收起来、备注栏的EditText的底边会被遮挡住一部分等。我们会在后期更新中逐渐完善。

5. 其他说明

5.1. ImageView中设置的selector不起作用的解决方法

在文中的2.1章节中已经有过相关的说明,这里重新说明一次:

下面两个步骤缺一不可:

  1. ImageView设置为可点击的属性:android:clickable=”true”
  2. shape中的selector顺序为先写点击时的背景状态,再写默认的背景状态

参考:
1. 怎么设置selector:http://blog.csdn.net/qq_20785431/article/details/50198315
2. 设置的selector不起作用的原因:http://blog.csdn.net/lyankj/article/details/62871799

5.2. TableLayout中为什么使用ImageView而不使用ImageButton?

参考CSDN博主@猪头_ZT 的一段话:

ImageView会根据设置的具体宽高尺寸变化,但是ImageButton只会显示图片的原始像素大小。当然,给ImageButton设置scaletype属性是可以完成ImageView的效果,但是那样会使图片失真。

(原文地址:http://blog.csdn.net/qq_27376951/article/details/51810829 )

所以本文中使用的是ImageView,而没有用ImageButton。

5.3. 关于TableLayout

特别注意,TableLayout的列数是从零开始数的:第0列、第1列、第2列……

深入学习可参考:android:TableLayout表格布局详解 – CSDN博客 http://blog.csdn.net/justoneroad/article/details/6835915

5.4. Android Studio查找替换快捷键

由于在6行3列表格中经常要批量调整每一行的字体等参数的数值,所以大家可能非常需要用到Android Studio的查找替换快捷键:Ctrl+R


6. 更新修复

6.1. 【修改】主界面标题栏颜色改为纯白色

系统默认的颜色不是纯白色,而是比白色稍微灰一点的颜色;如果改为纯白色,二者的对比图如下:

(左边的标题栏是系统默认的白色,右边是android:background="#ffffff"的纯白色)

具体代码为:

activity_main.xml:

<RelativeLayout ...>

    <!--LinearLayout代替原标题栏的位置-->
    <LinearLayout
        ...
        android:background="#ffffff">

        ...

    </LinearLayout>

    ...

</RelativeLayout>

6.2. 【修改】登录界面软键盘回车键显示为“进入”

不同输入法的测试情况不同,搜狗、百度、系统输入法使用此方法均有效:

activity_login.xml:

<ScrollView ...>

    <LinearLayout ...>

        ...

        <!--编辑框,输入主密码-->
        <EditText
            ...
            android:imeOptions="actionGo" />

    </LinearLayout>

</ScrollView>

相关参考

  1. android:TableLayout表格布局详解 – CSDN博客 http://blog.csdn.net/justoneroad/article/details/6835915
  2. Android–EditText属性之ImeOption详解 – Geek Nero – CSDN博客 http://blog.csdn.net/geekzhe/article/details/47686591
  3. Android必知必会–使用shape制作drawable素材 – 他叫自己Mr.张 – CSDN博客 http://blog.csdn.net/ys743276112/article/details/46227945#
  4. android shape的使用 – 炽飞 – 博客园 https://www.cnblogs.com/cyanfei/archive/2012/07/27/2612023.html
  5. Android Studio 如何用自带图标库和开源图标库_百度经验 https://jingyan.baidu.com/article/6d704a133a1d5f28db51cacc.html
  6. 可动态显示圆形图像或圆形文字的AvatarImageView – Carbs的博客 – CSDN博客 http://blog.csdn.net/yeah0126/article/details/51543830
  7. Android中ImageView和ImageButton的比较详解 – CSDN博客 http://blog.csdn.net/qq_27376951/article/details/51810829
  8. 探索Android中selector和shape的结合使用 – CSDN博客 http://blog.csdn.net/qq_20785431/article/details/50198315
  9. ImageView设置selector不起作用原因 – CSDN博客 http://blog.csdn.net/lyankj/article/details/62871799
  10. 【android】巧用android:divider属性设置LinearLayout中元素之间的间隔 – CSDN博客 http://blog.csdn.net/u011494050/article/details/41774263
  11. 安卓学习笔记—解决在在Edittext输入的时候,输入框被软键盘遮挡部分内容的问题(一) – 紫色飞鱼儿的博客 – CSDN博客 http://blog.csdn.net/juhua2012/article/details/51983460
  12. Android EditText被软键盘遮盖处理 – soar. – 博客园 https://www.cnblogs.com/endure/p/5957836.html

日志

2017年11月25日

  1. 【新增】右分页制作填表界面
  2. 【修改】右分页使用TableLayout
  3. 【修改】登录界面软键盘回车键显示为“进入”
  4. 【修改】layout_main标题栏由系统默认颜色改为纯白色
  5. 【修改】将EditText样式变为矩形外框
  6. 【新增】给TableLayout裹上CardView“外衣”
  7. 【新增】扩展信息卡片布局

本文由【waitig】发表在等英博客
本文固定链接:04 Anykey右分页布局TableLayout
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)