ConstraintLayout宽高比

Question

考虑以下布局文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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">

    <android.support.constraint.ConstraintLayout
        android:id="@+id/activity_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#FF0000"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin">

        <ImageView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="#0000FF"
            android:padding="16dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintDimensionRatio="H,3:1"
            tools:layout_editor_absoluteX="16dp" />

    </android.support.constraint.ConstraintLayout>

</RelativeLayout>

我不确定app：layout_constraintDimensionRatio是如何工作的。我的理解是比例总是宽度：高度。因此3：1将始终使ImageView看起来比高度宽3倍。前缀H或W告诉ConstraintLayout哪个维度应该尊重比率。如果是H则表示首先根据其他约束计算宽度，然后根据纵横比调整高度。然而，这是布局的结果：

高度是宽度的3倍，这是意料之外的。任何人都可以向我解释如何根据app：layout_constraintDimensionRatio设置计算维度？

Answer 1

您对app:layout_constraintDimensionRatio工作方式的理解是正确的。如果设置app:layout_constraintDimensionRatio="H,3:1"，则表示首先根据其他约束计算宽度，然后根据纵横比调整高度。您实施的唯一问题是您向ImageView添加了app:layout_constraintBottom_toBottomOf="parent"，因此导致app:layout_constraintDimensionRatio被忽略。

这里是以3：1宽高比调整ImageView大小的布局：

<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="match_parent"
    android:background="#FF0000">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:background="#0000FF"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintDimensionRatio="H,3:1" />

</android.support.constraint.ConstraintLayout>

以及结果视图：

Answer 2

基本上，我们有

layout_constraintDimensionRatio(width:height)

示例

<!-- button which have width = it's content and height = 1/2 width -->
<Button
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        app:layout_constraintStart_toStartOf="parent" <!-- I still think that we don't need this attribute but I when I don't add this, constraint not working -->
        android:text="Button TEST RATIO 1"
        app:layout_constraintDimensionRatio="2:1" />

输出

<!-- button which have width = it's content and height = 1/2 width -->
<Button
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        app:layout_constraintStart_toStartOf="parent"
        android:text="Button TEST RATIO 2"
        app:layout_constraintDimensionRatio="2" /> <!-- 2 here <=> 2:1 <=> 2/1 (1:1 <=> 1, 1/2 <=> 0.5, ....) ->

输出

<!-- button which have width = match_parent and height = 1/2 width -->
<Button
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:text="Button TEST RATIO 3"
        app:layout_constraintDimensionRatio="2" />

输出

<!-- button which have width = match constraint and height = 1/2 width -->
<Button
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="Button TEST RATIO 4"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintDimensionRatio="2" />

输出

演示：https://github.com/PhanVanLinh/AndroidConstraintLayoutRatio

Answer 3

查看这些 listView = (ListView) rootView.findViewById(R.id.list_spesa); listView.setY(20); adapter = new CustomListAdapterSpesa(getActivity(), movieList); adapter.notifyDataSetChanged(); listView.setAdapter(adapter); 属性：

public class CustomListAdapterSpesa extends BaseAdapter {

private Activity activity;

private LayoutInflater inflater;
private List<MovieSpesa> movieItems;

int pos;
public CustomListAdapterSpesa(Activity activity, List<MovieSpesa> movieItems) {
    this.activity = activity;
    this.movieItems = movieItems;
}

@Override
public int getCount() {
    return movieItems.size();
}

@Override
public Object getItem(int location) {
    return movieItems.get(location);
}

@Override
public long getItemId(int position) {
    return position;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {

    if (inflater == null)
        inflater = (LayoutInflater) activity
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    if (convertView == null)
        convertView = inflater.inflate(R.layout.list_row, null);


    TextView title = (TextView) convertView.findViewById(R.id.title);

      TextView genre = (TextView) convertView.findViewById(R.id.genre);
  convertView.findViewById(R.id.releaseYear);

    MovieSpesa m = movieItems.get(position);


    int coint = getCount();


    // title
    title.setText(m.getTitle());



    // genre


    genre.setText(m.getGenre());

    return convertView;

}

这些属性会覆盖ImageView，因为 app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintLeft_toLeftOf="parent" 被约束到主要父级的底部，顶部和左侧，导致layout_constraintDimensionRatio占据左侧，顶部和底部主屏幕。

ImageView

这将是一个解决方案。如果您希望View显示在顶部，反之亦然，则可以省略View。最好完全删除所有上述限制，但 app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" 除外，这是推荐的解决方案。