以前都用 viewPagerIndicator,现在无需用第三方了,Google提供的TabLayout完全可以实现。
先看看效果 不包含toolBar直接去掉即可
包含toolBar
toolBar的搜索功能:
不包含toolBar
老规矩添加依赖:
dependencies {
compile 'com.android.support:design:22.2.0'
}
MainActivity 内容
package com.liucheng.toolbardemo;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.MenuItemCompat;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;
import com.liucheng.toolbardemo.fragment.FirstFragment;
import com.liucheng.toolbardemo.fragment.SecondFragment;
import com.liucheng.toolbardemo.fragment.ThirdFragment;
public class MainActivity extends AppCompatActivity {
private Toolbar toolbar;
private TabLayout tabLayout;
private ViewPager viewPager;
private PagerAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar) this.findViewById(R.id.toolBar);
tabLayout = (TabLayout) this.findViewById(R.id.tabLayout);
// tabLayout.setTabMode(TabLayout.MODE_FIXED); 当tab很多时也只在一屏显示
// tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);当tab很多时可以滚diong
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
viewPager = (ViewPager) findViewById(R.id.viewpager);
adapter = new PagerAdapter(getSupportFragmentManager(), tabLayout.getTabCount());
viewPager.setAdapter(adapter);
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
viewPager.setCurrentItem(tab.getPosition());
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
toolbar.setTitle("ToolBar");
setSupportActionBar(toolbar);
//有些语句得写在setSupportActionBar 之后才有效果
toolbar.setNavigationIcon(R.drawable.navigation);
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem menuItem) {
int id = menuItem.getItemId();
String msg = "";
switch (id) {
case R.id.action_search:
msg = "action_search";
break;
case R.id.action_intent:
msg = "action_intent";
//这个地方要注意使用这种方式增加actionprovider不然会报错
MenuItemCompat.setActionProvider(menuItem, new MyActionProvider(MainActivity.this));
break;
default:
break;
}
Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
return false;
}
});
}
class PagerAdapter extends FragmentStatePagerAdapter {
int numOfTabs;
public PagerAdapter(FragmentManager fm, int numOfTabs) {
super(fm);
this.numOfTabs = numOfTabs;
}
@Override
public Fragment getItem(int position) {
switch (position) {
case 0:
FirstFragment tab1 = new FirstFragment();
return tab1;
case 1:
SecondFragment tab2 = new SecondFragment();
return tab2;
case 2:
ThirdFragment tab3 = new ThirdFragment();
return tab3;
default:
return null;
}
}
@Override
public int getCount() {
return numOfTabs;
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_toolbar, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
return super.onOptionsItemSelected(item);
}
}
注意事项:
// tabLayout.setTabMode(TabLayout.MODE_FIXED); 当tab很多时也只在一屏显示
// tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);当tab很多时可以滚diong
布局文件
<RelativeLayout 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"
tools:context=".MainActivity">
<android.support.v7.widget.Toolbar
android:id="@+id/toolBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
app:tabIndicatorColor="#ffffff"
android:layout_below="@id/toolBar"
app:tabTextColor="#00ff00"
app:tabSelectedTextColor="#ff0000"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/tabLayout" />
</RelativeLayout>
注意事项:可以自定义颜色
app:tabIndicatorColor="#ffffff“ 横线颜色
app:tabTextColor="#00ff00" 未选择文字颜色
app:tabSelectedTextColor="#ff0000" 选择文字颜色
注意清单文件Application节点的theme一定要禁用actionBar
<?xml version="1.0" encoding="utf-8"?>
<manifest package="com.liucheng.toolbardemo"
xmlns:android="http://schemas.android.com/apk/res/android">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
</application>
</manifest>
AppTheme文件
<resources>
<style name="AppTheme" parent="AppBaseTheme">
</style>
<style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorPrimaryDark</item>
<item name="actionMenuTextColor">@color/white</item>
<item name="android:textColorPrimary">@color/black</item>
<item name="android:windowBackground">@color/white</item>
</style>
参考:
http://www.cnblogs.com/punkisnotdead/p/4736844.html
http://www.bkjia.com/Androidjc/1040009.html具体请下载源码:
http://download.csdn.net/detail/liucheng61214/9631735