Question

我有两列gridview，其中动态填充了用户行，因此每个单元格都引用一个用户。我目前正在夸大我用作每个单元格视图的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和用于添加用户的Button组成。

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

我遇到的主要问题是textview的字体大小以及ImageView和按钮的宽度和高度在布局上是一个合适的大小，当在GridView的单元格中膨胀时，它将太大。

>

Screenshot of Android GUI design for layout being inflated

Screenshot of result of inflating layout in GridView cell

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管理。我也建议缩小所有这些边距。那只是对空间的不良利用。

如何使用ConstraintLayout正确膨胀Gridview并保持纵横比

1 个答案: