响应式布局方案

我们关注到大多数应用在折叠屏展开态上存在内容拉伸放大的现象，针对这一问题我们提供了一套具备响应式能力的控件，帮助开发者对android页面的局部区域进行快速的适配, 从而避免应用内容被过量放大的现象。

布局特点：利用屏幕的宽度优势，将相同属性的布局组件横向并列同时排布。

适用场景：内容运营类列表信息，例如歌单列表、应用列表等。

适配规则：可以定义单个元素的宽度规则，随着屏幕宽度的变化，⾃动计算可以重复的元素的个数，满足宽度条件时横向重复排列。

示例

• 效果示例

  

• 代码示例

针对重复布局，华为提供了响应式LinearLayout控件，应用直接使用原生LinearLayout，接入HwRspLinearLayout可通过在Xml接入方式和代码接入两种方式。

开发准备

// 配置HMS Core SDK的Maven仓地址。
maven { url 'https://developer.huawei.com/repo/' }

Maven方式引入aar

使用前需在build.gradle的dependencies中添加所引用控件的依赖。

implementation "com.huawei.ui.rspuikit:hwrsplinearlayout-androidn:{version}"

布局XML接入方式

xml配置示例

<com.huawei.rspuikit.androidn.hwrsplinearlayout.widget.HwRspLinearLayout
    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/hw_rsp_linearlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    app:rspcolNum="4"
    app:rspItemSpace="10dp"
    app:rspEnable="true"
    android:paddingLeft="5dp"
    android:paddingRight="5dp">

代码接入方式

动态创建：本方法可以在逻辑代码中直接生成相关的控件。

1. 导入控件包

   import com.huawei.rspuikit.androidn.hwrsplinearlayout.widget.HwRspLinearLayout

2. 代码由继承LinearLayout改为继承HwRspLinearLayout或者通过new HwRspLinearLayout直接使用，代码使用方式示例如下

   @Override
   protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_hwrsplinearlayout);
           HwRspLinearLayout mMainLayout = findViewById(R.id.hw_rsp_linearlayout);
           mMainLayout.setOrientation(LinearLayout.VERTICAL);
           mMainLayout.setRspEnable(true);
           mMainLayout.setRspItemSpace(10);
           // 设置展开态列数
           mMainLayout.setRspColNum(4);
       }

接口能力

响应式控件扩展并兼容原生LinearLayout控件接口，扩展控件接口及说明如下表。

瀑布布局

布局特点：利用屏幕的宽度优势，将原来单列纵向布局，拓展为两列或多列的纵向布局。

适用场景：适合用卡片呈现内容的场景，通过卡片的横纵扩展在⼤屏上展示更多内容。

适配规则：可以定义单个组件的宽度规则，随着页面宽度的变化，⾃动计算可以重复的卡片个数，满足条件时横向排列更多卡片。

针对瀑布布局特点，华为提供了多种类型的响应式控件来满足不同的场景诉求。主要包括以下响应式GridView、ListView和RecyclerView。

对于网格类的布局场景，推荐使用响应式GridView，应用直接使用原生GridView，接入HwRspGridView可通过在Xml接入方式和代码接入两种方式。

UX效果

开发准备

// 配置HMS Core SDK的Maven仓地址。
maven { url 'https://developer.huawei.com/repo/' }

Maven方式引入aar包

使用前需在build.gradle的dependencies中添加所引用控件的依赖。

implementation "com.huawei.ui.rspuikit:hwrspgridview:{version}"

布局XML接入方式

xml配置示例

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:context=".MainActivity"
            android:orientation="vertical">
     
<com.huawei.rspuikit.hwrspgridview.widget.HwRspGridView
        android:id="@+id/gv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:paddingStart="3dp"
        android:paddingEnd="3dp"
        android:gravity="center"
        app:setRspEnable="true"
        android:stretchMode="columnWidth"
        android:stretchMode_rsp="columnWidth"
        android:numColumns="3"
        app:numColumnsRsp="7"
        android:columnWidth="80dp"
        app:columnWidthRsp="80dp"
        android:horizontalSpacing="5dp"
        app:horizontalSpacingRsp="5dp"
        android:verticalSpacing="1dp" />
</LinearLayout>

代码接入方式

动态创建：本方法可以在逻辑代码中直接生成相关的控件。

1. 导入控件包

   import com.huawei.rspuikit.hwrspgridview.widget.HwRspGridView

