Skip to content

CollapsingToolbarLayoutAndroid, AppBarLayoutAndroid, CollapsingToolbarLayoutAndroid能不能和TabLayoutAndroid同时使用? #16

Open
@nangezi123

Description

@nangezi123

Code

`class CoordinatorLayoutWithTabExample extends Component{

_tabTexts = [
  { text: "tab1" },
  { text: "tab2" },
  { text: "tab3" }
];

componentDidMount() {
  this.refs.coordinatorLayout.setScrollingViewBehavior(this.refs.viewPager);
  this._tabLayout.setViewPager(this._viewPager, this._tabTexts);
}

render() {
  return (
    <View style={[ { flex: 1}]}>
      <CoordinatorLayoutAndroid ref="coordinatorLayout">
        <AppBarLayoutAndroid
          style={{height: 250}}
          layoutParams={{
              width: width,
              scrollFlag: AppBarLayoutAndroid.SCROLL_FLAG_EXIT_UNTIL_COLLAPSED
          }}
        >
          <CollapsingToolbarLayoutAndroid
            expandedTitleMarginStart={20}
            expandedTitleMarginBottom={20}
            collapsedTitleColor="#ffffff"
            contentScrimColor="#2278F6"
            expandedTitleColor="#ffffff"
            layoutParams={{
              scrollFlags: (
                AppBarLayoutAndroid.SCROLL_FLAG_SCROLL |
                AppBarLayoutAndroid.SCROLL_FLAG_SNAP |
                AppBarLayoutAndroid.SCROLL_FLAG_EXIT_UNTIL_COLLAPSED
              )
            }}>
            <View
              style={{
                flex: 1,
                backgroundColor: '#4CAF50'
              }}
              layoutParams={{
                collapseParallaxMultiplie: 0.7,
                collapseMode: CollapsingToolbarLayoutAndroid.CollapseMode.COLLAPSE_MODE_PARALLAX
              }}>
              <Image source={require('./images/beer.jpg')} style={styles.image} />
            </View>
            <ToolbarAndroid
              title="Collapsing Toolbar Layout"
              titleColor="#ffffff"
              layoutParams={{
                height: 56, // required
                collapseMode: CollapsingToolbarLayoutAndroid.CollapseMode.COLLAPSE_MODE_PIN // required
              }}>
            </ToolbarAndroid>
          </CollapsingToolbarLayoutAndroid>
          <View style={{height: 38, backgroundColor: '#4889f1'}}>
            <TabLayoutAndroid
              tabMode="scrollable"
              tabSelectedTextColor="#fff"
              tabIndicatorColor="#fff"
              tabTextColor="rgba(255, 255, 255, .6)"
              tabIndicatorHeight={1}
              tabTextSize={6}
              tabSidePadding={10}
              tabHeight={38}
              ref={(component) => {
                this._tabLayout = component;
              }} />
          </View>
        </AppBarLayoutAndroid>

        <ViewPagerAndroid
          ref="viewPager"
          style={{ backgroundColor: 'transparent' }}
        >
          <FlatList
            data={data}
            renderItem={this.renderBox}
            renderScrollComponent={this.renderScroll}
            /> 
          <FlatList
            data={data}
            renderItem={this.renderBox}
            renderScrollComponent={this.renderScroll}
            />  
          <FlatList
            data={data}
            renderItem={this.renderBox}
            renderScrollComponent={this.renderScroll}
          /> 
        </ViewPagerAndroid>
      </CoordinatorLayoutAndroid>
    </View>
  );
};

renderBox(item) {
  return (
    <View style={styles.box} />
  )
}
renderScroll(props) {
  return (
    <NestedScrollViewAndroid {...props} style={styles.nestedScroll} />
  )
}

};`
想要CollapsingToolbarLayoutAndroid, AppBarLayoutAndroid, CollapsingToolbarLayoutAndroid和TabLayoutAndroid同时使用,也就是内容的下半部分是tab,通过滚动能够实现tab标题部分的置顶。
我用上面的代码试了下,其他都很好(tab页也可以左右滑动),但是tab的标题(this._tabTexts)不显示。
麻烦您帮忙看看。。。

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions