TableLayout与ToolBar的完美结合？

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





















到这里看下效果吧



其实像这种MD效果也比较常见

下面大家看下怎么去分析

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

Android TableLayout的优雅姿势《一》

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图网络好卡！谅解哈！



到这里基本结束了，转载请注明出处！同时需要开车的可以加群哈！



开车记得系安全带，关爱生命从现在开始！话说今天深圳婚博会有没有想去的呢？