TabLayout替换HorizontalScrollView更加简单

源码:http://download.csdn.net/detail/lm_zp/9562130

效果图:


activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.lenovo.mydemo.MainActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="scrollable"
        app:tabIndicatorColor="#0f0"
        app:tabSelectedTextColor="#f00"
        app:tabTextColor="#000"
        ></android.support.design.widget.TabLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        ></android.support.v4.view.ViewPager>
</LinearLayout>
fragment布局

f1.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">
<TextView
    android:id="@+id/text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="50dp"
   
    />


</LinearLayout>
MainActivity

package com.example.lenovo.mydemo;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.view.ViewPager;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends FragmentActivity {


    TabLayout tablayout;
    ViewPager viewpager;
    private FragmentManager supportFragmentManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        //标题list
        List<String> list=new ArrayList<String>();
        //fragment页面list
        List<Fragment>  list1 = new ArrayList<Fragment>();
        list.add("NO1");
        list.add("NO2");
        list.add("NO3");
        list.add("NO4");
        list.add("NO5");
        list.add("NO6");
        list.add("NO7");
        list.add("NO8");
        list.add("NO9");
        list.add("NO10");

       //tablayout 赋值
      for(int i=0;i<list.size();i++) {
            tablayout.addTab(tablayout.newTab().setText(list.get(i)));
        }
        //创建Fragment页面
       for(int i=0;i<list.size();i++){
          Fragment1 f1=new Fragment1(list.get(i));
          list1.add(f1);
       }
        //Viewpager适配
       supportFragmentManager = getSupportFragmentManager();
       viewpager.setAdapter(new MyFragmentpagerAdapter(supportFragmentManager, list,list1));

       tablayout.setupWithViewPager(viewpager);//将TabLayout和ViewPager关联起来。

    }



    private void initView() {
        tablayout = (TabLayout) findViewById(R.id.tablayout);
        viewpager = (ViewPager) findViewById(R.id.viewpager);
    }
}
viewpager适配

MyFragmentpagerAdapter

package com.example.lenovo.mydemo;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.List;

/**
 * Created by lenovo on 2016/6/23.
 * Viewpager适配器
 */
public class MyFragmentpagerAdapter extends FragmentPagerAdapter{
    List<Fragment> list1;
    List<String> list;
    public MyFragmentpagerAdapter(FragmentManager fm,List<String> list, List<Fragment> list1) {
        super(fm);
        this.list1=list1;
        this.list=list;
    }

    @Override
    public Fragment getItem(int position) {
        return list1.get(position);
    }

    @Override
    public int getCount() {
        return list1.size();
    }
     //最上面字体显示
    @Override
    public CharSequence getPageTitle(int position) {
        return list.get(position);
    }
}
Fragment1

package com.example.lenovo.mydemo;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

/**
 * Created by lenovo on 2016/6/23.void
 */
public class Fragment1 extends Fragment{
    String s;
    private TextView viewById;
     //接收值
    public Fragment1(String s) {
     this.s=s;
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view=inflater.inflate(R.layout.f1,null);
        //显示哪个页面
        viewById = (TextView) view.findViewById(R.id.text);
        viewById.setText(s);
        return view;
    }
}






最近接到一个任务,就是要修改原来用的官方support包TabLayout中的指示器线宽,改成固定值,当然网上有什么反射加padding什么的,可是治标不治本,切Tab过渡动画也加不了,什么?你告诉我github又xxx类似控件,可是为什么我要放弃google大神的源码呢,改改就能增加新功能了呢,为了达到目的,我就开始了下面一系列骚操作。0. 老规矩,先放效果图1. 骚操作之一:copy support包TabLayout 一份当做自己的自定义view本次骚操作是基于support '27.1.0'版本,从support '27.1.0'拷出文件到我的项目目录如下图,蓝色部分,四个文件,当然不是一帆风顺的,需要改点包名,取消掉一下注解警告,总之后面会放出源码 不同的版本可能需要拷贝出来的文件不一样哟,于support '27.1.0'版本需要拷出上图蓝色的4个文件2. 骚操作之二: fuck源代码,读懂之后开始改造首先指示器的线是画出来的,关键代码如下 (以下改动代码均为tabLayout类)   canvas.drawRect(mIndicatorLeft, getHeight() - mSelectedIndicatorHeight,                             mIndicatorRight, getHeight(), mSelectedIndicatorPaint);OK, mIndicatorLeft是滚动或者点击切tab时候通过偏移量计算出来的,总之不重要,完成第一个目标。修改指示器线宽,思路呢,就是给mIndicatorLeft和mIndicatorRight做一个偏移量就行了, 看看我怎么改的吧其中2个成员变量是我在SlidingTabStrip类中新增的 private int mSelectedIndicatorWidth =  dpToPx(27);;         private int mMinTabWidth = Integer.MAX_VALUE;我这里偷懒一下就不做方法暴露了,直接写死了线宽为27dp了好了,已经完成修改线宽目标了。(扩展一下:这里你也可以修改draw方法,画个图,或者画个小圆圈什么的)接下来增加指示线滑动切tab的过渡动画很简单我就放代码吧,关键就是在onPageScrolled方法里面做点手脚总共改动就50来行吧,就达成效果了。是不是很简单。(简单才怪,总之做出来之后觉得确实蛮简单的) 这样改好处多多,为什么呢?xml基本不需要改变,tablayout名字改一下,代码也是导包改一下,替换官方tablayout的时候代码几乎不需要变化,是不是很爽?3. github下载,喜欢就给个star吧,如果对你有帮助的话https://github.com/zjw-swun/AppOrder4. 总结官方support包就是可以这么任性的拷贝出来,有时候一个拷出一个类根本没涉及到别的类,善假于物也。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值