TabLayout+ViewPager+Fragment主页面布局

主页面布局bottom_tab_layout.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.v4.view.ViewPager
android:id="@+id/id_vp"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"></android.support.v4.view.ViewPager>

<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:alpha="0.6"
android:background="@android:color/darker_gray" />

<android.support.design.widget.TabLayout
android:id="@+id/bottom_tab_layout"
android:layout_width="match_parent"
android:layout_height="50dp"
app:tabIndicatorHeight="0dp"
app:tabSelectedTextColor="@android:color/black"
app:tabTextColor="@android:color/darker_gray">

</android.support.design.widget.TabLayout>

</LinearLayout>

app:tabBackground="@null"

取消tablayout压下时的背景颜色

逻辑Activity中

public class FirstActivity extends AppCompatActivity {

public static final int[] mTabRes = new int[]{R.drawable.tab_home_selector, R.drawable.tab_discovery_selector, R.drawable.tab_attention_selector, R.drawable.tab_profile_selector};
public static final int[] mTabResPressed = new int[]{R.mipmap.ic_tab_strip_icon_feed_selected, R.mipmap.ic_tab_strip_icon_category_selected, R.mipmap.ic_tab_strip_icon_pgc_selected, R.mipmap.ic_tab_strip_icon_profile_selected};
public static final String[] mTabTitle = new String[]{"首页", "发现", "关注", "我的"};

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_first);
initView();
}

private void initView() {

final ViewPager vp = (ViewPager) findViewById(R.id.id_vp);
FragmentPagerAdapter mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public int getCount() {
return mTabTitle.length;
}

@Override
public Fragment getItem(int position) {
return FragmentFactory.createFragment(position);
}
};
vp.setAdapter(mAdapter);

final TabLayout mTabLayout = (TabLayout) findViewById(R.id.bottom_tab_layout);
// 提供自定义的布局添加Tab
for (int i = 0; i < mTabTitle.length; i++) {
mTabLayout.addTab(mTabLayout.newTab().setCustomView(getTabView(this, i)));
}
mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {

vp.setCurrentItem(tab.getPosition(),false);

//改变Tab 状态
for (int i = 0; i < mTabLayout.getTabCount(); i++) {

View view = mTabLayout.getTabAt(i).getCustomView();
ImageView icon = (ImageView) view.findViewById(R.id.tab_content_image);
TextView text = (TextView) view.findViewById(R.id.tab_content_text);

if (i == tab.getPosition()) { // 选中状态
icon.setImageResource(mTabResPressed[i]);
text.setTextColor(getResources().getColor(android.R.color.black));
} else {// 未选中状态
icon.setImageResource(mTabRes[i]);
text.setTextColor(getResources().getColor(android.R.color.darker_gray));
}
}

}

@Override
public void onTabUnselected(TabLayout.Tab tab) {

}

@Override
public void onTabReselected(TabLayout.Tab tab) {

}
});
vp.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabLayout));
}

public  View getTabView(Context context, int position) {
View view = LayoutInflater.from(context).inflate(R.layout.item, null);
ImageView tabIcon = (ImageView) view.findViewById(R.id.tab_content_image);
TextView tabText = (TextView) view.findViewById(R.id.tab_content_text);
tabIcon.setImageResource(mTabRes[position]);
tabText.setText(mTabTitle[position]);
//初始化
if(position==0){
tabIcon.setImageResource(mTabResPressed[0]);
tabText.setTextColor(getResources().getColor(android.R.color.black));
}
return view;
}

}

FragmentFactory.class如下

public class FragmentFactory {
public static Map<Integer, BaseFragment> map = new HashMap<Integer, BaseFragment>();

public static BaseFragment createFragment(int position) {

BaseFragment fragment = map.get(position);
if (fragment == null) {
Log.e("TAG", "创建一个新的Fragment了...");
switch (position) {
case 0:
fragment = new HomeFragment();
break;
case 1:
fragment = new RecommendFrament();
break;
case 2:
fragment = new TopicFragment();
break;
case 3:
fragment = new MineFragment();
break;

}
if (fragment != null) {
map.put(position, fragment);
}
}

return fragment;
}

}

vp.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabLayout));

vp.setCurrentItem(tab.getPosition(),false);

viewPager与TabLayout关联就是靠上面两句代码设置，后面的false，是取消页面滑动动画。

自定义布局item.xml文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/tab_content_image"
android:layout_width="20dp"
android:layout_height="20dp"
android:scaleType="centerCrop"
android:src="@mipmap/ic_launcher"
/>
<TextView
android:id="@+id/tab_content_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="15sp"
android:textColor="@android:color/darker_gray"
/>
</LinearLayout>

此文只为记录，2017年6月7日23:27:27 。

向大神致敬

http://www.jianshu.com/p/0b9d5777abba

资源下载

https://github.com/Qishuichixi/AssessHomeDemo

百度云

http://pan.baidu.com/s/1c2vjiE0