Android 项目常用滑动页卡模式ViewPager+RadioButton(二)

一.自定义实现:

 

Android 项目常用滑动页卡模式ViewPager+TabLayout(一)

Android 项目常用滑动页卡模式ViewPager+RadioButton(二)

Android 项目常用滑动页卡模式ViewPager+MagicIndicator(三)

效果图:

 

 

直接看代码实现:

1.MainActivity

public class InvestEventActivity extends AbstractBaseUi implements View.OnClickListener, ViewPager.OnPageChangeListener {

    private ViewPager viewPager;
    private List<View> vp_View_List = new ArrayList<View>();
    private ViewPagerAdapter vp_adapter;
    private RadioGroup radioGroup;
    private ListView begin_list;
    private ListView end_list;
    private Context context;
    private static final String STA_ONE = "1";
    private static final String STA_TWO = "2";
    private String STA = STA_ONE;
    private static final int REFRESH = 1;
    private InvestEventAdapter investEventAdapter_bengin = new InvestEventAdapter();
    private LinearLayout ll_begin_event_nodata;
    private LinearLayout ll_begin_event_nowifi;
    private LinearLayout ll_end_event_nodata;
    private LinearLayout ll_end_event_nowifi;

    @Override
    protected void before(Bundle savedInstanceState) {

    }

    @Override
    protected void initView(Bundle savedInstanceState) {
        setContentView(R.layout.activity_invest_event);
        setHeaderTitle("活动");

        context = InvestEventActivity.this;
        viewPager = (ViewPager) findViewById(R.id.vp_event_view);

        radioGroup = (RadioGroup) findViewById(R.id.radiogroup_select_event);
        initViewList();
    }

