tablayout通常是实现最上面的导航栏所以在这里简单的写一下(图片展示的还没写)
首先再用Tablayout之前需要
compile 'com.android.support:design:26.0.0-alpha1'
贴出一些常用的属性
属性名 解释
tabContentStart 开始位置的偏移量
tabBackground 设置Tab的背景色
tabGravity 分为fill,center,Tab的对齐方式
tabIndicatorColor 导航条的颜色
tabIndicatorHeight 导航条的高度
tabMaxWidth Tab的最大宽度
tabMinWidth Tab的最小宽度
tabMode 分为scrollable,fixed,Tab的模式(设置为scrollable代表tab足够多的时候可以水平滚动,而设置为fixed则表示所有tab默认在一页显示,不能滚动)
tabPadding Tab的内边距
tabPaddingBottom Tab的内底边距
tabPaddingEnd Tab的右内边距
tabPaddingStart Tab的左内边距
tabPaddingTop Tab的上内边距
tabSelectedTextColor Tab文字选中颜色
tabTextColor Tab文字颜色(未选中)
tabTextAppearance Tab文字样式
在布局里面
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="center"
app:tabIndicatorColor="#667777">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#f1eeee"
></android.support.v4.view.ViewPager>
在具体代码里面:
package com.example.administrator.bottommenu;
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.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import static com.example.administrator.bottommenu.R.id.tablayout;
/**
* 作 者
* 创作时间:2017/6/25
* 项目名称:Bottommenu
*/
public class OneFragment extends Fragment{
// 获取两个id
private ViewPager pager;
private TabLayout layout;
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.onefragment, container, false);
/**
// 在第一碎片上面尝试添加基本tablayout来控制Fragmnet
// 添加一个闭包
// 我要在viewpager上面加载多个Fragmnet 如果每个上面的内容都类型我们只写一个
*/
pager= (ViewPager) view.findViewById(R.id.pager);
layout= (TabLayout) view.findViewById(tablayout);
final String name[]={"页面一","页面二","页面三"};
final int img[]={R.drawable.ic_tabbar_discover_normal,R.drawable.ic_tabbar_feed_normal,R.drawable.ic_tabbar_home_normal};
// 添加自定义
// 给viewpager 上面加载Fragmnet
pager.setAdapter(new FragmentPagerAdapter(getActivity().getSupportFragmentManager()) {
@Override
public Fragment getItem(int position) {
// 那么如何实现具体的传值?这里我们可以用bundle传值(由于格式相似所可以来简单的判断)
One_one_Fragment fragment = new One_one_Fragment();
Bundle bundle = new Bundle();
bundle.putString("name","postion"+position);
fragment.setArguments(bundle);
return fragment;
}
@Override
public int getCount() {
return img.length;
}
// 当滑动时设置标题也就是把Fragmnet和tablayout关联
@Override
public CharSequence getPageTitle(int position) {
return name[position];
}
});
// 给tablayout写监听
layout.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
}
});
// 具体的绑定了
// 这里可以设置它的模式
// 有四个属性
// layout.setTabMode(TabLayout.MODE_FIXED);
layout.setupWithViewPager(pager);
return view;
}
}
以上就基本上实现了fragment+viewpager的简单关联
效果图
但是如果要是自定义效果呢?
比如图片和文字:如图
这时我们需要具体的一个布局加载头部要显示的图片
<?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"
android:orientation="vertical">
<ImageView
android:id="@+id/iv_icon"
android:layout_width="30dp"
android:layout_height="30dp" />
<TextView
android:id="@+id/tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
然后在布局中
<?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"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
tools:context=".MainActivity"
tools:showIn="@layout/twofragment">
<android.support.design.widget.TabLayout
android:id="@+id/tablayout_two"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:tabGravity="fill"
app:tabIndicatorColor="#667fff">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/pager_two"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#f1eeee"
app:tabIndicatorHeight="0dp"
></android.support.v4.view.ViewPager>
</LinearLayout>
最后代码中
这里面的Fragmnet布局就不贴了。
package com.example.administrator.bottommenu;
import android.content.Context;
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.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.List;
import static com.example.administrator.bottommenu.R.id.pager_two;
import static com.example.administrator.bottommenu.R.id.tablayout_two;
/**
* 作 者:
* 创作时间:2017/6/25
* 项目名称:Bottommenu
*/
public class TwoFragment extends Fragment {
private ViewPager pager;
private TabLayout layout;
private List<Fragment> list;
private MyAdapter adapter;
private String name[] = {"页面一", "页面二", "页面三"};
private int img[] = {R.drawable.ic_tabbar_discover_normal, R.drawable.ic_tabbar_feed_normal, R.drawable.ic_tabbar_home_normal};
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.twofragment, container, false);
// 实现图片布局比较
pager = (ViewPager) view.findViewById(pager_two);
layout = (TabLayout) view.findViewById(tablayout_two);
// 给viewpager 上面加载Fragmnet
list = new ArrayList<>();
list.add(new Two_one_Fragment());
list.add(new Two_two_fragment());
list.add(new Two_three_Fragment());
//ViewPager的适配器
adapter= new MyAdapter(getActivity().getSupportFragmentManager(),getActivity());
pager.setAdapter(adapter);
//绑定
layout.setupWithViewPager(pager);
//设置自定义视图
for (int i = 0; i < layout.getTabCount(); i++) {
TabLayout.Tab tab = layout.getTabAt(i);
tab.setCustomView(adapter.getTabView(i));
}
return view;
} class MyAdapter extends FragmentPagerAdapter {
private Context context;
public MyAdapter(FragmentManager mp,Context context) {
super(mp);
this.context = context;
}
@Override
public Fragment getItem(int position) {
return list.get(position);
}
@Override
public int getCount() {
return list.size();
}
/**
* 自定义方法,提供自定义Tab
*
* @param position 位置
* @return 返回Tab的View
*/
public View getTabView(int position) {
View v = LayoutInflater.from(context).inflate(R.layout.zi_list, null);
TextView textView = (TextView) v.findViewById(R.id.tv_title);
ImageView imageView = (ImageView) v.findViewById(R.id.iv_icon);
textView.setText(name [position]);
imageView.setImageResource(img [position]);
//添加一行,设置颜色
textView.setTextColor(layout.getTabTextColors());//
return v;
}
}
}
其实这里面我只是加载了一下我们之前写的布局。
具体用法可以看
http://www.mamicode.com/info-detail-1563393.html