2. 代码由继承GridView改为继承HwRspGridView或者通过new HwRspGridView直接使用,代码使用示例如下。

   @Override
   protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        LinearLayout linearLayout = new LinearLayout(this);
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.MATCH_PARENT,
                LinearLayout.LayoutParams.WRAP_CONTENT);
        linearLayout.setLayoutParams(params);
        HwRspGridView hwRspGridView = HwRspGridView(this);
        if (hwRspGridView != null) {
            ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(
                    ViewGroup.LayoutParams.MATCH_PARENT,
                    ViewGroup.LayoutParams.MATCH_PARENT);
            hwRspGridView.setLayoutParams(params);
            // 设置响应式控件生效开关，true 表示生效，false 表示不生效
            hwRspGridView.setRspEnable(true);
            // 设置折叠态和展开态的拉伸模式，支持NO_STRETCH、STRETCH_SPACING、//STRTCH_COLUMN_WIDTH、STRETCH_SPACING_UNIFORM 四种
            hwRspGridView.setStretchMode(HwGridView.STRTCH_COLUMN_WIDTH);
            hwRspGridView.setStretchModeRsp(HwGridView.STRTCH_COLUMN_WIDTH);
            // 设置折叠态和展开态的列数
            hwRspGridView.setNumColumns(3);
            hwRspGridView.setNumColumnsRsp(7);
            // 设置折叠态和展开态的列宽
            hwRspGridView.setColumnWidth(getPixelsFromDp(80));
            hwRspGridView.setColumnWidthRsp(getPixelsFromDp(80));
            // 设置折叠态和展开态的列间距
            hwRspGridView.setHorizontalSpacing(getPixelsFromDp(5));
            hwRspGridView.setHorizontalSpacingRsp(getPixelsFromDp(5));
            linearLayout.addView(hwRspGridView);
        }
        setContent(linearLayout);
    }

接口能力

响应式控件扩展并兼容原生GridView控件接口，扩展控件接口及说明如下表。

对于单列表的页面布局，适用于使用响应ListView，能够在展开态中显示更多列内容。

UX效果

开发准备

// 配置HMS Core SDK的Maven仓地址。
maven { url 'https://developer.huawei.com/repo/' }

Maven方式引入aar包

使用前需在build.gradle的dependencies中添加所引用控件的依赖。

implementation "com.huawei.ui.rspuikit:hwrsplistview-androidn:{version}"

布局XML接入方式

xml配置示例:原ListView调整为响应式控件（原代码不需要修改）

<com.huawei.rspuikit.androidn.hwrsplistview.widget.HwRspListView
        android:id="@+id/listview_example"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scrollbars="vertical"
        app:rspEnable="true" />

代码接入方式

1. 导入控件包

   import com.huawei.rspuikit.androidn.hwrsplistview.widget.HwRspListView

2. 创建自定义控件类,调整原控件继承关系：

   public class MyHwListView extends HwRspListView 

3. 代码使用示例

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_listview);
       HwRspListView exampleListView = findViewById(R.id.hwexamplelistview);
       exampleListView.setEnable(true);
       // 设置展开态列数
       exampleListView.setRspColNum(2);
    
       // 设置展开态列间距
       exampleListView.setRspItemSpace(20);
       }

接口能力

响应式控件扩展并兼容原生ListView控件接口，扩展控件接口及说明如下表。

对于商品列表类内容，以多列展示瀑布流效果的布局，推荐使用华为响应式RecyclerView，可以在展开态时显示更多列内容。

UX效果

开发准备

// 配置HMS Core SDK的Maven仓地址。
maven { url 'https://developer.huawei.com/repo/' }

Maven方式引入aar包

使用前需在build.gradle的dependencies中添加所引用控件的依赖。

HwRspRecyclerView提供了androidx包下的和support V7包下的RecyclerView的支持。

• androidx引入AAR包：

  implementation "com.huawei.ui.rspuikit:hwrsprecyclerview-androidsupx:{version}"

• support V7引入AAR包：

  implementation "com.huawei.ui.rspuikit:hwrsprecyclerview-androidsup:{version}"

接入HwRspRecyclerView

• 如果直接使用的是RecyclerView，在代码和layout文件里将RecyclerView替换成HwRspRecyclerView：

   <com.huawei.rspuikit.androidsupx.hwrsprecyclerview.wiget.HwRspRecyclerView
          android:background="@color/white"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:paddingStart="5dp"
          android:paddingEnd="5dp"
          android:id="@+id/myRecyclerView"
          app:expandStateSpanCount="3"
          app:expandStateEnableRsp="true"
          />

• 如果自定义View继承了RecyclerView，在代码里把继承关系中的RecyclerView替换成HwRspRecyclerView：

  import com.huawei.rspuikit.androidsupx.hwrsprecyclerview.wiget.HwRspRecyclerView;
  
  public class MyRecyclerView extends HwRspRecyclerView

