类似于 HotStar 应用程序的布局[关闭]答案

【问题标题】：Layout like HotStar App [closed]类似于 HotStar 应用程序的布局[关闭]
【发布时间】：2016-03-22 04:17:32
【问题描述】：

我必须创建类似HotStar 应用程序的布局，但我有点困惑，这样做的best way 是什么：

我需要多个 RecyclerView 还是一个 RecyclerView 就足够了？
我需要调用多个 JSON 还是单个 JSON 就足以获取来自服务器的数据？
我如何使用不同的 - 你可能还喜欢和必看短片

【问题讨论】：

使用带有 GridLayoutManager 的 recyclerview。如果格式正确，单个 JSON 响应就足够了
我可以有一个布局示例吗？
布局示例：垂直LinearLayout或CardView中的一个ImageView和两个TextView，并在RecyclerView的Adapter中膨胀该布局，仅此而已。
@Apurva 我的意思是我如何使用不同的 - 你可能还喜欢和必须观看剪辑的不同布局
在 RecyclerView 的 Adapter 中有一个名为 getItemViewType() 的方法，你可以重写该方法，并可以根据需要扩展不同的布局。打开此链接以了解如何在 RecyclerView stackoverflow.com/questions/26245139/… 中为不同的视图充气

标签： android json layout android-recyclerview

【解决方案1】：

有了这个，您将能够创建相同的外观和感觉

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

2.-详情请加CARDS

3.- 分区的分隔符，使用SUBHEADERS

现在，关于您的问题：

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>

您的主页片段布局（您也可以将其复制到电影、体育......）

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

截图：

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

【讨论】：

如果我想添加可移动按钮怎么办？我的意思是如果用户上下滚动视图？
真的很简单，如果你使用浮动操作按钮google.com/design/spec/components/…
你能和我分享一个 xml 脚本吗，在那里我可以得到一些想法，如何在单个 recyclerview 中显示来自不同 - 不同 jsons 的数据？或者如果可能的话，你能不能写一个小演示来实现这一点......
请看我更新后的帖子。我给你 xmls 样本。
我们如何通过单一回收者视图来实现它？假设我们有一个垂直滚动的回收器视图作为父级，那么对于每一行项目，我们需要另一个水平滚动的回收器视图（LinearLayoutManager）对吗？如果是这样，那么总共会有（没有类别 + 父级）回收站视图，对吗？如果我们将所有内容都放在一个网格回收器视图中，如何实现单独的水平滚动？

【解决方案2】：

我需要多个 RecyclerView 还是一个 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>

结果：

【讨论】：

【解决方案3】：

我需要多个 RecyclerView 还是一个 RecyclerView 就足够了？

带有 GridLayoutManager 的单个 Recyclerview 就足够了。

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

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

【讨论】：

【解决方案4】：

您只需首先布置 TABS 并在 ViewPager 中显示您的卡片即可完成此操作。

这样的……

@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...

【讨论】：

【解决方案5】：

第一季度。我需要多个 RecyclerView 还是一个 RecyclerView 就足够了？

在HotStar App中有两个滚动条：

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

如果你想要相同，你必须使用两个RecyclerView，每个一个。
如果你只想垂直滚动，那么一个就足够了。

第二季度。我需要调用多个 JSON 还是单个 JSON 就足以获取来自服务器的数据？

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

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

【讨论】：

【解决方案6】：

    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

【讨论】：

【解决方案7】：

使用这个作为你的布局

<?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 将图像加载到这些卡片中（Picasso 和 Glide 与 Fresco 相比更易于使用，但 fresco 更具有内存）

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

这完全取决于你，你可以选择任何一种方式，但是在单个请求中获取所有数据会加快获取速度。

PS：您可以使用 GSON 来解析您的 Json 并让自己保持清醒

【讨论】：

【解决方案8】：

我需要多个 RecyclerView 还是一个 RecyclerView 就足够了？

一个就够了。

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

一个 JSON 就足够了。

我如何使用不同的 - 你可能还喜欢的不同布局和必看短片

1 节标题的单一布局，因为它们看起来相同
“你也可能喜欢”项目的 1 个布局
“必看短片”项目的 1 个布局，因为它们不同：它们具有“分钟”标签和“播放”按钮。您可以使用相同的布局并在不需要时隐藏这些视图，这取决于您

使用库SectionedRecyclerViewAdapter，您可以向 RecyclerView 添加不同的“部分”，每个部分都可以有自己的标题，如下图所示：

您需要创建“部分”类：

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，布局也可以在存储库中找到。

【讨论】：

【解决方案9】：

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

您可以在回收站视图中对项目的位置进行逻辑。就像如果第一个项目没有播放按钮和时间文本视图，那么您可以默认使其可见性消失，当您需要该位置的播放按钮和时间文本视图时，您可以使其可见。

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

我现在刚刚为它创建了自定义列表视图行，你可以用这个逻辑做什么，也不需要做多个布局。

试试这个逻辑希望对你有帮助

【讨论】：