ViewPager+Fragment实现分页滑动，RadioButton实现tab选项还有下划线的变化。

工作忘记时间

于 2022-04-25 18:18:55 发布

阅读量223

点赞数

文章标签： android

本文链接：https://blog.csdn.net/qq_45271568/article/details/124411076

版权

在这里插入图片描述
效果如上

<?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="1800dp"
    android:layout_height="900dp"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".mainPage.OrderCenterFragment"
    android:layout_marginLeft="550dp"
    android:layout_marginTop="200dp"
    android:orientation="vertical">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:orientation="horizontal">
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            >

            <ImageView
                android:layout_width="120dp"
                android:layout_height="100dp"
                android:layout_gravity="center_vertical"
                android:id="@+id/back_main"
                android:src="@drawable/ic_part_account_back"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:text="@string/order"
                android:layout_marginLeft="25dp"
                android:textSize="40dp"
                android:textColor="#FDFCFC"/>

        </LinearLayout>
        <RadioGroup
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="5"
            android:id="@+id/rg"
            android:orientation="horizontal">

            <RadioButton
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="@string/all"
                android:button="@null"         <!--取消radiobutton前面的圈 -->
                android:gravity="center"        
                android:id="@+id/all"
                android:checked="true"
                android:textColor="@color/white"
                android:background="@drawable/radiobutton_bottom"
                android:textSize="60dp"
                />
            <RadioButton
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="@string/un_paid"
                android:button="@null"
                android:gravity="center"
                android:id="@+id/unpaid"
                android:background="@drawable/radiobutton_bottom"
                android:textSize="60dp"/>
            <RadioButton
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="@string/on_going"
                android:button="@null"
                android:gravity="center"
                android:id="@+id/ongoing"
                android:background="@drawable/radiobutton_bottom"
                android:textSize="60dp"/>
            <RadioButton
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="@string/finished"
                android:button="@null"
                android:gravity="center"
                android:id="@+id/finished"
                android:background="@drawable/radiobutton_bottom"
                android:textSize="60dp"/>
            <RadioButton
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="@string/closed"
                android:button="@null"
                android:gravity="center"
                android:id="@+id/closed"
                android:background="@drawable/radiobutton_bottom"
                android:textSize="60dp"/>


        </RadioGroup>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="70dp"
            android:layout_weight="1"
            android:orientation="horizontal"
            android:background="@drawable/all_category_bg"
            android:layout_gravity="center_vertical"
            android:gravity="center">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/all_categories"
                android:textSize="35dp"/>
            <ImageView
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:id="@+id/pull_down"
                android:src="@drawable/pull"/>

        </LinearLayout>

    </LinearLayout>
    <androidx.viewpager.widget.ViewPager
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:id="@+id/m_viewPager"/>


</LinearLayout>

android:background=“@drawable/radiobutton_bottom” 引用的部分如下

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
	<!-- radioButton的两种选择状态，true是选中状态，false是未选中状态-->
    <item android:state_checked="true">
        <layer-list>
            <item android:top="90dp">
                <shape android:shape="rectangle" >
                    <solid android:color="@color/white" />
                </shape>
            </item>
        </layer-list>
    </item>

    <item android:state_selected="false">
        <layer-list>
            <item android:top="90dp">                 <!-- 距离顶部的距离，值越大，下划线的宽度就越小-->
                <shape android:shape="rectangle">
                    <solid android:color="@color/bind_bef"/>
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

BaseFragment

package com.xxx.purchasingorder.base;

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

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

import org.jetbrains.annotations.NotNull;

public abstract class BaseFragment extends Fragment {
    @Nullable
    @org.jetbrains.annotations.Nullable
    @Override
    public View onCreateView(@NonNull @NotNull LayoutInflater inflater, @Nullable @org.jetbrains.annotations.Nullable ViewGroup container, @Nullable @org.jetbrains.annotations.Nullable Bundle savedInstanceState) {
        View rootView=inflater.inflate(getLayoutId(),container,false);
        initView(rootView);
        initListener();
        loadData();
        initAdapter();
        return rootView;
    }

    protected abstract int getLayoutId();
    protected abstract void initView(View rootView);
    protected abstract void initListener();
    protected abstract void loadData();
    protected abstract void initAdapter();
}

我后面的fragment都是继承这个BaseFragment

package com.xxx.purchasingorder.mainPage;

import android.annotation.SuppressLint;
import android.content.res.Resources;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.TextView;
import android.widget.Toolbar;

import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.viewpager.widget.ViewPager;


import com.xxx.purchasingorder.R;
import com.xxx.purchasingorder.adapter.OrderListAdapter;
import com.xxx.purchasingorder.adapter.TabFragmentPageAdapter;
import com.xxx.purchasingorder.base.BaseFragment;
import com.xxx.purchasingorder.unio.Order;
import com.xxx.tools.https.ApiFactory;
import com.xxx.purchasingorder.util.ImageViewAnimationHelper;
import com.google.android.material.tabs.TabLayout;

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


public class OrderCenterFragment extends BaseFragment implements View.OnClickListener, RadioGroup.OnCheckedChangeListener, ViewPager.OnPageChangeListener {


    private static final String TAG = "OrderCenterFragment";

