相信大家都看过很多底部导航栏,VIewPager+Fragment FragmentTableHost等
我今天讲的是Android Material Design TabLayout
不熟悉 直接进入Android Material Design 入门篇《一》
下面直接进入主题
首先还是添加依赖gradle一句话解决!然后Sync一下
compile 'com.android.support:design:25.1.0'
compile 'com.android.support:support-v4:25.1.0'
添加完之后看布局文件因为中间是ViewPager 底部是TabLayout随着ViewPager左右滑动切换下面的tablelayout也实现联动效果因此我们先画一张简图
如下有点简陋
再看下布局文件如下activity_tablelayout2.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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_weight="1"
android:scrollbars="none"
android:layout_height="0dp"/>
<android.support.design.widget.TabLayout
android:id="@+id/tab2"
android:layout_width="match_parent"
android:layout_height="50dp"
app:tabGravity="fill"
app:tabIndicatorHeight="0dp"
app:tabMode="fixed"
app:tabSelectedTextColor="#FF4081"
app:tabTextColor="#000"/>
</LinearLayout>
然后需要一个适配器我这里直接封装了!TabFragmentAdapter这里注意的是集成FragmentPageadapter不要弄错了!
package zm.jc.com.medicalsys.adapter;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import java.util.List;
import zm.jc.com.medicalsys.fragment.IndexFragment;
import zm.jc.com.medicalsys.fragment.MedicalFragment;
import zm.jc.com.medicalsys.fragment.MyFragment;
import zm.jc.com.medicalsys.fragment.StoreFragment;
/**
* Created by John on 2017/1/7.
*/
public class TabFragmentAdapter extends FragmentPagerAdapter {
private List<View> views;
private String[] strTitle={"首页","藥店","藥材","我的"};
public TabFragmentAdapter(FragmentManager fm) {
super(fm);
}
/**根据点击不同的位置切换替换不同的Fragment
默认选择首页
**/
@Override
public Fragment getItem(int position) {
if(position==1){
return new StoreFragment();
}else if(position==2){
return new MedicalFragment();
}else if(position==3){
return new MyFragment();
}
return new IndexFragment();
}
@Override
public int getCount() {
return strTitle.length;
}
/**
* tablelayout标题栏賦值
* @param position
* @return
*/
@Override
public CharSequence getPageTitle(int position) {
return strTitle[position];
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(views.get(position));
return views.get(position);
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(views.get(position));
}
}
然后主Activity初始化就是一个ViewPager和TableLayout这里不要导错包
import android.support.design.widget.TabLayout;
private void initViews() {
tabLayout= (TabLayout) findViewById(R.id.tab2);
vp= (ViewPager) findViewById(R.id.viewpager);
tabLayout.setupWithViewPager(vp);
index=tabLayout.getTabAt(0);
store=tabLayout.getTabAt(1);
medical=tabLayout.getTabAt(2);
my=tabLayout.getTabAt(3);
index.setIcon(getResources().getDrawable(R.drawable.android_bigger));
store.setIcon(getResources().getDrawable(R.drawable.ic_launcher));
medical.setIcon(getResources().getDrawable(R.drawable.ic_launcher));
my.setIcon(getResources().getDrawable(R.drawable.ic_launcher));
adapter=new TabFragmentAdapter(getSupportFragmentManager()){
};
//將ViewPager與適配器綁定起來
vp.setAdapter(adapter);
}
设置TablLayout 监听事件setOnTabSelectedListener判断选中时与viewpager绑定切换
private void initEvent() {
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
//在onTabSelected中设置选中tab时切换的图片,
// onTabUnselected中设置没有被选中时的图片。
// 别忘了mViewPager.setCurrentItem(0);这句,这是用来点击tab时切换ViewPager,
// 如果不加这一句的话滑动ViewPager底部tab可以切换,但是点击tab而ViewPager不会切换。
@Override
public void onTabSelected(TabLayout.Tab tab) {
if(tab==tabLayout.getTabAt(0)){
index.setIcon(getResources().getDrawable(R.drawable.android_bigger));
vp.setCurrentItem(0);
}else if(tab==tabLayout.getTabAt(1)){
store.setIcon(getResources().getDrawable(R.drawable.android_bigger_2));
vp.setCurrentItem(1);
}else if(tab==tabLayout.getTabAt(2)){
medical.setIcon(getResources().getDrawable(R.drawable.android_bigger_4));
vp.setCurrentItem(2);
}else if(tab==tabLayout.getTabAt(3)){
my.setIcon(getResources().getDrawable(R.drawable.android_bigger_5));
vp.setCurrentItem(3);
}
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
if(tab==tabLayout.getTabAt(0)){
tab.setIcon(getResources().getDrawable(R.drawable.ic_launcher));
}else if(tab==tabLayout.getTabAt(1)){
tab.setIcon(getResources().getDrawable(R.drawable.ic_launcher));
}else if(tab==tabLayout.getTabAt(2)){
tab.setIcon(getResources().getDrawable(R.drawable.ic_launcher));
}else if(tab==tabLayout.getTabAt(3)){
tab.setIcon(getResources().getDrawable(R.drawable.ic_launcher));
}
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
最后贴上TableLayoutActivity完整Code
package zm.jc.com.medicalsys;
import android.os.Bundle;
import android.os.PersistableBundle;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import zm.jc.com.medicalsys.adapter.TabFragmentAdapter;
/**
* Created by John on 2017/1/7.
*/
public class TabLayoutActivity extends AppCompatActivity {
private TabFragmentAdapter adapter;
private ViewPager vp;
private TabLayout tabLayout;
private TabLayout.Tab index;
private TabLayout.Tab store;
private TabLayout.Tab medical;
private TabLayout.Tab my;
@Override
public void onCreate(Bundle savedInstanceState, PersistableBundle persistentState) {
super.onCreate(savedInstanceState, persistentState);
setContentView(R.layout.activity_tablelayout2);
initViews();
initEvent();
}
private void initEvent() {
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
//在onTabSelected中设置选中tab时切换的图片,
// onTabUnselected中设置没有被选中时的图片。
// 别忘了mViewPager.setCurrentItem(0);这句,这是用来点击tab时切换ViewPager,
// 如果不加这一句的话滑动ViewPager底部tab可以切换,但是点击tab而ViewPager不会切换。
@Override
public void onTabSelected(TabLayout.Tab tab) {
if(tab==tabLayout.getTabAt(0)){
index.setIcon(getResources().getDrawable(R.drawable.android_bigger));
vp.setCurrentItem(0);
}else if(tab==tabLayout.getTabAt(1)){
store.setIcon(getResources().getDrawable(R.drawable.android_bigger_2));
vp.setCurrentItem(1);
}else if(tab==tabLayout.getTabAt(2)){
medical.setIcon(getResources().getDrawable(R.drawable.android_bigger_4));
vp.setCurrentItem(2);
}else if(tab==tabLayout.getTabAt(3)){
my.setIcon(getResources().getDrawable(R.drawable.android_bigger_5));
vp.setCurrentItem(3);
}
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
if(tab==tabLayout.getTabAt(0)){
tab.setIcon(getResources().getDrawable(R.drawable.ic_launcher));
}else if(tab==tabLayout.getTabAt(1)){
tab.setIcon(getResources().getDrawable(R.drawable.ic_launcher));
}else if(tab==tabLayout.getTabAt(2)){
tab.setIcon(getResources().getDrawable(R.drawable.ic_launcher));
}else if(tab==tabLayout.getTabAt(3)){
tab.setIcon(getResources().getDrawable(R.drawable.ic_launcher));
}
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
private void initViews() {
tabLayout= (TabLayout) findViewById(R.id.tab2);
vp= (ViewPager) findViewById(R.id.viewpager);
tabLayout.setupWithViewPager(vp);
index=tabLayout.getTabAt(0);
store=tabLayout.getTabAt(1);
medical=tabLayout.getTabAt(2);
my=tabLayout.getTabAt(3);
index.setIcon(getResources().getDrawable(R.drawable.android_bigger));
store.setIcon(getResources().getDrawable(R.drawable.ic_launcher));
medical.setIcon(getResources().getDrawable(R.drawable.ic_launcher));
my.setIcon(getResources().getDrawable(R.drawable.ic_launcher));
adapter=new TabFragmentAdapter(getSupportFragmentManager()){
};
//將ViewPager與適配器綁定起來
vp.setAdapter(adapter);
}
}
转载请注明出处!http://blog.csdn.net/qq_15950325/article/details/54172293谢谢合作!另外可以加下我的Android群!大家一起开车哈!