效果如上,可点击翻页和滑动翻页,当前页面标签变色。
布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
tools:context="com.zhang.tablelayoutdemo.MainActivity">
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<!--可能需要在Module setting 中引入com.android.support:design库-->
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.05"
app:tabIndicatorColor="@android:color/transparent" />
<!--去掉标签栏下方的颜色-->
</LinearLayout>
自定义TabLayout布局
<?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">
<ImageView
android:id="@+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical" />
<TextView
android:id="@+id/tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:textColor="@drawable/tab_text_color" />
<!--自定义字体颜色-->
</LinearLayout>
标签的图片和字体在选中时会变色,这里需要用xml文件配置一下
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="@drawable/note1" />
<item android:drawable="@drawable/note2"/>
</selector>
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_selected="true" android:color="#0000CD" />
<item android:color= "#000000"/>
</selector>
ViewPager适配器
package com.zhang.tablelayoutdemo;
import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
/**
* Created by Mr.Z on 2016/8/29 0029.
*/
public class ViewPagerAdapter extends FragmentPagerAdapter {
private Context context;
private int[] imgId = {
R.drawable.note,
R.drawable.note,
R.drawable.note
};
public ViewPagerAdapter(FragmentManager fm, Context context) {
super(fm);
this.context = context;
}
public View getTableView(int position) {
View tableView = LayoutInflater.from(context).inflate(R.layout.custom_tab, null);
TextView tv = (TextView) tableView.findViewById(R.id.tv);
tv.setText(getPageTitle(position));
ImageView img = (ImageView) tableView.findViewById(R.id.image);
img.setImageResource(imgId[position]);
return tableView;
}
@Override
public Fragment getItem(int position) {
switch (position){
case 0:
return new FragmentOne();
case 1:
return new FragmentTwo();
case 2:
return new FragmentThree();
}
return null;
}
@Override
public int getCount() {
return 3;
}
@Override
public CharSequence getPageTitle(int position) {
switch (position){
case 0:
return "One";
case 1:
return "Two";
case 2:
return "Three";
}
return null;
}
}
主Activity
package com.zhang.tablelayoutdemo;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager(), this);
viewPager.setAdapter(adapter);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabLayout);
tabLayout.setupWithViewPager(viewPager);
tabLayout.setTabMode(TabLayout.MODE_FIXED);
for (int i = 0; i < tabLayout.getTabCount(); i++) {
TabLayout.Tab tab = tabLayout.getTabAt(i);
if (tab != null) {
tab.setCustomView(adapter.getTableView(i));
}
}
tabLayout.getTabAt(0).getCustomView().setSelected(true);//设置选中状态
}
}
设置AppCompatActivity下的全屏
<!--自定义全屏无标题主题-->
<style name="FullscreenTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:windowFullscreen">true</item>
<item name="android:windowNoTitle">true</item>
</style>