Swipe the screen on Android tabs, such as the YouTube / Google Music app

In its latest versions of its applications, Google has implemented a pretty cool way to scroll between tabs and clicking on the title bar. I was wondering if anyone has any more specific ideas on how this is done.

Here are some thoughts - feel free to criticize:

My initial thought is that this is not a standard TabActivityin which child actions are hosted. Infact, I don’t even think it’s a custom ActivityGroup. A series of tabs scrolls when scrolling, but does not switch the active tab.

Scrolling through the main contents of a tab shows an interesting behavior. I suspect there is a GestureListener in the main content area. As you scroll through the tabs, rows from the adjacent tab become visible. This seems to suggest that this is a horizontally scrollable group ListViews. It almost looks like a horizontal scrollable HTML div where all the content already exists but appears in view when it scrolls. I'm not sure how the rendering of strings is handled (traditionally strings are built and displayed when scrolling up / down the list not on the left and right). So maybe this is a regular implementation ListViewtoo? If you don't scroll side by side, this behaves the way you would expect regular ListView, including quick scrolling and a glow effect when removed.

The row of tabs is probably equal ScrollView, as evidenced by the glow effect when it sweeps along the edges. Tab row content is missing.

I am trying to create a mental model of the various parts that make up this really great piece of the user interface. Any ideas are greatly appreciated.

+5
source share
6 answers

the most valuable source of information on how to do this is the source from the IO 2011 app

Check out the ScheduleFragment and Workspace classes.

Thank.

+2
source

, : , , , . "" ( , , ), , , .

, . , , , , , . , , : , . ListView , ListView s. , , . .

+1

Youtube :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout ...>
    ...
    <TabRow android:id="@id/tabrow" .../>
    <Workspace android:id="@id/workspace" ...>
        <ListView android:id="@id/uploads" ... />
        <ListView android:id="@id/favorites" ... />
        <ListView android:id="@id/playlists" ... />
        <ListView android:id="@id/subscriptions" ... />
    </Workspace>
</LinearLayout>

Google , "":

  • com.google.android.youtube.ui.TabRow.

    TabRow HorizontalScrollView

  • com.google.android.youtube.ui.Workspace

    ViewGroup

, , , " ". , , . , . Someboby, goog, , .

: , Google lib . .

+1

.

GestureDetector.SimpleOnGestureDetector onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY).

, , , . e1 e2.

fals e onFling .

+1
+1

, , . :

http://developer.android.com/guide/topics/ui/actionbar.html#Tabs

Also, Chapter 14 of Android for Programmers - Application Based Approach (ISBN 0132121360) works great with this tab.

0
source

All Articles