一.自定义实现:
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
好了,这里是效果图的所有代码,希望对大家有帮助