Android UI进阶之仿iphone的tab效果一
创始人
2024-07-30 22:00:48
0

相信很多人都喜欢iphone 酷炫的界面,虽然android的原生控件已经足够漂亮,但是往往不能满足用户越来越挑剔的眼光。其实,我们完全可以自己来绘制界面。今天我就来分享下做一个和iphone一样的tab界面。下面先来看下iphone上的效果

在开始之前,我们必须掌握最基础的,也就是android中图形界面的绘制。首先讲下简单图形的绘制,这里我们就借绘制这个 的背景部分来讲下吧。直接看代码

  1. public class Itab extends View {   
  2.      private Paint mPaint;   
  3.      public Itab(Context context, AttributeSet attrs) {//构造器,View下构造器有三种方式,在xml中配置必须实现这种方式   
  4.      super(context, attrs);   
  5.      }   
  6.     @Override  
  7.      protected void onDraw( Canvas canvas ){  
  8.          super.onDraw( canvas );  
  9.          mPaint = new Paint( );//创建画笔17            
  10.          mPaint.setStyle( Paint.Style.FILL );//设置画笔 为实心  
  11.          Rect r = new Rect( );//创建一个矩形  
  12.          this.getDrawingRect( r );  
  13.          canvas.drawColor( 0xFF000000 );  
  14.          mPaint.setColor( 0xFF434343 );  
  15.          canvas.drawLine( r.left, r.top + 1, r.right, r.top + 1, mPaint );//绘制这个矩形图形  
  16.       }  
  17.  } 

在xml中这样配置

  1.  
  2.    
  3.     android:orientation="vertical" 
  4.     android:layout_width="fill_parent" 
  5.     android:layout_height="fill_parent" 
  6.     android:background="#C5CCD4FF"      
  7.    
  8.     android:id="@+id/Tabs" 
  9.     android:layout_width="fill_parent" 
  10.     android:layout_height = "49px" 
  11.     android:layout_alignParentBottom= "true"   
  12.   /> 
  13.  

这样就会得到如下的效果,这显然不是我们想要的。

不过别着急,我们只要在onDraw()这个方法里面添加如下一段代码:

  1. int color = 46;                  
  2. for( int i = 0; i < 24; i++ ){              
  3.     mPaint.setARGB( 255, color, color, color );          
  4.     canvas.drawRect( r.left, r.top + i + 1, r.right, r.top + i + 2, mPaint );             
  5.     color--;         
  6.  } 

通过循环的绘制,我们就可以得到如下的效果

是不是很简单呢。图形绘制中还有一个比较重要的是贴图的绘制。同样这个例子,我们在这个背景上绘制一个图标,非常的简单,同样在onDraw()这个方法里面添加如下代码

  1. Bitmap icon = BitmapFactory.decodeResource( getResources( ), R.drawable.monitor );  
  2. Paint p = new Paint( Paint.ANTI_ALIAS_FLAG |Paint.FILTER_BITMAP_FLAG);  
  3. p.setColor(Color.WHITE);  
  4. canvas.drawBitmap(icon, 10, 10, p); 

代码非常简单,第一行获得图片资源,第二行第一一个画笔,同时打开抗锯齿和过滤,第三行设置画笔颜色,最后一行绘制图片。

来看看效果

还不错吧,当然要实现完全的tab效果,这还是远远不够的。今天就写到这吧,天冷啊,手都冻僵了,明天或者后天我再接着写,从而最终实现和iphone一样的tab,当然也有完全可以替代原生tab的功能。大家有什么问题可以留言讨论哈。

【编辑推荐】

Android UI设计模式

Android四种Activity的加载模式

Android应用之Activity传参数与跳转

iPhone音乐播放应用软件UI设计实录

谷歌Android UI设计技巧:新的UI设计模式

相关内容

热门资讯

如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
Windows恶意软件20年“... 在Windows的早期年代,病毒游走于系统之间,偶尔删除文件(但被删除的文件几乎都是可恢复的),并弹...
20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
着眼MAC地址,解救无法享受D... 在安装了DHCP服务器的局域网环境中,每一台工作站在上网之前,都要先从DHCP服务器那里享受到地址动...
为啥国人偏爱 Mybatis,... 关于 SQL 和 ORM 的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行...