TableLayout与ToolBar的完美结合？

最近前段时间很多人都在玩皮皮虾 ，什么闪电皮皮虾，下面讲一下皮皮虾的浪漫漫画故事，开车啦哈哈！

到这里看下效果吧

其实像这种MD效果也比较常见
下面大家看下怎么去分析

上面的切换我已经讲过了之前关于tablelayout不知道的直接看这里

1. Android TableLayout的优雅姿势《一》
2. Android Material Design TabLayout入门篇<二>

下面讲下其实这里主要是用了一个CoordinatorLayout+AppBarLayout+ToolBar
CoordinatorLayout源码简单分析

CoordinatorLayout是一個超級動力的FrameLayout。

CoordinatorLayout適用於兩種主要用例：

作為頂層應用程序的裝飾或chrome佈局
作為用於與一個或多個子視圖的特定交互的容器
通過為CoordinatorLayout的子視圖指定行為，您可以在單個父代中提供許多不同的交互，這些視圖也可以相互交互。 View類可以在使用DefaultBehavior註釋作為CoordinatorLayout的子代時指定默認行為。

行為可以用於實現各種交互和附加的佈局修改，範圍從滑動抽屜和麵板到可滑動忽略的元素和按鈕，當它們移動和動畫時堅持其他元素。

CoordinatorLayout的Child可能有錨點。此視圖ID必須对应于CoordinatorLayout的任意後代，但它可能不是錨定的子代本身或錨定子代的後代。這可以用於相對於其他任意內容窗格放置浮動視圖。

孩子可以指定insetEdge來描述視圖如何插入CoordinatorLayout。任何被設置為通過dodgeInsetEdges閃避相同插入邊緣的子視圖將被適當地移動，以使視圖不重疊。

下面直接看下我的布局代码

<?xml version="1.0" encoding="utf-8"?>
    <android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolBar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="#30469b"
        app:layout_scrollFlags="scroll|enterAlways" />

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#30469b"
        app:tabGravity="fill"
        app:tabMode="fixed"
        app:tabSelectedTextColor="#ff0000"
        app:tabTextColor="#ffffff" />
</android.support.design.widget.AppBarLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:scrollbars="none"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
</LinearLayout>
    </android.support.design.widget.CoordinatorLayout>

appbar_scrolling_view_behavior

<string name="appbar_scrolling_view_behavior" translatable="false">android.support.design.widget.AppBarLayout$ScrollingViewBehavior</string>

再看下页面静态效果

由于我们要实现手指往上的时候TooBar要隐藏ActionBar这里我们只需要继承ActionBarActivity即可。然后看下每个里面的内容是Fragment这里需要用集合保存每一个Fragment然后在适配器里面写一个addFragment方法

 private List<Fragment> fragmentList=new ArrayList<>();
    private ViewPager vp;
    private TabLayout tabLayout;
    private Toolbar toolbar;
    private MyViewPagerAdapter adapter;

MyViewPagerAdapter中的addFragment方法

/**
     *
     * @param fragment 添加Fragment
     * @param fragmentTitle Fragment的标题，即TabLayout中对应Tab的标题
     */
    public void addFragment(Fragment fragment,String fragmentTitle)
    {
        mList.add(fragment);
        mTitles.add(fragmentTitle);
    }

到这里可能大家会问？怎么设置ToolBar标题的颜色呢？别急，三行代码就ok

   toolbar= (Toolbar) findViewById(R.id.toolBar);
        //设置ToolBar的title颜色
        toolbar.setTitleTextColor(Color.WHITE);
        setSupportActionBar(toolbar);

然后实现tablelayout点击以及滑动切换这里是viewpager+tablelayout不再赘述

 vp= (ViewPager) findViewById(R.id.viewpager);
        adapter=new MyViewPagerAdapter(getSupportFragmentManager());
        adapter.addFragment(OneFragment.newInstance("疗效"),"疗效");
        adapter.addFragment(OneFragment.newInstance("价格"),"价格");
        adapter.addFragment(OneFragment.newInstance("制作方式"),"制作方式");
        vp.setAdapter(adapter);
        tabLayout= (TabLayout) findViewById(R.id.tabLayout);
        tabLayout.setTabMode(TabLayout.MODE_FIXED);
        tabLayout.addTab(tabLayout.newTab().setText("疗效"));
        tabLayout.addTab(tabLayout.newTab().setText("价格"));
        tabLayout.addTab(tabLayout.newTab().setText("制作方式"));
        //将tablelayout与viewpager绑定
        tabLayout.setupWithViewPager(vp);

