如何使座位预订布局像redbus

时间:2018-04-24 10:53:59

标签: android android-layout gridview

我正在开发一个巴士预订应用程序,我想在红色巴士应用程序中添加座位预订布局。我使用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活动

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);

    }

}

}

CustomGridViewAdapter

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;

}
}

2 个答案:

答案 0 :(得分:1)

您无需在此处使用gridview,而是可以结合使用线性布局和imageview来动态创建此视图。

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

答案 1 :(得分:0)

在Github上查看此示例项目。

https://github.com/TakeoffAndroid/SeatBookingRecyclerView