关闭

android TabLayout实现京东详情效果

2697人阅读 评论(0) 收藏 举报
分类:

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的模式为“可滑动的”。
其他的用法和Indicator的用法差不多,都需要设置适配器,然后通过数据实现页面的适配。直接上代码
Adapter
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);
    }
}


主页面的相关逻辑,这里的Fragment就是简单的Fragment。
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的时候需要注意一点:
tabmode有两个属性值:
MODE_FIXED:Fixed tabs display all tabs concurrently and are best used with content that benefits from quick pivots between tabs.
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了。
为了更好的满足开发需要,TabLayout实现了自定义TabLayout的样式,然后通过引入
app:tabTextAppearance=""

自定义icon添加到tab

当前的TabLayout没有方法让我们去添加icon,我们可以使用SpannableString结合ImageSpan来实现

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

0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

Android 设置TabLayout背景和字体大小

效果图:TabLayout使用如下: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" ...
  • jdsjlzx
  • jdsjlzx
  • 2016-08-10 14:17
  • 4356

TabLayout:另一种Tab的实现方式

尊重原创转载请注明:From AigeStudio(http://blog.csdn.net/aigestudio)Power by Aige 侵权必究! 炮兵 镇楼 ...
  • u011624883
  • u011624883
  • 2016-01-19 14:54
  • 2694

Android 仿淘宝京东商品详情页阻力翻页效果

原文链接:http://code.taobao.org/p/android-example/diff/46/trunk/%E5%95%86%E5%9F%8E%E8%AF%A6%E6%83%85/src...
  • YaphetZhao
  • YaphetZhao
  • 2016-05-23 15:25
  • 4133

ios 仿京东商品详情(背景缩小,下部弹出功能)

IMG_0698.PNG 最近搞了一些动画效果如下: 1.双曲线波浪动画(http://www.jianshu.com/p/7db295fd38eb) 2.环形倒计时动画(http://...
  • qq_30513483
  • qq_30513483
  • 2016-07-09 10:38
  • 2348

Android 仿淘宝京东商品详情页阻力翻页效果

原文链接:http://code.taobao.org/p/android-example/diff/46/trunk/%E5%95%86%E5%9F%8E%E8%AF%A6%E6%83%85/src...
  • YaphetZhao
  • YaphetZhao
  • 2016-05-23 15:25
  • 4133

仿淘宝京东拖拽商品详情页上下滚动黏滞效果

比较常用的效果,有现成的,如此甚好!:) import android.content.Context; import android.content.res.TypedArray; imp...
  • gundumw100
  • gundumw100
  • 2017-04-10 19:12
  • 334

安卓(Android)ViewPager+TabLayout实现图片轮播效果

起因: 最近在做一个新闻APP,看到现在的新闻客户端顶端都有个热点新闻轮播。 思路:viewpager可以用来显示图片,并且可以提供滑动,15年(不知记错没)新出的TabLayout可以绑定View...
  • qq_21265915
  • qq_21265915
  • 2016-11-09 22:01
  • 1502

Android用TabLayout实现类似网易选项卡动态滑动效果

此前我们用HorizontalScrollView也实现了类似网易选项卡动态滑动效果,详见 Android选项卡动态滑动效果这篇文章 这里我们用TabLayout来实现这一效果。TabLayou...
  • Tom6869
  • Tom6869
  • 2016-08-19 10:36
  • 395

Android 导航条效果实现(六) TabLayout+ViewPager+Fragment

TabLayout一、继承结构public class TabLayout extends HorizontalScrollView 二、TabLayout的使用 1、TabLayout简单使用 T...
  • qq_33425116
  • qq_33425116
  • 2016-09-20 20:53
  • 11848

Android使用TabLayout、ViewPage和Fragment实现导航条的效果

1.TabLayout简介: TabLayout来自design兼容包,从源码来看其继承HorizontalScrollView。在使用的过程中需添加依赖,Android studio添加依赖如下: ...
  • zjp776
  • zjp776
  • 2017-03-14 16:01
  • 201
    本人新书
    个人资料
    • 访问:2127090次
    • 积分:28380
    • 等级:
    • 排名:第219名
    • 原创:757篇
    • 转载:263篇
    • 译文:22篇
    • 评论:385条
    技术公众号
      欢迎关注我的公众号,每天为你推荐最新的博文,与大家一起学习共同进步!
    博客专栏
    站长统计
    微博
    最新评论
    本人新作

    新书