自定义的tab切换

这里的例子比较简单，其实就是用布局写一个tab切换，不用系统的控件或是第三方控件，样式可以自己定义，只要喜欢什么都可以添加，效果图如下：

（这里设计最后一个要求有小图标，其他的不需要，如果都需要可以把判断小图标是否显示的代码去掉即可）

首先是布局每个Item的布局，一个textview用于显示文字内容，一个用于显示角标，一个条下滑线显示游标，title_tab_item.xml如下：

<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:id="@+id/tab_item">    <TextView        android:id="@+id/name_text_spark"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginRight="5dp"        android:layout_marginTop="5dp"        android:textSize="12sp"        android:layout_gravity="top|right"        android:gravity="center"        android:text="0"        android:textColor="@color/write_ffffff"        android:background="@drawable/red_pot"/>    <TextView        android:id="@+id/name_text_view"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:textSize="16sp"        android:layout_gravity="center"        android:text="内容" />    <View        android:visibility="invisible"        android:id="@+id/view_line"        android:layout_gravity="bottom"        android:layout_width="match_parent"        android:layout_height="3dp"        android:background="#00c925"/></FrameLayout>

接下来是要一个包含tab_item的布局文件tab_layout.xml，这里默认给两个tab,如果实际应用需要多个，我们可以动态的在代码里进行添加：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="horizontal"    android:background="@drawable/tab_bar_bg"    android:layout_width="match_parent"    android:layout_height="wrap_content">    <include        android:id="@+id/ll_1"        layout="@layout/title_tab_item"        android:layout_width="0dp"        android:layout_height="match_parent"        android:layout_weight="1"        />    <include        android:id="@+id/ll_2"        layout="@layout/title_tab_item"        android:layout_width="0dp"        android:layout_height="match_parent"        android:layout_weight="1"        /></LinearLayout>

准备好后我们写入主布局文件中activity_tab.xml：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:layout_width="match_parent"    android:layout_height="match_parent">    <include layout="@layout/tab_layout"        android:id="@+id/tab_layout"/>    <FrameLayout        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1"        android:orientation="vertical"        android:id="@+id/fragment_tab_container">    </FrameLayout></LinearLayout>

看上面的布局应该知道，其实就是布局之中又包了布局，所以主布局最终用的tabitem就是第一个布局的，有些人说直接想要多少个直接放到主布局就好了，这也是可以的，只是这样复用性会大大的被减弱了，且使用起来将会不灵活，当你的tab数改变的时候，你将会要改的代码量增加，所以这里我把这个布局抽出去了。OK，接下来就是最重要的部分了，在Activity中实现tab切换的效果：