最后需要在清单文件中注册当前的Activity

 <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

最后贴上完整代码

MainActivity

package com.example.imgod.testtabicontext;

import android.graphics.Color;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.widget.Toolbar;

import com.example.imgod.testtabicontext.adapter.MyViewPagerAdapter;
import com.example.imgod.testtabicontext.fragments.OneFragment;

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

/**
 * Created by John on 2017/2/24.
 */

public class MainActivity extends ActionBarActivity {
    private List<Fragment> fragmentList=new ArrayList<>();
    private ViewPager vp;
    private TabLayout tabLayout;
    private Toolbar toolbar;
    private MyViewPagerAdapter adapter;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_test);
        initView();
    }

    private void initView() {
        toolbar= (Toolbar) findViewById(R.id.toolBar);
        //设置ToolBar的title颜色
        toolbar.setTitleTextColor(Color.WHITE);
        setSupportActionBar(toolbar);
        vp= (ViewPager) findViewById(R.id.viewpager);
        adapter=new MyViewPagerAdapter(getSupportFragmentManager());
        adapter.addFragment(OneFragment.newInstance("疗效"),"疗效");
        adapter.addFragment(OneFragment.newInstance("价格"),"价格");
        adapter.addFragment(OneFragment.newInstance("制作方式"),"制作方式");
        vp.setAdapter(adapter);
        tabLayout= (TabLayout) findViewById(R.id.tabLayout);
        tabLayout.setTabMode(TabLayout.MODE_FIXED);
        tabLayout.addTab(tabLayout.newTab().setText("疗效"));
        tabLayout.addTab(tabLayout.newTab().setText("价格"));
        tabLayout.addTab(tabLayout.newTab().setText("制作方式"));
        tabLayout.setupWithViewPager(vp);

    }
}

OneFragment

package com.example.imgod.testtabicontext.fragments;

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

import com.example.imgod.testtabicontext.R;


public class OneFragment extends Fragment {

    public static final String TYPE = "type";
    private View parentView;
    private TextView txt_content;

    public OneFragment() {
        // Required empty public constructor
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        parentView = inflater.inflate(R.layout.fragment_one, container, false);
        initView();
        return parentView;
    }

    private void initView() {

        txt_content = (TextView) parentView.findViewById(R.id.txt_content);
        txt_content.setText(getArguments().getString(TYPE, "Default"));
    }

    public static OneFragment newInstance(String text) {
        OneFragment fragment = new OneFragment();
        Bundle bundle = new Bundle();
        bundle.putString(TYPE, text);
        fragment.setArguments(bundle);
        return fragment;
    }
}

MyViewPagerAdapter

package com.example.imgod.testtabicontext.adapter;

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

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

/**
 * Created by John on 2017/2/24.
 */

public class MyViewPagerAdapter extends FragmentPagerAdapter {
    private List<Fragment> mList=new ArrayList<>();
    private Context mContext;
    private List<String> mTitles=new ArrayList<String>();

    public MyViewPagerAdapter(FragmentManager fm) {
        super(fm);
    }
    //得到对应position的Fragment
    @Override
    public Fragment getItem(int position) {
        return mList.get(position);
    }

    @Override
    public int getCount() {
        //返回Fragment的数量
        return mList.size();
    }

    /**
     *
     * @param fragment 添加Fragment
     * @param fragmentTitle Fragment的标题，即TabLayout中对应Tab的标题
     */
    public void addFragment(Fragment fragment,String fragmentTitle)
    {
        mList.add(fragment);
        mTitles.add(fragmentTitle);
    }

    @Override
    public CharSequence getPageTitle(int position) {
        //得到对应position的Fragment的title
        return mTitles.get(position);
    }
}

最后补充一个小知识点，如果你不需要tablelayout下划线直接在xm中设置 app:tabIndicatorHeight=”0dp”就ok了这个根据你项目中的需求来？这里希望可能帮助到你？

效果如下这里不贴gif图网络好卡！谅解哈！

到这里基本结束了，转载请注明出处！同时需要开车的可以加群哈！
开车记得系安全带，关爱生命从现在开始！话说今天深圳婚博会有没有想去的呢？