如何在Android中使布局高度等于其宽度？

【问题标题】：How to make layout height equal to its width in Android?如何在Android中使布局高度等于其宽度？
【发布时间】：2019-04-17 09:19:00
【问题描述】：

我想让我的所有CardView 的高度等于它们的宽度，并且我希望每个CardView 占据用户设备屏幕的同一部分。我怎样才能做到这一点？我的代码是这样的：

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

                <android.support.v7.widget.CardView
                    android:id="@+id/tool1"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="3dp"
                    android:layout_marginRight="3dp"
                    android:foregroundGravity="center"
                    app:layout_constraintHorizontal_weight="1"
                    app:layout_constraintLeft_toLeftOf="parent"
                    app:layout_constraintRight_toLeftOf="@id/tool2">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:background="@drawable/too_4_background"
                        android:gravity="center"
                        android:orientation="vertical"
                        android:paddingBottom="10dp"
                        android:paddingTop="10dp">

                        <LinearLayout
                            android:layout_width="30dp"
                            android:layout_height="30dp"
                            android:background="@drawable/emoji_background"
                            android:gravity="center">

                            <TextView
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:gravity="center"
                                android:text="&#x1F633;"
                                android:textSize="15dp" />

                        </LinearLayout>

                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="4dp"
                            android:gravity="center"
                            android:text="ارسال رایگان"
                            android:textColor="#ffffff"
                            android:textSize="13dp" />

                    </LinearLayout>


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

                <android.support.v7.widget.CardView
                    android:id="@+id/tool2"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="3dp"
                    android:layout_marginRight="3dp"
                    app:layout_constraintHorizontal_weight="1"
                    app:layout_constraintLeft_toRightOf="@id/tool1"
                    app:layout_constraintRight_toLeftOf="@id/tool3">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:background="@drawable/too_4_background"
                        android:gravity="center"
                        android:orientation="vertical"
                        android:paddingBottom="10dp"
                        android:paddingTop="10dp">

                        <LinearLayout
                            android:layout_width="30dp"
                            android:layout_height="30dp"
                            android:background="@drawable/emoji_background"
                            android:gravity="center">

                            <TextView
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:gravity="center"
                                android:text="&#x1F633;"
                                android:textSize="15dp" />

                        </LinearLayout>

                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="4dp"
                            android:gravity="center"
                            android:text="ارسال رایگان"
                            android:textColor="#ffffff"
                            android:textSize="13dp" />

                    </LinearLayout>


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

                <android.support.v7.widget.CardView
                    android:id="@+id/tool3"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="3dp"
                    android:layout_marginRight="3dp"
                    app:layout_constraintHorizontal_weight="1"
                    app:layout_constraintLeft_toRightOf="@id/tool2"
                    app:layout_constraintRight_toLeftOf="@id/tool4">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:background="@drawable/too_4_background"
                        android:gravity="center"
                        android:orientation="vertical"
                        android:paddingBottom="10dp"
                        android:paddingTop="10dp">

                        <LinearLayout
                            android:layout_width="30dp"
                            android:layout_height="30dp"
                            android:background="@drawable/emoji_background"
                            android:gravity="center">

                            <TextView
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:gravity="center"
                                android:text="&#x1F633;"
                                android:textSize="15dp" />

                        </LinearLayout>

                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="4dp"
                            android:gravity="center"
                            android:text="ارسال رایگان"
                            android:textColor="#ffffff"
                            android:textSize="13dp" />

                    </LinearLayout>

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

                <android.support.v7.widget.CardView
                    android:id="@+id/tool4"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="3dp"
                    android:layout_marginRight="3dp"
                    app:layout_constraintHorizontal_weight="1"
                    app:layout_constraintLeft_toRightOf="@id/tool3"
                    app:layout_constraintRight_toRightOf="parent"
                    >

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:background="@drawable/too_4_background"
                        android:gravity="center"
                        android:orientation="vertical"
                        android:paddingBottom="10dp"
                        android:paddingTop="10dp">

                        <LinearLayout
                            android:layout_width="30dp"
                            android:layout_height="30dp"
                            android:background="@drawable/emoji_background"
                            android:gravity="center">

                            <TextView
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:gravity="center"
                                android:text="&#x1F633;"
                                android:textSize="15dp" />

                        </LinearLayout>

                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="4dp"
                            android:gravity="center"
                            android:text="ارسال رایگان"
                            android:textColor="#ffffff"
                            android:textSize="13dp" />

                    </LinearLayout>

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


            </android.support.constraint.ConstraintLayout>

【问题讨论】：

  • 你要制作方形卡片视图吗？
  • 您应该计算设备屏幕宽度，然后减去填充和边距（如果有）计算卡片的宽度。现在你有了宽度，只需使用 LayoutParams 设置高度
  • @Ümañgßürmån 是的
  • @HarishKamboj 我知道，但我想通过 xml 来做到这一点
  • @VladyslavMatviienko 是的，您必须尽快掌握 ConstraintLayout，因为这将有助于减慢 IMO 的开发时间。

标签： java android xml layout


【解决方案1】：

如果问题是设置相同的高度和宽度，这里是代码。

<android.support.constraint.ConstraintLayout
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="wrap_content">

<android.support.design.card.MaterialCardView
    app:layout_constraintDimensionRatio="1:1"
    android:layout_width="0dp"
    android:layout_height="0dp">

</android.support.design.card.MaterialCardView>

</android.support.constraint.ConstraintLayout>

【讨论】：

    【解决方案2】：

    你需要一个自定义的 CardView，比如 SquareCardView：

    public class SquareCardView extends CardView {
  public SquareCardView(Context context) {
    super(context);
  }

  public SquareCardView(Context context, AttributeSet attrs) {
    super(context, attrs);
  }

  public SquareCardView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
  }

  public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    int size = Math.min(getMeasuredWidth(), getMeasuredHeight());
    setMeasuredDimension(size, size);
  }
}

    然后，在您的布局中使用该自定义卡片视图：

    <com.yourPackageName.SquareCardView
    android:id="@+id/tool1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="3dp"
    android:layout_marginRight="3dp"
    android:foregroundGravity="center"
    app:layout_constraintHorizontal_weight="1"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@id/tool2">

    【讨论】：

    • 使用 ConstraintLayout 我们可以将高度和宽度设置为“0dp”并添加 app:layout_constraintDimensionRatio="1:1" 以达到相同的效果。
    • 谢谢。这是一种方法，但不是最好的方法。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-10-08
    • 2015-11-02
    • 1970-01-01
    • 2011-07-23
    • 2020-10-30
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode