Android ViewPager、Fragment、组合控件结合使用（滑动切换，点击导航切换）

浅浅的花香味﹌ 2022-05-27 02:55 232阅读 0赞

效果图类似（滑动切换，点击导航切换）：

![70][]

实现步骤：

1、实现组合控件

a、组合控件布局lay\_imgbtn1

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/lay_imgbtn"
        android:layout_width="match_parent"
        android:layout_height="35dp" >
    
        <TextView
            android:id="@+id/tv_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_centerInParent="true"
            android:background="@color/theme_front_light"
            android:gravity="center"
            android:text="BLE"
            android:textColor="@color/white"
            android:textSize="17sp" />
    
    </RelativeLayout>

b、组合控件NavImageBtn1

/***
     * 导航按钮
     *
     * @author xl
     */
    public class NavImageBtn1 extends RelativeLayout {
    
        private Context m_context;
        private TextView m_tvContent;
    
        public NavImageBtn1(Context context) {
            super(context);
            m_context = context;
            init();
        }
    
        public NavImageBtn1(Context context, AttributeSet attrs) {
            super(context, attrs);
            m_context = context;
            init();
        }
    
        private void init() {
            LayoutInflater.from(m_context).inflate(R.layout.lay_imgbtn1, this);
            m_tvContent = (TextView) findViewById(R.id.tv_content);
        }
    
        public void setText(int resid) {
            m_tvContent.setText(resid);
        }
    
        public void setText(String str) {
            m_tvContent.setText(str);
        }
    
        public void setOnCustomClickListener(OnClickListener listener) {
            this.setClickable(true);
            this.setOnClickListener(listener);
        }
    
        public void setClickStatus(boolean click) {
            if (click) {
                m_tvContent.setBackgroundResource(R.color.theme_front_light);
            } else {
                m_tvContent.setBackgroundResource(R.color.theme_front_dark);
            }
        }
    }

2、实现fragment

a、xml布局文件frag\_listbw

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:ptr="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
    
        <com.handmark.pulltorefresh.library.PullToRefreshListView
            android:id="@+id/list_ble"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:cacheColorHint="@color/transparent"
            android:divider="@color/transparent"
            android:dividerHeight="0dp"
            android:listSelector="@color/transparent"
            ptr:ptrHeaderBackground="@color/white"
            ptr:ptrHeaderTextColor="@color/black"
            ptr:ptrHeaderSubTextColor="@color/light_black"
            ptr:ptrMode="pullFromStart"
            ptr:ptrShowIndicator="true" >
        </com.handmark.pulltorefresh.library.PullToRefreshListView>
    
    </LinearLayout>

b、fragment实现BleFragment

/**
     * 列表
     * 
     * @author xl
     * 
     */
    public class BleFragment extends Fragment {
    
    	private final static String TAG = BleFragment.class.getSimpleName();
    	private Context m_context;
    	private FragActivity m_activity;
    	private View m_view;
    	private PullToRefreshListView m_listView;
    	private ListActivityAdapter m_listAdapter;
    
    	@Override
    	public void onCreate(Bundle savedInstanceState) {
    		// 仅在创建的时候执行
    		super.onCreate(savedInstanceState);
    	}
    
    	@Override
    	public View onCreateView(LayoutInflater inflater, ViewGroup container,
    			Bundle savedInstanceState) {
    		// 执行多次
    		if (m_view == null) {
    			m_view = inflater.inflate(R.layout.frag_listbw, null);
    			findView();
    			init();
    		} else {
    			ViewGroup group = (ViewGroup) m_view.getParent();
    			if (group != null) {
    				group.removeView(m_view);
    			}
    		}
    		return m_view;
    	}
    
    	/**
    	 * 查找控件
    	 */
    	private void findView() {
    		m_listView = (PullToRefreshListView) m_view.findViewById(R.id.list_ble);
    	}
    
    	/**
    	 * 初始化
    	 */
    	private void init() {
    		// 初始化变量
    		m_context = getActivity();
    		//m_activity = (FragActivity) getActivity();
    
    	}
    
    	@Override
    	public void onDestroyView() {
    		super.onDestroyView();
    		MyLogger.e(TAG, "BleFrag onDestroyView...");
    	}
    
    }

3、activity布局文件 mbar\_listaty