    @Override
    protected void initData(Bundle savedInstanceState) {

//        loadEventDataFromServer(STA);
        loadDataFromServer(REFRESH, true, STA);

        radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {

                switch (checkedId) {
                    case R.id.radiobtn_begin:

                        viewPager.setCurrentItem(0);
                        break;
                    case R.id.radiobtn_end:

                        viewPager.setCurrentItem(1);
                        break;
                }
            }
        });
    }

    /**
     * 请求活动页面的基本数据
     *
     * @param loadType  加载类型 刷新或者 加载更多
     * @param fromCache 是否临时缓存
     */
    private void loadDataFromServer(final int loadType, boolean fromCache, String sta) {
        try {
            if (sta.equals("1")) {
                IND1004_Req req = new IND1004_Req();
                IND1004_Req.IND1004_Req_Body req_Body = new IND1004_Req.IND1004_Req_Body();
                req_Body.setSta(STA_ONE);
                req.setReq_Body(req_Body);

                if (isNetworkAvailable()) {
                    if (fromCache) {
                        invokeApiAsyncSDKCache(req, new InvestEventActivity.CreateResponseListener_one(loadType,sta).invoke());
                    } else {
                        invokeApiAsync(req, new InvestEventActivity.CreateResponseListener_one(loadType,sta).invoke());
                    }
                } else {
                    handler.post(new Runnable() {
                        @Override
                        public void run() {
                            setViewBegin(8,8,0);
                            showShortToast_nohandler(R.string.network_error);
                        }
                    });
//                    netWorkError();
                }
            } else if (sta.equals("2")) {
                IND1004_Req req = new IND1004_Req();
                IND1004_Req.IND1004_Req_Body req_Body = new IND1004_Req.IND1004_Req_Body();
                req_Body.setSta(STA_TWO);
                req.setReq_Body(req_Body);

                if (isNetworkAvailable()) {
                    if (fromCache) {
                        invokeApiAsyncSDKCache(req, new InvestEventActivity.CreateResponseListener_one(loadType,sta).invoke());
                    } else {
                        invokeApiAsync(req, new InvestEventActivity.CreateResponseListener_one(loadType,sta).invoke());
                    }
                } else {
                    handler.post(new Runnable() {
                        @Override
                        public void run() {
                            setViewEnd(8,8,0);
                            showShortToast_nohandler(R.string.network_error);
                        }
                    });

//                    netWorkError();
                }
            }
        } catch (Exception e) {
            GlobalException.proxy.handle(e, context);
        }
    }

    /**
     * 活动进行中
     */
    private class CreateResponseListener_one {
        private final int loadType;
        private final String sta;


        public CreateResponseListener_one(int loadType,String sta) {
            this.loadType = loadType;
            this.sta = sta;


        }

        public DefaultResponseListener<IND1004_Res> invoke() {
            return new DefaultResponseListener<IND1004_Res>() {

                @Override
                protected void onSuccess(String responseData,
                                         Class<IND1004_Res> classOfT) {
                    final IND1004_Res res = getResponse(responseData, classOfT);
                    if (invokeApiSuccess(res)) {

                        handler.post(new Runnable() {

                            @Override
                            public void run() {

                                List<IND1004_Res.IND1004_Res_Body.ActivelistsBean> activelists = res.getRes_Body().getActivelists();
                                if(sta.equals("1")){
                                    setViewBegin(0,8,8);
                                    if(activelists.size()==0){
                                        setViewBegin(8,0,8);
                                        return;
                                    }
                                    GlobalLog.e("sgf", "activelists1=====" + activelists.size());
                                    investEventAdapter_bengin.setActivelists(activelists);
                                    investEventAdapter_bengin.setContext(context);
                                    begin_list.setAdapter(investEventAdapter_bengin);
                                }else if(sta.equals("2")){
                                    GlobalLog.e("sgf", "activelists2=====" + activelists.size());
                                    if(activelists.size()==0){
                                        setViewEnd(8,0,8);
                                        return;
                                    }
                                    setViewEnd(0,8,8);
                                    investEventAdapter_bengin.setActivelists(activelists);
                                    investEventAdapter_bengin.setContext(context);
                                    end_list.setAdapter(investEventAdapter_bengin);
                                }

                            }
                        });

                    } else {
                        invokeApiFailure(res);
                    }
                }

                @Override
                protected void onFailure() {
                    handler.post(new Runnable() {
                        @Override
                        public void run() {
                            if(sta.equals("1")){
                                setViewBegin(8,0,8);
                                showShortToast_nohandler(R.string.query_failure);
                            }else if(sta.equals("2")){
                                setViewEnd(8,0,8);
                                showShortToast_nohandler(R.string.query_failure);
                            }

                        }
                    });
//                    showQueryFailure();
                }

            };
        }
    }

    @Override
    protected void initListener(Bundle savedInstanceState) {
        viewPager.setOnPageChangeListener(this);
    }

    @Override
    protected void initAdapter(Bundle savedInstanceState) {

        vp_adapter = new ViewPagerAdapter(vp_View_List);
        viewPager.setAdapter(vp_adapter);

        investEventAdapter_bengin.setContext(context);
        if(STA.equals("1")){

            begin_list.setAdapter(investEventAdapter_bengin);
        }else{
            end_list.setAdapter(investEventAdapter_bengin);
        }

    }

    @Override
    protected void after(Bundle savedInstanceState) {

    }

    /**
     * 添加对应的界面
     */
    private void initViewList() {
        //添加activity或Fragment都可以,也可以直接添加布局

        //直接添加布局,方便逻辑在一个类里操作
        View view_begin = getLayoutInflater().inflate(R.layout.common_list_event, null);
        begin_list = (ListView) view_begin.findViewById(R.id.lv_event);
        ll_begin_event_nodata = (LinearLayout) view_begin.findViewById(R.id.ll_list_event_nodata);
        ll_begin_event_nowifi = (LinearLayout) view_begin.findViewById(R.id.ll_list_event_nowifi);
        vp_View_List.add(view_begin);

        View view_end = getLayoutInflater().inflate(R.layout.common_list_event, null);
        ll_end_event_nodata = (LinearLayout) view_end.findViewById(R.id.ll_list_event_nodata);
        ll_end_event_nowifi = (LinearLayout) view_end.findViewById(R.id.ll_list_event_nowifi);
        end_list = (ListView) view_end.findViewById(R.id.lv_event);
        vp_View_List.add(view_end);

    }

    @Override
    public void onPageScrolled(int position, float v, int i1) {

    }

    @Override
    public void onPageSelected(int position) {
        if (radioGroup != null && radioGroup.getChildCount() > position) {
            ((RadioButton) radioGroup.getChildAt(position)).performClick();
        }
        switch (position) {
            case 0:

                STA = STA_ONE;
                break;
            case 1:

                STA = STA_TWO;
                break;
            default:
                break;
        }
        loadDataFromServer(REFRESH, true, STA);
        GlobalLog.e("sgf", "STA=====" + STA);
    }

    @Override
    public void onPageScrollStateChanged(int position) {

    }

    @Override
    public void onClick(View view) {

    }
    // 可视 VISIBLE = 0  不可视 gone = 8
    public void setViewEnd(int a, int b, int c) {
        end_list.setVisibility(a);
        ll_end_event_nodata.setVisibility(b);
        ll_end_event_nowifi.setVisibility(c);
    }
    public void setViewBegin(int a, int b, int c) {
        begin_list.setVisibility(a);
        ll_begin_event_nodata.setVisibility(b);
        ll_begin_event_nowifi.setVisibility(c);
    }
}