• 代码使用示例

  @Override
  protected void onCreate(@Nullable Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.recycler_view);
       HwRspRecyclerView myRecyclerView = findViewById(R.id.myRecyclerView);
       // 设置首行top值
       myRecyclerView.setFirstRowTop(10);
       // 设置item的bottom值
       myRecyclerView.setItemBottom(20);
       // 设置item间距类型
       myRecyclerView.setExpandStateGapType(1);
       // 设置扩展态间距
       myRecyclerView.setExpandStateItemGap(80);
       // 设置响应式控件生效
       myRecyclerView.setRspEnable(true);
       // 设置扩展态列数
       myRecyclerView.setExpandStateSpanCount(3);
       StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(2, 
           StaggeredGridLayoutManager.VERTICAL);
       myRecyclerView.setLayoutManager(layoutManager);
   }

• xml参数配置

  参数名	参数取值	参数说明	使用方式
  expandStateEnableRsp	True/false	是否使用响应式布局	在layout布局文件中配置
  expandStateSpanCount	Integer	展开态控件的列数
  expandStateItemGap	dimension	展开态Item的列间距
  expandStateFirstRowTop	dimension	展开态首行top值
  expandStateGapType	Integer	展开态列间距类型：0代表n个间距；1代表n-1个间距
  expandStateItemBottom	dimension	展开态item底部bottom值

接口能力

响应式控件扩展并兼容原生RecyclerView控件接口，扩展控件接口及说明如下表。

此外还有一种常见的广告banner区域，需要显示多张广告图片，并且支持左右滑动切换广告。针对这一布局，推荐使用响应式ViewPager控件。

适用于support v4包和androidx包下的ViewPager控件，提供在展开态下同时显示多张banner区域的能力。

UX效果

开发准备

// 配置HMS Core SDK的Maven仓地址。
maven { url 'https://developer.huawei.com/repo/' }

Maven方式引入aar包

使用前需在build.gradle的dependencies中添加所引用控件的依赖。

HwRspViewPager提供了androidx包下的和support V7包下的ViewPager的支持。

• androidx引入AAR包：

  implementation "com.huawei.ui.rspuikit:hwrspviewpager-androidsupx:{version}"

• support V7引入AAR包：

  implementation "com.huawei.ui.rspuikit:hwrspviewpager-androidsup:{version}"

接入HwRspViewPager

• 如果应用直接使用ViewPager，则直接在代码和layout布局文件中将ViewPager替换成HwRspViewPager：

   <com.huawei.rspwidget.androidsupx.viewpager.HwRspViewPager
          android:background="@id/view_pager"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          app:rsp_need_adjust="true"
          />

• 如果自定义View继承了ViewPager，在代码里把继承关系中的ViewPager替换成HwRspViewPager：

  import com.huawei.rspwidget.androidsupx.viewpager.HwRspViewPager;
  
  public class LooperViewPager extends HwRspViewPager

• 如果应用还重写了onMeasure或者调用了onMeasure方法，需要将方法名改为onMeasure2，否则编译不通过：

  @Override
      protected void onMeasure2(int widthMeasureSpec, int heightMeasureSpec) {
          super.onMeasure(widthMeasureSpec, heightMeasureSpec);
      }

接入HwRspPagerAdapter(可选)

如果应用不存在一页显示完N个Item的场景（图1中N=2），则不需要执行该步骤。

如果应用需要实现图1中两张卡片时的效果，则还需要接入HwRspPagerAdapter。将PagerAdapter替换成HwRspPagerAdapter并在重写的instantiateItem方法中调用一次父类的该方法：

setAdapter(new HwRspPagerAdapter() {
            @Override
            public Object instantiateItem(@NonNull ViewGroup container, int position) {
                super.instantiateItem(container, position);
            }
        });

接入导航点(可选)

如图1所示，一个和两个Item时，需要将导航点隐藏。如果应用不存在此类场景，则无需执行该步骤

否则需要在代码中或者layout布局文件中显示的为HwRspViewPager指定导航点View。

接口能力

HwRspViewPager提供了11个可供配置的参数，为了便以理解参数，此处先给出大屏下未接入和接入HwRspViewPager的效果，图中定义的变量在接下的描述中会用到：

可配置参数的说明和使用方式见下表：

说明：以上参数都可以通过两种方式使用

方式一：在layout布局文件中配置

方式二：在代码中通过HwRspViewPager.getConfig().setXXX来配置

FAQ:

使用华为响应式控件是不是会对其他厂商的设备产生影响？

华为响应式控件是继承android原生控件的基础上新增了在折叠屏上响应式的能力，在其他厂商设备上不会开启该新增的能力，会走原生的android控件绘制流程，并不会对其他厂商的设备产生影响。