【问题标题】:How to make seat booking layout like redbus如何制作像redbus一样的座位预订布局
【发布时间】:2018-04-24 10:53:59
【问题描述】:

我正在开发一个巴士预订应用程序,我想在 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>

选座活动

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;

}
}

【问题讨论】:

    标签: android android-layout gridview


    【解决方案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);
            }
        }
    

    【讨论】:

    • @varunjohn1990 您提供的示例非常有用。我们如何将座位号显示为第一排的 A1、A2、A3.... 和第二排的 B1、B2、B3?请帮帮我。
    • @Pooja :这很容易做到。在我的示例中,'/' 代表行的结尾。取 2 个变量 1 保存行数,其他用于保存行座位数,如果声明你会发现 '/' 正文只是相应地初始化 2 变量并设置文本..
    • @varunjohn1990 感谢您的回复。我是初级开发人员,我尝试了很多但它不起作用。我知道我这边出了点问题,但请帮助我。给我一些示例代码。
    • @Pooja:通过邮件联系我 - varunjohn1990@gmail.com
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-08-09
    相关资源
    最近更新 更多