04 Anykey右分页布局TableLayout

作者: 85b64b9f7de3 | 来源:发表于2017-12-04 12:18 被阅读50次

首发于：http://blog.csdn.net/likianta/article/details/78637841

1. 先看最终效果图

image

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

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

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

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

当然还有很多软件没有试过，比如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. 第一行：标题

image

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

2. ImageView素材android:src="@drawable/icon_archive"

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

PS：按shift+f6可对res/drawable/中的文件改名，改名后所有应用该样式的代码也会自动变名的，所以不用担心。

更多了解可参考：

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

2.2. 第二行：帐号

image

<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. 第三行：密码

image

<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. 第四行：绑定

image

该行比较特殊，也是本次学习的一个难点。
首先要解决布局问题，我们不再在中间做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

image

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. 第六行（最后一行）：备注栏

image

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

<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

依次解释一下其作用：

ScrollView是为了保证该页面可上下滑动，这样就解决了软键盘的遮挡问题
由于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. 制作头像布局

image

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>

2. 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:
                    ...
            }
        }
        
        ...
    }
}

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

image

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

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

5. 其他说明

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

以下两个步骤缺一不可：

ImageView设置为可点击的属性：android:clickable="true"
shape中的selector顺序为先写点击时的背景状态，再写默认的背景状态

参考：

怎么设置selector：http://blog.csdn.net/qq_20785431/article/details/50198315
设置的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. 【修改】主界面标题栏颜色改为纯白色

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

image

（左边的标题栏是系统默认的白色，右边是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>

日志

2017年11月25日

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

2017年11月27日

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

2017年11月29日

【更新】重新制作右分页

04 Anykey右分页布局TableLayout

1. 先看最终效果图

2. 制作右分页填表界面TableLayout

2.1. 第一行：标题

2.2. 第二行：帐号

2.3. 第三行：密码

2.4. 第四行：绑定

2.5. 第五行：URL

2.6. 第六行（最后一行）：备注栏

2.7. 给TableLayout包裹“外衣”

3. 制作头像布局

3.1. 头像布局

3.2. CircleImageView

4. 完善布局

4.1. 制作底部的保存按钮

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

5. 其他说明

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

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

5.3. 关于TableLayout

5.4. Android Studio查找替换快捷键

6. 更新修复

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

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

相关参考

日志

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读