`
longgangbai
  • 浏览: 7356857 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

【转】android UI进阶之仿iphone的tab效果（二）

 
阅读更多

今天把这个仿iphone效果的tab写完，这个例子参考国外rolle3k共享的代码，感谢rolle3k。

上篇博客我们写了一个Itab类，介绍了背景的绘制和简单的一个图的贴图方法。我们继续来完成Itab这个类，同时把他放到MainAcitvity（继承Activity）这个类内部，这样，整个程序只需一个类就可以了。（上篇博客例子运行需要再建一个Activity的子类来作为lanucher）。废话不多说了，看看代码

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->  1     public static class iTab extends View 
  2     {
  3         private Paint                    mPaint;//背景画笔
  4          private Paint                    mActiveTextPaint;//选中
  5          private Paint                    mInactiveTextPaint;//未选中
  6          private ArrayList<TabMember>    mTabMembers;//tab成员
  7          private int                        mActiveTab;
  8         private OnTabClickListener        mOnTabClickListener = null;
  9         
 10         public iTab( Context context, AttributeSet attrs ) //构造器，在里面初始化画笔
 11          {
 12             super(context, attrs);
 13             
 14             mTabMembers = new ArrayList<MainActivity.iTab.TabMember>( );
 15             
 16             mPaint = new Paint( );
 17             mActiveTextPaint = new Paint( );
 18             mInactiveTextPaint = new Paint( );
 19             
 20             mPaint.setStyle( Paint.Style.FILL );
 21             mPaint.setColor( 0xFFFFFF00 );
 22             mPaint.setAntiAlias(true);
 23             
 24             mActiveTextPaint.setTextAlign( Align.CENTER );
 25             mActiveTextPaint.setTextSize( 12 );
 26             mActiveTextPaint.setColor( 0xFFFFFFFF );
 27             mActiveTextPaint.setAntiAlias(true);
 28             
 29             
 30             mInactiveTextPaint.setTextAlign( Align.CENTER );
 31             mInactiveTextPaint.setTextSize( 12 );
 32             mInactiveTextPaint.setColor( 0xFF999999 );
 33             mInactiveTextPaint.setAntiAlias(true);
 34             mActiveTab = 0;
 35             
 36         }
 37         
 38         @Override
 39         protected void onDraw( Canvas canvas )
 40         {
 41             super.onDraw( canvas );
 42             
 43             Rect r = new Rect( );
 44             this.getDrawingRect( r );
 45             
 46             // 计算每个标签能使用多少像素
 47              int singleTabWidth = r.right / ( mTabMembers.size( ) != 0 ? mTabMembers.size( ) : 1 );
 48             
 49             
 50             // 绘制背景
 51              canvas.drawColor( 0xFF000000 );
 52             mPaint.setColor( 0xFF434343 );
 53             canvas.drawLine( r.left, r.top + 1, r.right, r.top + 1, mPaint );
 54             
 55             int color = 46;
 56             
 57             for( int i = 0; i < 24; i++ )
 58             {
 59                 mPaint.setARGB( 255, color, color, color );
 60                 canvas.drawRect( r.left, r.top + i + 1, r.right, r.top + i + 2, mPaint );
 61                 color--;
 62             }
 63 
 64             // 绘制每一个tab
 65              for( int i = 0; i < mTabMembers.size( ); i++ )
 66             {
 67                 TabMember tabMember = mTabMembers.get( i );
 68                 
 69                 Bitmap icon = BitmapFactory.decodeResource( getResources( ), tabMember.getIconResourceId( ) );
 70                 Bitmap iconColored = Bitmap.createBitmap( icon.getWidth(), icon.getHeight(), Bitmap.Config.ARGB_8888 );
 71                 Paint p = new Paint( Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);
 72                 Canvas iconCanvas = new Canvas( );
 73                 iconCanvas.setBitmap( iconColored );
 74  
 75                 if( mActiveTab == i )//为已选中的tab绘制一个白蓝的渐变色，未选中的绘制一个白灰的渐变色
 76                 {
 77                     p.setShader( new LinearGradient( 0, 0, icon.getWidth(), icon.getHeight(),
 78                             0xFFFFFFFF, 0xFF54C7E1, Shader.TileMode.CLAMP ) );
 79                 }
 80                 else {    
 81                     p.setShader( new LinearGradient( 0, 0, icon.getWidth(), icon.getHeight(), 
 82                             0xFFA2A2A2, 0xFF5F5F5F, Shader.TileMode.CLAMP ) );
 83                 }
 84                 
 85                 iconCanvas.drawRect( 0, 0, icon.getWidth( ), icon.getHeight( ), p );
 86                 
 87                 for( int x = 0; x < icon.getWidth(); x++ )
 88                 {
 89                     for( int y = 0; y < icon.getHeight(); y++ )
 90                     {
 91                         if( ( icon.getPixel(x, y) & 0xFF000000 ) == 0 )
 92                         {
 93                             iconColored.setPixel( x, y, 0x00000000 );
 94                         }
 95                     }
 96                 }
 97                 
 98                 // 计算tab图片的位置
 99                 int tabImgX = singleTabWidth * i + ( singleTabWidth / 2 - icon.getWidth( ) / 2 );
100                 
101                 // 绘制tab图片 选中的和未选中的
102                 if( mActiveTab == i )
103                 {        
104                     mPaint.setARGB( 37, 255, 255, 255 );
105                     canvas.drawRoundRect(  new RectF( r.left + singleTabWidth * i + 3, r.top + 3, 
106                             r.left + singleTabWidth * ( i + 1 ) - 3, r.bottom - 2 ), 5, 5, mPaint );
107                     canvas.drawBitmap( iconColored, tabImgX , r.top + 5, null );
108                     canvas.drawText( tabMember.getText( ), 
109                             singleTabWidth * i + ( singleTabWidth / 2), r.bottom - 2, mActiveTextPaint );
110                 } else
111                 {
112                     canvas.drawBitmap( iconColored, tabImgX , r.top + 5, null );
113                     canvas.drawText( tabMember.getText( ),
114                             singleTabWidth * i + ( singleTabWidth / 2), r.bottom - 2, mInactiveTextPaint );
115                 }
116             }
117 
118         }
119         /*
120          * 触摸事件
121          */
122         @Override
123         public boolean onTouchEvent( MotionEvent motionEvent )
124         {
125             Rect r = new Rect( );
126             this.getDrawingRect( r );            
127             float singleTabWidth = r.right / ( mTabMembers.size( ) != 0 ? mTabMembers.size( ) : 1 );
128             
129             int pressedTab = (int) ( ( motionEvent.getX( ) / singleTabWidth ) - ( motionEvent.getX( ) / singleTabWidth ) % 1 );
130             
131             mActiveTab = pressedTab;
132             
133             if( this.mOnTabClickListener != null)
134             {
135                 this.mOnTabClickListener.onTabClick( mTabMembers.get( pressedTab ).getId( ) );            
136             }
137             
138             this.invalidate();
139             
140             return super.onTouchEvent( motionEvent );
141         }
142         
143         void addTabMember( TabMember tabMember )
144         {
145             mTabMembers.add( tabMember );
146         }
147         
148         void setOnTabClickListener( OnTabClickListener onTabClickListener )
149         {
150             mOnTabClickListener = onTabClickListener;
151         }
152         
153         public static class TabMember//处理tab成员
154         {
155             protected int        mId;
156             protected String    mText;
157             protected int         mIconResourceId;
158             
159             TabMember( int Id, String Text, int iconResourceId )
160             {
161                 mId = Id;
162                 mIconResourceId = iconResourceId;
163                 mText = Text;
164             }
165             
166             public int getId( )
167             {
168                 return mId;
169             }
170             
171             public String getText( )
172             {
173                 return mText;
174             }
175             
176             public int getIconResourceId( )
177             {
178                 return mIconResourceId;
179             }
180                 
181             public void setText( String Text )
182             {
183                 mText = Text;
184             }
185             
186             public void setIconResourceId( int iconResourceId )
187             {
188                 mIconResourceId = iconResourceId;
189             }
190         }
191         
192         public static interface OnTabClickListener
193         {
194             public abstract void onTabClick( int tabId );
195         }
196     }

这是MainActivity这个类里面的两个static类，看我写的注释和上篇博客的内容应该都能理解。其中还定义了触摸事件，实现点击tab出现不同布局的效果。接下来我们只需要在我们的layout上添加就可以了，我们继续写一个内部类

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->  1 public static class iRelativeLayout extends RelativeLayout//注意，还是声明为静态
  2     {
  3         private Paint    mPaint;
  4         private Rect    mRect;
  5         
  6         public iRelativeLayout( Context context, AttributeSet attrs ) 
  7         {
  8             super(context, attrs);
  9             
 10             mRect = new Rect( );
 11             mPaint = new Paint( );
 12             
 13             mPaint.setStyle( Paint.Style.FILL_AND_STROKE );
 14             mPaint.setColor( 0xFFCBD2D8 );
 15         }
 16         
 17         @Override
 18         protected void onDraw( Canvas canvas )
 19         {
 20             super.onDraw( canvas );
 21 
 22             canvas.drawColor( 0xFFC5CCD4 );
 23             
 24             this.getDrawingRect( mRect );
 25             
 26             for( int i = 0; i < mRect.right; i += 7 )//绘制屏幕背景的纹理效果
 27             {
 28                 canvas.drawRect( mRect.left + i, mRect.top, mRect.left + i + 2, mRect.bottom, mPaint );
 29             }
 30 
 31         }
 32     }
 33     
 34 
 35     private static final int TAB_HIGHLIGHT = 1;
 36     private static final int TAB_CHAT = 2;
 37     private static final int TAB_LOOPBACK = 3;
 38     private static final int TAB_REDO = 4;
 39     private iTab            mTabs;
 40     private LinearLayout     mTabLayout_One;
 41     private LinearLayout     mTabLayout_Two;
 42     private LinearLayout     mTabLayout_Three;
 43     private LinearLayout     mTabLayout_Four;
 44     private LinearLayout     mTabLayout_Five;
 45     
 46     @Override
 47     public void onCreate(Bundle savedInstanceState) 
 48     {
 49         super.onCreate(savedInstanceState);
 50         setContentView(R.layout.main); 
 51 
 52         
 53         mTabs = (iTab) this.findViewById( R.id.Tabs );
 54         mTabLayout_One = (LinearLayout) this.findViewById( R.id.TabLayout_One );
 55         mTabLayout_Two = (LinearLayout) this.findViewById( R.id.TabLayout_Two );
 56         mTabLayout_Three = (LinearLayout) this.findViewById( R.id.TabLayout_Three );
 57         mTabLayout_Four = (LinearLayout) this.findViewById( R.id.TabLayout_Four );
 58         mTabLayout_Five = (LinearLayout) this.findViewById( R.id.TabLayout_Four );//偷个懒，不写第五个界面啦
 59         
 60         mTabs.addTabMember( new TabMember( TAB_HIGHLIGHT, "精选", R.drawable.jingxuan ) );
 61         mTabs.addTabMember( new TabMember( TAB_CHAT, "类别", R.drawable.cat ) );
 62         mTabs.addTabMember( new TabMember( TAB_LOOPBACK, "25大排行榜", R.drawable.rank ) );
 63         mTabs.addTabMember( new TabMember( TAB_REDO, "搜索", R.drawable.search ) );
 64         mTabs.addTabMember( new TabMember( TAB_REDO, "更新", R.drawable.download ) );//添加tab
 65         
 66         /*初始显示第一个界面*/
 67         mTabLayout_One.setVisibility( View.VISIBLE );
 68         mTabLayout_Two.setVisibility( View.GONE );
 69         mTabLayout_Three.setVisibility( View.GONE );
 70         mTabLayout_Four.setVisibility( View.GONE );
 71         
 72         mTabs.setOnTabClickListener( new OnTabClickListener( ) {
 73             @Override
 74             public void onTabClick( int tabId )//实现点击事件
 75             {
 76                 if( tabId == TAB_HIGHLIGHT )
 77                 {
 78                     mTabLayout_One.setVisibility( View.VISIBLE );
 79                     mTabLayout_Two.setVisibility( View.GONE );
 80                     mTabLayout_Three.setVisibility( View.GONE );
 81                     mTabLayout_Four.setVisibility( View.GONE );
 82                 } else if( tabId == TAB_CHAT )
 83                 {
 84                     mTabLayout_One.setVisibility( View.GONE );
 85                     mTabLayout_Two.setVisibility( View.VISIBLE );
 86                     mTabLayout_Three.setVisibility( View.GONE );
 87                     mTabLayout_Four.setVisibility( View.GONE );
 88                 } else if( tabId == TAB_LOOPBACK )
 89                 {
 90                     mTabLayout_One.setVisibility( View.GONE );
 91                     mTabLayout_Two.setVisibility( View.GONE );
 92                     mTabLayout_Three.setVisibility( View.VISIBLE );
 93                     mTabLayout_Four.setVisibility( View.GONE );
 94                 } else if( tabId == TAB_REDO )
 95                 {
 96                     mTabLayout_One.setVisibility( View.GONE );
 97                     mTabLayout_Two.setVisibility( View.GONE );
 98                     mTabLayout_Three.setVisibility( View.GONE );
 99                     mTabLayout_Four.setVisibility( View.VISIBLE );
100                 }
101             }
102         });
103     }

其中onDraw()方法里面实现了背景的纹理效果，配合xml里面背景色的配置，实现了如下图所示的效果：

是不是非常漂亮呢。下面就是xml里面的配置了

 

代码 
<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->  1 <?xml version="1.0" encoding="utf-8"?>
  2 
  3 <view xmlns:android="http://schemas.android.com/apk/res/android"
  4     class="com.notice520.MainActivity$iRelativeLayout"
  5     android:orientation="vertical"
  6     android:layout_width="fill_parent"
  7     android:layout_height="fill_parent"
  8     android:background = "#C5CCD4FF"
  9     >
 10         <LinearLayout
 11             android:id = "@+id/TabLayout_One"
 12             android:layout_width = "fill_parent"
 13             android:layout_height = "fill_parent"
 14             android:layout_above = "@+id/Tabs"
 15             >
 16             <ScrollView android:layout_width="fill_parent" android:layout_height="wrap_content">
 17                 <RelativeLayout
 18                     android:layout_width = "fill_parent"
 19                     android:layout_height = "fill_parent"
 20                     android:visibility = "visible"
 21                     >
 22                     <TextView
 23                         android:textColor="@android:color/black"
 24                         android:textSize="30sp"
 25                         android:layout_width = "wrap_content"
 26                         android:layout_height = "wrap_content"
 27                         android:text = "春节快乐!!"
 28                     />
 29                     </RelativeLayout>
 30                 </ScrollView>
 31             </LinearLayout>
 32             
 33         <LinearLayout
 34             android:id = "@+id/TabLayout_Two"
 35             android:layout_width = "fill_parent"
 36             android:layout_height = "fill_parent"
 37             android:layout_above = "@+id/Tabs"
 38             >
 39             <ScrollView android:layout_width="fill_parent" android:layout_height="wrap_content">
 40                     <RelativeLayout
 41                         android:layout_width = "fill_parent"
 42                         android:layout_height = "fill_parent"
 43                         android:visibility = "visible"
 44                         android:layout_above = "@+id/Tabs"
 45                         >
 46                         <Button
 47                             android:layout_width = "wrap_content"
 48                             android:layout_height = "wrap_content"
 49                             android:text = "祝大家事业有成！"
 50                             android:textSize = "30sp"
 51                         />
 52                     </RelativeLayout>    
 53             </ScrollView>
 54         </LinearLayout>
 55         <LinearLayout
 56             android:id = "@+id/TabLayout_Three"
 57             android:layout_width = "fill_parent"
 58             android:layout_height = "fill_parent"
 59             android:layout_above = "@+id/Tabs"
 60             >
 61             <ScrollView android:layout_width="fill_parent" android:layout_height="wrap_content">
 62                 <RelativeLayout
 63                     android:layout_width = "fill_parent"
 64                     android:layout_height = "fill_parent"
 65                     android:visibility = "visible"
 66                     android:layout_above = "@+id/Tabs"
 67                     >
 68                     <ImageView
 69                         
 70                         android:layout_width = "fill_parent"
 71                         android:layout_height = "fill_parent"
 72                         android:src="@drawable/newq"
 73                     />
 74                 </RelativeLayout>
 75             </ScrollView>
 76         </LinearLayout>
 77         <LinearLayout
 78             android:id = "@+id/TabLayout_Four"
 79             android:layout_width = "fill_parent"
 80             android:layout_height = "fill_parent"
 81             android:layout_above = "@+id/Tabs"
 82             >
 83             <ScrollView android:layout_width="fill_parent" android:layout_height="wrap_content">        
 84                 <RelativeLayout
 85                     android:id = "@+id/TabLayout_Four"
 86                     android:layout_width = "fill_parent"
 87                     android:layout_height = "fill_parent"
 88                     android:visibility = "visible"
 89                     android:layout_above = "@+id/Tabs"
 90                     >
 91                     <TextView
 92                         android:textColor="@android:color/black"
 93                         android:layout_width = "wrap_content"
 94                         android:layout_height = "wrap_content"
 95                         android:text = "很简单，是么"
 96                     />
 97                 </RelativeLayout>
 98             </ScrollView>
 99         </LinearLayout>            
100     <view
101         class="com.notice520.MainActivity$iTab"
102         android:id="@+id/Tabs"
103         android:layout_width = "fill_parent"
104         android:layout_height = "49px"
105         android:layout_alignParentBottom = "true"
106     />    
107 </view>
108

来看看最终的效果吧

是不是还不错呢  希望大家喜欢，有问题可以留言交流。

<script type="text/javascript"></script>

分享到：
| 【转】android UI进阶之用gallery实现可滑 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    APP开发教程 Java Android移动端开发 4、Android UI进阶编程 (1) 共34页.pptx

    Android UI进阶编程主要涉及了Drawable的使用以及2D图形绘制的相关概念，这些是构建Android应用界面的关键元素。首先，我们来深入理解Android Drawable。 Android Drawable是一个抽象的概念，它涵盖了各种图形对象...

    Android高手进阶教程

    《Android高手进阶教程》是一本专为已经具备Android基础知识并渴望进一步提升技能的开发者设计的教程。本书深入探讨了Android开发的高级概念和技术，旨在帮助读者从技术层面跨越到专家水平。 首先，我们来了解一下...

    《Android高级进阶》

    《Android高级进阶》这本书是为那些已经掌握了Android基础，并希望深入学习和提升技能的开发者准备的。在Android开发的世界中，"进阶"通常意味着更复杂的技术、更高效的编程实践以及更深层次的理解。以下是对这本书...

    android仿iphone滚轮UI效果

    在Android平台上实现类似iPhone的滚轮UI效果，是一种常见的需求，尤其在开发跨平台应用时。这个项目提供了源码实现，使得开发者可以深入理解并自定义这种交互方式。滚轮UI，通常被称为“Picker”，是iOS系统中的一个...

    高清版 Android高级进阶-顾浩鑫-高清版本-带目录

    由于提供的文件信息中，标题、描述和标签均相同，且部分内容仅有重复的“霏霏”二字，无法提供具体的Android高级进阶知识点。为了满足您的要求，我将基于Android高级进阶这一主题，提供一些该领域的通用知识点，希望...

    Android开发进阶从小工到专家(pdf书签版)

    《Android开发进阶从小工到专家》是一本专为Android开发者设计的进阶教程，旨在帮助初学者和有一定基础的开发者提升技能，成为一名精通Android开发的专家。这本书涵盖了Android开发的各个方面，包括基础概念、核心...

    在android编程中做成仿iphone的tab效果.doc

    完成以上步骤后，你将拥有一个基本的仿iPhone Tab效果的Android组件。然而，为了达到更真实的体验，你可能还需要考虑以下几点： - 动态调整Tab的宽度，以适应不同的屏幕尺寸和Tab数量。 - 添加点击反馈，如颜色变化...

    Android学习进阶精品资料大全.rar

    **Android学习进阶知识点详解** 在移动开发领域，Android占据着重要的地位，是开发者们热衷于探索的技术平台。这份“Android学习进阶精品资料大全”涵盖了从基础到高级的各种资源，适合Android新手和有经验的开发者...

    Android开发进阶从小工到专家(书签版)

    《Android开发进阶从小工到专家》是一本深入探讨Android应用开发的专业书籍，旨在帮助开发者从初学者逐步提升为熟练的Android开发专家。书中的内容覆盖了Android开发的各个方面，从基础概念到高级技巧，旨在提供一个...

    Android 基于TabLayout实现的TAB页效果 仿今日头条.rar

    Android 基于TabLayout实现的TAB页导航切换效果 仿今日头条底部的TAB选项卡效果，TabLayout与ViewPager结合使用可以达到点击tab更新ViewPager、滑动ViewPager更新Tab的效果。这种效果现在在PC端、移动设备端已经很...

    Android开发进阶 从小工到专家.PDF

    根据提供的文件信息，“Android开发进阶 从小工到专家.PDF”主要聚焦于Android平台上的应用程序开发技术。尽管文件描述部分未提供具体内容，但从标题和标签来看，这本书应该是旨在帮助读者从初学者成长为精通Android...

    android高级进阶

    《Android高级进阶》是一本面向已有基础的Android开发者，旨在提升其技能和理解的教程。这份完整版的PDF教程涵盖了Android开发中的诸多高级主题，是个人学习和提升的宝贵资源。以下将对其中的关键知识点进行详细阐述...

    第05章 UI进阶.html

    第05章 UI进阶.html

    Android应用源码仿微米全部UI项目多种效果值得借鉴

    本项目是一个高仿微米UI的项目，虽然是个UI项目但是很多东西还是值得学习和借鉴的，例如里面漂亮的仿IOS开关、仿QQ的圆角退出登录按钮 、字母索引、图文混编、九宫格图片多选、二维码扫描、仿微信的附近的人列表、仿...

    android开发进阶从小工到专家 ,何红辉著.pdf

    根据提供的信息，《Android开发进阶从小工到专家》这本书由何红辉所著，主要针对的是希望在Android开发领域从入门到精通的学习者。虽然给定的部分内容并未包含实际的知识点，但从书名及描述来看，我们可以推断出这...

    Android UI中间凸起的Tab（Raised Center Tabbar）

    总的来说，实现Android UI中间凸起的Tab需要对Android系统的基本组件有深入的理解，同时需要具备一定的自定义View开发能力。通过实践这样的项目，开发者可以提升自己的技能，为构建更加独特和吸引人的应用程序打下...

    Android高级进阶学习下载

    在Android开发领域，高级进阶学习是提升技能和专业素养的关键步骤。这个资源包，名为"Android高级进阶学习下载"，显然是为了帮助开发者深入理解Android系统的内部运作机制，掌握更复杂的开发技巧，以及了解最新的...

    Android高手进阶教程pdf

    《Android高手进阶教程》是一本专为已经具备一定Android基础知识的学习者设计的教程，旨在帮助读者提升在Android开发领域的专业技能。这本书采用中文撰写，易于理解和学习，内容覆盖了Android开发的诸多重要方面。 ...

Magicbox
Global site tag (gtag.js) - Google Analytics