使用ConstraintLayout实现数字键盘布局

最新推荐文章于 2025-03-16 19:20:15 发布

佛一脚

最新推荐文章于 2025-03-16 19:20:15 发布

阅读量1.4k

点赞数 1

分类专栏： android_study 文章标签： android 键盘布局 ConstraintLayout 约束性布局数字键盘

本文链接：https://blog.csdn.net/qwe1314225/article/details/86641735

版权

android_study 专栏收录该内容

12 篇文章

订阅专栏

效果

1. 方便用户输入数字的键盘布局；
2. 进入界面直接能点击输入，而不是系统弹出键盘，用户才能输入；
3. 类似于九宫格样式，实际效果如下图；

想法思路

1. 当时的第一想法是TableLayout－表格布局；
就像表格一样，有的控件占两列，有的控件占两行；
后来实际敲代码才发现TableLayout中并没有占两行方法，只有一个占多列的方法；
2. 后来想到用GridLayout－网格布局；
他们的布局样式也比较像网格，实际一写，感觉控件之间对齐方式，在一行中所占比重都不怎么好控制；
3. 最后没办法只能用ConstraintLayout－约束性布局；
最后才用这个布局的原因是每个控件都要上下左右约束控件，有点烦；
其实这也是能解决控件占多少比列，控件之间对齐方式的一种有效途径；

知识点－ConstraintLayout

1. 控件高度与宽度按比列显示

比如说：宽高比为4:3
app:layout_constraintDimensionRatio="W,3:4"

2. 控件宽高在整个屏幕的比重

比如说：控件宽度占手机屏幕宽度的22%，一共四控件就是88%，剩下12%空白
app:layout_constraintWidth_percent="0.22"

3. 控件之间对齐方式

如下图：
Delete按钮跟“3”的顶部对齐；
Delete按钮跟“6”的底部对齐；
Delete按在“3”，“6”控件的左边；
Delete按钮右边是屏幕边缘；

代码实现：如下
指定控件的底部对齐是 btn_6,顶部是 btn_3
app:layout_constraintBottom_toBottomOf="@id/btn_6"
app:layout_constraintTop_toTopOf="@id/btn_3"
app:layout_constraintLeft_toRightOf="@id/btn_3"

        <Button
            android:id="@+id/btn_delete"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text="delete"
            app:layout_constraintBottom_toBottomOf="@id/btn_6"
            app:layout_constraintLeft_toRightOf="@id/btn_3"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="@id/btn_3"
            app:layout_constraintWidth_percent="0.28" />

所有代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

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

        <ImageView
            android:id="@+id/iv_photo"
            android:layout_width="56dp"
            android:layout_height="56dp" />

        <EditText
            android:id="@+id/et_number"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:background="@null"
            android:minHeight="50dp" />
    </LinearLayout>

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="2dp">

        <Button
            android:id="@+id/btn_1"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text="1"
            app:layout_constraintDimensionRatio="W,3:4"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@id/btn_2"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintWidth_percent="0.22" />

        <Button
            android:id="@+id/btn_2"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text="2"

            app:layout_constraintDimensionRatio="W,3:4"
            app:layout_constraintLeft_toRightOf="@+id/btn_1"
            app:layout_constraintRight_toLeftOf="@id/btn_3"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintWidth_percent="0.22" />

        <Button
            android:id="@+id/btn_3"

            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text="3"
            app:layout_constraintDimensionRatio="W,3:4"
            app:layout_constraintLeft_toRightOf="@+id/btn_2"
            app:layout_constraintRight_toLeftOf="@id/btn_delete"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintWidth_percent="0.22" />

        <Button
            android:id="@+id/btn_delete"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text="delete"
            app:layout_constraintBottom_toBottomOf="@id/btn_6"
            app:layout_constraintLeft_toRightOf="@id/btn_3"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="@id/btn_3"
            app:layout_constraintWidth_percent="0.28" />

        <Button
            android:id="@+id/btn_4"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text="4"
            app:layout_constraintDimensionRatio="W,3:4"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@id/btn_5"
            app:layout_constraintTop_toBottomOf="@id/btn_1"
            app:layout_constraintWidth_percent="0.22" />

        <Button
            android:id="@+id/btn_5"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text="5"
            app:layout_constraintDimensionRatio="W,3:4"
            app:layout_constraintLeft_toRightOf="@+id/btn_4"
            app:layout_constraintRight_toLeftOf="@id/btn_6"
            app:layout_constraintTop_toBottomOf="@id/btn_1"
            app:layout_constraintWidth_percent="0.22" />

        <Button
            android:id="@+id/btn_6"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text="6"
            app:layout_constraintDimensionRatio="W,3:4"
            app:layout_constraintLeft_toRightOf="@+id/btn_5"
            app:layout_constraintRight_toLeftOf="@id/btn_delete"
            app:layout_constraintTop_toBottomOf="@id/btn_1"
            app:layout_constraintWidth_percent="0.22" />

        <Button
            android:id="@+id/btn_7"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text="7"
            app:layout_constraintDimensionRatio="W,3:4"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@id/btn_8"
            app:layout_constraintTop_toBottomOf="@id/btn_4"
            app:layout_constraintWidth_percent="0.22" />

        <Button
            android:id="@+id/btn_8"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text="8"
            app:layout_constraintDimensionRatio="W,3:4"
            app:layout_constraintLeft_toRightOf="@+id/btn_7"
            app:layout_constraintRight_toLeftOf="@id/btn_9"
            app:layout_constraintTop_toBottomOf="@id/btn_4"
            app:layout_constraintWidth_percent="0.22" />

        <Button
            android:id="@+id/btn_9"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text="9"
            app:layout_constraintDimensionRatio="W,3:4"
            app:layout_constraintLeft_toRightOf="@+id/btn_8"
            app:layout_constraintRight_toLeftOf="@id/btn_delete"
            app:layout_constraintTop_toBottomOf="@id/btn_4"
            app:layout_constraintWidth_percent="0.22" />

        <Button
            android:id="@+id/btn_dot"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text="."
            app:layout_constraintDimensionRatio="W,3:4"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@id/btn_8"
            app:layout_constraintTop_toBottomOf="@id/btn_7"
            app:layout_constraintWidth_percent="0.22" />

        <Button
            android:id="@+id/btn_0"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text="0"
            app:layout_constraintBottom_toBottomOf="@id/btn_dot"
            app:layout_constraintLeft_toLeftOf="@id/btn_8"
            app:layout_constraintRight_toRightOf="@+id/btn_9"
            app:layout_constraintTop_toTopOf="@id/btn_dot" />

        <Button
            android:id="@+id/btn_finish"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text="完成"
            app:layout_constraintBottom_toBottomOf="@id/btn_dot"
            app:layout_constraintLeft_toRightOf="@+id/btn_9"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="@id/btn_9"
            app:layout_constraintWidth_percent="0.28" />
    </android.support.constraint.ConstraintLayout>
</LinearLayout>

小结

ConstraintLayout的功能还是挺强大的，用于做不同屏幕尺寸的适配有奇效；
优点：
    1. 控件可以设置屏占比，相当于LinearLayout中的weight；
    2. 控件之间能设置相当约束，相当于RelativeLayout的bottom_to；
缺点：
    1. 要多写id；
    2. 至少指明两个方位的控件是谁；
其他优缺点，慢慢去发现吧！