04 Anykey右分页布局TableLayout

1. 先看最终效果图

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

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

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

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

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

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:background="@color/mycolorBackground"

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

    shrinkColumns表示收缩列宽,stretchColumns表示扩展填充列宽。如果两个属性都设置,就表示该单元格在字数不多的时候扩展填充,字数单行容不下的时候会收缩到另起一行显示
    我们设定1列是shrinkColumns属性+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 ...>

    <!-- 第一行,标题栏 -->
    <TableRow
        android:id="@+id/tableRow1">

        <TextView
            android:layout_margin="5dp"
            android:text="标题"
            android:textSize="20sp" />

        <EditText
            android:id="@+id/userTitle"
            android:layout_height="30dp"
            android:layout_margin="5dp"
            android:layout_span="5"
            android:background="@drawable/bg_edittext"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:singleLine="true"
            android:textSize="20sp" />
            <!-- span表示跨5列,类似于合并单元格功能 -->

        <!-- 分组按钮 -->
        <ImageView
            android:id="@+id/userTitleGroup"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_gravity="center"
            android:layout_margin="5dp"
            android:src="@drawable/icon_folder" />
            <!-- 图标是由src来加载的,本章中用到的图标的来源网站下面会贴出来 -->

    </TableRow>

</TableLayout>

代码中的编辑框和分组按钮分别用到了两个drawable资源,代码如下:

  1. 编辑框属性android:background="@drawable/bg_edittext"(在res/drawable/目录下新建“bg_edittext.xml”):
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- layer-list用于制作多层叠加的形状组合,item的添加顺序是由底到上 -->

    <item>
        <!-- 底层形状是一个透明的矩形 -->
        <shape>
            <solid android:color="#0000" />
        </shape>
    </item>

    <!-- 上层形状则是一个左右各内缩10dp的圆角矩形,这样设计可以让编辑框看起来和左右两侧各留出了一定的空隙,看起来更美观,而且省去了编辑框的MarginLeft、MarginRight属性,可重复使用 -->
    <item
        android:left="10dp"
        android:right="10dp">
        <shape>
            <solid android:color="#ffffff" />
            <corners android:radius="4dp" />
        </shape>
    </item>
</layer-list>
  1. ImageView素材android:src="@drawable/icon_archive"

图标素材来源网站:EasyIcon
本章中用到的所有图标已打包为压缩包放在了我的百度网盘:链接: https://pan.baidu.com/s/1bYw5au 密码: p85s
使用时解压然后全部复制,再在res/drawable目录按Ctrl+V即可粘贴。

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 ...>

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

    <!-- 第二行,帐号栏 -->
    <TableRow
        android:id="@+id/tableRow2">

        <TextView
            android:layout_margin="5dp"
            android:text="帐号"
            android:textSize="20sp" />

        <EditText
            android:id="@+id/userName"
            android:layout_height="30dp"
            android:layout_margin="5dp"
            android:layout_span="5"
            android:background="@drawable/bg_edittext"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:singleLine="true"
            android:textSize="20sp" />

        <!-- 这个按钮是用来关联同标题的小号的,点击后会让你设置哪个是大号,哪个是隐私号,哪些是小号……
        小号还可以手动排序 -->
        <ImageView
            android:id="@+id/userNameLink"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_gravity="center"
            android:layout_margin="5dp"
            android:padding="2dp"
            android:src="@drawable/icon_attach" />
            <!-- 由于放进去的图片有点大,所以用了padding属性让它往里缩了一点 -->

    </TableRow>

</TableLayout>

代码跟第一行的差不多,只不过是左侧的文字和右边的src素材变了。

2.3. 第三行:密码

<TableLayout ...>

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

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

    <!-- 第三行,密码栏 -->
    <TableRow
        android:id="@+id/tableRow3">

        <TextView
            android:layout_margin="5dp"
            android:text="密码"
            android:textSize="20sp" />

        <EditText
            android:id="@+id/userPassword"
            android:layout_height="30dp"
            android:layout_margin="5dp"
            android:layout_span="5"
            android:background="@drawable/bg_edittext"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:singleLine="true"
            android:textSize="20sp" />

        <!-- 随机密码生成按钮 -->
        <ImageView
            android:id="@+id/userPasswordRandom"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_gravity="center"
            android:layout_margin="5dp"
            android:padding="4dp"
            android:src="@drawable/icon_random" />

    </TableRow>

</TableLayout>

代码跟前面的差不多,同样只不过是左侧的文字和右边的src素材变了。

2.4. 第四行:绑定

该行比较特殊,也是本次学习的一个难点。
首先要解决布局问题,我们不再在中间做EditText了,而是用一个横向的滚动栏(HorizontalScrollView)代替,滚动栏整体是居中的。
在滚动栏里面可以添加任意多个快捷绑定键,后面会在设置中进行自定义设置。
然后是加入图标。刚才我打包好的文件中已经包含了本次需要用到的所有图标。你也可以在EasyIcon网站自寻下载。

代码如下:

