android基础控件（一）选项卡的实现

3 年前 · 来自专栏 android开发技术

HappyWang

计算机、人工智能算法、5g通信、RIS

1.TabHost+TabWidget+FragmentLayout

1.1 主布局main_layout

<TabHost
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@android:id/tabhost">    自带布局
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <TabWidget
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@android:id/tabs"> </TabWidget>
            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@android:id/tabcontent"/>
    </LinearLayout>
</TabHost>

1.2 选项卡布局tab1

<ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/img_01"
android:id="@+id/img1"/>

1.3 选项卡布局tab2

<ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/img_02"
    android:id="@+id/img2"/>

1.4 选项卡布局tab3

<ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/img_03"
    android:id="@+id/img3"/>

1.5 选项卡布局tab4

<ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/img_04"
    android:id="@+id/img4"/>

1.6 主活动代码Main_Acitvity

public class MainActivity extends AppCompatActivity {
    private TabHost tabHost;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tabHost=findViewById(android.R.id.tabhost);
        tabHost.setup();//初始化
        LayoutInflater inflater=LayoutInflater.from(MainActivity.this);
        inflater.inflate(R.layout.tab1,tabHost.getTabContentView());
        inflater.inflate(R.layout.tab2,tabHost.getTabContentView());
        inflater.inflate(R.layout.tab3,tabHost.getTabContentView());
        inflater.inflate(R.layout.tab4,tabHost.getTabContentView());        tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("Tab1").setContent(R.id.img1));    tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("Tab2").setContent(R.id.img2));    tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("Tab3").setContent(R.id.img3));    tabHost.addTab(tabHost.newTabSpec("tab4").setIndicator("Tab4").setContent(R.id.img4));
}

2.TabLayout+ViewPager

2.1 activity_main

<?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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:background="#cfcfcf">
    <com.google.android.material.tabs.TabLayout
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:id="@+id/tab1"
        app:tabMode="scrollable"
        android:background="@color/colorPrimaryDark"/>
    <androidx.viewpager.widget.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/vp1"/>
</LinearLayout>

2.2 Main_Activity

public class MainActivity extends AppCompatActivity {
    private TabLayout tabLayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewPager=findViewById(R.id.vp1);
        tabLayout=findViewById(R.id.tab1);
        initViewpage();
    private void initViewpage() {
        List<String> title=new ArrayList<>();
        title.add("精选");
        title.add("体育");
        title.add("巴萨");
        title.add("购物");
        title.add("明星");
        title.add("视频");
        title.add("健康");
        title.add("励志");
        title.add("图文");
        title.add("本地");
        title.add("动漫");
        title.add("搞笑");
        title.add("科技");
        for (int i=0;i<title.size();i++){
            tabLayout.addTab(tabLayout.newTab().setText(title.get(i)));
        List<Fragment> fragments=new ArrayList<>();
        for (int i=0;i<title.size();i++){
            fragments.add(new ListFragment());
        FragmentAdapter fragmentAdapter=new FragmentAdapter(getSupportFragmentManager(),fragments,title);
        viewPager.setAdapter(fragmentAdapter);
        tabLayout.setupWithViewPager(viewPager);
        tabLayout.setTabsFromPagerAdapter(fragmentAdapter);
}

2.3 FragmentAdapter类

public class FragmentAdapter extends FragmentStatePagerAdapter {
    private  List<Fragment> mfragmentList;
    private List<String> mtitles;
    public  FragmentAdapter(FragmentManager fm, List<Fragment> fragmentList,List<String> titles){
        super(fm);
        this.mfragmentList=fragmentList;
        this.mtitles=titles;
    @NonNull
    @Override
    public Fragment getItem(int position) {
        return mfragmentList.get(position);
    @Override
    public int getCount() {
        return mfragmentList.size();
    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return mtitles.get(position);
}

2.4 ListFragment类

public class ListFragment extends Fragment {
//    private RecyclerView recyclerView;
    private ListView listView;
    private ArrayAdapter<String> arrayAdapter;
    private String[] data={"Apple","Banana","Orange","Watermelon","Pear","Grape","Pineapple","Strawberry","Cherry","Mango","Apple","Banana","Orange","Watermelon","Pear","Grape","Pineapple","Strawberry","Cherry","Mango"};
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view=inflater.inflate(R.layout.list_fragment,container,false);
        listView=view.findViewById(R.id.list11);
        arrayAdapter=new ArrayAdapter<String>(getContext(),android.R.layout.simple_list_item_1,data);
        listView.setAdapter(arrayAdapter);
        return view;
    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
}

2.5 list_fragment布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ListView
        android:id="@+id/list11"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

上面的实例采用最简单的方式生成多个相同的Fragment,在实际的开发过程中，每个选项卡的tab不可能是一样的，所以一般Fragement的Adapter不选用以上的FragmentStatePagerAdapter作为父类，而是采用FragmentPagerAdapter，这个将在后面的项目实例中详细讲解。另外TabLayout和ViewPager属于Material Design组件，需要添加相关依赖：配置design support library的API

使用androidX的配置：

dependencies {
    implementation fileTree(include: ['*.jar'], dir: 'libs')
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'androidx.appcompat:appcompat:1.0.0-alpha3'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.1'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test:runner:1.1.0-alpha3'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.1.0-alpha3'
    implementation 'com.google.android.material:material:1.0.0-alpha3'
    implementation 'androidx.cardview:cardview:1.0.0-alpha3'
}

使用过去的android的配置：

dependencies {
    implementation fileTree(include: ['*.jar'], dir: 'libs')
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'com.android.support:appcompat-v7:28.0.0-alpha3'
    implementation 'com.android.support.constraint:constraint-layout:1.1.1'
    testImplementation 'junit:junit:4.12'