Android_TableLayout与ViewPager2练习

需求分析

• 请用TabLayout和ViewPager实现下列界面（可以自行添加元素，以丰富该页面），或者用TabLayout和ViewPager2实现下列界面 :

1. 界面元素如图1所示，内容可以比图1更丰富：
2. 点击相应标签项，出现对应的第二个页面或第三个页面，如图1所示（点击晴天标签选项卡，在对应内容处出现晴天的图片和“晴天”的文字）
3. 要求：在选项卡中，选中的标签“晴天”文字颜色为黑色且图片为彩色，其它未选中标签的文字颜色和图片颜色都为灰色

实现

• Activity类
• 实体类
• 适配器类
• Fragment类
• 布局文件
• 资源样式文件
• 最终效果

package com.gallifrey.tablayouttest;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.viewpager2.widget.ViewPager2;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

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

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

public class MainActivity extends AppCompatActivity {
    private ViewPager2 viewPager2;
    private TabLayout tabLayout;
    private List<IconRelation> iconRelationList;
    private List<Fragment> fragmentList;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewPager2=findViewById(R.id.view_pager2);
        tabLayout=findViewById(R.id.tab_layout);
        initIcon();
        initFragment();


        //viewPage2设置适配器
        viewPager2.setAdapter(new ImageStateAdapter(this,fragmentList));
        //实现viewPage2和tabLayout联动
        new TabLayoutMediator(tabLayout, viewPager2, new TabLayoutMediator.TabConfigurationStrategy() {
            @Override
            public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
                tab.setCustomView(getTabView(iconRelationList,position));
            }
        }).attach();

        //设置默认选项
        tabLayout.getTabAt(1).select();

        //设置监听
        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                View view=tab.getCustomView();
                ImageView imageView=view.findViewById(R.id.tab_iv);
                TextView textView=view.findViewById(R.id.tab_tv);
                imageView.setSelected(true);
                textView.setTextAppearance(R.style.TabSelectedStyle);
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                View view=tab.getCustomView();
                ImageView imageView=view.findViewById(R.id.tab_iv);
                TextView textView=view.findViewById(R.id.tab_tv);
                imageView.setSelected(false);
                textView.setTextAppearance(R.style.TabUnSelectedStyle);
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
    }

    // 获取tabview
    private View getTabView(List<IconRelation> data, int position) {
        View view= LayoutInflater.from(this).inflate(R.layout.tab_item,null);
        ImageView imageView=view.findViewById(R.id.tab_iv);
        TextView textView=view.findViewById(R.id.tab_tv);
        imageView.setImageResource(data.get(position).getImageId());
        textView.setText(data.get(position).getName());
        return view;
    }

    //初始化图标
    private void initIcon() {
        iconRelationList=new ArrayList<>();
        iconRelationList.add(new IconRelation(R.drawable.sunny,"晴天"));
        iconRelationList.add(new IconRelation(R.drawable.cloudyy,"多云"));
        iconRelationList.add(new IconRelation(R.drawable.rainy,"下雨"));

    }

    //初始化fragment
    private void initFragment() {
        fragmentList=new ArrayList<>();
        fragmentList.add(ImageFragment.newInstance(R.drawable.sunday));
        fragmentList.add(ImageFragment.newInstance(R.drawable.cloudyday));
        fragmentList.add(ImageFragment.newInstance(R.drawable.rainyday));
    }
}

package com.gallifrey.todayapplication.tablayout;

public class IconRelation {
    private int imageId;
    private String name;

    public IconRelation(int imageId, String name) {
        this.imageId = imageId;
        this.name = name;
    }

    public int getImageId() {
        return imageId;
    }

