Android高手进阶教程(三)之----Android 中自定义View的应用.

大家好我们今天的教程是在Android教程中自定义View的学习,对于初学着来说,他们习惯了Android传统的页面布局方式,如下代码:

 

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:orientation="vertical"  
  4.     android:layout_width="fill_parent"  
  5.     android:layout_height="fill_parent"  
  6.     >  
  7. <TextView    
  8.     android:layout_width="fill_parent"   
  9.     android:layout_height="wrap_content"   
  10.     android:text="@string/hello"  
  11.     />  
  12. </LinearLayout>  

 

当然上面的布局方式可以帮助我们完成简单应用的开发了,但是如果你想写一个复杂的应用,这样就有点牵强了,大家不信可以下源码都研究看看,高手写的布局方式,如上面的布局高手通常是这样写的:

 

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <A>  
  3.     <B></B>  
  4. </A>  
  1. 其中A extends LinerLayout, B extends TextView.  

 

为了帮助大家更容易理解,我写了一个简单的Demo,具体步骤如下:

 

首先新建一个Android 工程 命名为ViewDemo.

 

然后自定义一个View类,命名为MyView(extends View).代码如下:

 

  1. package com.android.tutor;  
  2. import android.content.Context;  
  3. import android.graphics.Canvas;  
  4. import android.graphics.Color;  
  5. import android.graphics.Paint;  
  6. import android.graphics.Rect;  
  7. import android.graphics.Paint.Style;  
  8. import android.util.AttributeSet;  
  9. import android.view.View;  
  10. public class MyView extends View {  
  11.     private Paint mPaint;  
  12.     private Context mContext;  
  13.     private static final String mString = "Welcome to Mr Wei's blog";  
  14.       
  15.     public MyView(Context context) {  
  16.         super(context);  
  17.       
  18.     }  
  19.     public MyView(Context context,AttributeSet attr)  
  20.     {  
  21.         super(context,attr);  
  22.       
  23.     }  
  24.     @Override  
  25.     protected void onDraw(Canvas canvas) {  
  26.         // TODO Auto-generated method stub  
  27.         super.onDraw(canvas);  
  28.           
  29.         mPaint = new Paint();  
  30.           
  31.         //设置画笔颜色  
  32.         mPaint.setColor(Color.RED);  
  33.         //设置填充  
  34.         mPaint.setStyle(Style.FILL);  
  35.           
  36.         //画一个矩形,前俩个是矩形左上角坐标,后面俩个是右下角坐标  
  37.         canvas.drawRect(new Rect(1010100100), mPaint);  
  38.           
  39.         mPaint.setColor(Color.BLUE);  
  40.         //绘制文字  
  41.         canvas.drawText(mString, 10110, mPaint);  
  42.     }  
  43. }  

 

然后将我们自定义的View加入到main.xml布局文件中,代码如下:

 

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:orientation="vertical"  
  4.     android:layout_width="fill_parent"  
  5.     android:layout_height="fill_parent"  
  6.     >  
  7. <TextView    
  8.     android:layout_width="fill_parent"   
  9.     android:layout_height="wrap_content"   
  10.     android:text="@string/hello"  
  11.     />  
  12. <com.android.tutor.MyView  
  13.     android:layout_width="fill_parent"   
  14.     android:layout_height="fill_parent"   
  15. />  
  16. </LinearLayout>  

最后执行之,效果如下图:

 

 

OK,大功告成,今天就写到这里。。。

转自:http://blog.csdn.net/android_tutor/article/details/5499731
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在uni-app,你可以通过自定义组件来实现scroll-view的自定义下拉效果。下面是一个简单的示例: 1. 首先,创建一个自定义组件,比如命名为CustomScrollView。 在CustomScrollView.vue文件,可以定义一个容器元素和一个下拉刷新的提示元素,如下所示: ```html <template> <view class="custom-scroll-view"> <view class="refresh-indicator" v-show="showRefreshIndicator"> <!-- 自定义下拉刷新的内容 --> <!-- ... --> </view> <scroll-view class="scroll-view-content"> <!-- scroll-view的内容 --> <!-- ... --> </scroll-view> </view> </template> <script> export default { data() { return { showRefreshIndicator: false, // 是否显示下拉刷新提示 startY: 0, // 记录开始滑动的位置 }; }, methods: { onTouchStart(e) { this.startY = e.touches[0].clientY; }, onTouchMove(e) { const currentY = e.touches[0].clientY; const distance = currentY - this.startY; if (distance > 0 && this.$refs.scrollView.scrollTop === 0) { // 下拉到顶部了,显示下拉刷新提示 this.showRefreshIndicator = true; } else { // 没有下拉到顶部,隐藏下拉刷新提示 this.showRefreshIndicator = false; } }, onTouchEnd() { if (this.showRefreshIndicator) { // 触发下拉刷新事件 this.$emit('refresh'); } this.showRefreshIndicator = false; }, }, }; </script> <style scoped> .custom-scroll-view { position: relative; height: 100%; } .refresh-indicator { position: absolute; top: -50px; /* 下拉刷新提示的高度 */ left: 0; right: 0; height: 50px; /* 下拉刷新提示的高度 */ } .scroll-view-content { height: 100%; } </style> ``` 2. 在使用CustomScrollView组件的页面,可以引入该组件并监听其下拉刷新事件,如下所示: ```html <template> <view> <!-- ... --> <custom-scroll-view @refresh="onRefresh"> <!-- ... --> </custom-scroll-view> </view> </template> <script> import CustomScrollView from '@/components/CustomScrollView'; export default { components: { CustomScrollView, }, methods: { onRefresh() { // 处理下拉刷新逻辑 // ... }, }, }; </script> ``` 通过以上步骤,你就可以实现自定义下拉刷新效果了。当用户在CustomScrollView组件内部下拉到顶部时,会触发refresh事件,你可以在onRefresh方法处理下拉刷新的逻辑,例如发送网络请求获取最新数据,然后更新页面内容。 需要注意的是,以上示例是基于uni-app框架的实现方式,如果你使用的是其他框架或原生开发,具体实现方式可能会有所不同。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值