如何在自定义ListView中对齐ImageView和TextView

Question

我创建了一个 Custom Adapter 以在 ListView 中同时显示 ImageView 和 TextView。但是 ImageView 显示在 Listview 的每一行的 TextView 的顶部。我在下面附上了应用程序的屏幕截图：

自定义适配器Class:

public class CustomeAdapter extends BaseAdapter {
    private Context context;
    private ListView listView;
    private ArrayList<PlayersModel> playersModelArrayList;

    public CustomeAdapter(Context context, ArrayList<PlayersModel> playersModelArrayList) {

        this.context = context;
        this.playersModelArrayList = playersModelArrayList;
    }

    @Override
    public int getViewTypeCount() {
        return getCount();
    }
    @Override
    public int getItemViewType(int position) {

        return position;
    }

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

    @Override
    public Object getItem(int position) {
        return playersModelArrayList.get(position);
    }

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

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


        if (convertView == null) {
            holder = new ViewHolder();
            LayoutInflater inflater = (LayoutInflater) context
                    .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            convertView = inflater.inflate(R.layout.lv_item, null, true);

            holder.icon = (TextView) convertView.findViewById(R.id.TextID);
            holder.tvname = (TextView) convertView.findViewById(R.id.name);
            holder.tvdescr = (TextView) convertView.findViewById(R.id.descr);
            holder.tvlink = (TextView) convertView.findViewById(R.id.link);
            holder.ImageIcon = (ImageView) convertView.findViewById(R.id.logoImageView);

            convertView.setTag(holder);
        }else {
            holder = (ViewHolder)convertView.getTag();


        }

        holder.ImageIcon.setImageResource(playersModelArrayList.get(position).getImageId());
        holder.icon.setText(playersModelArrayList.get(position).getICON());
        holder.tvname.setText(playersModelArrayList.get(position).getName());
        holder.tvdescr.setText(playersModelArrayList.get(position).getDescr());
        holder.tvlink.setText(playersModelArrayList.get(position).getLink());


            Glide.with(context)
                    .load("http://csalabs.in/wp-content/uploads/2017/10/CSA-Final-PNG-300x350.png")
                    .override(200,200)
                    .into(holder.ImageIcon);
            Log.d("Icon URL",holder.icon.toString());

        return convertView;
    }
    private class ViewHolder {

        protected TextView icon, tvname, tvdescr, tvlink;
        protected ImageView ImageIcon;
    }
}

布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:padding="10dp"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:onClick="buttonClickNew">

        <ImageView
            android:id="@+id/logoImageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scaleType="fitStart"
            android:adjustViewBounds="true"
            tools:srcCompat="@tools:sample/avatars[0]" />

        <TextView
            android:id="@+id/name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColor="#383838"
            android:layout_marginTop="10dp"
            android:textSize="15sp"
            android:textStyle="bold"
            android:gravity="center_vertical"

            android:textAppearance="?android:attr/textAppearanceMedium"
            android:paddingLeft="10dp"
            android:text="Name" />
        <TextView
            android:id="@+id/descr"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColor="#313131"
            android:textSize="12sp"
            android:gravity="center_vertical"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:paddingLeft="10dp"
            android:text="Country" />
        <TextView
            android:id="@+id/link"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColor="#383838"
            android:gravity="center_vertical"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:paddingLeft="10dp"
            android:text="@string/city"
            android:visibility="gone"/>
        <TextView
            android:id="@+id/TextID"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColor="#313131"
            android:textSize="12sp"
            android:gravity="center_vertical"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:paddingLeft="10dp"/>


    </LinearLayout>
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:background="@color/colorAccent"/>

</LinearLayout>

如何在TextView的左边对齐ImageView？提前致谢。顺便说一句，我是 android 和 java.

的新手

Answer 1

试试这个

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="wrap_content"
    android:orientation="vertical"
    android:padding="10dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/logoImageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:scaleType="fitStart"
            tools:srcCompat="@tools:sample/avatars[0]" />

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="buttonClickNew"
            android:orientation="vertical">


            <TextView
                android:id="@+id/name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:gravity="center_vertical"
                android:paddingLeft="10dp"
                android:text="Name"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textColor="#383838"
                android:textSize="15sp"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/descr"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_vertical"
                android:paddingLeft="10dp"
                android:text="Country"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textColor="#313131"
                android:textSize="12sp" />

            <TextView
                android:id="@+id/link"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_vertical"
                android:paddingLeft="10dp"
                android:text="city"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textColor="#383838"
                android:visibility="visible" />

            <TextView
                android:id="@+id/TextID"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_vertical"
                android:paddingLeft="10dp"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textColor="#313131"
                android:textSize="12sp" />


        </LinearLayout>

    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="10dp"
        android:background="@color/colorAccent" />

</LinearLayout>

Answer 2