<?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:background="@color/theme_background"
        android:orientation="vertical">
    
        <com.invt_iot_for_lift.app.view.CustomMenubar
            android:id="@+id/mbar_listaty"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
    
            <com.invt_iot_for_lift.app.view.NavImageBtn1
                android:id="@+id/btn1"
                android:layout_width="0dp"
                android:layout_height="35dp"
                android:layout_weight="1" />
    
            <com.invt_iot_for_lift.app.view.NavImageBtn1
                android:id="@+id/btn2"
                android:layout_width="0dp"
                android:layout_height="35dp"
                android:layout_weight="1" />
    
        </LinearLayout>
    
        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    
    </LinearLayout>

4、activity继承 **FragmentActivity**

/**
     * Created by xl on 2018/4/10.
     */
    
    public class BWListActivity extends FragmentActivity {
    
        private final static String TAG = BWListActivity.class.getSimpleName();
        private Context mContext;
        private CustomMenubar mMenubar;
        private NavImageBtn1 mImgBtnBle;
        private NavImageBtn1 mImgBtnWifi;
        private ViewPager mViewPager;
        private MyFragmentViewPager mViewPagerAdapter;
        private List<Fragment> mListFragment;
        private BleFragment mBleFragment;
        private WifiFragment mWifiFragment;
        private int m_iCurFragment = 0;
        private Handler m_handler;
    
        private final static String[] mTitles = new String[]{"BLE", "WIFI"};
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_listbw);
            try {
                findView();
                init();
            } catch (Exception e) {
                e.printStackTrace();
                MyLogger.e(TAG, e.getMessage());
            }
        }
    
        /**
         * 查找控件
         *
         * @throws Exception
         */
        private void findView() throws Exception {
            mMenubar = (CustomMenubar) this.findViewById(R.id.mbar_listaty);
            mImgBtnBle = (NavImageBtn1) this.findViewById(R.id.btn1);
            mImgBtnWifi = (NavImageBtn1) this.findViewById(R.id.btn2);
            mViewPager = (ViewPager) this.findViewById(R.id.viewpager);
        }
    
        /**
         * 初始化
         *
         * @throws Exception
         */
        private void init() throws Exception {
            // 初始化变量
            mContext = this;
            mListFragment = new ArrayList<Fragment>();
            mBleFragment = new BleFragment();
            mWifiFragment = new WifiFragment();
            // 将activity放入堆栈
            AppManager.getAppManager().addActivity(this);
            // 初始化menubar
            mMenubar.setBtnBackVisible(false);
            mMenubar.setBtnMoreVisible(false);
            mMenubar.setTitle(R.string.t_list_devlist);
            // 初始化ViewPager
            mListFragment.add(mBleFragment);
            mListFragment.add(mWifiFragment);
            mViewPagerAdapter = new MyFragmentViewPager(getSupportFragmentManager());
            mViewPager.setAdapter(mViewPagerAdapter);
            mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
                @Override
                public void onPageScrolled(int i, float v, int i1) {
                }
    
                @Override
                public void onPageSelected(int position) {
                    setImageBtnClickStatus(position);
                    MyLogger.e(TAG, "fragment: " + position);
                }
    
                @Override
                public void onPageScrollStateChanged(int i) {
                }
            });
            // 初始化imgbtn
            mImgBtnBle.setText(mTitles[0]);
            mImgBtnBle.setClickStatus(true);
            mImgBtnBle.setOnClickListener(new View.OnClickListener() {
    
                @Override
                public void onClick(View arg0) {
                    mViewPager.setCurrentItem(0, true);
                }
            });
            mImgBtnWifi.setText(mTitles[1]);
            mImgBtnWifi.setClickStatus(false);
            mImgBtnWifi.setOnClickListener(new View.OnClickListener() {
    
                @Override
                public void onClick(View arg0) {
                    mViewPager.setCurrentItem(1, true);
                }
            });
        }
    
        /**
         * ViewPager适配器
         *
         * @author xl
         */
        class MyFragmentViewPager extends FragmentPagerAdapter {
    
            public MyFragmentViewPager(FragmentManager fm) {
                super(fm);
            }
    
            @Override
            public Fragment getItem(int position) {
                return mListFragment.get(position);
            }
    
            @Override
            public int getCount() {
                return mListFragment.size();
            }
    
        }
    
        /**
         * 设置imgbtn
         *
         * @param position
         */
        public void setImageBtnClickStatus(int position) {
            switch (position) {
                case 0:
                    mImgBtnBle.setClickStatus(true);
                    mImgBtnWifi.setClickStatus(false);
                    break;
                case 1:
                    mImgBtnBle.setClickStatus(false);
                    mImgBtnWifi.setClickStatus(true);
                    break;
                default:
                    break;
            }
            m_iCurFragment = position;
        }
    }

完！！！

[70]: /images/20220527/e1da66d02afd4fdf988bea5faefde65b.png