在TextView(ConstraintLayout)的顶部添加ImageView

时间:2018-10-21 00:06:30

标签: android android-constraintlayout

我没有找到使用 ConstraintLayout 将ImageView放在TextView之上的任何方法。看起来应该像下面的屏幕截图,但是如果我运行我的应用,imageview就会消失。

enter image description here

编辑:

android:translationZ="2dp"添加到ImageView不能解决问题。 但是,这是我的整个XML文件:

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

    <TextView
        android:id="@+id/line1"
        android:layout_width="160dp"
        android:layout_height="20dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:background="@color/colorTableWhite"
        android:text="Lorem ipsum"
        android:textAlignment="center"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:textColor="@color/colorTableBlack" />

    <TextView
        android:id="@+id/line2"
        android:layout_width="160dp"
        android:layout_height="20dp"
        android:layout_marginStart="8dp"
        android:background="@color/colorTableWhite"
        android:text="Lorem ipsum"
        android:textAlignment="center"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/line1"
        tools:textColor="@color/colorTableBlack" />

    <TextView
        android:id="@+id/line3"
        android:layout_width="160dp"
        android:layout_height="20dp"
        android:layout_marginStart="8dp"
        android:background="@color/colorTableRed"
        android:text="Lorem ipsum"
        android:textAlignment="center"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/line2"
        tools:textColor="@color/colorTableWhite" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="160dp"
        android:translationZ="2dp"
        android:layout_height="60dp"
        android:layout_marginStart="8dp"
        android:foregroundGravity="top"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/space2"
        app:srcCompat="@drawable/ic_launcher_foreground" />

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:gravity="left"
        android:text="Lorem ipsum"
        android:textSize="20sp"
        app:layout_constraintStart_toEndOf="@+id/line1"
        app:layout_constraintTop_toBottomOf="@+id/space2" />

    <TextView
        android:id="@+id/description"
        android:layout_width="0dp"
        android:layout_height="36dp"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:text="Lorem ipsum dolor sit amet, consetetur sadipscing"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/line2"
        app:layout_constraintTop_toBottomOf="@+id/title" />

    <Space
        android:id="@+id/space2"
        android:layout_width="225dp"
        android:layout_height="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.426"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Space
        android:id="@+id/space"
        android:layout_width="225dp"
        android:layout_height="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/description" />

</android.support.constraint.ConstraintLayout>

2 个答案:

答案 0 :(得分:1)

由于您使用的是app:srcCompat,因此可以在XML布局中将ImageView更改为AppCompatImageView

<android.support.v7.widget.AppCompatImageView
    android:id="@+id/imageView"
    android:layout_width="160dp"
    android:translationZ="2dp"
    android:layout_height="60dp"
    android:layout_marginStart="8dp"
    android:foregroundGravity="top"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/space2"
    app:srcCompat="@drawable/ic_launcher_foreground" />

或将app:srcCompat更改为android:src

<ImageView
    android:id="@+id/imageView"
    android:layout_width="160dp"
    android:layout_height="60dp"
    android:layout_marginStart="8dp"
    android:foregroundGravity="top"
    android:translationZ="2dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/space2"
    android:src="@drawable/ic_warning" />

答案 1 :(得分:0)

我为此问题找到了两种解决方案:

  1. 您的minSdk = 24,因此无需使用srcCompat。尝试更改此内容:
  

app:srcCompat =“ @ drawable / ic_warning”

对此:

  

android:background =“ @ drawable / ic_warning”

  1. 如果您更喜欢使用app:srcCompat,则应在TemplateRow.class中对getView方法进行一些修改。下面是getView()方法的修改版本:

    public View getView(int position, View convertView, ViewGroup parent) {
    // Get the data item for this position
    DisplayTemplate displayTemplate = getItem(position);
    // Check if an existing view is being reused, otherwise inflate the view
    ViewHolder viewHolder; // view lookup cache stored in tag
    
    final View result;
    
    if (convertView == null) {
    
        viewHolder = new ViewHolder();
        LayoutInflater inflater = LayoutInflater.from(getContext());
        convertView = inflater.inflate(R.layout.template, parent, false);
        viewHolder.line1 = convertView.findViewById(R.id.line1);
        viewHolder.line2 = convertView.findViewById(R.id.line2);
        viewHolder.line3 = convertView.findViewById(R.id.line3);
        viewHolder.title = convertView.findViewById(R.id.title);
        viewHolder.description = convertView.findViewById(R.id.description);
        viewHolder.imageView = convertView.findViewById(R.id.imageView);
    
        result = convertView;
    
        convertView.setTag(viewHolder);
    } else {
        viewHolder = (ViewHolder) convertView.getTag();
        result = convertView;
    }
    
    Animation animation = AnimationUtils.loadAnimation(mContext, (position > lastPosition) ? R.anim.up_from_bottom : R.anim.down_from_top);
    result.startAnimation(animation);
    lastPosition = position;
    
    
    viewHolder.title.setText(displayTemplate.getTitle());
    viewHolder.description.setText(displayTemplate.getDescription());
    
    Drawable drawable = parent.getResources().getDrawable(R.drawable.ic_warning, null);
    viewHolder.imageView.setImageDrawable(drawable);
    
    showModel(viewHolder.line1,displayTemplate.getLines().get(0));
    showModel(viewHolder.line2,displayTemplate.getLines().get(1));
    showModel(viewHolder.line3,displayTemplate.getLines().get(2));
    // Return the completed view to render on screen
    return convertView;}