如何使用ConstraintLayout正确地展开Gridview并保持纵横比

Question

我有一个两列的网格视图，它动态地填充了用户行，所以每个单元格都指向一个用户。我目前正在膨胀一个Framelayout，用作每个单元格的视图，但我正在为这个布局的膨胀而挣扎。

public View getView(int position, View convertView, ViewGroup parent) {
LayoutInflater inflater = (LayoutInflater)mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
FrameLayout layout = new FrameLayout(mContext);
int width = Resources.getSystem().getDisplayMetrics().widthPixels;
View view = inflater.inflate(R.layout.add_friend_profile, parent, false);
TextView username = (TextView) view.findViewById(R.id.add_friend_txt_name);
username.setText(friends.get(position));
layout.addView(view);
layout.setLayoutParams(new AbsListView.LayoutParams( (width / 2) , (width / 2)));
return layout;
}

布局包括作为背景的ImageView(肖像边框(、用于用户名的TextView、用于个人资料图片的ImageView和用于添加用户的按钮。

<?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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="0dp"
app:srcCompat="@drawable/ic_profile_bg"
android:id="@+id/add_friend_profile_border"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
android:cropToPadding="false"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginTop="16dp"
app:layout_constraintTop_toTopOf="parent"
android:adjustViewBounds="false"
android:scaleType="fitXY"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_height="0dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/add_friend_txt_name"
android:text="@string/ffsu_screen_user"
android:textAlignment="center"
android:textColor="@android:color/black"
android:textSize="14sp"
android:layout_marginTop="16dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="@+id/add_friend_profile_border"
app:layout_constraintRight_toRightOf="@+id/add_friend_profile_border"
app:layout_constraintBottom_toBottomOf="@+id/add_friend_profile_border"
app:layout_constraintVertical_bias="0.13" />
<ImageView
app:srcCompat="@drawable/ic_account_box_black_24dp"
android:id="@+id/add_friend_img_pic"
app:layout_constraintLeft_toLeftOf="@+id/add_friend_profile_border"
app:layout_constraintRight_toRightOf="@+id/add_friend_profile_border"
android:layout_width="80dp"
app:layout_constraintTop_toBottomOf="@+id/add_friend_txt_name"
app:layout_constraintBottom_toBottomOf="@+id/add_friend_profile_border"
android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"
android:layout_marginBottom="80dp"
android:layout_marginTop="8dp"
android:layout_height="80dp" />
<Button
android:text="@string/add_friend_profile_add"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="@+id/add_friend_btn_add"
app:layout_constraintTop_toBottomOf="@+id/add_friend_img_pic"
app:layout_constraintRight_toRightOf="@+id/add_friend_profile_border"
app:layout_constraintLeft_toLeftOf="@+id/add_friend_profile_border"
android:background="@drawable/rounded_button_active"
android:textAllCaps="false"
android:textColor="@android:color/white"
android:textAlignment="center"
android:textSize="18sp"
android:layout_marginTop="16dp"
android:layout_marginEnd="32dp"
android:layout_marginStart="32dp" />

</android.support.constraint.ConstraintLayout>

我遇到的主要问题是文本视图的字体大小以及ImageView和按钮的宽度和高度。如果布局上的大小合适，在GridView的单元格中膨胀时会太大。

正在膨胀的布局的Android GUI设计截图

GridView单元格中膨胀布局结果的屏幕截图

Answer 1

问题是您的视图不适合网格单元格。但是，如果我们在约束布局中创建一个链，那么视图将自行调整。

<?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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/add_friend_profile_border"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginTop="16dp"
android:cropToPadding="false"
android:scaleType="fitXY"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:srcCompat="@drawable/ic_profile_bg"
/>
<TextView
android:id="@+id/add_friend_txt_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/ffsu_screen_user"
android:textAlignment="center"
android:textColor="@android:color/black"
android:textSize="14sp"
android:layout_marginTop="16dp"
app:layout_constraintStart_toStartOf="@+id/add_friend_profile_border"
app:layout_constraintEnd_toEndOf="@+id/add_friend_profile_border"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="@+id/add_friend_img_pic"
app:layout_constraintVertical_chainStyle="spread"
/>
<ImageView
android:id="@+id/add_friend_img_pic"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@+id/add_friend_txt_name"
app:layout_constraintBottom_toTopOf="@+id/add_friend_btn_add"
app:srcCompat="@drawable/ic_account_box_black_24dp"/>
<Button
android:id="@+id/add_friend_btn_add"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="@string/add_friend_profile_add"
android:textAllCaps="false"
android:textColor="@android:color/white"
android:textAlignment="center"
android:textSize="18sp"
android:background="@drawable/rounded_button_active"
android:layout_marginEnd="32dp"
android:layout_marginStart="32dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@+id/add_friend_img_pic"
app:layout_constraintBottom_toBottomOf="parent"/>

</android.support.constraint.ConstraintLayout>

尽管我强烈建议您删除第一个ImageView，只在约束布局上设置背景。项目之间的边距应由GridView中的horizontalSpacing和verticalSpacing管理。此外，我建议缩小所有这些利润。这只是对空间利用不足。