android - 如何制作像redbus一样的座位预订布局

Question

我正在开发一个巴士预订应用程序，我想像在 Red Bus 应用程序中一样添加座位预订布局。我使用 GridView 设计布局，但它看起来像

^{我有什么 我想要什么}

我需要座位 1 和座位 2 之间的空间较小，然后座位 2 和 3 之间的空间较大，座位 3 和座位 4 之间的空间也需要座位 1 和 2。最后一排我需要 5 个座位​​。我需要与红色总线布局完全相同。

XML

<RelativeLayout
            android:id="@+id/seatLayoutLowerMain"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_below="@+id/seatLegendLayout"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10.0dip"
            android:background="@drawable/seat_layout_border"
            android:paddingBottom="5.0dp"
            android:paddingRight="5.0dp" >

            <GridView
                android:id="@+id/gridView1"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_below="@+id/driver"
                android:layout_margin="4dp"
                android:columnWidth="100dp"
                android:gravity="center"
                android:numColumns="5"
                android:stretchMode="columnWidth" >
            </GridView>

            <RelativeLayout
                android:id="@+id/driver"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:layout_alignRight="@+id/gridView1"
                android:layout_marginRight="20.0dp"
                android:layout_marginTop="5.0dp"
                android:background="@drawable/steering_icon"
                android:orientation="horizontal" >
            </RelativeLayout>
        </RelativeLayout>

SeatSelection Activity

public class SeatSelection extends AppCompatActivity implements AdapterView.OnItemClickListener{

GridView gridView;
ArrayList<Item> gridArray = new ArrayList<Item>();
CustomGridViewAdapter customGridAdapter;
public Bitmap seatIcon;
public Bitmap seatSelect;

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

    seatIcon = BitmapFactory.decodeResource(this.getResources(), R.drawable.seat_layout_screen_nor_avl);
    seatSelect = BitmapFactory.decodeResource(this.getResources(), R.drawable.seat_layout_screen_nor_std);
    totalSeat(49);

    gridView = (GridView) findViewById(R.id.gridView1);
    customGridAdapter = new CustomGridViewAdapter(this, R.layout.seatrow_grid, gridArray);
    gridView.setAdapter(customGridAdapter);
    gridView.setOnItemClickListener(this);
}

public void totalSeat(int n)
{
    for (int i = 1; i <= n; ++i)
    {
        gridArray.add(new Item(seatIcon, "Seat " + i));

    }
}

public void seatSelected(int pos)
{
    gridArray.remove(pos);
    gridArray.add(pos, new Item(seatSelect, "Selected"));
    customGridAdapter.notifyDataSetChanged();
}

public void seatDeselcted(int pos)
{

    gridArray.remove(pos);
    int i = pos + 1;
    gridArray.add(pos, new Item(seatIcon, "Seat" + i));
    customGridAdapter.notifyDataSetChanged();
}

@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id)
{

    Item item = gridArray.get(position);
    Bitmap seatcompare = item.getImage();
    if (seatcompare == seatIcon)
    {
        seatSelected(position);
    }
    else
    {
        seatDeselcted(position);

    }

}

}

自定义 GridView 适配器

public class CustomGridViewAdapter extends ArrayAdapter<Item>
{

Context context;
int layoutResourceId;
ArrayList<Item> data = new ArrayList<Item>();

public CustomGridViewAdapter(Context context, int layoutResourceId, ArrayList<Item> data)
{
    super(context, layoutResourceId, data);
    this.layoutResourceId = layoutResourceId;
    this.context = context;
    this.data = data;
}

@Override
public View getView(int position, View convertView, ViewGroup parent)
{
    View row = convertView;
    RecordHolder holder = null;

    try
    {
        if (row == null)
        {
            LayoutInflater inflater = ((Activity) context).getLayoutInflater();
            row = inflater.inflate(layoutResourceId, parent, false);

            holder = new RecordHolder();
            holder.txtTitle = (TextView) row.findViewById(R.id.item_text);
            holder.imageItem = (ImageView) row.findViewById(R.id.item_image);
            row.setTag(holder);
        }
        else
        {
            holder = (RecordHolder) row.getTag();
        }

        Item item = data.get(position);
        holder.txtTitle.setText(item.getTitle());
        holder.imageItem.setImageBitmap(item.getImage());
    } catch (Exception e)
    {
        e.printStackTrace();
    }
    return row;
}

public static class RecordHolder
{
    public TextView txtTitle;
    public ImageView imageItem;

}
}

Answer 1

你不需要在这里使用gridview，而是你可以使用线性布局和imageview的组合动态创建这个 View ..

