首先介绍下TabLayout,实际开发中我们经常需要用到Viewpager,而已需要跟头部的Tab实现联动效果。而Design的出现,给我们一种更加方便的UI框架去实现这种效果。今天就介绍它与Viewpager和Fragment之间的联动效果。首先需要先有design包:
之后我们的build.gradle文件下多了这样一句代码就ok啦。
然后接下就是布局文件:activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabTextColor="#00f"
app:tabSelectedTextColor="#f00"
app:tabIndicatorColor="#0373b4"
app:tabIndicatorHeight="5dp"
app:tabMode="scrollable" />
<android.support.v4.view.ViewPager
android:id="@+id/viewPager_main"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
同样这里需要在根标签下加入TabLayout的命名空间
xmlns:app="http://schemas.android.com/apk/res-auto"
下面我来介绍下它每个属性所代表的意思:
app:tabTextColor="#00f"
顾名思义,这个表示的是Tab上字体的颜色
app:tabSelectedTextColor="#f00"
这个属性表示Tab上选中后字体的颜色
app:tabIndicatorColor="#0373b4"
这个表示Tab的指示条的颜色
app:tabIndicatorHeight="5dp"
这个表示Tab指示条的高度
app:tabMode="scrollable"
这个表示Tab的模式。
因为我们今天这个例子需要用到ViewPager 和Fragment.所以下面的是Fragment的类和布局文件。
首先是fragment.
public class MyFragment extends ListFragment {
private final static String TAG = "DummyFragment";
private TextView tvInfo;
private ListView listView_dummy;
private int tabindex = 0;
private List<Map<String, Object>> totalList = new ArrayList<Map<String, Object>>();
public static MyFragment getInstance(int tabindex) {
MyFragment fragment = new MyFragment();
Bundle bundle = new Bundle();
bundle.putInt("tabindex", tabindex);
fragment.setArguments(bundle);
return fragment;
}
// 数据初始化
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Bundle bundle = getArguments();
tabindex = bundle.getInt("tabindex");
// 模拟一个加载数据的方法
totalList = loadNetworkData();
}
// 真实场景中应该访问网络,json解析,返回list
private List<Map<String, Object>> loadNetworkData() {
List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();
for (int i = 0; i < 20; i++) {
Map<String, Object> map = new HashMap<String, Object>();
map.put("icon", R.mipmap.ic_launcher);
map.put("username", "username_" + tabindex + "_" + i);
map.put("number", "12345_" + tabindex + "_" + i);
list.add(map);
}
return list;
}
// 负责加载ui
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_dummy, container, false);
tvInfo = (TextView) view.findViewById(R.id.textView_dummy_info);
tvInfo.setText("您点击了第" + tabindex + "个书签");
SimpleAdapter adapter = new SimpleAdapter(getActivity(), totalList, R.layout.item_dummyfragment, new String[]{"icon", "username", "number"}, new int[]{R.id.imageView_item_icon, R.id.textView_item_username, R.id.textView_item_number});
setListAdapter(adapter);
return view;
}
}
下面是fragment的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:orientation="vertical" >
<TextView
android:id="@+id/textView_dummy_info"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000"
android:textColor="#fff"
android:text="TextView" />
<ListView
android:id="@android:id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</ListView>
<TextView
android:id="@android:id/empty"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="暂无数据!" />
</LinearLayout>
然后才是我们的MainActivity
public class MainActivity extends AppCompatActivity {
private TabLayout tabLayout_main;
private ViewPager viewPager;
private List<Fragment> fragments = new ArrayList<Fragment>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
findViews();
initViewPager();
initTabs();
}
private void initViewPager() {
String[] arrTabTitles = getResources().getStringArray(R.array.arrTabTitles);
for (int i = 0; i < arrTabTitles.length; i++) {
// tabLayout_main.newTab().setIcon(R.mipmap.ic_launcher);
MyFragment fragment = MyFragment.getInstance(i + 1);
fragments.add(fragment);
}
viewPager.setAdapter(new MyPagerAdapter(getSupportFragmentManager(), fragments, arrTabTitles));
}
private void findViews() {
tabLayout_main = (TabLayout) findViewById(R.id.tabLayout_main);
viewPager = (ViewPager) findViewById(R.id.viewPager_main);
}
private void initTabs() {
tabLayout_main.setupWithViewPager(viewPager);
// tabLayout_main.setSelectedTabIndicatorColor(Color.parseColor("#ff0373b4"));
// tabLayout_main.setSelectedTabIndicatorHeight(10);
// tabLayout_main.setTabTextColors(Color.parseColor("#ff000000"), Color.parseColor("#ffff0000"));
// tabLayout_main.setSoundEffectsEnabled(true);
//tabLayout_main.setSmoothScrollingEnabled(false);
}
}
String[] arrTabTitles = getResources().getStringArray(R.array.arrTabTitles);
这里是从资源文件中得到之前定义好的字符串数组文件,这里也贴下
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string-array name="arrTabTitles">
<item>要闻</item>
<item>视频</item>
<item>娱乐</item>
<item>体育</item>
<item>财经</item>
<item>科技</item>
<item>社会</item>
<item>军事</item>
<item>游戏</item>
</string-array>
</resources>
注意,之前我们在布局文件中为TabLayout设置的属性我们在代码中也可以动态设置,
//tabLayout_main.setSelectedTabIndicatorColor(Color.parseColor("#ff0373b4"));
// tabLayout_main.setSelectedTabIndicatorHeight(10);
// tabLayout_main.setTabTextColors(Color.parseColor("#ff000000"), Color.parseColor("#ffff0000"));
// tabLayout_main.setSoundEffectsEnabled(true);
//tabLayout_main.setSmoothScrollingEnabled(false);
这里我们的ViewPager需要用到Adapter.下面是Adapter。
public class MyPagerAdapter extends FragmentPagerAdapter {
private List<Fragment> fragments = null;
private String[] tabTitles = null;
public MyPagerAdapter(FragmentManager fm, List<Fragment> fragments , String[] arrTabTitles) {
super(fm);
this.fragments = fragments;
this.tabTitles = arrTabTitles;
}
@Override
public Fragment getItem(int position) {
return fragments.get(position);
}
@Override
public int getCount() {
return fragments.size();
}
@Override
public CharSequence getPageTitle(int position) {
return tabTitles[position];
// return "--";
}
}
需要注意的是MainActivity中的TabLayout需要调用
setupWithViewPager()
该方法使Tab跟ViewPager关联起来。
而Adapter中也需要重写getPageTitle()方法。返回选中哪个页面对应的Tab.
这样就OK了。一个简单的TabLayout结合ViewPager和Fragment的联动效果就搞定了。是不是很简单。现在我们看下效果图