Android-设置PullToRefresh下拉刷新样式


以下是开源控件PullToRefresh的自定义样式属性:

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <resources>  
  3.     <declare-styleable name="PullToRefresh">  
  4.         <!-- A drawable to use as the background of the Refreshable View -->  
  5.         <!-- 设置整个刷新列表的背景色 -->  
  6.         <attr name="ptrRefreshableViewBackground" format="reference|color" />  
  7.         <!-- A drawable to use as the background of the Header and Footer Loading Views -->  
  8.         <!--  设置下拉Header或者上拉Footer的背景色 -->  
  9.         <attr name="ptrHeaderBackground" format="reference|color" />  
  10.         <!-- Text Color of the Header and Footer Loading Views -->  
  11.         <!-- 用于设置Header与Footer中文本的颜色 -->  
  12.         <attr name="ptrHeaderTextColor" format="reference|color" />  
  13.         <!-- Text Color of the Header and Footer Loading Views Sub Header -->  
  14.         <!-- 用于设置Header与Footer中上次刷新时间的颜色 -->  
  15.         <attr name="ptrHeaderSubTextColor" format="reference|color" />  
  16.         <!-- Mode of Pull-to-Refresh that should be used -->  
  17.         <attr name="ptrMode">  
  18.             <flag name="disabled" value="0x0" /><!-- 禁用下拉刷新 -->  
  19.             <flag name="pullFromStart" value="0x1" /><!-- 仅支持下拉刷新 -->  
  20.             <flag name="pullFromEnd" value="0x2" /><!-- 仅支持上拉刷新 -->  
  21.             <flag name="both" value="0x3" /><!-- 上拉刷新和下拉刷新都支持 -->  
  22.             <flag name="manualOnly" value="0x4" /><!-- 只允许手动触发 -->  
  23.   
  24.             <!-- These last two are depreacted -->  
  25.             <flag name="pullDownFromTop" value="0x1" />  
  26.             <flag name="pullUpFromBottom" value="0x2" />  
  27.         </attr>  
  28.         <!-- Whether the Indicator overlay(s) should be used -->  
  29.         <!-- 如果为true会在mPullRefreshListView中出现icon,右上角和右下角,挺有意思的 -->  
  30.         <attr name="ptrShowIndicator" format="reference|boolean" />  
  31.         <!-- Drawable to use as Loading Indicator. Changes both Header and Footer. -->  
  32.         <!-- 同时改变头部和底部的图标 -->  
  33.         <attr name="ptrDrawable" format="reference" />  
  34.         <!-- Drawable to use as Loading Indicator in the Header View. Overrides value set in ptrDrawable. -->  
  35.         <!-- 头部视图的图标-->  
  36.         <attr name="ptrDrawableStart" format="reference" />  
  37.   
  38.         <!-- Drawable to use as Loading Indicator in the Footer View. Overrides value set in ptrDrawable. -->  
  39.         <!-- 底部视图的图标 -->  
  40.         <attr name="ptrDrawableEnd" format="reference" />  
  41.         <!-- Whether Android's built-in Over Scroll should be utilised for Pull-to-Refresh. -->  
  42.         <attr name="ptrOverScroll" format="reference|boolean" />  
  43.         <!-- Base text color, typeface, size, and style for Header and Footer Loading Views -->  
  44.          <!-- 分别设置拉Header或者上拉Footer中字体的类型颜色等等 -->  
  45.         <attr name="ptrHeaderTextAppearance" format="reference" />  
  46.         <!-- Base text color, typeface, size, and style for Header and Footer Loading Views Sub Header -->  
  47.         <attr name="ptrSubHeaderTextAppearance" format="reference" />  
  48.         <!-- Style of Animation should be used displayed when pulling. -->  
  49.         <attr name="ptrAnimationStyle">  
  50.             <flag name="rotate" value="0x0" /><!-- flip(翻转动画), rotate(旋转动画)  -->  
  51.             <flag name="flip" value="0x1" />  
  52.         </attr>  
  53.         <!-- Whether the user can scroll while the View is Refreshing -->  
  54.         <!-- 刷新的时候,是否允许ListView或GridView滚动 -->  
  55.         <attr name="ptrScrollingWhileRefreshingEnabled" format="reference|boolean" />  
  56.         <!--  
  57.             Whether PullToRefreshListView has it's extras enabled. This allows the user to be   
  58.             able to scroll while refreshing, and behaves better. It acheives this by adding  
  59.             Header and/or Footer Views to the ListView.  
  60.         -->  
  61.         <!-- 决定了Header,Footer以何种方式加入mPullRefreshListView,true为headView方式加入,就是滚动时刷新头部会一起滚动 -->  
  62.         <attr name="ptrListViewExtrasEnabled" format="reference|boolean" />  
  63.         <!--  
  64.             Whether the Drawable should be continually rotated as you pull. This only  
  65.             takes effect when using the 'Rotate' Animation Style.  
  66.         -->  
  67.         <attr name="ptrRotateDrawableWhilePulling" format="reference|boolean" />  
  68.         <!-- BELOW HERE ARE DEPRECEATED. DO NOT USE. -->  
  69.         <attr name="ptrAdapterViewBackground" format="reference|color" />  
  70.         <attr name="ptrDrawableTop" format="reference" />  
  71.         <attr name="ptrDrawableBottom" format="reference" />  
  72.     </declare-styleable>  
  73. </resources>  

