Material Desgin响应式布局Android实现思路

虽然Google已经放弃了它的Android平板产品,但开发者不会(哭)。

在Mateiral Design中,有一部分是关于适配手机小屏幕和平板大屏幕的内容。这里是他们的一些实现思路。

Reveal 1: Drawer

Reveal 1: Drawer

简单方案:使用MaterialDrawer,内置了MiniDrawer支持。在代码中根据屏幕大小判断并设置。

MaterialDrawer MiniDrawerActivity它的Layout XML

复杂方案:手动实现

其他方案:等待Google官方支持

Reveal 2: Options

Reveal 2: Options

简单方案:使用HorizontalScrollView、FlexboxLayout、Overflow Menu的话,修改好一些属性后无需担心。

复杂方案:使用CustomView,手动排列、显示、隐藏

Reveal 3: Dialog

Reveal 3: Dialog

手动判断,为小屏幕隐藏那些过多的内容。

Transform 1: Drawer to Tab

Transform 1: Drawer to Tab

为了适配Tab,就得用ViewPager。

所以使用ViewPager + Fragments,在手机屏幕下,禁止ViewPager滑动,移除或隐藏TabLayout,使用Drawer进行切换Fragments;平板屏幕下,允许ViewPager滑动,增加或显示TabLayout,移除Drawer,让用户滑动进行Navgiate。

Transform 2: List to Grid

Transform 2: List to Grid

使用不同的LayoutManager和ViewHolder(使用泛型Adapter?)

Transform 3: Overflow Menu

Transform 3: Overflow Menu

设置showAsAction为ifRoom或者在代码中根据屏幕设置。

Devide 1: Drawer

Devide 1: Drawer

Reveal 1: Drawer

Devide 2: Tab to Cards

Devide 2: Tab to Cards

手机屏幕用ViewPager,平板屏幕用两个Fragment。在Activity中判断。

Reflow 1: List to Grid

Reflow 1: List to Grid

Transform 2: List to Grid

Reflow 2: Tabs to Lists

Reflow 2: Tabs to Lists

更换每个Fragment的LayoutManager。手机屏幕使用ViewPager,平板屏幕使用Static Fragments。

Reflow 3: Time Picker

Reflow 3: Time Picker

使用不同的Layout XML

Expand 1: Max Size

Expand 1: Max Size

使用不同的style设置width和height。

顶部空白:1. 顶部添加一个空白View,手机屏幕上0dp,平板屏幕上有高度。2. 直接使用不同的paddingTop。

Expand 2: Dialog

Expand 2: Dialog

我不认为这需要修改任何代码。

Position 1: Menu

Position 1: Menu

在代码中使用BottomDialog并显示或隐藏OverflowMenu(修改onCreateOptionsMenu返回值)。

Position 2: FAB

Position 2: FAB

不同的style,设置FAB的anchor。也可以通过代码设置。