(安卓初步)简单的TabLayout与ViewPager使用

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"
    tools:context=".MainActivity"
    android:orientation="vertical">

    <com.google.android.material.tabs.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/m_tab"/>
    <androidx.viewpager.widget.ViewPager
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:id="@+id/m_vp"/>
</LinearLayout>

新建三个Fragment

图像如此

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
    tools:context=".OneFragment"
    >

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="one" />

</FrameLayout>
package com.aaa_xcdq.etwo;

import android.os.Bundle;

import androidx.fragment.app.Fragment;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


/**
 * A simple {@link Fragment} subclass.
 */
public class ThreeFragment extends Fragment {

    public ThreeFragment() {
        // Required empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_one, container, false);
    }
}

主Activity

package com.aaa_xcdq.etwo;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentPagerAdapter;
import androidx.viewpager.widget.ViewPager;

import android.os.Bundle;

import com.google.android.material.tabs.TabLayout;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private TabLayout tabLayout;
    private ViewPager viewPager;
    private List<Fragment> fragments;
    private List<String> titles;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initData();
        initView();
    }

    private void initView() {
        viewPager=findViewById(R.id.m_vp);
        tabLayout=findViewById(R.id.m_tab);
        //预加载
        viewPager.setOffscreenPageLimit(fragments.size());

        //setAdapter
        viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {

            @NonNull
            @Override
            public Fragment getItem(int position) {
                return fragments.get(position);
            }

            @Override
            public int getCount() {
                return fragments.size();
            }

            //设置标题
            @Nullable
            @Override
            public CharSequence getPageTitle(int position) {
                return titles.get(position);
            }
        });

        //将viewpager与tabLayout绑定
        tabLayout.setupWithViewPager(viewPager);
    }

    private void initData() {
        titles=new ArrayList<>();
        titles.add("one");
        titles.add("two");
        titles.add("three");
        fragments=new ArrayList<>();
        fragments.add(new OneFragment());
        fragments.add(new TwoFragment());
        fragments.add(new ThreeFragment());
    }
}

Tablayout的一些常用属性

   app:tabTextColor="@color/colorPrimary"                  //未选中时文字颜色
   app:tabSelectedTextColor="@color/colorPrimaryDark"      //选中文字时颜色,包括下划线
   app:tabBackground="@color/tabbackgournd"                //tab背景色
   app:tabIndicatorColor="@color/colorPrimaryDark"         //下划线颜色
   app:tabIndicatorHeight="5dp"                                         //下划线高度

要改变文字的话直接改不行,要设置style

app:tabTextAppearance="@style/AppTheme.TabLayout.TextAppearance"//设置style改变字体属性

发布了136 篇原创文章 · 获赞 18 · 访问量 4202

猜你喜欢

转载自blog.csdn.net/xcdq_aaa/article/details/105030450
今日推荐