问题
I have a 2 step question here: 1) How do I display a time slider UI which scrolls horizontally upon touch in a 24-hour format? 2) How do I divide it into a 24 hour format with each slot consisting of a 1 hour slot each?
The time slot is divided into hourly increments, such that only 8 hours are visible at a time ( but it's actually a 24 hour time slider which scrolls horizontally) Also, I am planning to make it such that based on the start and end time returned by the JSON I am using, it shows the available time slot in green and non-available time slot in gray ( but that's from data perspective, planning to implement that next once I get the slider working, just to give an oversight of what I am planning to achieve)
I have the code chalked out for the cardview as below ( which is in a recyclerview), only struggling with the notion of what's the best way to implement a time slider. any help appreciated!
Here's the cardview code without the timeslider included :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/event_card_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:id="@+id/event_card_view"
android:layout_width="match_parent"
android:layout_height="120dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:cardBackgroundColor="@color/white"
android:orientation="vertical"
app:cardCornerRadius="1dp"
app:cardElevation="4dp">
<LinearLayout
android:id="@+id/card_view_linear_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
android:orientation="horizontal">
<ImageView
android:id="@+id/cover_image_view"
android:layout_width="116dp"
android:layout_height="82dp"
android:contentDescription="@null"
android:scaleType="fitCenter"
tools:src="@drawable/ic_rabbit" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="@+id/title_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="8dp"
android:ellipsize="end"
android:gravity="start"
android:lineSpacingExtra="0sp"
android:lineSpacingMultiplier="1.2"
android:maxLines="2"
android:textAppearance="@style/TextAppearance.Text.Graphik.Semibold"
android:textColor="@color/black"
android:textSize="14sp"
android:textStyle="bold"
tools:text="Content Error" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/title_text_view">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/seating_capacity"
android:layout_marginStart="20dp"
android:drawableStart="@drawable/ic_seats"
android:textAppearance="@style/TextAppearance.Text.Graphik.Regular"
android:textColor="#6f6f6f"
tools:text="5"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="9dp"
android:id="@+id/floor_number"
android:layout_toEndOf="@id/seating_capacity"
android:textAppearance="@style/TextAppearance.Text.Graphik.Regular"
android:text="9th Floor"
android:textColor="#6f6f6f"
android:drawableStart="@drawable/ic_floors"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:id="@+id/room_price"
android:layout_marginEnd="20dp"
android:textAppearance="@style/TextAppearance.Text.Graphik.Semibold"
android:text="$50/hr"
android:textColor="#232527"
/>
</RelativeLayout>
</RelativeLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
Happy to share more code or any details if need be! Also, would help if you could add your solutions with respect to my code. thanks in advance!
Here are more details on the JSON and activity and adapter classes I am using for more details: https://pastebin.com/cBFQeHKU ( JSON class). Please note: the timeline reflects the data in "bookings" section as in started_at and ended_at time there for the booked part (grayed out part) and rest of the times in 24 hours it's supposed to display available. A little bit of context to map it: say the timeline displays 24 hours and the room is booked from 11:01 am to 11:30 am, and 1:05 pm and 1:45 pm, it will gray out the slot between 11 am to 11:30 am and 1 pm to 2 pm. So it's only supposed to gray out in 30-minute increments making it easier to map it out.
Here are my model classes: https://pastebin.com/LBH7B9YY ( this class to retrieve individual data)
here's a second model class the retrieves the data above as an array list:
public class AllRoomsResponse extends ArrayList<AllRooms>{
}
here's my fragment: https://pastebin.com/gt2kgm25
here's my adapter: https://pastebin.com/0neKYuKF
here's my presenter where I make the call to API: https://pastebin.com/GCuTKNwp
and finally, here's datetimeutils function which I use for returning date used in the fragment code :
public static Date getSelectedRoomDateFormat(String date) {
try {
return new SimpleDateFormat("EEE, MMM d",Locale.US).parse(date);
} catch (ParseException e) {
Timber.e(e, "getIsoFormat() exception log");
}
return null;
}
Open to sharing more details for context or as needed.
来源：https://stackoverflow.com/questions/60254228/how-do-you-display-24-hour-time-format-in-hourly-increments-on-a-time-slider-in