<TableLayout ...>

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

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

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

    <!-- 第四行,比较特殊,是一排绑定按钮 -->
    <TableRow
        android:id="@+id/tableRow4">

        <TextView
            android:layout_gravity="center_vertical"
            android:layout_margin="5dp"
            android:text="绑定"
            android:textSize="20sp" />

        <!-- 这些绑定按钮可自定义还可横向滚动 -->
        <HorizontalScrollView
            android:id="@+id/userBoundBar"
            android:layout_gravity="center"
            android:layout_span="5">

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

                <ImageView
                    android:id="@+id/userBoundQq"
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_gravity="center"
                    android:layout_margin="15dp"
                    android:src="@drawable/icon_bound_qq" />

                <ImageView
                    android:id="@+id/userBoundWeixin"
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_gravity="center"
                    android:layout_margin="15dp"
                    android:src="@drawable/icon_bound_weixin" />

                <ImageView
                    android:id="@+id/userBoundWeibo"
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_gravity="center"
                    android:layout_margin="15dp"
                    android:src="@drawable/icon_bound_weibo" />

                <ImageView
                    android:id="@+id/userBoundPhone"
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_gravity="center"
                    android:layout_margin="15dp"
                    android:src="@drawable/icon_bound_phone" />

                <ImageView
                    android:id="@+id/userBoundEmail"
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_gravity="center"
                    android:layout_margin="15dp"
                    android:src="@drawable/icon_bound_email" />

                <ImageView
                    android:id="@+id/userBoundWangyi"
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_gravity="center"
                    android:layout_margin="15dp"
                    android:src="@drawable/icon_bound_wangyi" />
            </LinearLayout>
        </HorizontalScrollView>

        <!-- 对绑定按钮进行详细设置,比如默认值、同类型小号(红色显示)、新增自定义字段等 -->
        <ImageView
            android:id="@+id/userBoundMore"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_gravity="center"
            android:layout_margin="5dp"
            android:src="@drawable/icon_more" />

    </TableRow>

</TableLayout>

2.5. 第五行:URL

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

<TableLayout ...>

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

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

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

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

    <!-- 第五行,URL -->
    <TableRow
        android:id="@+id/tableRow5">

        <TextView
            android:layout_margin="5dp"
            android:text="URL"
            android:textSize="20sp" />

        <!-- 默认是单行输入的 -->
        <EditText
            android:id="@+id/userUrl"
            android:layout_height="30dp"
            android:layout_margin="5dp"
            android:layout_span="5"
            android:background="@drawable/bg_edittext"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:singleLine="true"
            android:textSize="20sp" />

        <!-- 通过此按钮可以切换单/多行输入模式 -->
        <ImageView
            android:id="@+id/userUrlMultilines"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_gravity="center"
            android:layout_margin="5dp"
            android:src="@drawable/icon_add2" />
        <!-- 因为图标素材很小,所以就让它居中显示了 -->

    </TableRow>

</TableLayout>

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

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

<TableLayout ...>

    <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">

        <!-- 备注栏是多行输入的 -->
        <EditText
            android:id="@+id/userNote"
            android:layout_marginTop="15dp"
            android:layout_span="7"
            android:background="@drawable/bg_edittext"
            android:hint="请在此输入备注"
            android:padding="16dp"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:textSize="16sp" />

    </TableRow>

</TableLayout>

至此,布局部分基本完成。实际运行一下,发现该页面尚不能滑动,所以下面我们还要给这个TableLayout添加外布局……

2.7. 给TableLayout包裹“外衣”

为了让TableLayout能够滑动,要给它包装两层“外衣”:

1. ScrollView > 2. RelativeLayout > 3. TableLayout

依次解释一下其作用:

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

那么这样一来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="@color/mycolorBackground"

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <!-- 这里使用的是RelativeLayout。因为考虑到以后可能还需要在里面贴一些相对位置属性的控件等……所以用相对布局更好一些 -->

        <TableLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="30dp"
            android:shrinkColumns="1"
            android:stretchColumns="1">

            ...

        </TableLayout>

    </RelativeLayout>

</ScrollView>

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

当然,别忘了效果图中的头像界面还没有制作呢!

3. 制作头像布局

3.1. 头像布局

还是在page_item_new.xml中增加代码:

<ScrollView ...>

    <RelativeLayout ...>

        <!-- 头像的背景,根据头像主色调来生成(方法在函数中实现) -->
        <ImageView
            android:id="@+id/userHeadBackground"
            android:layout_width="match_parent"
            android:layout_height="108dp"
            android:background="#8e8e8e" />

        <!-- 使用开源控件CircleImageView制作圆形头像
        后面会说明CircleImageView的依赖方法 -->
        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/userHead"
            android:layout_width="96dp"
            android:layout_height="96dp"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="60dp"
            android:padding="5dp"
            android:src="@drawable/avatar_test" />
            <!-- 这张图片是用来测试的 -->

        <!-- 常规表单填写 -->
        <TableLayout 
            ...
            android:layout_below="@id/userHead">
            <!-- 新增一个相对位置的属性,因为TableLayout要处于用户头像之下 -->

            ...

        </TableLayout>

    </RelativeLayout>

