Android 自定义列表视图布局_Android_Android Layout

Android 自定义列表视图布局

android android-layout

Android 自定义列表视图布局,android,android-layout,Android,Android Layout,我是android新手，我不知道如何让listivew看起来像什么现在我看到listview每行只能存储一个元素。我已经为此做了一个演示。定义主活动xml并为此创建行文件后，将实现如下所示的java代码。我希望这对你有用 activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com

我是android新手，我不知道如何让

listivew

看起来像什么
现在我看到

listview

每行只能存储一个元素。

我已经为此做了一个演示。定义主活动xml并为此创建行文件后，将实现如下所示的java代码。我希望这对你有用

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.assetdbdemo.MainActivity" >

    <ListView
        android:id="@+id/lstDetails"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:listSelector="@android:color/transparent"
        android:layout_alignParentTop="true" />

</RelativeLayout>

下面是我准备的简短的自定义列表教程。你必须遵循的步骤是：

创建自定义线布局

创建一个自定义类，该类保存要设置为行的值

创建一个自定义适配器，用于填充

列表视图

创建一个

列表视图

，并在

活动中初始化适配器并设置为列表视图


基本上，这些步骤用于创建自定义listview。当然，您应该有一些适当的数据集映射到listview。在这里，我将从Android的defauls软件包中获取tha数据，以便任何人都能够在没有错误的情况下尝试代码
1。创建自定义线条布局。
在这一步中，您应该创建一个XML布局，例如，line.XML
，它将形成每一行的布局。在res\layouts目录下创建此文件。在本例中，我创建了一个布局，看起来像您发布的图像。XML代码如下所示
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:gravity="center_vertical"
    android:padding="10dp" >

    <ImageView
        android:id="@+id/image"
        android:layout_width="50dp"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:src="@drawable/ic_launcher" />

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:gravity="center_vertical"
        android:layout_weight="1"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/header"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView"
            android:layout_marginLeft="15dp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/content"
            android:layout_marginLeft="15dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView"
            android:textStyle="italic" />

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

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1" >

                <ImageView
                    android:id="@+id/subimage1"
                    android:layout_width="20dp"
                    android:layout_height="match_parent"
                    android:layout_gravity="center"
                    android:layout_marginLeft="5dp"
                    android:src="@drawable/abc_ic_search_api_holo_light" />

                <TextView
                    android:id="@+id/subcontent1"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:gravity="center_vertical"
                    android:text="TextView"
                    android:textSize="10sp" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1" >

                <ImageView
                    android:id="@+id/subimage2"
                    android:layout_width="20dp"
                    android:layout_height="match_parent"
                    android:layout_gravity="center"
                    android:layout_marginLeft="5dp"
                    android:src="@drawable/abc_ic_voice_search_api_holo_light" />

                <TextView
                    android:id="@+id/subcontent2"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:gravity="center_vertical"
                    android:text="TextView"
                    android:textSize="10sp" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1" >

                <ImageView
                    android:id="@+id/subimage3"
                    android:layout_width="20dp"
                    android:layout_height="match_parent"
                    android:layout_gravity="center"
                    android:layout_marginLeft="5dp"
                    android:src="@drawable/abc_ic_go_search_api_holo_light" />

                <TextView
                    android:id="@+id/subcontent3"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:gravity="center_vertical"
                    android:text="TextView"
                    android:textSize="10sp" />
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

public class CustomItem {

    int image;
    int subImage1, subImage2, subImage3;
    String header;
    String content;
    String subContent1, subContent2, subContent3;

    public CustomItem(int image, int subImage1, int subImage2, int subImage3, String header, String content, String subContent1, String subContent2, String subContent3) {
        super();
        this.image = image;
        this.subImage1 = subImage1;
        this.subImage2 = subImage2;
        this.subImage3 = subImage3;
        this.header = header;
        this.content = content;
        this.subContent1 = subContent1;
        this.subContent2 = subContent2;
        this.subContent3 = subContent3;
    }

    public int getImage() {
        return image;
    }

    public void setImage(int image) {
        this.image = image;
    }

    public int getSubImage1() {
        return subImage1;
    }

    public void setSubImage1(int subImage1) {
        this.subImage1 = subImage1;
    }

    public int getSubImage2() {
        return subImage2;
    }

    public void setSubImage2(int subImage2) {
        this.subImage2 = subImage2;
    }

    public int getSubImage3() {
        return subImage3;
    }

    public void setSubImage3(int subImage3) {
        this.subImage3 = subImage3;
    }

    public String getHeader() {
        return header;
    }

    public void setHeader(String header) {
        this.header = header;
    }

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }

    public String getSubContent1() {
        return subContent1;
    }

    public void setSubContent1(String subContent1) {
        this.subContent1 = subContent1;
    }

    public String getSubContent2() {
        return subContent2;
    }

    public void setSubContent2(String subContent2) {
        this.subContent2 = subContent2;
    }

    public String getSubContent3() {
        return subContent3;
    }

    public void setSubContent3(String subContent3) {
        this.subContent3 = subContent3;
    }

}

