- 浏览: 972516 次
- 性别:
- 来自: 山西
文章分类
最新评论
-
白小默:
你好 可以提供下源码DEMO吗,不知为何,我导出来的excel ...
jxls 使用模板文件导出生成excel -
zkzqzzz:
博主威武!
让微信二维码扫描您的APK -
zkzqzzz:
感谢博主 原来那些类都不是必须的 或者自己写!!博主真棒 ...
抢红包插件实现原理浅析 -
zkzqzzz:
博主 请问你的其他类在哪里呢?
抢红包插件实现原理浅析 -
zkzqzzz:
其他类在哪呢?
抢红包插件实现原理浅析
今天把这个仿iphone效果的tab写完,这个例子参考国外rolle3k共享的代码,感谢rolle3k。
上篇博客我们写了一个Itab类,介绍了背景的绘制和简单的一个图的贴图方法。我们继续来完成Itab这个类,同时把他放到MainAcitvity(继承Activity)这个类内部,这样,整个程序只需一个类就可以了。(上篇博客例子运行需要再建一个Activity的子类来作为lanucher)。废话不多说了,看看代码
- public static class iTab extends View
- {
- private Paint mPaint;//背景画笔
- private Paint mActiveTextPaint;//选中
- private Paint mInactiveTextPaint;//未选中
- private ArrayList<TabMember> mTabMembers;//tab成员
- private int mActiveTab;
- private OnTabClickListener mOnTabClickListener = null;
- public iTab( Context context, AttributeSet attrs ) //构造器,在里面初始化画笔
- {
- super(context, attrs);
- mTabMembers = new ArrayList<MainActivity.iTab.TabMember>( );
- mPaint = new Paint( );
- mActiveTextPaint = new Paint( );
- mInactiveTextPaint = new Paint( );
- mPaint.setStyle( Paint.Style.FILL );
- mPaint.setColor( 0xFFFFFF00 );
- mPaint.setAntiAlias(true);
- mActiveTextPaint.setTextAlign( Align.CENTER );
- mActiveTextPaint.setTextSize( 12 );
- mActiveTextPaint.setColor( 0xFFFFFFFF );
- mActiveTextPaint.setAntiAlias(true);
- mInactiveTextPaint.setTextAlign( Align.CENTER );
- mInactiveTextPaint.setTextSize( 12 );
- mInactiveTextPaint.setColor( 0xFF999999 );
- mInactiveTextPaint.setAntiAlias(true);
- mActiveTab = 0;
- }
- @Override
- protected void onDraw( Canvas canvas )
- {
- super.onDraw( canvas );
- Rect r = new Rect( );
- this.getDrawingRect( r );
- // 计算每个标签能使用多少像素
- int singleTabWidth = r.right / ( mTabMembers.size( ) != 0 ? mTabMembers.size( ) : 1 );
- // 绘制背景
- canvas.drawColor( 0xFF000000 );
- mPaint.setColor( 0xFF434343 );
- canvas.drawLine( r.left, r.top + 1, r.right, r.top + 1, mPaint );
- int color = 46;
- for( int i = 0; i < 24; i++ )
- {
- mPaint.setARGB( 255, color, color, color );
- canvas.drawRect( r.left, r.top + i + 1, r.right, r.top + i + 2, mPaint );
- color--;
- }
- // 绘制每一个tab
- for( int i = 0; i < mTabMembers.size( ); i++ )
- {
- TabMember tabMember = mTabMembers.get( i );
- Bitmap icon = BitmapFactory.decodeResource( getResources( ), tabMember.getIconResourceId( ) );
- Bitmap iconColored = Bitmap.createBitmap( icon.getWidth(), icon.getHeight(), Bitmap.Config.ARGB_8888 );
- Paint p = new Paint( Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);
- Canvas iconCanvas = new Canvas( );
- iconCanvas.setBitmap( iconColored );
- if( mActiveTab == i )//为已选中的tab绘制一个白蓝的渐变色,未选中的绘制一个白灰的渐变色
- {
- p.setShader( new LinearGradient( 0, 0, icon.getWidth(), icon.getHeight(),
- 0xFFFFFFFF, 0xFF54C7E1, Shader.TileMode.CLAMP ) );
- }
- else {
- p.setShader( new LinearGradient( 0, 0, icon.getWidth(), icon.getHeight(),
- 0xFFA2A2A2, 0xFF5F5F5F, Shader.TileMode.CLAMP ) );
- }
- iconCanvas.drawRect( 0, 0, icon.getWidth( ), icon.getHeight( ), p );
- for( int x = 0; x < icon.getWidth(); x++ )
- {
- for( int y = 0; y < icon.getHeight(); y++ )
- {
- if( ( icon.getPixel(x, y) & 0xFF000000 ) == 0 )
- {
- iconColored.setPixel( x, y, 0x00000000 );
- }
- }
- }
- // 计算tab图片的位置
- int tabImgX = singleTabWidth * i + ( singleTabWidth / 2 - icon.getWidth( ) / 2 );
- // 绘制tab图片 选中的和未选中的
- if( mActiveTab == i )
- {
- mPaint.setARGB( 37, 255, 255, 255 );
- canvas.drawRoundRect( new RectF( r.left + singleTabWidth * i + 3, r.top + 3,
- r.left + singleTabWidth * ( i + 1 ) - 3, r.bottom - 2 ), 5, 5, mPaint );
- canvas.drawBitmap( iconColored, tabImgX , r.top + 5, null );
- canvas.drawText( tabMember.getText( ),
- singleTabWidth * i + ( singleTabWidth / 2), r.bottom - 2, mActiveTextPaint );
- } else
- {
- canvas.drawBitmap( iconColored, tabImgX , r.top + 5, null );
- canvas.drawText( tabMember.getText( ),
- singleTabWidth * i + ( singleTabWidth / 2), r.bottom - 2, mInactiveTextPaint );
- }
- }
- }
- /*
- * 触摸事件
- */
- @Override
- public boolean onTouchEvent( MotionEvent motionEvent )
- {
- Rect r = new Rect( );
- this.getDrawingRect( r );
- float singleTabWidth = r.right / ( mTabMembers.size( ) != 0 ? mTabMembers.size( ) : 1 );
- int pressedTab = (int) ( ( motionEvent.getX( ) / singleTabWidth ) - ( motionEvent.getX( ) / singleTabWidth ) % 1 );
- mActiveTab = pressedTab;
- if( this.mOnTabClickListener != null)
- {
- this.mOnTabClickListener.onTabClick( mTabMembers.get( pressedTab ).getId( ) );
- }
- this.invalidate();
- return super.onTouchEvent( motionEvent );
- }
- void addTabMember( TabMember tabMember )
- {
- mTabMembers.add( tabMember );
- }
- void setOnTabClickListener( OnTabClickListener onTabClickListener )
- {
- mOnTabClickListener = onTabClickListener;
- }
- public static class TabMember//处理tab成员
- {
- protected int mId;
- protected String mText;
- protected int mIconResourceId;
- TabMember( int Id, String Text, int iconResourceId )
- {
- mId = Id;
- mIconResourceId = iconResourceId;
- mText = Text;
- }
- public int getId( )
- {
- return mId;
- }
- public String getText( )
- {
- return mText;
- }
- public int getIconResourceId( )
- {
- return mIconResourceId;
- }
- public void setText( String Text )
- {
- mText = Text;
- }
- public void setIconResourceId( int iconResourceId )
- {
- mIconResourceId = iconResourceId;
- }
- }
- public static interface OnTabClickListener
- {
- public abstract void onTabClick( int tabId );
- }
- }
- public static class iRelativeLayout extends RelativeLayout//注意,还是声明为静态
- {
- private Paint mPaint;
- private Rect mRect;
- public iRelativeLayout( Context context, AttributeSet attrs )
- {
- super(context, attrs);
- mRect = new Rect( );
- mPaint = new Paint( );
- mPaint.setStyle( Paint.Style.FILL_AND_STROKE );
- mPaint.setColor( 0xFFCBD2D8 );
- }
- @Override
- protected void onDraw( Canvas canvas )
- {
- super.onDraw( canvas );
- canvas.drawColor( 0xFFC5CCD4 );
- this.getDrawingRect( mRect );
- for( int i = 0; i < mRect.right; i += 7 )//绘制屏幕背景的纹理效果
- {
- canvas.drawRect( mRect.left + i, mRect.top, mRect.left + i + 2, mRect.bottom, mPaint );
- }
- }
- }
- private static final int TAB_HIGHLIGHT = 1;
- private static final int TAB_CHAT = 2;
- private static final int TAB_LOOPBACK = 3;
- private static final int TAB_REDO = 4;
- private iTab mTabs;
- private LinearLayout mTabLayout_One;
- private LinearLayout mTabLayout_Two;
- private LinearLayout mTabLayout_Three;
- private LinearLayout mTabLayout_Four;
- private LinearLayout mTabLayout_Five;
- @Override
- public void onCreate(Bundle savedInstanceState)
- {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.main);
- mTabs = (iTab) this.findViewById( R.id.Tabs );
- mTabLayout_One = (LinearLayout) this.findViewById( R.id.TabLayout_One );
- mTabLayout_Two = (LinearLayout) this.findViewById( R.id.TabLayout_Two );
- mTabLayout_Three = (LinearLayout) this.findViewById( R.id.TabLayout_Three );
- mTabLayout_Four = (LinearLayout) this.findViewById( R.id.TabLayout_Four );
- mTabLayout_Five = (LinearLayout) this.findViewById( R.id.TabLayout_Four );//偷个懒,不写第五个界面啦
- mTabs.addTabMember( new TabMember( TAB_HIGHLIGHT, "精选", R.drawable.jingxuan ) );
- mTabs.addTabMember( new TabMember( TAB_CHAT, "类别", R.drawable.cat ) );
- mTabs.addTabMember( new TabMember( TAB_LOOPBACK, "25大排行榜", R.drawable.rank ) );
- mTabs.addTabMember( new TabMember( TAB_REDO, "搜索", R.drawable.search ) );
- mTabs.addTabMember( new TabMember( TAB_REDO, "更新", R.drawable.download ) );//添加tab
- /*初始显示第一个界面*/
- mTabLayout_One.setVisibility( View.VISIBLE );
- mTabLayout_Two.setVisibility( View.GONE );
- mTabLayout_Three.setVisibility( View.GONE );
- mTabLayout_Four.setVisibility( View.GONE );
- mTabs.setOnTabClickListener( new OnTabClickListener( ) {
- @Override
- public void onTabClick( int tabId )//实现点击事件
- {
- if( tabId == TAB_HIGHLIGHT )
- {
- mTabLayout_One.setVisibility( View.VISIBLE );
- mTabLayout_Two.setVisibility( View.GONE );
- mTabLayout_Three.setVisibility( View.GONE );
- mTabLayout_Four.setVisibility( View.GONE );
- } else if( tabId == TAB_CHAT )
- {
- mTabLayout_One.setVisibility( View.GONE );
- mTabLayout_Two.setVisibility( View.VISIBLE );
- mTabLayout_Three.setVisibility( View.GONE );
- mTabLayout_Four.setVisibility( View.GONE );
- } else if( tabId == TAB_LOOPBACK )
- {
- mTabLayout_One.setVisibility( View.GONE );
- mTabLayout_Two.setVisibility( View.GONE );
- mTabLayout_Three.setVisibility( View.VISIBLE );
- mTabLayout_Four.setVisibility( View.GONE );
- } else if( tabId == TAB_REDO )
- {
- mTabLayout_One.setVisibility( View.GONE );
- mTabLayout_Two.setVisibility( View.GONE );
- mTabLayout_Three.setVisibility( View.GONE );
- mTabLayout_Four.setVisibility( View.VISIBLE );
- }
- }
- });
- }
是不是非常漂亮呢,剩下的就是在xml里面配置了
- <?xml version="1.0" encoding="utf-8"?>
- <view xmlns:android="http://schemas.android.com/apk/res/android"
- class="com.notice520.MainActivity$iRelativeLayout"
- android:orientation="vertical"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:background = "#C5CCD4FF"
- >
- <LinearLayout
- android:id = "@+id/TabLayout_One"
- android:layout_width = "fill_parent"
- android:layout_height = "fill_parent"
- android:layout_above = "@+id/Tabs"
- >
- <ScrollView android:layout_width="fill_parent" android:layout_height="wrap_content">
- <RelativeLayout
- android:layout_width = "fill_parent"
- android:layout_height = "fill_parent"
- android:visibility = "visible"
- >
- <TextView
- android:textColor="@android:color/black"
- android:textSize="30sp"
- android:layout_width = "wrap_content"
- android:layout_height = "wrap_content"
- android:text = "春节快乐!!"
- />
- </RelativeLayout>
- </ScrollView>
- </LinearLayout>
- <LinearLayout
- android:id = "@+id/TabLayout_Two"
- android:layout_width = "fill_parent"
- android:layout_height = "fill_parent"
- android:layout_above = "@+id/Tabs"
- >
- <ScrollView android:layout_width="fill_parent" android:layout_height="wrap_content">
- <RelativeLayout
- android:layout_width = "fill_parent"
- android:layout_height = "fill_parent"
- android:visibility = "visible"
- android:layout_above = "@+id/Tabs"
- >
- <Button
- android:layout_width = "wrap_content"
- android:layout_height = "wrap_content"
- android:text = "祝大家事业有成!"
- android:textSize = "30sp"
- />
- </RelativeLayout>
- </ScrollView>
- </LinearLayout>
- <LinearLayout
- android:id = "@+id/TabLayout_Three"
- android:layout_width = "fill_parent"
- android:layout_height = "fill_parent"
- android:layout_above = "@+id/Tabs"
- >
- <ScrollView android:layout_width="fill_parent" android:layout_height="wrap_content">
- <RelativeLayout
- android:layout_width = "fill_parent"
- android:layout_height = "fill_parent"
- android:visibility = "visible"
- android:layout_above = "@+id/Tabs"
- >
- <ImageView
- android:layout_width = "fill_parent"
- android:layout_height = "fill_parent"
- android:src="@drawable/newq"
- />
- </RelativeLayout>
- </ScrollView>
- </LinearLayout>
- <LinearLayout
- android:id = "@+id/TabLayout_Four"
- android:layout_width = "fill_parent"
- android:layout_height = "fill_parent"
- android:layout_above = "@+id/Tabs"
- >
- <ScrollView android:layout_width="fill_parent" android:layout_height="wrap_content">
- <RelativeLayout
- android:id = "@+id/TabLayout_Four"
- android:layout_width = "fill_parent"
- android:layout_height = "fill_parent"
- android:visibility = "visible"
- android:layout_above = "@+id/Tabs"
- >
- <TextView
- android:textColor="@android:color/black"
- android:layout_width = "wrap_content"
- android:layout_height = "wrap_content"
- android:text = "很简单,是么"
- />
- </RelativeLayout>
- </ScrollView>
- </LinearLayout>
- <view
- class="com.notice520.MainActivity$iTab"
- android:id="@+id/Tabs"
- android:layout_width = "fill_parent"
- android:layout_height = "49px"
- android:layout_alignParentBottom = "true"
- />
- </view>
来看看最终效果吧
发表评论
-
Android客户端代码保护技术-完整性校验
2018-01-08 17:10 1317由于Android系统固有的缺陷、Android应用分发 ... -
android开发中手动v2签名实现方法
2018-01-08 10:31 1117用v2签名前要进行v1签名或zipalign。 1. z ... -
webview支持LocalStorage本地存储
2017-03-31 10:30 1395//允许JavaScript执行 ... -
七步配置phonegap+cordova+ionic开发环境
2016-12-19 16:21 727本文讲的是Android混合 ... -
梆梆加固破解
2016-10-13 09:01 1573本文假设你已经使用过梆梆加固,手头至少有个一个通过梆梆加固后 ... -
android zxing 扫描二维码 横屏转竖屏
2016-09-14 15:41 0Zxing 竖屏切换 Android 在google上下 ... -
封装Volley使Volley的每个请求都自动保存和发送Cookie
2016-09-14 10:57 0思路很简单,每次请求获取到服务器返回的response就解 ... -
Android二维码ZXing扫描区域大小的调整,提高扫描速度
2016-09-14 10:48 2681Zxing本身默认的扫图区域最大只有 360*480 ... -
解决Android二维码扫描ZXing竖屏拉伸变长闪退扫描区域小等问题
2016-09-14 10:42 1296Android 基于google Zxing实现二维码、条形 ... -
Android平台下利用zxing实现二维码开发
2016-09-14 09:25 519现在走在大街小巷都能看到二维码,而且最近由于项目需要,所以研 ... -
Zxing扫描二维码
2016-09-14 09:24 695摘要 android Zxing扫描二维码 横竖屏 ... -
Android 基于google Zxing实现二维码、条形码扫描,仿微信二维码扫描效果
2016-09-14 09:18 546转载请注明出处:http://blog.csdn.net/x ... -
React Native应用部署/热更新-CodePush最新集成总结
2016-08-02 11:06 610本文出自《React Native学习笔记》系列文章。 ... -
让微信二维码扫描您的APK
2016-07-27 11:26 1554二维码深入人心,很多App都在官网挂出了可以扫描下载apk的 ... -
Activity类的runOnUiThread方法
2016-07-22 10:40 803[javascript] view plain c ... -
Can't create handler inside thread that has not called Looper.prepare()
2016-07-22 10:24 664错误信息:在Android开发中,如果在一个Thread中启 ... -
Android编程之解决android-support-v4打包问题
2016-07-21 09:27 584如果工程引入了android-support-v4的jar类 ... -
Android 编程下的代码混淆之(android-support-v4.jar)
2016-07-21 09:24 426项目在代码混淆过程中如果引用了第三方 Jar 包,需要在混淆 ... -
phoneGap可行性分析
2016-07-20 16:25 5431 移动应用现状 移动应用产品往往常 ... -
梆梆SDKs详细分析(1) - 防界面劫持SDK
2016-07-20 10:23 816前言 前段时间,国外知名的安全公司fireeye发 ...
相关推荐
Android UI进阶编程主要涉及了Drawable的使用以及2D图形绘制的相关概念,这些是构建Android应用界面的关键元素。首先,我们来深入理解Android Drawable。 Android Drawable是一个抽象的概念,它涵盖了各种图形对象...
Android_UI进阶之style和theme的使用 Android 中的样式(style)和主题(theme)是两种资源,都是 Android 提供的默认资源,可以供开发者使用。同时,开发者也可以自己定义style和theme,以满足不同的需求。 style...
《Android高级进阶》这本书是为那些已经掌握了Android基础,并希望深入学习和提升技能的开发者准备的。在Android开发的世界中,"进阶"通常意味着更复杂的技术、更高效的编程实践以及更深层次的理解。以下是对这本书...
《Android高手进阶教程》是一本专为对Android开发有一定基础并希望进一步提升技能的开发者设计的教材。这本书深入探讨了Android平台的核心概念和技术,旨在帮助读者从初级开发者跃升为高级工程师。以下是对该教程中...
《Android高手进阶指南》是一本专为已经具备一定Android基础的开发者准备的深度学习资料。这本书涵盖了Android开发中的高级主题和技术,旨在帮助读者提升在Android领域的专业技能,成为真正的技术专家。 首先,本书...
由于提供的文件信息中,标题、描述和标签均相同,且部分内容仅有重复的“霏霏”二字,无法提供具体的Android高级进阶知识点。为了满足您的要求,我将基于Android高级进阶这一主题,提供一些该领域的通用知识点,希望...
《Android开发进阶从小工到专家》是一本专为Android开发者设计的进阶教程,旨在帮助初学者和有一定基础的开发者提升技能,成为一名精通Android开发的专家。这本书涵盖了Android开发的各个方面,包括基础概念、核心...
在Android平台上实现类似iPhone的滚轮UI效果,是一种常见的需求,尤其在开发跨平台应用时。这个项目提供了源码实现,使得开发者可以深入理解并自定义这种交互方式。滚轮UI,通常被称为“Picker”,是iOS系统中的一个...
《Android开发进阶从小工到专家》是由资深Android开发者何红辉编著的一本专业书籍,旨在帮助初入Android开发领域的工程师逐步提升技能,直至达到专家级别。这本书以清晰的结构和高清的书签版形式呈现,使得学习过程...
《Android开发进阶:从小工到专家》这本书是Android开发者提升技能的重要参考资料,它面向有一定基础的Android程序员,旨在帮助他们从初级阶段过渡到高级专家水平。书中涵盖了一系列深入的Android开发主题,包括但不...
根据提供的文件信息,“Android开发进阶 从小工到专家.PDF”主要聚焦于Android平台上的应用程序开发技术。尽管文件描述部分未提供具体内容,但从标题和标签来看,这本书应该是旨在帮助读者从初学者成长为精通Android...
根据提供的信息,《Android开发进阶从小工到专家》这本书由何红辉所著,主要针对的是希望在Android开发领域从入门到精通的学习者。虽然给定的部分内容并未包含实际的知识点,但从书名及描述来看,我们可以推断出这...
《Android高级进阶》是一本面向已有基础的Android开发者,旨在提升其技能和理解的教程。这份完整版的PDF教程涵盖了Android开发中的诸多高级主题,是个人学习和提升的宝贵资源。以下将对其中的关键知识点进行详细阐述...
Android 基于TabLayout实现的TAB页导航切换效果 仿今日头条底部的TAB选项卡效果,TabLayout与ViewPager结合使用可以达到点击tab更新ViewPager、滑动ViewPager更新Tab的效果。这种效果现在在PC端、移动设备端已经很...
第05章 UI进阶.html
本项目是一个高仿微米UI的项目,虽然是个UI项目但是很多东西还是值得学习和借鉴的,例如里面漂亮的仿IOS开关、仿QQ的圆角退出登录按钮 、字母索引、图文混编、九宫格图片多选、二维码扫描、仿微信的附近的人列表、仿...
这个“Android应用源码之仿iPhone气泡短信DEMO”就是一个很好的例子,它为Android开发者提供了实现类似iPhone气泡效果的参考。下面我们将详细分析这个DEMO中的关键知识点。 首先,我们关注到几个关键的项目配置文件...
《Android高手进阶教程》是一本专为已经具备一定Android基础知识的开发者准备的深度学习资料。这本教程的出现,旨在帮助读者从初级开发者跃升为Android开发的专家,掌握更多的高级技术和实战经验。 首先,Android...