由于网络的请求框架比较老,这里就不作解释了,主要以实现效果图的功能为主。

2.主函数布局:

<?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/gray_bg">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <include layout="@layout/header"></include>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            android:layout_marginTop="6dp"
            android:layout_marginBottom="5dp"
            android:gravity="center"
            android:orientation="horizontal">

            <RadioGroup
                android:id="@+id/radiogroup_select_event"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:gravity="center"
                android:orientation="horizontal">

                <RadioButton
                    android:id="@+id/radiobtn_begin"
                    android:layout_width="0dp"
                    android:layout_height="35dp"
                    android:layout_margin="0dp"
                    android:layout_marginRight="40px"
                    android:layout_weight="1"
                    android:background="@drawable/selector_huodong_select"
                    android:button="@null"
                    android:checked="true"
                    android:gravity="center"
                    android:paddingLeft="1dp"
                    android:text="进行中"
                    android:textColor="@color/bg_huodong_button_click"
                    android:textSize="15sp" />

                <RadioButton
                    android:id="@+id/radiobtn_end"
                    android:layout_width="0dp"
                    android:layout_height="35dp"
                    android:layout_margin="0dp"
                    android:layout_marginRight="5dp"
                    android:layout_weight="1"
                    android:background="@drawable/selector_huodong_select2"
                    android:button="@null"
                    android:gravity="center"
                    android:text="已结束"
                    android:textColor="@color/bg_huodong_button_click"
                    android:textSize="15sp" />
            </RadioGroup>


        </LinearLayout>

        <android.support.v4.view.ViewPager
            android:id="@+id/vp_event_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        </android.support.v4.view.ViewPager>


    </LinearLayout>

</LinearLayout>

