问题
I am working on a bus booking app and I want to add seat booking layout like in the Red Bus App. I design layout using GridView but it looks like
What I have What I want
I need less space between Seat 1 and Seat 2 then big space between Seat 2 and 3 and again space between seat 3 and seat 4 as seat 1 and 2. And in last row i need 5 seats. I need exactly same as red bus layout.
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);
}
}
}
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:
You don't need to use a gridview here, instead you can dynamically create this view with the combinations of linear layout and imageview..
You can check the sample here.. https://github.com/varunjohn/Booking-Seats-Layout-Sample
Full Code here.. 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/"
+ "_________________/";
Create a string like this, the code below will make the booking layout out of it..
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);
}
}
来源：https://stackoverflow.com/questions/49999901/how-to-make-seat-booking-layout-like-redbus