像HotStar App这样的布局

Question

我必须创建像HotStarApp 这样的布局,但我有点混淆best way这样做:

1. 我需要多个RecyclerViews还是单个RecyclerView就足够了？

2. 我是否需要调用多个JSON或单个JSON足以从服务器获取数据？

3. 我如何使用不同的 - 不同的布局,你可能也喜欢和必须观看剪辑

Answer 1

有了这个,您将能够创建相同的外观

1.-对于上方菜单选项卡,您必须布局TABS

2.-有关详细信息,请添加卡片

3.-分频器为您的部分,使用副标题

现在,关于你的问题:

1.只需一个RecyclerViews即可处理所有内容

2.最好的方法是为每个部分获取一个单独的JSON,因为你永远不知道每个部分的大小.这将有助于提高性能和清洁代码.

**

新的更新

**

您的主要布局活动

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.alphasystech.hotvideos.MainActivity">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <include
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                layout="@layout/toolbar_layout">

            </include>

            <android.support.design.widget.TabLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/tabLayout"
                app:tabMode="fixed"
                app:tabGravity="fill"
                app:tabTextAppearance="@style/MyTabStyle">
            </android.support.design.widget.TabLayout>

        </android.support.design.widget.AppBarLayout>

        <android.support.v4.view.ViewPager
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/viewPager">

        </android.support.v4.view.ViewPager>

    </RelativeLayout>

你的家庭片段布局(你也可以克隆这个MOVIES,SPORTS ...)

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".HomeFragment">

<!-- A RecyclerView with some commonly used attributes -->
<android.support.v7.widget.RecyclerView
    android:id="@+id/home_recyclerview"
    android:scrollbars="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

你的家庭片段的卡片布局(你也可以克隆这个MOVIES,SPORTS ......)

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/card_view"
    android:layout_margin="5dp"
    card_view:cardBackgroundColor="#81C784"
    card_view:cardCornerRadius="12dp"
    card_view:cardElevation="3dp"
    card_view:contentPadding="4dp" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="16dp" >

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:id="@+id/item_image"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:layout_marginRight="16dp"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/item_title"
            android:layout_toRightOf="@+id/item_image"
            android:layout_alignParentTop="true"
            android:textSize="30sp"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/item_detail"
            android:layout_toRightOf="@+id/item_image"
            android:layout_below="@+id/item_title"
            />

    </RelativeLayout>
</android.support.v7.widget.CardView>

截图:

我想,上面的例子会给你一个很好的方向:)

Answer 2

1. 我需要多个RecyclerViews还是单个RecyclerView就足够了？

单身RecyclerView就够了.

2. 我是否需要调用多个JSON或单个JSON足以从服务器获取数据？

单一JSON响应就足够了.

3. 我如何使用不同的 - 不同的布局,你可能也喜欢和必须观看剪辑

将UI的这一部分设为RecyclerView行.

如果您知道行中的最大项目数,这是最简单的解决方案.您的模型需要包含每行数据.

