如何制作像Redbus一样的座位预订布局

6
我正在开发一个巴士预订应用程序,我想添加座位预订布局,就像Red Bus App中那样。我使用GridView设计了布局,但它看起来像这样。
(图片)
我需要座位1和座位2之间的空间更小,然后在座位2和3之间有大的空间,再次在座位3和座位4之间有空间,就像座位1和2一样。在最后一排,我需要5个座位。我需要完全与Red Bus布局相同。
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>

选座活动

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;

}
}
1个回答

6
你不需要在这里使用gridview,相反你可以通过线性布局和imageview的组合动态创建此视图。
你可以在这里检查示例.. 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);
        }
    }

1
@varunjohn1990,你提供的样例非常有用。我们如何在第一行显示座位号为A1、A2、A3...,在第二行显示B1、B2、B3等?请帮助我。 - Pooja
1
@Pooja:这很容易做到...在我的示例中,'/'代表行的结尾...取2个变量,一个用于保存行数,另一个用于保存座位数,在if语句中,你会发现'/'的主体,只需根据情况初始化这两个变量并设置文本即可。 - varunjohn1990
@varunjohn1990 感谢您的回复。我是一名初级开发人员,我尝试了很多次,但它不起作用。我知道我这边有些问题,但请帮帮我。给我一些示例代码。 - Pooja
1
@Pooja:请通过邮件与我联系- varunjohn1990@gmail.com - varunjohn1990

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接