3。创建将填充ListView的自定义适配器
这是一个将数据集映射到列表视图
行的类。它获取数据的列表
（或数组），并将它们放置在每行的相应位置。getView（）
方法完成了所有的工作。在此处定义所有的视图
s，然后通过从列表/数组中获取值来设置这些值。位置
参数也是列表
和列表视图
中的索引。下面是这个例子的代码
public class CustomAdapter extends ArrayAdapter<CustomItem> {

private final Activity context;
private final List<CustomItem> items;

public CustomAdapter(Activity context, List<CustomItem> items) {

    super(context, R.layout.line, items);
    this.context = context;
    this.items = items;
}

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

    LayoutInflater inflater = context.getLayoutInflater();
    View rowView = inflater.inflate(R.layout.line, null, true);

    ImageView image = (ImageView) rowView.findViewById(R.id.image);
    TextView header = (TextView) rowView.findViewById(R.id.header);
    TextView content = (TextView) rowView.findViewById(R.id.content);
    ImageView subimage1 = (ImageView) rowView.findViewById(R.id.subimage1);
    TextView subcontent1 = (TextView) rowView.findViewById(R.id.subcontent1);
    ImageView subimage2 = (ImageView) rowView.findViewById(R.id.subimage2);
    TextView subcontent2 = (TextView) rowView.findViewById(R.id.subcontent2);
    ImageView subimage3 = (ImageView) rowView.findViewById(R.id.subimage3);
    TextView subcontent3 = (TextView) rowView.findViewById(R.id.subcontent3);

    image.setImageResource(items.get(position).getImage());
    header.setText(items.get(position).getHeader()+" "+position);
    content.setText(items.get(position).getContent()+" "+position);
    subimage1.setImageResource(items.get(position).getSubImage1());
    subcontent1.setText(items.get(position).getSubContent1()+" "+1);
    subimage2.setImageResource(items.get(position).getSubImage2());
    subcontent2.setText(items.get(position).getSubContent2()+" "+2);
    subimage3.setImageResource(items.get(position).getSubImage3());
    subcontent3.setText(items.get(position).getSubContent3()+" "+3);


    return rowView;
}

整个活动
代码为
public class MainActivity extends Activity {

ListView list;
CustomAdapter customAdapter;
List<CustomItem> items = new ArrayList<CustomItem>();

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_mains);
    list = (ListView) findViewById(R.id.listView1);

    //Fill the list with random data
    items.add(new CustomItem(R.drawable.abc_ab_bottom_solid_dark_holo, 
            android.R.drawable.ic_btn_speak_now, 
            android.R.drawable.ic_input_get, 
            android.R.drawable.ic_dialog_map, 
            "Header", 
            "Content", 
            "Subcontent", 
            "Subcontent", 
            "Subcontent"));
    items.add(new CustomItem(android.R.drawable.ic_lock_power_off, 
            android.R.drawable.ic_input_add, 
            android.R.drawable.ic_lock_idle_alarm, 
            android.R.drawable.ic_delete, 
            "Header", 
            "Content", 
            "Subcontent", 
            "Subcontent", 
            "Subcontent"));     
    items.add(new CustomItem(R.drawable.ic_launcher, 
            android.R.drawable.ic_media_pause, 
            android.R.drawable.ic_menu_month, 
            android.R.drawable.ic_notification_clear_all, 
            "Header", 
            "Content", 
            "Subcontent", 
            "Subcontent", 
            "Subcontent"));

    items.add(new CustomItem(android.R.drawable.alert_light_frame, 
            android.R.drawable.ic_dialog_email, 
            android.R.drawable.ic_menu_edit, 
            android.R.drawable.ic_secure, 
            "Header", 
            "Content", 
            "Subcontent", 
            "Subcontent", 
            "Subcontent"));

    //Initialize the adapter
    customAdapter = new CustomAdapter(MainActivity.this, items);
    //Set the adapter to the listview
    list.setAdapter(customAdapter);

}

公共类MainActivity扩展活动{
列表视图列表；
自定义适配器自定义适配器；
列表项=新建ArrayList（）；
@凌驾
创建时的公共void（Bundle savedInstanceState）{
super.onCreate（savedInstanceState）；
setContentView（右布局、活动）；
列表=（ListView）findViewById（R.id.listView1）；
//用随机数据填充列表
项目。添加（新定制项目（R.drawable.abc\U ab\U bottom\U solid\U dark\U holo，
android.R.dravable.ic\u btn\u现在说话，
android.R.drawable.ic\u输入\u获取，
android.R.drawable.ic_对话框_地图，
“标题”，
“内容”，
“分包合同”，
“分包合同”，
“分包商”）；
items.add（新增自定义项）（android.R.drawable.ic\u锁定\u电源\u关闭，
android.R.drawable.ic\u输入\u添加，
android.R.drawable.ic锁定空闲报警，
android.R.drawable.ic_删除，
“标题”，
“内容”，
“分包合同”，
“分包合同”，
“分包商”）；
添加（新的自定义项（R.drawable.ic_启动器，
android.R.drawable.ic\u媒体\u暂停，
android.R.drawable.ic\u菜单\u月，
android.R.drawable.ic\u通知\u清除\u所有，
“标题”，
“内容”，
“分包合同”，
“分包合同”，
“分包商”）；
items.add（新的CustomItem（android.R.drawable.alert\u light\u框架，
android.R.drawable.ic_对话框_电子邮件，
android.R.drawable.ic_菜单_编辑，
android.R.drawable.ic_安全，
“标题”，
“内容”，
“分包合同”，
“分包合同”，
“分包商”）；
//初始化适配器
customAdapter=新的customAdapter（MainActivity.this，items）；
//将适配器设置为listview
list.setAdapter（customAdapter）；
}

}
当我在模拟器上运行这段代码时，它看起来像

