Android 方形平铺列表

Question

我目前正在编写一个应用程序，有人建议我尝试使用带有图块的方形列表而不是标准列表。我在它的外观下方包含了一个示例模型。我是 android 的新手，不太清楚我该怎么做。

非常感谢任何帮助。谢谢！

Answer 1

您将不得不使用 2 列的 GridView。

假设您有一些警报模型。

public class Alarm {
    private String title;
    private String time;
    private int color;

    public Alarm(String title, String time, int color) {
        this.title = title;
        this.time = time;
        this.color = color;
    }
}

您必须创建要在 GridView 中使用的自定义布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000">

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="22sp"
    android:id="@+id/title"
    android:textColor="#FFFFFF"
    android:text="title"
    android:layout_centerHorizontal="true"
    android:layout_margin="20dp"
    />

<TextView android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:textSize="18sp"
    android:id="@+id/time"
    android:layout_below="@id/title"
    android:text="time"
    android:layout_centerHorizontal="true"
    android:layout_margin="20dp"
    android:textColor="#FFFFFF"/>

<ImageView
    android:id="@+id/image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/time"
    android:layout_centerHorizontal="true"
    android:src="@android:drawable/ic_media_play"/>

</RelativeLayout>

并创建一个适配器，就像您在使用列表视图时所做的那样

public class AlarmGridAdapter extends BaseAdapter {

private Context context;
private List<Alarm> alarms;

public AlarmGridAdapter(Context context, List<Alarm> alarms) {
    this.context = context;
    this.alarms = alarms;
}

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

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

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

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    LayoutInflater layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    View root = layoutInflater.inflate(R.layout.grid_item, parent, false);

    Alarm alarm = alarms.get(position);

    TextView titleText = (TextView) root.findViewById(R.id.title);
    TextView timeText = (TextView) root.findViewById(R.id.time);

    root.setBackgroundColor(alarm.getColor());
    titleText.setText(alarm.getTitle());
    timeText.setText(alarm.getTime());

    return root;
}
}

activity只包含一个网格视图，列数为2，vertical/horizontal间距为0

<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" android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

<GridView
    android:id="@+id/grid"
    android:layout_width="match_parent"
    android:numColumns="2"
    android:horizontalSpacing="0dp"
    android:verticalSpacing="0sp"
    android:layout_height="match_parent" />

</RelativeLayout>

最后，在 activity（或片段）中：

private GridView gridView;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    gridView = (GridView) findViewById(R.id.grid);

    Alarm alarm1 = new Alarm("Alarm 1", "10:04:16", Color.parseColor("#39C6F4"));
    Alarm alarm2 = new Alarm("Alarm 2", "10:04:16", Color.parseColor("#A33293"));
    Alarm alarm3 = new Alarm("Alarm 3", "10:04:16", Color.parseColor("#F79922"));
    Alarm alarm4 = new Alarm("Alarm 4", "10:04:16", Color.parseColor("#84C542"));

    AlarmGridAdapter adapter = new AlarmGridAdapter(this, Arrays.asList(alarm1, alarm2, alarm3, alarm4));
    gridView.setAdapter(adapter);
}

结果：

Android 方形平铺列表

Android square tiled list

android

list

tile