    private ImageView pullDown;
    private ViewPager viewPager;
    private RadioGroup radioGroup;
    private RadioButton all;
    private RadioButton unpaid;
    private RadioButton ongoing;
    private RadioButton finished;
    private RadioButton closed;
    // 存放标签页面
    private ArrayList<RadioButton> mTabButtonList=new ArrayList<>();
    // 存放viewPager下面的fragment
    private ArrayList<Fragment>mTabFragmentList=new ArrayList<>();

    private TabFragmentPageAdapter adapter;
    private int[] allInt={0,1,2,3,4};
    private ImageView backMain;
    private ImageViewAnimationHelper helper;
    @Override
    protected int getLayoutId() {
        return R.layout.fragment_my_order;
    }

    @Override
    protected void initView(View rootView) {
        backMain=rootView.findViewById(R.id.back_main);
        viewPager=rootView.findViewById(R.id.m_viewPager);
        radioGroup=rootView.findViewById(R.id.rg);
        all=rootView.findViewById(R.id.all);
        unpaid=rootView.findViewById(R.id.unpaid);
        ongoing=rootView.findViewById(R.id.ongoing);
        finished=rootView.findViewById(R.id.finished);
        closed=rootView.findViewById(R.id.closed);
        pullDown=rootView.findViewById(R.id.pull_down);
        Log.d(TAG, "initView: ");

    }


    @Override
    protected void initAdapter(){
        adapter=new TabFragmentPageAdapter(requireActivity().getSupportFragmentManager(),mTabFragmentList);
        // 给viewPager 设置适配器
        viewPager.setAdapter(adapter);
    }

    @Override
    protected void initListener(){
        backMain.setOnClickListener(this);
        radioGroup.setOnCheckedChangeListener(this);
        viewPager.addOnPageChangeListener(this);
        radioGroup.setOnCheckedChangeListener(this);
        pullDown.setOnClickListener(this);
    }

    @Override
    protected void loadData() {

		// 一共有5个fragment页面切换，下面我就展示一个fragment的代码
        mTabFragmentList.add(AllOrderFragment.getInstance());
        mTabFragmentList.add(UnpaidOrderFragment.getInstance());
        mTabFragmentList.add(OngoingOrderFragment.getInstance());
        mTabFragmentList.add(FinishedOrderFragment.getInstance());
        mTabFragmentList.add(ClosedOrderFragment.getInstance());

        mTabButtonList.add(all);
        mTabButtonList.add(unpaid);
        mTabButtonList.add(ongoing);
        mTabButtonList.add(finished);
        mTabButtonList.add(closed);
    }

    @SuppressLint({"WrongConstant", "NonConstantResourceId"})
    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.back_main:
                FragmentManager manager= requireActivity().getSupportFragmentManager();
                manager.popBackStack();
                break;
            default:
                break;
        }
    }

    @Override
    public void onCheckedChanged(RadioGroup group, int checkedId) {
        int i=0;
        for (RadioButton button:mTabButtonList){
            if (button.getId()==checkedId){
                viewPager.setCurrentItem(i);
                break;
            }
            i++;
        }
    }


    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        for (int i:allInt){
            if (i==position){
            	// 设置该个radioButton为选中状态
                mTabButtonList.get(i).setChecked(true);
                // 设置此时文本的颜色
                mTabButtonList.get(i).setTextColor(getResources().getColor(R.color.white));
            }else {
                mTabButtonList.get(i).setChecked(false);
                mTabButtonList.get(i).setTextColor(getResources().getColor(R.color.bind_bef));
            }
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
}

adapter

package com.xxx.purchasingorder.adapter;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;

import org.jetbrains.annotations.NotNull;

import java.util.ArrayList;

public class TabFragmentPageAdapter extends FragmentPagerAdapter {

    // 存放viewPager下的fragment
    private ArrayList<Fragment> mFragmentList;


    public TabFragmentPageAdapter(@NonNull @NotNull FragmentManager fm,ArrayList<Fragment>fragmentList) {
        super(fm,FragmentPagerAdapter.BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT);

        this.mFragmentList=fragmentList;
    }

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

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

}

AllOrderFragment

package com.ebanma.purchasingorder.mainPage;

import android.util.Log;
import android.view.View;
import android.widget.ArrayAdapter;

import androidx.fragment.app.Fragment;

import com.ebanma.purchasingorder.R;
import com.ebanma.purchasingorder.base.BaseFragment;

import java.util.ArrayList;

public class AllOrderFragment extends BaseFragment {

    private static final String TAG = "AllOrderFragment";
	// 主要是展示如何获取fragment实例
    public static AllOrderFragment getInstance() {
        return AllOrderFragment.AllOrderFragmentHolder.get();
    }


    @Override
    protected int getLayoutId() {
        return R.layout.all_item_fragment;
    }

    @Override
    protected void initView(View rootView) {
        Log.d(TAG, "initView: AllOrderFragment ");
    }

    @Override
    protected void initListener() {

    }

    @Override
    protected void loadData() {

    }

    @Override
    protected void initAdapter() {

    }
    private static class AllOrderFragmentHolder {
        private static final AllOrderFragment INSTANCE = new AllOrderFragment();

        public static AllOrderFragment get() {
            return INSTANCE;
        }
    }
}

工作忘记时间

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ViewPager+Fragment实现分页滑动，RadioButton实现tab选项还有下划线的变化。

效果如上<?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="1800dp" android:layout_height="900dp" xmlns:.
复制链接

扫一扫

ViewPager+Fragment实现分页滑动，RadioButton实现tab选项还有下划线的变化。

“相关推荐”对你有帮助么？