TabLayout用法

第一步:创建布局

material design:
TabLayout
与ViewPager一起使用

<?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">

 

<android.support.design.widget.TabLayout

android:id="@+id/tabs"

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:tabMode="fixed"/>

<android.support.v4.view.ViewPager

android:id="@+id/viewpager"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@android:color/white"/>


</LinearLayout>

app:tabGravity可选fill或centre,center为中心,fill填满整个TabLayout布局

tabMode属性可选scrollable或fixed
scrollable 可滑动标签栏
fixed 无法滑动,每个选项卡平均分配空间
这两个属性也可用下面来设置
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

tabLayout.setTabMode(TabLayout.MODE_FIXED);
----------------------------------------------------------------------------------------------
第二步:创建Fragment

public class PageFragment extends android.support.v4.app.Fragment {


public static final
String ARG_PAGE = "ARG_PAGE";

private int mPage;


public static PageFragment newInstance(int page) {

Bundle args = new Bundle();

args.putInt(ARG_PAGE, page);

PageFragment pageFragment = new PageFragment();

pageFragment.setArguments(args);

return pageFragment;
}


@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

mPage = getArguments().getInt(ARG_PAGE);
}


@Nullable

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

View view = inflater.inflate(R.layout.fragment_page, container, false);

TextView textView = (TextView) view;

textView.setText("Fragment #" + mPage);

return view;

}

}

Fragment的布局文件

<?xml version="1.0" encoding="utf-8"?>

<TextView xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:gravity="center">
</TextView>

布局是一个简单的TextView,通过实例化Fragment传递参数

第三步;创建ViewPager的适配器
-------------------------------------------------------------------------------
public class SimpleFragmentPagerAdapter extends FragmentPagerAdapter {


private Context context;

private static final String[] mTitles = {"tab1", "tab2", "tab3"};


public SimpleFragmentPagerAdapter(FragmentManager fm,Context context) {

super(fm);

this.context = context;

}


@Override

public android.support.v4.app.Fragment getItem(int position) {

return PageFragment.newInstance(position + 1);

}


@Override

public int getCount() {

return mTitles.length;

}


@Override

public CharSequence getPageTitle(int position) {

return mTitles[position];

}
}


----------------------------------------------------------------------------------
第四步:在MainActivity中设置TabLayout

public class ThirdActivity extends FragmentActivity {


private SimpleFragmentPagerAdapter pagerAdapter;

private ViewPager viewPager;

private TabLayout tabLayout;


@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_third);

pagerAdapter = new SimpleFragmentPagerAdapter(getSupportFragmentManager(), this);

viewPager = (ViewPager) findViewById(R.id.viewpager);

tabLayout = (TabLayout) findViewById(R.id.tabs);

pagerAdapter = new SimpleFragmentPagerAdapter(getSupportFragmentManager(),this);

viewPager.setAdapter(pagerAdapter);
tabLayout.setupWithViewPager(viewPager);

}
}

 

posted @ 2018-07-27 22:18  小#安  阅读(93)  评论(0)    收藏  举报