希望这有帮助 你试过什么？由于ListView行的附加图像中的设计非常简单，在下面的教程中很容易操作，因此它肯定会帮助您。检查此链接更容易，但您需要根据需要构建xml要使用@MurtazaHussain link生成自定义列表视图行，您需要一个自定义列表视图适配器，该适配器有一个名为getView的方法。你需要覆盖这个方法，在里面膨胀你想要的布局（你以前做的，它在布局文件夹中）。谢谢！没问题！很高兴这有帮助：）
public class CustomAdapter extends ArrayAdapter<CustomItem> {

private final Activity context;
private final List<CustomItem> items;

public CustomAdapter(Activity context, List<CustomItem> items) {

    super(context, R.layout.line, items);
    this.context = context;
    this.items = items;
}

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

    LayoutInflater inflater = context.getLayoutInflater();
    View rowView = inflater.inflate(R.layout.line, null, true);

    ImageView image = (ImageView) rowView.findViewById(R.id.image);
    TextView header = (TextView) rowView.findViewById(R.id.header);
    TextView content = (TextView) rowView.findViewById(R.id.content);
    ImageView subimage1 = (ImageView) rowView.findViewById(R.id.subimage1);
    TextView subcontent1 = (TextView) rowView.findViewById(R.id.subcontent1);
    ImageView subimage2 = (ImageView) rowView.findViewById(R.id.subimage2);
    TextView subcontent2 = (TextView) rowView.findViewById(R.id.subcontent2);
    ImageView subimage3 = (ImageView) rowView.findViewById(R.id.subimage3);
    TextView subcontent3 = (TextView) rowView.findViewById(R.id.subcontent3);

    image.setImageResource(items.get(position).getImage());
    header.setText(items.get(position).getHeader()+" "+position);
    content.setText(items.get(position).getContent()+" "+position);
    subimage1.setImageResource(items.get(position).getSubImage1());
    subcontent1.setText(items.get(position).getSubContent1()+" "+1);
    subimage2.setImageResource(items.get(position).getSubImage2());
    subcontent2.setText(items.get(position).getSubContent2()+" "+2);
    subimage3.setImageResource(items.get(position).getSubImage3());
    subcontent3.setText(items.get(position).getSubContent3()+" "+3);


    return rowView;
}

    //Initialize the adapter
    customAdapter = new CustomAdapter(MainActivity.this, items);
    //Set the adapter to the listview
    list.setAdapter(customAdapter);

public class MainActivity extends Activity {

ListView list;
CustomAdapter customAdapter;
List<CustomItem> items = new ArrayList<CustomItem>();

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_mains);
    list = (ListView) findViewById(R.id.listView1);

    //Fill the list with random data
    items.add(new CustomItem(R.drawable.abc_ab_bottom_solid_dark_holo, 
            android.R.drawable.ic_btn_speak_now, 
            android.R.drawable.ic_input_get, 
            android.R.drawable.ic_dialog_map, 
            "Header", 
            "Content", 
            "Subcontent", 
            "Subcontent", 
            "Subcontent"));
    items.add(new CustomItem(android.R.drawable.ic_lock_power_off, 
            android.R.drawable.ic_input_add, 
            android.R.drawable.ic_lock_idle_alarm, 
            android.R.drawable.ic_delete, 
            "Header", 
            "Content", 
            "Subcontent", 
            "Subcontent", 
            "Subcontent"));     
    items.add(new CustomItem(R.drawable.ic_launcher, 
            android.R.drawable.ic_media_pause, 
            android.R.drawable.ic_menu_month, 
            android.R.drawable.ic_notification_clear_all, 
            "Header", 
            "Content", 
            "Subcontent", 
            "Subcontent", 
            "Subcontent"));

    items.add(new CustomItem(android.R.drawable.alert_light_frame, 
            android.R.drawable.ic_dialog_email, 
            android.R.drawable.ic_menu_edit, 
            android.R.drawable.ic_secure, 
            "Header", 
            "Content", 
            "Subcontent", 
            "Subcontent", 
            "Subcontent"));

    //Initialize the adapter
    customAdapter = new CustomAdapter(MainActivity.this, items);
    //Set the adapter to the listview
    list.setAdapter(customAdapter);

}