Question

我必须创建类似HotStar App的布局，但我有点混淆这样做的best way：

我是否需要多个RecyclerViews或单个RecyclerView就够了？
我是否需要调用多个JSON或单个JSON足以获取来自服务器的数据？
我如何使用不同的 - 不同的布局，你也喜欢和必须观看剪辑

Answer 1

通过这种方式，您将能够创建相同的外观

1 .- 对于上方菜单标签，您必须布局TABS

2 .- 有关详情部分，请添加CARDS

3 .- 您的部分的分隔线，使用SUBHEADERS

现在，关于您的问题：

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

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

**

NEW UPDATE

**

您的主要布局活动

<?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"/>

您家庭片段的卡片布局（您也可以将其克隆为电影，体育......）

<?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

我是否需要多个RecyclerViews或单个RecyclerView就足够了？

单RecyclerView就够了。

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

单JSON响应就足够了。

如何使用不同的 - 不同的布局，您可能也喜欢并且必须观看剪辑

将这部分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

我是否需要多个RecyclerViews或单个RecyclerView就足够了？

使用GridLayoutManager进行单一Recyclerview就足够了。

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

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

Answer 4

您可以先完成TABS的布局，然后在ViewPager中显示您的CARDS。

像这样......

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar = (Toolbar)findViewById(R.id.toolBar);
        setSupportActionBar(toolbar);
        tabLayout = (TabLayout)findViewById(R.id.tabLayout);
        viewPager = (ViewPager)findViewById(R.id.viewPager);

        viewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager());
        viewPagerAdapter.addFragments...

Answer 5

    Do I need multiple RecyclerViews or single RecyclerView is enough?

单个RecyclerView。

    Do I need to call multiple JSONs or single JSON is enough to fetch data from server?

来自服务器的单个JSON数据将完成您的工作。

    How Do I use different - different layouts for You May Also Like and Must Watch Clips

使用具有多种视图类型的recyclerview

public class MyAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
    class ViewHolder0 extends RecyclerView.ViewHolder {
        ...
    }

    class ViewHolder2 extends RecyclerView.ViewHolder {
        ...
    }

    @Override
    public int getItemViewType(int position) {
        // Just as an example, return 0 or 2 depending on position
        // Note that unlike in ListView adapters, types don't have to be contiguous
        return position % 2 * 2;
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
         switch (viewType) {
             case 0: return new ViewHolder0(...);
             case 2: return new ViewHolder2(...);
             ...
         }
    }
}

将RecyclerView与标题和普通项目类型一起使用

Answer 6

将此作为您的布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    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/coordinator"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/primary"
            android:theme="@style/ToolbarStyle"
            android:gravity="center_vertical"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_scrollFlags="scroll|enterAlways|snap"
            style="@style/bold" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/TabLayoutStyle"
            android:animateLayoutChanges="true"
            app:tabMode="scrollable"
            app:tabTextAppearance="@style/TabStyle"/>

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

    <android.support.v4.view.ViewPager
        android:id="@+id/main_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="fill_vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

当您滚动布局时，CoordinatorLayout + AppBarLayout会使工具栏向上滚动
为ViewPager中的网页创建一个片段并为其编写FragmentStatePagerAdapter
不要忘记调用tabLayout.setupWithViewPager（viewPager）来膨胀TabLayout
有关示例项目，请参阅this
在您的片段中，使用RecyclerView GridLayoutManager和spanCount 2
在RecyclerView.Adapter实施中，使用getItemViewType指定所需的视图类型数。在屏幕截图中，您看起来只有2种类型（如果您希望视频图块是单独的视图类型，则为3种。请注意，您仍然可以对不同的视图类型使用相同的布局，只需在每个视图中隐藏/显示所需的视图持有人。这将减少布局重复）。 Read this知道如何制作一个。
使用CardView制作图片卡
使用Picasso，Glide或Fresco在这些卡片中加载图片（与Fresco相比，Picasso和Glide更易于使用，但壁画更适合内存）< / p>

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

这完全取决于你，你可以采用任何一种方式，但是在单个请求中获取所有数据将使得获取更快。

PS：您可以使用GSON来解析您的Json并让自己保持一点理智

Answer 7

我是否需要多个RecyclerViews或单个RecyclerView就足够了？

单一就足够了。

我是否需要调用多个JSON或单个JSON就足以获取来自服务器的数据？

单个JSON就足够了。