您可以在此处查看示例.. https://github.com/varunjohn/Booking-Seats-Layout-Sample

完整代码在这里.. https://github.com/varunjohn/Booking-Seats-Layout-Sample/blob/master/app/src/main/java/com/varun/seatlayout/MainActivity.java

 String seats = 
          "_UUUUUUAAAAARRRR_/"
        + "_________________/"
        + "UU__AAAARRRRR__RR/"
        + "UU__UUUAAAAAA__AA/"
        + "AA__AAAAAAAAA__AA/"
        + "AA__AARUUUURR__AA/"
        + "UU__UUUA_RRRR__AA/"
        + "AA__AAAA_RRAA__UU/"
        + "AA__AARR_UUUU__RR/"
        + "AA__UUAA_UURR__RR/"
        + "_________________/"
        + "UU_AAAAAAAUUUU_RR/"
        + "RR_AAAAAAAAAAA_AA/"
        + "AA_UUAAAAAUUUU_AA/"
        + "AA_AAAAAAUUUUU_AA/"
        + "_________________/";

像这样创建一个字符串，下面的代码将从中创建预订布局..

LinearLayout layoutSeat = new LinearLayout(this);
    LinearLayout.LayoutParams params = new 
 LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 
 ViewGroup.LayoutParams.WRAP_CONTENT);
    layoutSeat.setOrientation(LinearLayout.VERTICAL);
    layoutSeat.setLayoutParams(params);
    layoutSeat.setPadding(8 * seatGaping, 8 * seatGaping, 8 * 
 seatGaping, 8 * seatGaping);
    layout.addView(layoutSeat);

    LinearLayout layout = null;

    int count = 0;

    for (int index = 0; index < seats.length(); index++) {
        if (seats.charAt(index) == '/') {
            layout = new LinearLayout(this);
            layout.setOrientation(LinearLayout.HORIZONTAL);
            layoutSeat.addView(layout);
        } else if (seats.charAt(index) == 'U') {
            count++;
            TextView view = new TextView(this);
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(seatSize, seatSize);
            layoutParams.setMargins(seatGaping, seatGaping, seatGaping, seatGaping);
            view.setLayoutParams(layoutParams);
            view.setPadding(0, 0, 0, 2 * seatGaping);
            view.setId(count);
            view.setGravity(Gravity.CENTER);
            view.setBackgroundResource(R.drawable.ic_seats_booked);
            view.setTextColor(Color.WHITE);
            view.setTag(STATUS_BOOKED);
            view.setText(count + "");
            view.setTextSize(TypedValue.COMPLEX_UNIT_DIP, 9);
            layout.addView(view);
            seatViewList.add(view);
            view.setOnClickListener(this);
        } else if (seats.charAt(index) == 'A') {
            count++;
            TextView view = new TextView(this);
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(seatSize, seatSize);
            layoutParams.setMargins(seatGaping, seatGaping, seatGaping, seatGaping);
            view.setLayoutParams(layoutParams);
            view.setPadding(0, 0, 0, 2 * seatGaping);
            view.setId(count);
            view.setGravity(Gravity.CENTER);
            view.setBackgroundResource(R.drawable.ic_seats_book);
            view.setText(count + "");
            view.setTextSize(TypedValue.COMPLEX_UNIT_DIP, 9);
            view.setTextColor(Color.BLACK);
            view.setTag(STATUS_AVAILABLE);
            layout.addView(view);
            seatViewList.add(view);
            view.setOnClickListener(this);
        } else if (seats.charAt(index) == 'R') {
            count++;
            TextView view = new TextView(this);
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(seatSize, seatSize);
            layoutParams.setMargins(seatGaping, seatGaping, seatGaping, seatGaping);
            view.setLayoutParams(layoutParams);
            view.setPadding(0, 0, 0, 2 * seatGaping);
            view.setId(count);
            view.setGravity(Gravity.CENTER);
            view.setBackgroundResource(R.drawable.ic_seats_reserved);
            view.setText(count + "");
            view.setTextSize(TypedValue.COMPLEX_UNIT_DIP, 9);
            view.setTextColor(Color.WHITE);
            view.setTag(STATUS_RESERVED);
            layout.addView(view);
            seatViewList.add(view);
            view.setOnClickListener(this);
        } else if (seats.charAt(index) == '_') {
            TextView view = new TextView(this);
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(seatSize, seatSize);
            layoutParams.setMargins(seatGaping, seatGaping, seatGaping, seatGaping);
            view.setLayoutParams(layoutParams);
            view.setBackgroundColor(Color.TRANSPARENT);
            view.setText("");
            layout.addView(view);
        }
    }