3.引用布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <LinearLayout
        android:id="@id/ll_header"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <RelativeLayout
            android:id="@+id/rl_header"
            android:layout_width="fill_parent"
            android:layout_height="50dip"
            android:background="@color/red_bg"
            android:paddingBottom="5dip"
            android:paddingLeft="10dip"
            android:paddingRight="10dip">

            <LinearLayout
                android:id="@id/ll_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true">

                <TextView
                    android:id="@+id/header_title"
                    style="@style/Default_text_xl_white"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />

                <ImageView
                    android:id="@id/iv_arrow"
                    android:layout_width="14dip"
                    android:layout_height="14dip"
                    android:layout_gravity="center"
                    android:layout_marginLeft="2dip"
                    android:contentDescription="@string/image_loading"
                    android:visibility="gone" />
            </LinearLayout>

            <Button
                android:id="@+id/btn_back"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_centerVertical="true"
                android:background="@drawable/btn_back_bg"
                android:focusable="true"
                android:gravity="center" />

            <RelativeLayout
                android:id="@id/rl_right"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:visibility="gone">

                <ImageView
                    android:id="@id/iv_right"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:src="@drawable/zhushou" />

                <TextView
                    android:id="@id/tv_right"
                    style="@style/Default_text_xxl_white"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="5dp"
                    android:layout_toRightOf="@id/iv_right"
                    android:gravity="center"
                    android:text="助手"
                    android:textSize="16sp" />
            </RelativeLayout>

            <Button
                android:id="@+id/btn_question"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:background="@drawable/btn_question_bg"
                android:gravity="center"
                android:visibility="gone" />

            <Button
                android:id="@+id/btn_detail_share"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_marginRight="15dp"
                android:background="@drawable/fenxiang_icon"
                android:visibility="gone"
                android:gravity="center" />
            <TextView
                android:id="@+id/tv_shaixuan"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_marginRight="5dp"
                android:drawableRight="@drawable/fenxiang_icon"
                android:drawablePadding="5dp"
                android:gravity="center"
                android:text="最近一周"
                android:textColor="@color/white"
                android:textSize="14sp"
                android:visibility="gone"/>
        </RelativeLayout>

        <!--<Button-->
        <!--android:id="@id/nouse_line_1"-->
        <!--android:layout_width="match_parent"-->
        <!--android:layout_height="1dip"-->
        <!--android:background="@color/header_line" />-->
    </LinearLayout>


</LinearLayout>

 

4.背景颜色,selector_huodong_select.xml

 

(1)

(2)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 默认时的背景 -->
<item android:drawable="@drawable/btn_selector_another_left3" android:state_checked="false"/>
<!-- 选择时的背景 -->
<item android:drawable="@drawable/btn_selector_another_left2" android:state_checked="true"/>
</selector>

btn_selector_another_left3.xml(图1)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Button正常状态下的背景 -->
    <item>
        <shape>
            <!-- 矩形的圆角弧度 -->
            <corners android:bottomLeftRadius="5dp" android:bottomRightRadius="0dp" android:topLeftRadius="5dp" android:topRightRadius="0dp" />
            <!-- 矩形的填充色 -->
            <solid android:color="#ffffff" />
            <padding android:bottom="2dp" android:left="2dp" android:right="0dp" android:top="0dp" />
            <!-- 矩形的边框的宽度,每段虚线的长度,和两段虚线之间的颜色和颜色 -->
            <stroke android:width="1dp" android:color="#f33b3b" />
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape>
            <!--内边距-->
            <padding android:bottom="2dp" android:left="2dp" android:right="0dp" android:top="0dp" />
            <!-- 矩形的圆角弧度 -->
            <corners android:bottomLeftRadius="20dp" android:topLeftRadius="20dp" />
            <!-- 矩形的填充色 -->
            <solid android:color="#3F51B5" />
            <!-- 矩形的边框的宽度,每段虚线的长度,和两段虚线之间的颜色和颜色 -->
            <stroke android:width="1dp" android:color="#f33b3b" />
        </shape>
    </item>
</selector>

