专注七星彩网站开发出租,云服务器上建网站,免费公司网站制作,做外贸有哪些网站平台前言之前在另外一篇中用Fragment和button实现了点击切换Fragment的效果#xff0c;比较简陋。这次改用ViewPagerTabLayout 实现联动的效果。实现效果ViewPager 多个页面滑动TabLayout 和 ViewPager绑定#xff0c;实现Fragment和标签绑定TabLayout的自定义标签以及选中颜色改…前言之前在另外一篇中用Fragment和button实现了点击切换Fragment的效果比较简陋。这次改用ViewPagerTabLayout 实现联动的效果。实现效果ViewPager 多个页面滑动TabLayout 和 ViewPager绑定实现Fragment和标签绑定TabLayout的自定义标签以及选中颜色改变效果图效果图思路分析ViewPager用来放Fragment并且实现滑动的效果。(原谅我最近才知道这个控件所以才会有上一篇用FragmentButton来实现切换。PS经常百度copy的后遗症┗( T﹏T )┛)TabLayout 用来放Fragment对应标题。标题只是文字话需要重写FragmentPagerAdapter的getPageTitle()方法来获取标题如果要用图标或者复杂的标题可以用TabLayout的setCustomView()将自定义控件放入Tab中。通过TabLayout的setupWithViewPager()方法来实现TabLayout和ViewPager联动。布局文件activity_tab_layout_custom_title.xml主界面布局文件包含一个ViewPager和一个TabLayoutxmlns:apphttp://schemas.android.com/apk/res-autoandroid:background#FFFFFFandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:orientationverticalandroid:idid/contextViewPagerandroid:layout_widthmatch_parentandroid:layout_height0pxandroid:layout_weight1android:idid/tabLayoutandroid:layout_widthmatch_parentandroid:layout_height58dpapp:tabMinWidth80dpapp:tabIndicatorColor#00000000android:background#FBFBFBapp:tabModescrollableandroid:orientationhorizontalcust_tab_title.xml自定义Tab标题的布局文件包含一个ImageView和一个TextView(图标和文本)。android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:layout_gravitycenterandroid:gravitycenterandroid:orientationverticalandroid:idid/tabIconandroid:layout_width32dpandroid:layout_height32dp/android:idid/tabTitleandroid:layout_widthwrap_contentandroid:layout_heightwrap_content/接下来是代码TabLayoutCustomTitleActivity.java主Activity文件import android.graphics.Color;import android.support.design.widget.TabLayout;import android.support.v4.app.Fragment;import android.support.v4.view.ViewPager;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.LayoutInflater;import android.view.View;import android.widget.ImageView;import android.widget.TextView;import java.util.ArrayList;import java.util.List;import csl.com.fa.adapter.TabLayoutCustomTitleAdapter;import csl.com.fa.fragment.ContextFragment;/*** TabLaytou和ViewPager联动自定义标题(icon文字)*/public class TabLayoutCustomTitleActivity extends AppCompatActivity {private String[] titleTexts new String[]{微信, 通信录, 发现, 我, QQ, 好友, 黑名单, 特别关心, 朋友圈};// 标签标题数组private int[] titleIcons new int[]{R.drawable.weixin, R.drawable.tongxunlu, R.drawable.weixin,R.drawable.tongxunlu, R.drawable.weixin, R.drawable.tongxunlu, R.drawable.weixin,R.drawable.tongxunlu,R.drawable.weixin};// 标签图标数组private TabLayout tabLayout;// tabLayoutprivate List fragmentList;// Fragment集合private ViewPager viewPager;// ViewPagerprivate TabLayoutCustomTitleAdapter adapter;private final int TAB_SELECT_COLOR Color.argb(255,72,193,30);// tab选中状态颜色private final int TAB_UN_SELECT_COLOR Color.argb(255,175,175,175);// tab非选中状态颜色Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_tab_layout_custom_title);// 初始化控件init();}/*** 初始化控件*/private void init() {fragmentList new ArrayList();// 根据标题的数量动态创建Fragment并将其动态加入Fragment集合for (String title : titleTexts) {// 声明一个FragmentContextFragment contextFragment new ContextFragment();// 声明一个Bundle用来初始化Fragment中TextView控件的文本信息Bundle bundle new Bundle();bundle.putString(textValue, title);// 将Bundle装入FragmentcontextFragment.setArguments(bundle);// 将Fragment加入Fragment集合fragmentList.add(contextFragment);}// 将Fragment集合装入适配器adapter new TabLayoutCustomTitleAdapter(getSupportFragmentManager(), fragmentList);// 初始化ViewPagerviewPager findViewById(R.id.contextViewPager);// 将适配器绑定到ViewPagerviewPager.setAdapter(adapter);// 默认第一个页面viewPager.setCurrentItem(0);// 初始化TabLayouttabLayout findViewById(R.id.tabLayout);// 将TabLayout与ViewPager绑定实现TabLayout与ViewPager联动tabLayout.setupWithViewPager(viewPager);// 自定义tab标签(这里主要是自定义控件图标标题)// 如果不需要自定义标签只需要显示文本则可以直接通过FragmentPagerAdapter的getPageTitle()方法返回标签的值setTabCustomView();}/*** 自定义tab标签(这里主要是自定义控件图标标题)*/private void setTabCustomView() {// 遍历tab标签页标题数组自定义tab显示for (int i0, lentitleTexts.length; i// 自定义控件布局 cust_tab_title(icon文本)View v LayoutInflater.from(this).inflate(R.layout.cust_tab_title, null);// 设置文本信息和颜色TextView textView v.findViewById(R.id.tabTitle);textView.setText(titleTexts[i]);textView.setTextColor(TAB_UN_SELECT_COLOR);// 设置图片ImageView imageView v.findViewById(R.id.tabIcon);imageView.setImageDrawable(getResources().getDrawable(titleIcons[i]));imageView.setColorFilter(TAB_UN_SELECT_COLOR);// 将自定义控件加入到tab中tabLayout.getTabAt(i).setCustomView(v);}// 将第一个标签页颜色调整为被选中的颜色changeTabColor(tabLayout.getTabAt(0), TAB_SELECT_COLOR);// 加入监听tabLayout.addOnTabSelectedListener(new TabLayout.BaseOnTabSelectedListener() {Overridepublic void onTabSelected(TabLayout.Tab tab) {// 将tab调整为选中的颜色changeTabColor(tab, TAB_SELECT_COLOR);}Overridepublic void onTabUnselected(TabLayout.Tab tab) {// 将tab调整为非选中的颜色changeTabColor(tab, TAB_UN_SELECT_COLOR);}Overridepublic void onTabReselected(TabLayout.Tab tab) {}});}/*** 改变Tab控件的颜色* param tab* param color*/private void changeTabColor(TabLayout.Tab tab, int color) {// 改变文本颜色TextView textView tab.getCustomView().findViewById(R.id.tabTitle);textView.setTextColor(color);// 改变图标颜色ImageView imageView tab.getCustomView().findViewById(R.id.tabIcon);imageView.setColorFilter(color);}}TabLayoutCustomTitleAdapter.javaimport android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import java.util.List;public class TabLayoutCustomTitleAdapter extends FragmentPagerAdapter {private List mFragmentList;public TabLayoutCustomTitleAdapter(FragmentManager fragmentManager, List fragmentList) {super(fragmentManager);this.mFragmentList fragmentList;}Overridepublic Fragment getItem(int position) {return mFragmentList.get(position);}Overridepublic int getCount() {return mFragmentList.size();}/*** TabLayout通过该方法获取tab的标题title* param position* return*/Overridepublic CharSequence getPageTitle(int position) {return mFragmentList.get(position).getArguments().getString(textValue);}}总结嗯比上次做的那个好看多了但是感觉这次写的说明的比较不详细但是又不知道怎么写。。下次想到了再做补充吧。有不清楚的可以留言或者发我邮箱(466120367qq.com)。后续会把demo放到git上以后会养成分享的好习惯希望大家多多指教。