这样使用：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:padding="10dp"
android:orientation="vertical">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:onClick="buttonClickNew">

 <ImageView
        android:id="@+id/logoImageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitStart"
        android:adjustViewBounds="true"
        tools:srcCompat="@tools:sample/avatars[0]" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:onClick="buttonClickNew">

    <TextView
        android:id="@+id/name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="#383838"
        android:layout_marginTop="10dp"
        android:textSize="15sp"
        android:textStyle="bold"
        android:gravity="center_vertical"

        android:textAppearance="?android:attr/textAppearanceMedium"
        android:paddingLeft="10dp"
        android:text="Name" />
    <TextView
        android:id="@+id/descr"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="#313131"
        android:textSize="12sp"
        android:gravity="center_vertical"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:paddingLeft="10dp"
        android:text="Country" />
    <TextView
        android:id="@+id/link"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="#383838"
        android:gravity="center_vertical"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:paddingLeft="10dp"
        android:text="@string/city"
        android:visibility="gone"/>
    <TextView
        android:id="@+id/TextID"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="#313131"
        android:textSize="12sp"
        android:gravity="center_vertical"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:paddingLeft="10dp"/>`enter code here`

</LinearLayout>
</LinearLayout>
<View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:layout_marginTop="10dp"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:background="@color/colorAccent"/>

</LinearLayout>

Answer 3

尝试将您的文本包装成垂直方向的分隔 LinearLayout，然后将此 LinearLayout 与文本放在与 ImageView 相同的水平上，放在另一个 LinearLayout 中，方向 ="horizontal"

而且，您应该记住渲染和测量性能。您可以在 https://android.jlelse.eu/constraint-layout-performance-870e5f238100

中阅读相关内容

<LinearLayout 
    android:orientation="horizontal">
  <ImageView 
     android:layout_width="0dp"
     android:layout_weight="1" // try to read about this parameter more
  />
  <LinearLayout
     android:layout_width="0dp"
     android:layout_weight="4"
     android:orientation="vertical">

    <TextView ... />
    <TextView ... />
    <TextView ... />
  </LinearLayout>
</LinearLayout>

Answer 4

尝试在具有水平方向的父线性布局下创建两个垂直方向的线性布局。

将第二个线性布局的宽度设置为match_parent，图像布局应为固定宽度值。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    android:padding="10dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="buttonClickNew"
        android:orientation="horizontal">


        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent">

            <ImageView

                android:id="@+id/logoImageView"
                android:layout_width="50dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:scaleType="fitXY"
                tools:srcCompat="@tools:sample/avatars[0]" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:id="@+id/name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:gravity="center_vertical"
                android:paddingLeft="10dp"
                android:text="Name"
                android:textAppearance="?android:attr/textAppearanceMedium"

                android:textColor="#383838"
                android:textSize="15sp"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/descr"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_vertical"
                android:paddingLeft="10dp"
                android:text="Country"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textColor="#313131"
                android:textSize="12sp" />

            <TextView
                android:id="@+id/link"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_vertical"
                android:paddingLeft="10dp"
                android:text="City"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textColor="#383838"
                android:visibility="gone" />

            <TextView
                android:id="@+id/TextID"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_vertical"
                android:paddingLeft="10dp"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textColor="#313131"
                android:textSize="12sp" />

        </LinearLayout>


    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="10dp"
        android:background="@color/colorAccent" />

</LinearLayout>

Answer 5

为了简化您的 xml，您应该看看 ConstraintLayout

要使用它，请通过添加 implementation 'com.android.support.constraint:constraint-layout:1.1.3'

在您的应用 gradle 中导入

然后，重构你的 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">

    <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/colorAccent" android:id="@+id/view"
            tools:layout_editor_absoluteX="0dp" app:layout_constraintTop_toBottomOf="@+id/logoImageView"
            android:layout_marginTop="8dp"/>
    <ImageView
            android:layout_width="64dp"
            android:layout_height="64dp" tools:srcCompat="@tools:sample/avatars"
            android:id="@+id/logoImageView"
            app:layout_constraintStart_toStartOf="parent" android:layout_marginStart="8dp"
            android:layout_marginTop="8dp" app:layout_constraintTop_toTopOf="parent"/>
    <TextView
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:id="@+id/name"
            tools:text="Name"
            android:textAppearance="@style/TextAppearance.AppCompat" android:textStyle="bold"
            android:layout_marginBottom="8dp"
            app:layout_constraintBottom_toTopOf="@+id/descr" app:layout_constraintStart_toEndOf="@+id/logoImageView"
            android:layout_marginStart="8dp"/>
    <TextView
            tools:text="Description"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/descr" android:textColor="#313131"
            android:layout_marginBottom="8dp"
            app:layout_constraintBottom_toBottomOf="@+id/logoImageView"
            app:layout_constraintStart_toEndOf="@+id/logoImageView" android:layout_marginStart="8dp"/>
</android.support.constraint.ConstraintLayout>

如何在自定义ListView中对齐ImageView和TextView

How to align ImageView and TextView in Custom ListView

java

android

custom-adapter