<pre name="code" class="java">/** * Created by lan.zheng on 2016/9/13. */public class MyTabActivity extends AppCompatActivity implements View.OnClickListener{    //用於標識tab    private final int TEMPORARY_TAB = 1;    private final int WORKING_TAB = 2;    private final int DONE_TAB = 3;    private final int TEST_TAB = 4;    //佈局    private LinearLayout tabLayout;    private FrameLayout temporaryLLayout;    private FrameLayout workingLLayout;    //Fragment和tab    private BaseFragment temporaryFragment;    private BaseFragment workingFragment;    private TabItem temporaryTabItem;    private TabItem workingTabItem;    //其他    private List<String> nameList = new ArrayList<>();    private ArrayList<TabItem> tabItems = new ArrayList<>();    private int select = TEMPORARY_TAB;    private BaseFragment currFragment;    @Override    protected void onCreate(@Nullable Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_tab);        initTabView();    }    private void initTabView(){        //要顯示的tab標題        nameList.add("暂存");        nameList.add("进行中");        nameList.add("已结束");//        nameList.add("test");        //初始化默認的兩個tab        tabLayout = (LinearLayout)findViewById(R.id.tab_layout);        temporaryLLayout = (FrameLayout)findViewById(R.id.ll_1);        workingLLayout = (FrameLayout)findViewById(R.id.ll_2);        temporaryLLayout.setOnClickListener(this);        workingLLayout.setOnClickListener(this);        //初始化每个Fragment        temporaryFragment = new SearchFragment();        Bundle lBundle = new Bundle();        lBundle.putInt("flag",TEMPORARY_TAB);        temporaryFragment.setArguments(lBundle);        workingFragment  = new SearchFragment();        Bundle lBundle2 = new Bundle();        lBundle.putInt("flag",WORKING_TAB);        workingFragment.setArguments(lBundle2);        //初始化每个tab内容        temporaryTabItem = initTabItem(temporaryLLayout,TEMPORARY_TAB,temporaryFragment);        workingTabItem = initTabItem(workingLLayout,WORKING_TAB,workingFragment);        tabItems.add(temporaryTabItem);        tabItems.add(workingTabItem);        //超過兩個tab時，其他的動態生成        if (nameList.size() > 2){            moreThanTwoTab();        }        //設置當前選中項        setSelect(TEMPORARY_TAB);    }    private FrameLayout otherLLayout;    private TabItem otherTabItem;    private void moreThanTwoTab(){        //默認的tab是兩個，如果有新的就動態的添加上3,4,5...        for(int i = 2;i<nameList.size();i++){            View view = LayoutInflater.from(this).inflate(R.layout.title_tab_item,null);            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams (0, ViewGroup.LayoutParams.MATCH_PARENT);            layoutParams.weight = 1;            int flag = i+1;            //以下是動態添加            otherLLayout = (FrameLayout)view.findViewById(R.id.tab_item);            otherLLayout.setOnClickListener(this);            tabLayout.addView(view,layoutParams);            view.setId(flag);  //對應Tab的id            view.setOnClickListener(this);            BaseFragment otherFragment = null;            Bundle lBundle = new Bundle();            if(flag == DONE_TAB){                otherFragment = new SearchFragment();  //第三個對應的fragment                lBundle.putInt("flag",DONE_TAB);            }/*else if(flag == TEST_TAB){                otherFragment = new SearchFragment();  //第四個對應的fragment                lBundle.putInt("flag",TEST_TAB);            }*/            otherFragment.setArguments(lBundle);            otherTabItem = initTabItem(otherLLayout,flag,otherFragment);            tabItems.add(otherTabItem);        }    }    /**     * 設置選中     * @param select     */    public void setSelect(int select) {        this.select = select;        updateTabState(select);    }    /**     * 更改選中的Item的UI     * @param select     */    public void updateTabState(int select){        for(TabItem tabItem :tabItems){            if(tabItem.tabFlag == select){                changeToFragment(tabItem.targetFragment);                //背景变换                tabItem.tabNameTextView.setTextColor(getResources().getColor(R.color.green));                if(select == DONE_TAB){                    tabItem.tabSparkTextView.setVisibility(View.VISIBLE);                    tabItem.tabSparkTextView.setText("10");                }else {                    tabItem.tabSparkTextView.setVisibility(View.INVISIBLE);                }                tabItem.lineView.setVisibility(View.VISIBLE);                if(select == TEMPORARY_TAB){                    //第一个Fragment初始化                }            }else{                tabItem.tabNameTextView.setTextColor(getResources().getColor(R.color.gray));                if(tabItem.tabFlag == 3){                    tabItem.tabSparkTextView.setVisibility(View.VISIBLE);                    tabItem.tabSparkTextView.setText("10");                }else {                    tabItem.tabSparkTextView.setVisibility(View.INVISIBLE);                }                tabItem.lineView.setVisibility(View.INVISIBLE);            }        }    }    /**     * 轉換顯示對應的Fragment     * @param toFragment     */    public void changeToFragment(BaseFragment toFragment) {        if(currFragment!=null && currFragment==toFragment){            return;        }        FragmentTransaction ft=getSupportFragmentManager().beginTransaction();        if(toFragment.isAdded()){            ft.show(toFragment);        }else{            ft.add(R.id.fragment_tab_container, toFragment);        }        if(currFragment!=null && currFragment.isAdded()){            ft.hide(currFragment);        }else{            Log.e("rainy","main curr hide failed..");        }        ft.commitAllowingStateLoss();  //允许丢失Fragment的状态，即重新生成        currFragment = toFragment;    }    @Override    public void onClick(View v) {        switch (v.getId()){            case R.id.ll_1:                setSelect(TEMPORARY_TAB);                break;            case R.id.ll_2:                setSelect(WORKING_TAB);                break;            case DONE_TAB:                setSelect(DONE_TAB);                break;            /*case TEST_TAB:                setSelect(TEST_TAB);                break;*/        }    }    private TabItem initTabItem(FrameLayout layout,int flag,BaseFragment fragment){        TabItem tabItem = new TabItem();        tabItem.tabFlag = flag;        tabItem.tabSparkTextView = (TextView) layout.findViewById(R.id.name_text_spark);        tabItem.tabNameTextView = (TextView) layout.findViewById(R.id.name_text_view);        tabItem.tabNameTextView.setText(nameList.get(flag-1));        tabItem.lineView = layout.findViewById(R.id.view_line);        tabItem.targetFragment = fragment;        tabItem.rootView = layout;        return tabItem;    }    class TabItem{        int tabFlag;        View rootView;        View lineView;  //下划线        TextView tabNameTextView;  //tab名称        TextView tabSparkTextView; //tab的提醒        BaseFragment targetFragment;   //tab的fragment    }}

代码里面有注释，不懂的就看注释吧，最后就是Fragment了，这里用了一个baseFragment，然后让所有的Fragment都实现它，这里都用了同一个SearchFragment,实际上你们需要自己添加自己对应的，这里不多说，最后贴出Fragment相关的代码：

/** * Created by lan.zheng on 2016/9/14. */public abstract class BaseFragment extends Fragment{}

/** * Created by lan.zheng on 2016/8/16. */public class SearchFragment extends BaseFragment{    private WebView mWebView;    private View view;    private  int savePath;    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {        view =  inflater.inflate(R.layout.fragment_search, null);        return view;    }    @Override    public void onViewCreated(View view, Bundle savedInstanceState) {        super.onViewCreated(view, savedInstanceState);        savePath = getArguments().getInt("flag");        Log.d("test11","flag = "+savePath);        initView();    }    private void initView(){        mWebView = (WebView) view.findViewById(R.id.webview);        WebSettings webSettings = mWebView.getSettings();        webSettings.setLoadWithOverviewMode(true);        webSettings.setSupportZoom(true);        webSettings.setBuiltInZoomControls(true);        mWebView.loadUrl("http://www.csdn.net/");        WebViewClient webViewClient = new WebViewClient() {            @Override            public boolean shouldOverrideUrlLoading(WebView view, String url) {                // TODO Auto-generated method stub                //返回值是true的时候控制去WebView打开，为false调用系统浏览器或第三方浏览器                view.loadUrl(url);                return true;            }        };       mWebView.setWebViewClient(webViewClient);    }}

这样就可以实现一个简单的tab切换操作了~~~~