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

最新推荐文章于 2022-09-30 00:00:36 发布
最新推荐文章于 2022-09-30 00:00:36 发布
阅读量606 收藏
点赞数
分类专栏： android UI进阶 android 文章标签： android iphone ui layout string null
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/izard999/article/details/7248418
版权

今天把这个仿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 );
        }
	}

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

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 );
        		}
        	}
        });
    }

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


是不是非常漂亮呢，剩下的就是在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>

来看看最终效果吧

是不是还不错呢  有问题可以留言交流。




izard999
关注
专栏目录
android UI进阶之仿iphone的tab效果
notice501的专栏
01-29 8734
相信很多人都喜欢iphone 酷炫的界面，虽然android的原生控件已经足够漂亮，但是往往不能满足用户越来越挑剔的眼光。其实，我们完全可以自己来绘制界面。今天我就来分享下做一个和iphone一样的tab界面。下面先来看下iphone上的效果在开始之前，我们必须掌握最基础的，也就是android中图形界面的绘制。首先讲下简单图形的绘制，这里我们就借绘制这个的背景部分来讲下吧。直接看代码 1 public class Itab extends View { 2 3 priva
PM进阶之路 | 产品设计规范
Ushiikawa的博客
07-10 1836
七大定律： 概念： Alan Cooper（交互设计之父）：除非有更好的选择，否则就遵从标准。 许多设计准则都基于人类心理学（人们如何感知、学习、推理、记忆，以及把意图转换为行动）。 菲茨（Paul Fitt）定律： 菲茨定律所提出的人机界面设计法则，主页定义了游标移动到目标之间的距离，目标的大小和所花费的时间之间的关系。 T：完成移动所需的平均时间； a：光标开始/停止时间； b：光标移动速度； D：从起点到目标中心的距离； W：目标的宽度。 分析： 在页面中，大而近的目标区域
android仿IOS tabview效果
01-05
android仿IOS tabview效果
ANDROID仿IOS TABVIEW ITEM悬停效果布局
10-16
本Demo实现了仿IOS的TabView的顶部悬停布局、但是实现的原理不是用的Android的ListView、也不是用的Android中ExpandableListView、是用的LinearLayout嵌入的方式实现的、且支持多个、效果还是不错的
Android 基于TabLayout实现的TAB页效果 仿今日头条.rar
07-10
Android 基于TabLayout实现的TAB页导航切换效果 仿今日头条底部的TAB选项卡效果，TabLayout与ViewPager结合使用可以达到点击tab更新ViewPager、滑动ViewPager更新Tab的效果。这种效果现在在PC端、移动设备端已经很常见了，这一个代码开源，制作方法简单，效果简洁，手轻触对应的TAb，显示的内容对应切换。 　　你可以学习下在Android开发中，tablelayout 与viewpager如何关联，如何创建每个tag标签对应的Fragment，本源码中是创建5个标题并加入布局中，实际应用中，你可以根据需要添加或减少对应的TAb布局数量。 　　编译时请在网上下载mockable-android-23.jar到\build\generated目录下。
ym——android源码大放送（实战开发必备）
热门推荐
陈宇明
08-10 4万+
文件夹 PATH 列表 卷序列号为 000A-8F50 E:. │  javaapk.com文件列表生成工具.bat │  使用说明.txt │  免费下载更多源码.url │  目录列表.txt │   ├─android web应用 │      jqmDemo_static.zip │      jqmMobileDemo-master.zip │      jqmMo
1000套安卓（Android）毕业设计（带论文）、大作业、实例快速下载 （Android Studio）
web13618542420的博客
05-30 5059
ctrl+F 快速定位 序号 类型 项目名称 1 毕业设计 毕业设计-基于安卓Android学生考勤信息管理系统.zip 2 毕业设计 毕业设计-安卓Android教务选课成绩管理系统.zip 3 毕业设计 114基于Android的理财记账本20141215+论文+需求文档+演示视频.zip.zip 4 毕业设计 Android科大讯飞语音识别.zip 5 毕业设计 基于android的点餐系统.zip.zip 6 毕业设计 Android客户端与服务器端的json数据交互(服务端客户端) .zip .
2017年最牛逼的分类Android项目源码免费一次性打包下载！
源码分享的博客
03-29 2万+
之前发过一个帖子，但是那个帖子有点问题我就重新发一个吧，下面的源码是我从今年开始不断整理源码区和其他网站上的安卓例子源码，目前总共有810套左右，根据实现的功能被我分成了100多个类，总共接近2.5G，还在不断更新。初学者可以快速方便的找到自己想要的例子，大神也可以看一下别人的方法实现。虽然的例子都是我一个人辛辛苦苦花了很多时间和精力整理的，但是既然这些例子是来自于社区那就让他们免费回归社区吧，（...
简单仿TabLayout实现个性化Tab，让Tab展现多样化
09-25
简单实现了类似网易新闻客户端Tab栏的效果，详细查看博客http://blog.csdn.net/Iamzgx/article/details/52663783
仿苹果Safari浏览器选项卡自定义TabControl控件.7z
11-09
追求界面美观的话可以美工做好图后，给每个标签添加图片，下面有加载图片的代码示例，这里只是示范自定义标签页和竖排列。仿苹果设计
Android滚动多TAB悬浮头效果
03-20
使用原生控件实现的Android滚动多TAB悬浮头效果。 使用了CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout等控件。
TabLayout轻松实现仿今日头条顶部tab导航效果
宿罪的博客
12-14 5833
前言 自android5.0出来后，谷歌使用了Material Design设计风格，随着带来了许多新的控件，如:SnackBar，TextinputLayout，以及今天使用的TabLayout，这些新控件的出现使得我们这些开发者更加方便，下面我们用TabLayout实现仿今日头条顶部导航的效果，当然是最新版的今天头条。这是我们今天要实现的一个效果:大家看到这个效果，你会怎么实现它？在以前，我们可
Android Tablayout样式修改
weixin_41650019的博客
09-30 1436
tablayout自定义样式；这是TabLayout的样式需求:这个样式就类似于简单图片的指示器，特点就是比较小，不像之前写的带有文字的tablayout。
使用TabLayout+ViewPager+Fragment+DataBing实现仿网易新闻主界面效果
willba的博客
05-11 4184
在这里首先要感谢http://blog.csdn.net/qdjdeveloper/article/details/71254819话不多说,先上效果图: 顶部的导航条是可以滑动的,底部的导航条是不能滑动! 那让我们看下具体的实现代码:1,主界面MainActivitypublic class MainActivity extends AppCompatActivity { priv
TabLayout自己踩过的一些坑
sunxiaogang0214的博客
02-07 3661
TabLayout十分强大，特别是处理顶部导航的时候，几行代码就可以达到一个非常不错的效果，配置也相对简单，具体使用，此处不多讲，说说它与ViewPager联动的一些坑1、TabLayout有直接关联 ViewPager的方法 setupWithViewPager（），使用这个方法，必须要在ViewPager设置适配器之后。 2、添加tab 使用这个方法 mTabLayout.addTab(mT
【Android进阶】实现各种各样的Tab切换效果
自由世界的专栏
07-28 1万+
一、View  + ViewPager 使用ViewPager和View实现切换效果，效果如下： 主布局界面： <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:l
android 底部tab效果,Android TabContainerView 实现底部导航栏效果 V1.0
weixin_31303743的博客
05-26 190
本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布xiaoguo.gif上图效果大家应该都很熟悉了，基本市面上的App都会用到这种布局效果，实现起来也很简单，就是上面一个ViewPager，下面一个线性布局TabContainerView就是把实现逻辑封装起来，让开发者可以通过更简单的代码实现这种布局效果，提高工作效率。使用TabContainerView tabContainer...
Android UI进阶：实现ListView的下拉加载
"androidUI进阶之实现listview的下拉加载和分页加载，以及listview中checkbox的多选与记录技术" 在Android UI开发中，ListView是一个非常重要的组件，用于展示大量的数据列表。本篇将深入探讨如何实现ListView的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值