btn_selector_another_left2.xml(图2)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Button正常状态下的背景 -->
    <item>
        <shape>
            <!-- 矩形的圆角弧度 -->
            <corners android:bottomLeftRadius="5dp" android:bottomRightRadius="0dp" android:topLeftRadius="5dp" android:topRightRadius="0dp" />
            <!-- 矩形的填充色 -->
            <solid android:color="#f33b3b" />
            <padding android:bottom="2dp" android:left="2dp" android:right="0dp" android:top="0dp" />
            <!-- 矩形的边框的宽度,每段虚线的长度,和两段虚线之间的颜色和颜色 -->
            <stroke android:width="1dp" android:color="#f33b3b" />
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape>
            <!--内边距-->
            <padding android:bottom="2dp" android:left="2dp" android:right="0dp" android:top="0dp" />
            <!-- 矩形的圆角弧度 -->
            <corners android:bottomLeftRadius="20dp" android:topLeftRadius="20dp" />
            <!-- 矩形的填充色 -->
            <solid android:color="#3F51B5" />
            <!-- 矩形的边框的宽度,每段虚线的长度,和两段虚线之间的颜色和颜色 -->
            <stroke android:width="1dp" android:color="#f33b3b" />
        </shape>
    </item>
</selector>

selector_huodong_select2.xml

(3)

(4)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 默认时的背景 -->
<item android:drawable="@drawable/btn_selector_another2" android:state_checked="false"/>
<!-- 选择时的背景 -->
<item android:drawable="@drawable/btn_selector_another3" android:state_checked="true"/>
</selector>

btn_selector_another2.xml(图3)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Button正常状态下的背景 -->
    <item>
        <shape>
            <!-- 矩形的圆角弧度 -->
            <corners android:bottomLeftRadius="0dp" android:bottomRightRadius="5dp" android:topLeftRadius="0dp" android:topRightRadius="5dp" />
            <!-- 矩形的填充色 -->
            <solid android:color="#ffffff" />
            <padding android:bottom="2dp" android:left="2dp" android:right="0dp" android:top="0dp" />
            <!-- 矩形的边框的宽度,每段虚线的长度,和两段虚线之间的颜色和颜色 -->
            <stroke android:width="1dp" android:color="#f33b3b" />
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape>
            <!--内边距-->
            <padding android:bottom="2dp" android:left="2dp" android:right="0dp" android:top="0dp" />
            <!-- 矩形的圆角弧度 -->
            <corners android:bottomLeftRadius="20dp" android:topLeftRadius="20dp" />
            <!-- 矩形的填充色 -->
            <solid android:color="#3F51B5" />
            <!-- 矩形的边框的宽度,每段虚线的长度,和两段虚线之间的颜色和颜色 -->
            <stroke android:width="1dp" android:color="#f33b3b" />
        </shape>
    </item>
</selector>

btn_selector_another3.xml(图4)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Button正常状态下的背景 -->
    <item>
        <shape>
            <!-- 矩形的圆角弧度 -->
            <corners android:bottomLeftRadius="0dp" android:bottomRightRadius="5dp" android:topLeftRadius="0dp" android:topRightRadius="5dp" />
            <!-- 矩形的填充色 -->
            <solid android:color="#f33b3b" />
            <padding android:bottom="2dp" android:left="2dp" android:right="0dp" android:top="0dp" />
            <!-- 矩形的边框的宽度,每段虚线的长度,和两段虚线之间的颜色和颜色 -->
            <stroke android:width="1dp" android:color="#f33b3b" />
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape>
            <!--内边距-->
            <padding android:bottom="2dp" android:left="2dp" android:right="0dp" android:top="0dp" />
            <!-- 矩形的圆角弧度 -->
            <corners android:bottomLeftRadius="20dp" android:topLeftRadius="20dp" />
            <!-- 矩形的填充色 -->
            <solid android:color="#3F51B5" />
            <!-- 矩形的边框的宽度,每段虚线的长度,和两段虚线之间的颜色和颜色 -->
            <stroke android:width="1dp" android:color="#f33b3b" />
        </shape>
    </item>
</selector>

5.颜色:bg_huodong_button_click.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:color="@color/white"/>
    <!-- not selected -->
    <item android:color="#666666"/>
</selector>

二.第三方依赖自定义实现:

效果图:

 

https://github.com/H07000223/FlycoTabLayout

https://github.com/hackware1993/MagicIndicator 

https://www.jianshu.com/p/1d11cea274e0

 

好了,这里是效果图的所有代码,希望对大家有帮助
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值