</ScrollView>

其中用到了开源控件CircleImageView,下面介绍它的安装方法:

3.2. CircleImageView

CircleImageView是一款开源控件,用于制作圆形用户头像。
CircleImageView的Github项目地址:hdodenhof/CircleImageView: A circular ImageView for Android https://github.com/hdodenhof/CircleImageView

CircleImageView的安装:

首先在app:build.gradle中添加对它的依赖:

dependencies {
    ...
    compile 'de.hdodenhof:circleimageview:2.2.0'
}

别忘点击页面右上角的“Sync Now”:

Sync Now

然后就可以正常使用它了,步骤就这么简单。
这里暂时用一个测试头像代替。在后面的章节中将着重讲解ImageView的加载和保存方法。

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

4. 完善布局

4.1. 制作底部的保存按钮

保存按钮要放在屏幕的底部,这点有一个注意的事情,就是ScrollView做不到这件事情。所以我们要在ScrollView外面再包裹一个RelativeLayout(里面的TableLayout变成3层嵌套了),然后制作这个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="@color/mycolorBackground"
    android:padding="5dp"

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

    <ScrollView android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/linearLayout"
        android:layout_marginBottom="5dp">
        ...
    </ScrollView>

    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="vertical">

        <!-- 保存按钮 -->
        <Button
            android:id="@+id/userInfoSave"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/bg_button"
            android:text="保存"
            android:textColor="@drawable/selector_textcolor"
            android:textSize="20sp"
            android:visibility="visible" />
    </LinearLayout>

</RelativeLayout>

注意保存按钮用到了两个drawable文件,一个是背景bg_button.xml,还有一个是selector_textcolor.xml,是用于点击时文字由黑变白色的。具体代码如下:

  1. bg_button.xml是一个白色背景加海蓝色边框的圆角矩形,按下时背景和边框颜色交换过来:
<?xml version="1.0" encoding="UTF-8"?><!--http://blog.csdn.net/xiaoguda1/article/details/52084248-->

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

    <!--按压时的背景图片-->
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <corners android:radius="8dp" />

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

            <stroke android:width="1dp" android:color="#ffffff" />
        </shape>
    </item>

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

            <solid android:color="#ffffff"></solid>

            <stroke android:width="1dp" android:color="@color/colorPrimary" />
        </shape>
    </item>

</selector>
  1. selector_textcolor.xml默认状态是黑色字体,按下时变为白色字体:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#ffffff" android:state_pressed="true"></item>
    <item android:color="#000000"></item>
</selector>

实际运行一下,会发现键盘在左右滑动布局的时候不会自动收起来,下面来解决这个bug:

4.2. 解决bug:左右滑动布局,键盘不会自动收起来

解决方法:滑动到左分页时强制隐藏软键盘

具体思路:
在MainActivity.java > 页面监听器(MyOnPageChangeListener) > 检测滑动到page[0]时加入强制隐藏软键盘的代码:

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    ...

    //页面滚动监听器功能,实现标签页左右滑动切换效果
    public class MyOnPageChangeListener implements ViewPager.OnPageChangeListener {

        @Override
        public void onPageSelected(int index) {
            switch (index) {
                case 0: //滑动到左分页时的业务
                    titleAll.setTextColor(0xff000000);//0x表示整型,ff表示透明度为0,最后的6位数字表示颜色,必须这样写,不能省略
                    titleNew.setTextColor(0xff8e8e8e);
                    InputMethodManager inputMethodManager = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);
                    inputMethodManager.hideSoftInputFromWindow(MainActivity.this.getCurrentFocus().getWindowToken(), 0); //强制隐藏软键盘
                    break;
                case 1:
                    ...
            }
        }

        ...
    }
}

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

点击展开软键盘,按Enter键会自动跳转到下一行输入(这是系统自动判断的),滑动效果正常,按保存按钮会变色(gif图中没有演示)。
不过仍然存在一些问题,比如备注栏的EditText的底边似乎被“遮挡”住一部分(这个只是看起来像,因为备注栏跳转后的光标会和软键盘的顶部紧紧贴在一起,看起来就像遮住了一点点光标的样子)、顶部标题栏不能跟随滑动收起来、指示器的位置不准确(演示图中是修改过的,实际上本章的运行图中指示器的位置本该是照不准的)等。我们会在后期更新中逐渐完善。


注(2017年12月1日):数据绑定放在下下章节(06章)讲。下章节(05章)是关于前面四章出现的所有bug的汇总解决。


5. 其他说明

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

以下两个步骤缺一不可:

  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. 【新增】扩展信息卡片布局

2017年11月27日

  1. 【新增】右分页“保存”按钮的点击背景变色
  2. 【修改】在分页中右滑键盘自动收起,且左滑不自动打开

2017年11月29日

  1. 【更新】重新制作右分页
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值