android TabLayout实现京东详情效果
Google在2015的IO大会上,给我们带来了更加详细的Material Design设计规范,同时,也给我们带来了全新的Android Design Support Library,在这个support库里面,Google给我们提供了更加规范的MD设计风格的控件。最重要的是,Android Design Support Library的兼容性更广,直接可以向下兼容到Android 2.2。
这两天需要做一个仿京东详情的页面,上面的Tab切换,以前都是自己写Viewpager+fragment,或者Indicator的深度定制,一直想尝试一下TabLayout,于是就有了下面的坑。
然后下面是我简单的实现效果(个人觉得很坑,还不如自己自定义的导航器)
添加引用库
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:24.2.0'
compile 'com.android.support:design:24.2.0'
compile 'com.android.support:recyclerview-v7:24.2.0'
compile 'com.android.support:cardview-v7:24.2.0'
}
Toolbar与TabLayout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/c12"
android:gravity="center_vertical"
android:minHeight="45dp"
android:orientation="horizontal"
android:paddingLeft="15dp"
android:paddingRight="15dp">
<ImageView
android:id="@+id/back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/back_icon" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal">
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:tabTextAppearance="@style/TabLayoutTextStyle"
app:tabGravity="center"
app:tabMode="fixed"
app:tabTextColor="@color/c7"
app:tabSelectedTextColor="@color/c8"/>
</LinearLayout>
<ImageView
android:id="@+id/toolbar_more"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:background="@drawable/more_icon" />
</LinearLayout>
<View style="@style/horizontal_line" />
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<View style="@style/horizontal_line" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="@color/c12"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="收藏"
android:textSize="10sp" />
<View style="@style/vertical_line" />
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="购物车"
android:textSize="10sp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1.5"
android:background="@color/c8"
android:gravity="center">
<TextView
style="@style/style_c12_s16"
android:gravity="center"
android:text="加入购物车" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
这布局文件最关键的一点就是android.support.design.widget.TabLayout 标签中的app:tabMode=”scrollable”,他设置tab的模式为“可滑动的”。
public class ProductDetailPagerAdapter extends FragmentPagerAdapter {
private List<Fragment> mFragments=null;
private List<String> mTitles=null;
public ProductDetailPagerAdapter(FragmentManager fm, List<Fragment> mFragments,List<String> mTitles) {
super(fm);
this.mFragments =mFragments;
this.mTitles=mTitles;
}
public ProductDetailPagerAdapter(FragmentManager fm, Fragment... fragments) {
super(fm);
this.mFragments = Arrays.asList(fragments);
}
@Override
public Fragment getItem(int position) {
return mFragments.get(position);
}
@Override
public int getCount() {
return mFragments.size();
}
@Override
public CharSequence getPageTitle(int position) {
return mTitles.get(position);
}
}
public class ProductDetailsActivity extends BaseActivity {
@BindView(R.id.viewPager)
ViewPager viewPager;
@BindView(R.id.toolbar_more)
ImageView toolbarMore;
@BindView(R.id.tabLayout)
TabLayout tabLayout;
private List<Fragment> mFragments;
private String[] titles = new String[]{"商品", "详情"};
private ProductDetailPagerAdapter productPagerAdapter = null;
private MorePopupWindow popupWindow = null;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_product_details);
ButterKnife.bind(this);
init();
}
private void init() {
initViewPager();
}
private void initViewPager() {
mFragments = new ArrayList<>();
mFragments.add(new ProductFragment());
mFragments.add(new ProductDetailFragment());
productPagerAdapter = new ProductDetailPagerAdapter(getSupportFragmentManager(), mFragments, Arrays.asList(titles));
viewPager.setOffscreenPageLimit(2);
viewPager.setAdapter(productPagerAdapter);
viewPager.setCurrentItem(1);
tabLayout.setupWithViewPager(viewPager);
}
@OnClick(R.id.back)
public void backClick() {
finish();
}
@OnClick(R.id.toolbar_more)
public void moreClick() {
}
private AdapterView.OnItemClickListener onItemClickListener = new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position,
long id) {
popupWindow.dismiss();
}
};
public static void open(Context context) {
Intent intent = new Intent(context, ProductDetailsActivity.class);
context.startActivity(intent);
}
}
上面的代码都比较简单不做过多的解释,在使用TabLayout的时候需要注意一点:
MODE_SCROLLABLE:Scrollable tabs display a subset of tabs at any given moment, and can contain longer tab labels and a larger number of tabs.
MODE_SCROLLABLE适合很多tabs的情况,是可以滚动的,如果你要实现京东的那种挤在一起的效果就需要MODE_FIXED了。
app:tabTextAppearance=""
自定义icon添加到tab
private int[] imageResId = {
R.drawable.ic_one,
R.drawable.ic_two,
R.drawable.ic_three
};
// ...
@Override
public CharSequence getPageTitle(int position) {
// Generate title based on item position
// return tabTitles[position];
Drawable image = context.getResources().getDrawable(imageResId[position]);
image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight());
SpannableString sb = new SpannableString(" ");
ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);
sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
return sb;
}
运行,发现没有显示,这是因为TabLayout创建的tab默认设置textAllCaps属性为true,这阻止了ImageSpan被渲染出来,可以通过下面的样式文件定义来改变:
<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
<item name="tabTextAppearance">@style/MyCustomTextAppearance</item>
</style>
<style name="MyCustomTextAppearance" parent="TextAppearance.Design.Tab">
<item name="textAllCaps">false</item>
</style>
然后在getPageTitle方法中设置上有标题的tab
@Override
public CharSequence getPageTitle(int position) {
// Generate title based on item position
Drawable image = context.getResources().getDrawable(imageResId[position]);
image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight());
// Replace blank spaces with image icon
SpannableString sb = new SpannableString(" " + tabTitles[position]);
ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);
sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
return sb;
}
TabLayout还支持自定义View,通过getTabView来设置,这里就不讲怎么实现了,有兴趣的可以自行研究。
部分代码:https://github.com/xiangzhihong/jingdongApp
android TabLayout实现京东详情效果的更多相关文章
- 【京东详情页】——原生js爬坑之放大镜
一.引言 在商城的详情页中,放大镜的功能是很常见的.这里京东详情页就要做一个仿放大镜的效果,预览如下: 二.实现原理 实际上,放大镜的实现是单纯用几个div,鼠标移入其中一个小图div,触发事件显示另 ...
- 【京东详情页】——原生js爬坑之二级菜单
一.引言 做京东详情页仿写的时候,要用原生js实现顶部菜单的二级菜单显示与隐藏事件的触发. 过程中遇到了一个坑,在这里与大家分享.要实现的效果如下: 二.坑 谁触发事件?显示.隐藏二级菜单 ...
- android银行卡匹配、详情展开动画、仿爱奇艺视频拖拽、扫码识别手机号等源码
Android精选源码 android实现银行卡匹配信息源码 android实现可以展开查看详情的卡片 下拉刷新,上拉加载,侧滑显示菜单等效果RefreshSwipeRecyclerview andr ...
- Android 滑动定位+吸附悬停效果实现
在前两篇文章中,分别介绍了tablayout+scrollview 和 tablayout+recyclerview 实现的滑动定位的功能,文章链接: Android 实现锚点定位 Android t ...
- Android RecyclerView 实现支付宝首页效果
Android RecyclerView 实现支付宝首页效果 [TOC] 虽然我本人不喜欢支付宝的,但是这个网格本身其实还是不错的,项目更新中更改了一个布局为网格模式,类似支付宝.(估计是产品抄袭的= ...
- 在android中用跑马灯的效果显示textview
大家好,在我们通常的android project中,通常需要用到textview这一个布局文件,并且对于这一个显示布局所需要的文本文字内容. 下面我们就来介绍一种方法来实现在android中用跑马灯 ...
- 50个Android开发人员必备UI效果源码[转载]
50个Android开发人员必备UI效果源码[转载] http://blog.csdn.net/qq1059458376/article/details/8145497 Android 仿微信之主页面 ...
- android中设置Animation 动画效果
在 Android 中, Animation 动画效果的实现可以通过两种方式进行实现,一种是 tweened animation 渐变动画,另一种是 frame by frame animation ...
- Android 实现书籍翻页效果----升级篇
自从之前发布了<Android 实现书籍翻页效果----完结篇 >之后,收到了很多朋友给我留言,前段时间由于事情较多,博客写得太匆忙很多细节地方没有描述清楚.所以不少人对其中的地方有不少不 ...
随机推荐
- kafka topic 相关操作
1.列出集群中的topic bin/kafka-topics.sh --zookeeper spark1:2181,spark2:2181,spark3:2181 --list 2.创建topic r ...
- Oracle中rownum原理介绍
rownum原理如下:1.执行查询操作2.将第一行的row num置为13.将得到的行的row num与条件相比较,如果不匹配,则抛弃行,如果匹配,则返回行4.oracle获取下一行,然后将rownu ...
- 转:Xming + PuTTY 在Windows下远程Linux主机使用图形界面的程序
一.原理Linux/Unix的X Window具有网络透明性.X Window系统里有一个统一的Server来负责各个程序与显示器.键盘和鼠标等输入输出设备的交互,每个有GUI的应用程序都通过网络协议 ...
- ACM Where is the Marble?
Description Raju and Meena love to play with Marbles. They have got a lot of marbles with numbers ...
- Node.js HTTP
稳定性: 3 - 稳定 使用 HTTP 服务器或客户端功能必须调用 require('http'). Node 里的 HTTP 接口支持协议里原本比较难用的特性.特别是很大的或块编码的消息.这些接口不 ...
- Ubuntu 16.04: How to resolve libqt5x11extras5 (>= 5.1.0) but it is not going to be installed
Issue: When you install Virtualbox 5.1 on Ubuntu 16.04, you may encounter following error: root@XIAY ...
- 给现有的word和pdf加水印
iTextSharp简单生成pdf和操作pdf添加水印 给word加水印,利用的是aspose.words
- Spark Streaming + Kafka整合(Kafka broker版本0.8.2.1+)
这篇博客是基于Spark Streaming整合Kafka-0.8.2.1官方文档. 本文主要讲解了Spark Streaming如何从Kafka接收数据.Spark Streaming从Kafka接 ...
- java实例化对象
摘要:分享牛,分享牛分享,java类加载机制,java实例化对象,java实例化对象机制,java基础. java是如何实例化对象的呢?以及实例化对象的先后顺序是什么?下面我们以测试的方式说明. 1. ...
- [Centos7] bbc tools安装
作者 运维开发群 @军爷,bbc是什么? 请参考 Brendan大爷的博客 Linux 4.9's Efficient BPF-based Profiler 更新到最新 CentOS 7.3 1611 ...