我如何使用不同的 - 不同的布局，你也喜欢和必须观看剪辑

部分标题的单一布局，因为它们看起来相同
1＆＃34;你可能也喜欢＆＃34;项目
1＃布局＆＃34;必须观看剪辑＆＃34;项目，因为它们是不同的：它们有＆＃34;分钟＆＃34;标签和＆＃34;播放＆＃34;按钮。您可以使用相同的布局并在不需要时隐藏这些视图，这取决于您

使用库SectionedRecyclerViewAdapter，您可以添加不同的＆＃34;部分＆＃34;在您的RecyclerView中，每个部分都有自己的标题，如下图所示：

您需要创建＆＃34;部分＆＃34;类：

class MustWatchClipsSection extends StatelessSection {

    String title;
    List<Clip> clipList;

    public MustWatchClipsSection(String title, List<Clip> clipList) {
        // call constructor with layout resources for this Section header, footer and items 
        super(R.layout.section_header, R.layout.section_footer,  R.layout.section_item);

        this.title = title;
        this.clipList = clipList;
    }

    @Override
    public int getContentItemsTotal() {
        return clipList.size(); // number of items of this section
    }

    @Override
    public RecyclerView.ViewHolder getItemViewHolder(View view) {
        // return a custom instance of ViewHolder for the items of this section
        return new MyItemViewHolder(view);
    }

    @Override
    public void onBindItemViewHolder(RecyclerView.ViewHolder holder, int position) {
        MyItemViewHolder itemHolder = (MyItemViewHolder) holder;

        // bind your view here
        itemHolder.tvItem.setText(clipList.get(position).getName());
    }

    @Override
    public RecyclerView.ViewHolder getHeaderViewHolder(View view) {
        return new SimpleHeaderViewHolder(view);
    }

    @Override
    public void onBindHeaderViewHolder(RecyclerView.ViewHolder holder) {
        MyHeaderViewHolder headerHolder = (MyHeaderViewHolder) holder;

        // bind your header view here
        headerHolder.tvItem.setText(date);
    }
}

然后使用您的部分设置RecyclerView：

// Create an instance of SectionedRecyclerViewAdapter 
SectionedRecyclerViewAdapter sectionAdapter = new SectionedRecyclerViewAdapter();

MayAlsoLikeSection mySection1 = new MayAlsoLikeSection("You May Also Like", mediaList);
MustWatchClipsSection mySection2 = new MustWatchClipsSection("Must Watch Clips", clipList);

// Add your Sections
sectionAdapter.addSection(mySection1);
sectionAdapter.addSection(mySection2);

// Set up your RecyclerView with the SectionedRecyclerViewAdapter
RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerview);
GridLayoutManager glm = new GridLayoutManager(getContext(), 2);
glm.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
    @Override
    public int getSpanSize(int position) {
        switch(sectionAdapter.getSectionItemViewType(position)) {
            case SectionedRecyclerViewAdapter.VIEW_TYPE_HEADER:
                return 2;
            default:
                return 1;
        }
    }
});
recyclerView.setLayoutManager(glm);
recyclerView.setAdapter(sectionAdapter);

您可以看到完整的代码here，布局也可以在存储库中找到。

Answer 8

我认为您不需要使用多个回收站视图或布局

您可以在回收商视图中创建项目位置的逻辑。如果第一项没有播放按钮和时间的文本视图，那么你可以默认它的可见性已经消失，当你需要那个位置的播放按钮和时间文本视图时，你可以使它可见。

例如，您在第二个位置有视频布局，然后在获取视图方法中获得位置，您可以将此逻辑设置为可见。

我现在只为它创建自定义列表视图行，您可以使用此逻辑执行此操作，也无需进行多个布局。

尝试这种逻辑希望能帮到你

Answer 9

Q1。我需要多个RecyclerViews还是单个RecyclerView就足够了？

在HotStar App中有两个滚动：

主要布局 - 垂直滚动
每个部分 - 水平滚动

如果你想要相同，你必须使用两个RecyclerView，每个一个如果你只想垂直滚动，那么绰绰有余。

Q2。我是否需要调用多个JSON或单个JSON足以获取来自服务器的数据？

使用启动画面并调用单个JSON，然后在选项卡上单击解析特定JSON以查看单击的选项卡。

注意：如果您觉得花费太多时间，请为每个标签单独调用。

像HotStar App这样的布局

9 个答案:

NEW UPDATE