Android自定义ListView与图像和文本示例

时间:2020-02-23 14:28:51  来源:igfitidea点击:

在本教程中,我们将看到Android自定义ListView示例。

因此,我们将创建自定义列表查看,其中每个列表项将具有与下面不同字体大小的国家/地区标志,国家/地区名称及其资本。

它广泛用于Android应用程序,以列出项目数并从列表中选择一个或者多个项目。

第1步:创建项目

创建一个Android应用程序ProjectNamed"CustomListViewExampleApp"。

第2步:创建布局

更改RES - >布局 - > Activity_main.xml如下所示:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:id="@+id/activity_main"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:paddingBottom="@dimen/activity_vertical_margin"
 android:paddingLeft="@dimen/activity_horizontal_margin"
 android:paddingRight="@dimen/activity_horizontal_margin"
 android:paddingTop="@dimen/activity_vertical_margin"
 tools:context="com.theitroad.customlistviewexampleapp.MainActivity">
 
 <ListView
 android:id="@+id/android:list"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 
</RelativeLayout>

我们将在设计视图中看到以下屏幕。

第3步:为行创建布局

正如我们在Activity_main.xml中声明listview小部件。
现在我们需要为单个行提供布局。

  • 转到res - >布局
  • 右键单击布局
  • 单击"新建 - >文件"。
  • 创建名为"row_item.xml"的文件,并在row_item.xml中粘贴以下代码。
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent" >
 <ImageView
 
 android:layout_rowSpan="2"
 android:layout_width="80dp"
 android:layout_height="70dp"
 
 android:scaleType="fitXY"
 android:id="@+id/imageViewFlag"
 android:layout_row="0"
 android:layout_column="0" 
 
 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_columnWeight="1"
 android:layout_marginLeft="10dp"
 android:textSize="30dp"
 android:textColor="#1E90FF"
 android:id="@+id/textViewCountry"
 android:layout_row="0"
 android:layout_column="1" 
 
 
 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_columnWeight="1"
 android:layout_marginLeft="10dp"
 android:textSize="20dp"
 android:textColor="#4B0082"
 android:id="@+id/textViewCapital"
 android:layout_row="1"
 android:layout_column="1" 
</GridLayout>

步骤4:为ListView创建ArrayAdapter

在创建捕获期之前,我们需要为自定义ListView行创建CustomCountrylist类。

package com.theitroad.customlistviewexampleapp;
 
import android.app.Activity;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;
 
import com.theitroad.customlistviewexampleapp.R;
 
public class CustomCountryList extends ArrayAdapter {
    private String[] countryNames;
    private String[] capitalNames;
    private Integer[] imageid;
    private Activity context;
 
    public CustomCountryList(Activity context, String[] countryNames, String[] capitalNames, Integer[] imageid) {
        super(context, R.layout.row_item, countryNames);
        this.context = context;
        this.countryNames = countryNames;
        this.capitalNames = capitalNames;
        this.imageid = imageid;
 
    }
 
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View row=convertView;
        LayoutInflater inflater = context.getLayoutInflater();
        if(convertView==null)
            row = inflater.inflate(R.layout.row_item, null, true);
        TextView textViewCountry = (TextView) row.findViewById(R.id.textViewCountry);
        TextView textViewCapital = (TextView) row.findViewById(R.id.textViewCapital);
        ImageView imageFlag = (ImageView) row.findViewById(R.id.imageViewFlag);
 
        textViewCountry.setText(countryNames[position]);
        textViewCapital.setText(capitalNames[position]);
        imageFlag.setImageResource(imageid[position]);
        return  row;
    }
}

此类用于填充ListView的数据。
GetView方法被调用以绘制每一行。

第5步:创造主动

更改src/main/packageName/mainActivity.java如下:

package com.theitroad.customlistviewexampleapp;
 
import android.app.ListActivity;
import android.graphics.Typeface;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;
 
import com.theitroad.customlistviewexampleapp.CustomCountryList;
import com.theitroad.customlistviewexampleapp.R;
 
 
public class MainActivity extends ListActivity {
 
    private ListView listView;
    private String countryNames[] = {
            "San Franceco",
            "China",
            "Nepal",
            "Bhutan"
    };
 
    private String capitalNames[] = {
            "Delhi",
            "Beijing",
            "Kathmandu",
            "Thimphu"
    };
 
 
    private Integer imageid[] = {
            R.drawable.San Franceco,
            R.drawable.china,
            R.drawable.nepal,
            R.drawable.bhutan
 
    };
 
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        //Setting header
        TextView textView = new TextView(this);
        textView.setTypeface(Typeface.DEFAULT_BOLD);
        textView.setText("List of Countries");
 
        ListView listView=(ListView)findViewById(android.R.id.list);
        listView.addHeaderView(textView);
 
        //For populating list data
        CustomCountryList customCountryList = new CustomCountryList(this, countryNames, capitalNames, imageid);
        listView.setAdapter(customCountryList);
 
        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int position, long l) {
                Toast.makeText(getApplicationContext(),"You Selected "+countryNames[position-1]+ " as Country",Toast.LENGTH_SHORT).show();        }
        });
    }
}

如果我们注意到,我们已扩展到此类的列表。
ListActity类提供了一些特定于ListView的方法。
我们已声明三个阵列,以处理国家文本视图,首都TextView和Flag ImageView和CustomCountrylist正在用于填充ListView中的数据。

由于我们将TextView添加到上面的代码中的标题作为标题,因此我们在设置Toast文本时使用CountyName [Position-1],如果我们不使用标题,那么它应该是CountryName [位置]。