    public void setImageId(int imageId) {
        this.imageId = imageId;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

package com.gallifrey.tablayouttest;

import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentActivity;
import androidx.viewpager2.adapter.FragmentStateAdapter;

import java.util.List;

public class ImageStateAdapter extends FragmentStateAdapter {
    private List<Fragment> fragmentList;

    public ImageStateAdapter(@NonNull FragmentActivity fragmentActivity, List<Fragment> fragmentList) {
        super(fragmentActivity);
        this.fragmentList=fragmentList;
    }

    @NonNull
    @Override
    public Fragment createFragment(int position) {
        return fragmentList.get(position);
    }

    @Override
    public int getItemCount() {
        return fragmentList.size();
    }
}

package com.gallifrey.tablayouttest;

import android.os.Bundle;

import androidx.fragment.app.Fragment;

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

/**
 * A simple {@link Fragment} subclass.
 * Use the {@link ImageFragment#newInstance} factory method to
 * create an instance of this fragment.
 */
public class ImageFragment extends Fragment {

    // TODO: Rename parameter arguments, choose names that match
    // the fragment initialization parameters, e.g. ARG_ITEM_NUMBER
    private static final String ARG_PARAM1 = "param1";
//    private static final String ARG_PARAM2 = "param2";

    // TODO: Rename and change types of parameters
    private int mParam1;
//    private String mParam2;

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

    /**
     * Use this factory method to create a new instance of
     * this fragment using the provided parameters.
     *
     * @param param1 Parameter 1.
//     * @param param2 Parameter 2.
     * @return A new instance of fragment ImageFragment.
     */
    // TODO: Rename and change types and number of parameters
    public static ImageFragment newInstance(int param1) {
        ImageFragment fragment = new ImageFragment();
        Bundle args = new Bundle();
        args.putInt(ARG_PARAM1, param1);
//        args.putString(ARG_PARAM2, param2);
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null) {
            mParam1 = getArguments().getInt(ARG_PARAM1);
//            mParam2 = getArguments().getString(ARG_PARAM2);
        }
    }



    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View view= inflater.inflate(R.layout.fragment_image, container, false);
        ImageView imageView=view.findViewById(R.id.fl_iv);
        imageView.setImageResource(mParam1);  //设置图片来源
        return view;
    }
}

• activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".tablayout.TabLayoutActivity">
    <com.google.android.material.tabs.TabLayout
        app:tabIndicatorColor="#05d236"
        app:tabIndicatorHeight="5dp"
        app:tabIndicatorFullWidth="false"
        app:tabTextColor="#6F392727"
        app:tabSelectedTextColor="#05d236"
        app:tabTextAppearance="@style/TabStyle"
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
<!--   静态添加     -->
<!--        <com.google.android.material.tabs.TabItem-->
<!--            android:layout_width="wrap_content"-->
<!--            android:layout_height="match_parent"-->
<!--            android:text="tab1"/>-->
<!--        <com.google.android.material.tabs.TabItem-->
<!--            android:layout_width="wrap_content"-->
<!--            android:layout_height="match_parent"-->
<!--            android:text="tab2"/>-->
<!--        <com.google.android.material.tabs.TabItem-->
<!--            android:layout_width="wrap_content"-->
<!--            android:layout_height="match_parent"-->
<!--            android:text="tab3"/>-->



    </com.google.android.material.tabs.TabLayout>
<!--    viewPage已经停止维护，请使用viewPage2-->
<!--    <androidx.viewpager.widget.ViewPager-->
<!--        android:id="@+id/view_pager"-->
<!--        android:layout_width="match_parent"-->
<!--        android:layout_height="0dp"-->
<!--        app:layout_constraintVertical_weight="1"-->
<!--        app:layout_constraintTop_toBottomOf="@id/tab_layout"-->
<!--        />-->
    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/view_pager2"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintVertical_weight="1"
        app:layout_constraintTop_toBottomOf="@id/tab_layout"
        />


</androidx.constraintlayout.widget.ConstraintLayout>

• fragment_image.xml

<?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=".tablayout.MessageFragment">

    <!-- TODO: Update blank fragment layout -->
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/fl_iv"
        android:scaleType="centerCrop"
        />

</FrameLayout>

• tab_item.xml

<?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"
    android:orientation="vertical"
    android:padding="5dp">
    <TextView
        android:layout_width="48dp"
        android:layout_height="wrap_content"
        android:id="@+id/tab_tv"
        android:text="测试"
        android:textColor="#a5a5a5"
        android:textSize="20sp"/>
    <ImageView
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:id="@+id/tab_iv"
        android:scaleType="center"
        android:src="@drawable/fl_rb_message_bg"/>

</LinearLayout>

• 在values文件夹下新建styles.xml文件添加字体选中效果样式

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

    <style name="TabSelectedStyle">
        <item name="android:textColor">#05d236</item>
        <item name="android:textStyle">bold</item>
    </style>

    <style name="TabUnSelectedStyle">
        <item name="android:textColor">#a5a5a5</item>
        <item name="android:textStyle">normal</item>
    </style>

</resources>

• drawable文件夹下添加图标变化的样式，写法一样这里给出一个样例（其实就是设置两张照片，选中时为有色图标，非选中为灰色图标）

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@drawable/cloudy"/>
    <item android:state_selected="false" android:drawable="@drawable/cloudy2"/>
</selector>