堆栈内存溢出
  繁体   English   中英

如何在 Android 表格布局中保持圆圈的纵横比

[英]How to keep aspect ratio of of circles in table layout in Android

 原文  2019-01-01 19:40:21  1   2    java/ android

问题描述

我正在 Java Android 中构建一个 5x6 圆的网格。 我正在使用可绘制形状：椭圆形，具有相同的高度和宽度来创建圆圈，但它们最终变成了椭圆形。

椭圆形的图像，而不是圆形椭圆形的图像，而不是圆形

我怎样才能确保他们会保持圆圈？

circle_blue.xml：

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

    <item>
        <shape android:shape="oval">
            <solid android:color="#637bfe"/>
            <stroke android:color="#FFFFFF" android:width="5dp"/>
            <!-- Set the same value for both width and height to get a circular shape -->
            <size android:width="40dp" android:height="40dp"/>
        </shape>
    </item>
</selector>

下面是我用来构建网格的 xml。 我使用 FrameLayout 来定义纵横比，然后使用表格布局将圆圈放入结构中。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="at.react.reaction.MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Instruction"
        android:textSize="24sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.04000002" />

    <FrameLayout
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginEnd="0dp"
        android:layout_marginStart="0dp"
        android:layout_marginTop="0dp"
        android:background="@android:color/white"
        app:layout_constraintDimensionRatio="H,5:6"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView">



    <TableLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp">


        <TableRow
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <Button
                android:id="@+id/btn11"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/circle_blue"
                android:elevation="9dp"

                android:textColor="#fff" />
            <Button
                android:id="@+id/btn12"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/circle_blue"
                android:elevation="9dp"

                android:textColor="#fff" />
            <Button
                android:id="@+id/btn13"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/circle_blue"
                android:elevation="9dp"

                android:textColor="#fff" />
            <Button
                android:id="@+id/btn14"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/circle_blue"
                android:elevation="9dp"

                android:textColor="#fff" />

            <Button
                android:id="@+id/btn15"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/circle_blue"
                android:elevation="9dp"

                android:textColor="#fff" />
        </TableRow>

        <TableRow
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <Button
                android:id="@+id/btn21"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/circle_blue"
                android:elevation="9dp"

                android:textColor="#fff" />
            <Button
                android:id="@+id/btn22"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/circle_blue"
                android:elevation="9dp"

                android:textColor="#fff" />
            <Button
                android:id="@+id/btn23"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/circle_blue"
                android:elevation="9dp"

                android:textColor="#fff" />
            <Button
                android:id="@+id/btn24"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/circle_blue"
                android:elevation="9dp"

                android:textColor="#fff" />

            <Button
                android:id="@+id/btn25"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/circle_blue"
                android:elevation="9dp"

                android:textColor="#fff" />
        </TableRow>

        <TableRow
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <Button
                android:id="@+id/btn31"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/circle_blue"
                android:elevation="9dp"

                android:textColor="#fff" />
            <Button
                android:id="@+id/btn32"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/circle_blue"
                android:elevation="9dp"

                android:textColor="#fff" />
            <Button
                android:id="@+id/btn33"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/circle_blue"
                android:elevation="9dp"

                android:textColor="#fff" />
            <Button
                android:id="@+id/btn34"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/circle_blue"
                android:elevation="9dp"

                android:textColor="#fff" />

            <Button
                android:id="@+id/btn35"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/circle_blue"
                android:elevation="9dp"

                android:textColor="#fff" />
        </TableRow>

        <TableRow
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <Button
                android:id="@+id/btn41"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/circle_blue"
                android:elevation="9dp"

                android:textColor="#fff" />
            <Button
                android:id="@+id/btn42"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/circle_blue"
                android:elevation="9dp"

                android:textColor="#fff" />
            <Button
                android:id="@+id/btn43"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/circle_blue"
                android:elevation="9dp"

                android:textColor="#fff" />
            <Button
                android:id="@+id/btn44"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/circle_blue"
                android:elevation="9dp"

                android:textColor="#fff" />

            <Button
                android:id="@+id/btn45"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/circle_blue"
                android:elevation="9dp"

                android:textColor="#fff" />
        </TableRow>
        <TableRow
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <Button
                android:id="@+id/btn51"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/circle_blue"
                android:elevation="9dp"

                android:textColor="#fff" />
            <Button
                android:id="@+id/btn52"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/circle_blue"
                android:elevation="9dp"

                android:textColor="#fff" />
            <Button
                android:id="@+id/btn53"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/circle_blue"
                android:elevation="9dp"

                android:textColor="#fff" />
            <Button
                android:id="@+id/btn54"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/circle_blue"
                android:elevation="9dp"

                android:textColor="#fff" />

            <Button
                android:id="@+id/btn55"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/circle_blue"
                android:elevation="9dp"

                android:textColor="#fff" />
        </TableRow>

        <TableRow
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <Button
                android:id="@+id/btn61"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/circle_blue"
                android:elevation="9dp"

                android:textColor="#fff" />
            <Button
                android:id="@+id/btn62"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/circle_blue"
                android:elevation="9dp"

                android:textColor="#fff" />
            <Button
                android:id="@+id/btn63"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/circle_blue"
                android:elevation="9dp"

                android:textColor="#fff" />
            <Button
                android:id="@+id/btn64"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/circle_blue"
                android:elevation="9dp"

                android:textColor="#fff" />

            <Button
                android:id="@+id/btn65"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/circle_blue"
                android:elevation="9dp"

                android:textColor="#fff" />
        </TableRow>
    </TableLayout>

    </FrameLayout>
    </android.support.constraint.ConstraintLayout>

谢谢你的帮助！！

2 个解决方案

解决方案1
 0 已采纳  2019-01-01 23:34:03

谢谢杀手！

使用 ImageButton 而不是 Button 解决了这个问题！

解决方案2
 -1  2019-01-01 19:56:52

尝试android:scaleType="centerCrop"如果不起作用，请使用其他值。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 保持Android ImageButton的宽高比 如何在JPanel中保持长宽比 如何使JFreeChart保持宽高比？ JavaFX如何保持一定的纵横比 如何保持前景图像的宽高比？ Android-可调整大小的小部件：缩放TextSize并保持纵横比 在GridView上保持背景的长宽比 如何在Vaadin中设置图像组件的大小并保持纵横比 Android：表格行图像变胖且不保持宽高比 如何像本应用程序一样保持imageview的长宽比？ [Android，ImageView，长宽比，ScrollView]
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM