最近有很多事情要忙,一直没有更新博客,今天得空来写一写。话说春天什么时候来,还是冷兮兮的。
今天还是来讲下Tab的实现。android自带的Tab在有比较多条目的时候会显得非常挤,这样不仅不美观,更加影响操作。如果Tab能做成左右滑动的,那就非常好了。其实实现这种效果并不难,而且方法也不少。今天给大家介绍下用gallery这个组件来实现的方法。
首先我们需要写Gallery的适配器。这里我们要注意的是Gallery有一个特点,就是起始一个元素的左边会留下一块空位,如下图所示:
这样我们的Tab显然不是很完美,如何解决?开始想的就是去看gallery的源码,重写他。不过既然我们做的是滑动的,让他左右都可滑动不就ok了?要实现左右滑动,要做的事情就是让里面的元素循环。Gallery是即时显示图像的,可以通过两点来做到:
1.让getCount()方法返回一个非常大的值。
2.在getView()中显示的时候通过循环取余来实现一直显示数组中的有限值。
而且Gallery还提供了一个setSelection()方法,用来设置当前选择的条目,我们将显示的位置放在比较靠后的位置,这样就不会在左滑的时候滑到头,那样就可以以假乱真了。
下面来看下适配器代码:
-
publicclassTabAdapterextendsBaseAdapter{
-
privateContextmContext;
-
privateList<String>mList;
-
privateintmSelectedTab;
-
publicTabAdapter(Contextcontext,List<String>list){
-
mContext=context;
-
-
TypedArraya=obtainStyledAttributes(R.styleable.Gallery);
-
a.recycle();
-
if(list==null)
-
list=Collections.emptyList();
-
mList=list;
-
}
-
-
-
-
publicvoidsetSelectedTab(inttab){
-
if(tab!=mSelectedTab){
-
mSelectedTab=tab;
-
notifyDataSetChanged();
-
}
-
}
-
-
publicintgetSelectedTab(){
-
returnmSelectedTab;
-
}
-
publicintgetCount(){
-
returnInteger.MAX_VALUE;
-
}
-
publicObjectgetItem(intposition){
-
returnmList.get(position);
-
}
-
publiclonggetItemId(intposition){
-
returnposition;
-
}
-
publicViewgetView(intposition,ViewconvertView,ViewGroupparent){
-
TextViewtext=null;
-
if(convertView==null){
-
text=newTextView(mContext);
-
}else{
-
text=(TextView)convertView;
-
}
-
-
text.setTextColor(Color.WHITE);
-
text.setText(mList.get(position%mList.size()));
-
-
text.setLayoutParams(newGallery.LayoutParams(102,40));
-
text.setGravity(Gravity.CENTER);
-
-
-
-
-
if(position==mSelectedTab)
-
text.setBackgroundResource(R.drawable.tab_button_select);
-
else
-
text.setBackgroundResource(R.drawable.tab_button_unselect);
-
-
returntext;
-
}
-
}
注释已经写的很清楚了,应该没什么问题。
这里程序中使用了
-
TypedArraya=obtainStyledAttributes(R.styleable.Gallery);
-
a.recycle();
这是一个引用自制layout 元素的用法,必须在res/values 下面添加一个attrs.xml,并在其中定义 <declare-styleable> 标签TAG,目的是自定义layout 的背景风格,并且通过TypeArray 的特性,让相同的Layout 元素可以重复用于每一张图片,大家可以看下apiDemos里gallery1s的用法,这里也是参考它的用法。看下attrs.xml的代码:
-
<?xmlversion="1.0"encoding="utf-8"?>
-
<resources>
-
<declare-styleablename="Gallery">
-
<attrname="android:galleryItemBackground"/>
-
</declare-styleable>
-
</resources>
还要说一点的是,对于选中和未选中的背景处理。我们在onItemClick中得到选中的Tab,然后为选中的和未选中的设置一个背景。这个背景这里用自定义图形shape的方法来定义,在res/drawable下新建xml文件,tab_button_select.xml中内容如下:
-
<?xmlversion="1.0"encoding="utf-8"?>
-
<shapexmlns:android="http://schemas.android.com/apk/res/android">
-
<gradientandroid:startColor="#FFA2A2A2"android:endColor="#FF5F5F5F"
-
android:angle="90.0">
-
</gradient>
-
</shape>
其中的gradient标签实现一个从startColor到endColor角度为90渐变色。其实我们经常用这种方式来自定义我们的控件,可以用来实现圆角,渐变,描边等效果,分别在shape根节点下用gradient,corners,stroke标签实现,大家可以自己去试试,效果还是很好的,也很简单。
下面来看下MainActivity的代码,显示layout的方法和我以前一篇仿Iphone效果的Tab中一样,通过隐藏和显示相应的layout来实现。当然,也可以通过intent来指向不同的Activity等方法来做。注意定义要显示的Tab数组的时候,因为我们第一个显示的不是第一个Tab,所以适当调整下数组的定义顺序,同样对应的layou也是。
-
publicclassMainActivityextendsActivity{
-
privateGallerygallery;
-
privateTabAdaptertextAdapter;
-
privatestaticfinalString[]TAB_NAMES={
-
-
"第四个",
-
"第一个",
-
"第二个",
-
"第三个",
-
};
-
-
privateLinearLayoutmTabLayout_One;
-
privateLinearLayoutmTabLayout_Two;
-
privateLinearLayoutmTabLayout_Three;
-
privateLinearLayoutmTabLayout_Four;
-
@Override
-
publicvoidonCreate(BundlesavedInstanceState){
-
super.onCreate(savedInstanceState);
-
setContentView(R.layout.main);
-
-
gallery=(Gallery)findViewById(R.id.gallery);
-
textAdapter=newTabAdapter(this,Arrays.asList(TAB_NAMES));
-
gallery.setAdapter(textAdapter);
-
gallery.setSelection(34);
-
-
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_One.setVisibility(View.GONE);
-
mTabLayout_Two.setVisibility(View.VISIBLE);
-
mTabLayout_Three.setVisibility(View.GONE);
-
mTabLayout_Four.setVisibility(View.GONE);
-
-
gallery.setOnItemClickListener(newOnItemClickListener(){
-
@Override
-
publicvoidonItemClick(AdapterView<?>parent,Viewview,intposition,
-
longid){
-
TabAdapteradapter=(TabAdapter)parent.getAdapter();
-
adapter.setSelectedTab(position);
-
switch(position%TAB_NAMES.length){
-
case0:
-
mTabLayout_One.setVisibility(View.VISIBLE);
-
mTabLayout_Two.setVisibility(View.GONE);
-
mTabLayout_Three.setVisibility(View.GONE);
-
mTabLayout_Four.setVisibility(View.GONE);
-
break;
-
case1:
-
mTabLayout_One.setVisibility(View.GONE);
-
mTabLayout_Two.setVisibility(View.VISIBLE);
-
mTabLayout_Three.setVisibility(View.GONE);
-
mTabLayout_Four.setVisibility(View.GONE);
-
break;
-
case2:
-
mTabLayout_One.setVisibility(View.GONE);
-
mTabLayout_Two.setVisibility(View.GONE);
-
mTabLayout_Three.setVisibility(View.VISIBLE);
-
mTabLayout_Four.setVisibility(View.GONE);
-
break;
-
case3:
-
mTabLayout_One.setVisibility(View.GONE);
-
mTabLayout_Two.setVisibility(View.GONE);
-
mTabLayout_Three.setVisibility(View.GONE);
-
mTabLayout_Four.setVisibility(View.VISIBLE);
-
}
-
}
-
-
});
-
-
}
最后就是main.xml布局文件了:
这样我们用gallery实现的可滑动的Tab就完成了,看下最后的效果。
大家有什么问题可以留言交流哈。特别是对让左边不留空的方法有好的解决办法的话,希望能提出来,大家一起学习交流。
分享到:
相关推荐
android UI进阶之实现listview中checkbox的多选与记录
androidUI进阶之实现listview的下拉加载.pdf
讲下android中的PopupWindow。姑且就叫做弹窗吧,其实和AlertDialog一样,也是一种对话框,两者也经常混用,但是也各有特点。
android_UI进阶之style和theme的总结,供学习交流,谢谢~
android_UI进阶之实现listview的下拉加载,实用简单
android页面滑动效果。
该文档详细介绍了listView的分页加载
android UI进阶之android中隐藏的layout 抽屉的使用方法,需要的朋友可以参考一下
Unity UI窗口(弹窗)拖动缩放demo 在Unity里面 Unity UI窗口(弹窗)的操作,包含拖动,单边拖动缩放,对角拖拽缩放功能
自UI工作原理:Viewgroup/View/Window/WindowManager之间关系 Android事件分发机制 View重要属性和方法 自定义控件实现
Android Drawable 概述 Bitmap & .9.png Shape XML StateListDrawable Android图形编程 类简介 Canvas Paint Typeface
主要为大家详细介绍了Android UI设计之AlertDialog弹窗控件的使用方法,感兴趣的小伙伴们可以参考一下
WIN10 UI + layer弹窗 + 自适应布局 自写样式和布局,借鉴了win10Ui官网的图片。 希望大家会喜欢
第05章 UI进阶.html
关于listview的操作五花八门,有下拉刷新,分级显示,分页列表,逐页加载等,以后会陆续和大家分享这些技术,今天讲下下拉... 代码参考国外朋友JohanNilsson的实现,http://johannilsson.com/2011/03/13/android-pul
ViewPager需要androidsupportv4jar这个包的支持 来自google提供的一个附加包大家搜下即可ViewPager主要用来组织一组数据并且通过左右滑动的方式来展示 现在的大多数应用都会有一个欢迎引导页面如图所示通过左右滑动...
Android UI控件组件库集合【源码】 热门标签,流式布局,刮刮乐控件,侧滑控件,循环幻灯片控件,自动换行控件,下拉列表,圆角进度控件等常用UI控件组件合集
魔改版wordpress博客小程序源码,漂亮UI,无限弹窗广告。这套是一年前魔改的,比如后台设置分享标题/封面,banner广告替换为原生广告,弹窗广告增加无限高频弹出控制等等,前端也将广告位置添加到了最大化,并且对...