行布局xml示例:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ddd"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">


        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="16dp"
            android:text="You May Also Like"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textStyle="bold" />

        <View
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="1" />

        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="16dp"
            android:text="MORE" />
    </LinearLayout>


    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal">


        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.v7.widget.CardView
                android:id="@+id/item1_CV"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginBottom="4dp"
                android:layout_marginLeft="8dp"
                android:layout_marginRight="4dp"
                android:layout_marginTop="8dp"
                android:layout_weight="1"
                card_view:cardCornerRadius="4dp">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_alignParentEnd="true"
                        android:layout_alignParentLeft="true"
                        android:layout_alignParentRight="true"
                        android:layout_alignParentStart="true"
                        android:layout_below="@+id/item1_image"
                        android:background="#fff"
                        android:orientation="vertical"
                        android:padding="8dp">

                        <TextView
                            android:id="@+id/item1_title"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="Mere Rang Mein"
                            android:textColor="#000"
                            android:textSize="16sp" />

                        <TextView
                            android:id="@+id/item1_subTitle"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:singleLine="true"
                            android:text="Romance, Hindi, Life OK"
                            android:textAppearance="?android:attr/textAppearanceSmall"
                            android:textSize="12sp" />
                    </LinearLayout>

                    <ImageView
                        android:id="@+id/item1_image"
                        android:layout_width="match_parent"
                        android:layout_height="80dp"
                        android:background="#FF78aa" />
                </RelativeLayout>
            </android.support.v7.widget.CardView>


            <android.support.v7.widget.CardView
                android:id="@+id/item2_CV"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginBottom="4dp"
                android:layout_marginLeft="4dp"
                android:layout_marginRight="8dp"
                android:layout_marginTop="8dp"
                android:layout_weight="1"
                card_view:cardCornerRadius="4dp">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_alignParentEnd="true"
                        android:layout_alignParentLeft="true"
                        android:layout_alignParentRight="true"
                        android:layout_alignParentStart="true"
                        android:layout_below="@+id/item2_image"
                        android:background="#fff"
                        android:orientation="vertical"
                        android:padding="8dp">

                        <TextView
                            android:id="@+id/item2_title"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="Mere Rang Mein"
                            android:textColor="#000"
                            android:textSize="16sp" />

                        <TextView
                            android:id="@+id/item2_subTitle"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:singleLine="true"
                            android:text="Romance, Hindi, Life OK"
                            android:textAppearance="?android:attr/textAppearanceSmall"
                            android:textSize="12sp" />
                    </LinearLayout>

                    <ImageView
                        android:id="@+id/item2_image"
                        android:layout_width="match_parent"
                        android:layout_height="80dp"
                        android:background="#FF78aa" />
                </RelativeLayout>
            </android.support.v7.widget.CardView>

        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.v7.widget.CardView
                android:id="@+id/item3_CV"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp"
                android:layout_marginLeft="8dp"
                android:layout_marginRight="4dp"
                android:layout_marginTop="4dp"
                android:layout_weight="1"
                card_view:cardCornerRadius="4dp">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_alignParentEnd="true"
                        android:layout_alignParentLeft="true"
                        android:layout_alignParentRight="true"
                        android:layout_alignParentStart="true"
                        android:layout_below="@+id/item3_image"
                        android:background="#fff"
                        android:orientation="vertical"
                        android:padding="8dp">

                        <TextView
                            android:id="@+id/item3_title"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="Mere Rang Mein"
                            android:textColor="#000"
                            android:textSize="16sp" />

                        <TextView
                            android:id="@+id/item3_subTitle"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:singleLine="true"
                            android:text="Romance, Hindi, Life OK"
                            android:textAppearance="?android:attr/textAppearanceSmall"
                            android:textSize="12sp" />
                    </LinearLayout>

                    <ImageView
                        android:id="@+id/item3_image"
                        android:layout_width="match_parent"
                        android:layout_height="80dp"
                        android:background="#FF78aa" />
                </RelativeLayout>
            </android.support.v7.widget.CardView>


            <android.support.v7.widget.CardView
                android:id="@+id/item4_CV"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp"
                android:layout_marginLeft="4dp"
                android:layout_marginRight="8dp"
                android:layout_marginTop="4dp"
                android:layout_weight="1"
                card_view:cardCornerRadius="4dp">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_alignParentEnd="true"
                        android:layout_alignParentLeft="true"
                        android:layout_alignParentRight="true"
                        android:layout_alignParentStart="true"
                        android:layout_below="@+id/item4_image"
                        android:background="#fff"
                        android:orientation="vertical"
                        android:padding="8dp">

                        <TextView
                            android:id="@+id/item4_title"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="Mere Rang Mein"
                            android:textColor="#000"
                            android:textSize="16sp" />

                        <TextView
                            android:id="@+id/item4_subTitle"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:singleLine="true"
                            android:text="Romance, Hindi, Life OK"
                            android:textAppearance="?android:attr/textAppearanceSmall"
                            android:textSize="12sp" />
                    </LinearLayout>

                    <ImageView
                        android:id="@+id/item4_image"
                        android:layout_width="match_parent"
                        android:layout_height="80dp"
                        android:background="#FF78aa" />
                </RelativeLayout>
            </android.support.v7.widget.CardView>

        </TableRow>
    </TableLayout>
</LinearLayout>

结果:

Answer 3

1. 我需要多个 RecyclerView 还是单个 RecyclerView 就足够了？

带有 GridLayoutManager 的单个 Recyclerview 足以达到此目的。

2. 我是否需要调用多个 JSON，还是单个 JSON 就足以从服务器获取数据？

单个 JSON 响应即可完成您的工作。