可以在布局文件中设置自定义的这些样式,使用方法如下:

  1. <com.handmark.pulltorefresh.libaray        xmlns:ptr="http://schemas.android.com/apk/res-auto"  
  2.         android:id="@+id/lv"  
  3.         android:layout_width="match_parent"  
  4.         android:layout_height="match_parent"  
  5.         android:background="@color/white"  
  6.         android:cacheColorHint="#00000000"  
  7.         android:divider="@drawable/border"  
  8.         android:fadingEdge="none"  
  9.         android:fadingEdgeLength="0dip"  
  10.         android:scrollbars="none"  
  11.         android:scrollingCache="true"   
  12.         ptr:ptrDrawable="@drawable/infzm_logo"  
  13.      /> 
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要自定义 `scroll-view` 的下刷新样式,你可以使用 `scroll-view` 的 `refresher-enabled` 属性来启用下刷新,并使用 `refresher-triggered` 属性来监听下刷新事件。 首先,你需要在 `scroll-view` 标签中添加 `refresher-enabled` 和 `refresher-triggered` 属性。其中,`refresher-enabled` 用于启用下刷新功能,而 `refresher-triggered` 用于监听下刷新事件并触发相应的操作。 接下来,你可以使用自定义样式来美化下刷新的效果。你可以在 `scroll-view` 标签内部添加一个 `view` 组件,并在这个组件中编写你想要的下刷新样式。 以下是一个示例代码: ```html <scroll-view refresher-enabled="{{true}}" refresher-triggered="{{refreshing}}" bindrefresherrefresh="onRefresh"> <view class="refresher"> <view class="icon"></view> <view class="text">下刷新</view> </view> <!-- 在这里放置 scroll-view 的内容 --> </scroll-view> ``` 在上面的示例代码中,我们使用了一个名为 `refresher` 的 `view` 组件来构建下刷新样式。你可以根据自己的需求自定义 `refresher` 的样式,比如设置背景颜色、图标、文字等。 接下来,在对应的小程序页面的 JS 文件中,你需要定义 `onRefresh` 方法,以便在下刷新事件触发时执行相应的操作。例如,可以在该方法中发送请求获取最新数据: ```javascript Page({ data: { refreshing: false }, onRefresh: function() { // 下刷新事件触发时执行的操作 // 发送请求获取最新数据 // ... // 请求完成后,将 refreshing 设置为 false 结束下刷新的状态 this.setData({ refreshing: false }); } }) ``` 在上面的代码中,我们定义了一个名为 `onRefresh` 的方法来处理下刷新事件。你可以在该方法中编写你想要的下刷新逻辑,比如发送请求获取最新数据。在请求完成后,记得将 `refreshing` 设置为 `false`,以结束下刷新的状态。 最后,你还可以使用 CSS 来进一步美化下刷新样式。你可以在对应的 WXSS 文件中添加相应的样式规则来自定义 `refresher` 的外观。 希望这些信息能对你有所帮助!如有任何问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值