小编给大家分享一下如何使用ViewPager+RadioGroup实现左右滑动卡片布局，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

1.选择某个界面时，对应的第几个小圆点亮：

通过selector制造圆点和进行更改小圆点被选择和未被选择时的颜色：

<?xmlversion="1.0"encoding="utf-8"?><selectorxmlns:android="http://schemas.android.com/apk/res/android"><itemandroid:state_checked="true"><shape><solidandroid:color="@color/app_green_area"/><cornersandroid:radius="5dp"/></shape></item><itemandroid:state_checked="false"><shape><solidandroid:color="#fff"/><cornersandroid:radius="5dp"/><strokeandroid:width="0.2dp"android:color="@color/app_line"/></shape></item></selector>

2.主界面布局：

<?xmlversion="1.0"encoding="utf-8"?><RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:gravity="center"android:background="@color/app_gray_bg"><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:textSize="25sp"android:textColor="@color/colorPrimary"android:text="health页面"/><android.support.v4.view.ViewPagerandroid:id="@+id/view_pager"android:layout_gravity="center"android:overScrollMode="never"android:layout_width="match_parent"android:layout_height="wrap_content"/></LinearLayout><RadioGroupandroid:layout_alignParentBottom="true"android:layout_marginBottom="20dp"android:id="@+id/group"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="center"android:gravity="center"android:orientation="horizontal"><RadioButtonandroid:layout_width="10dp"android:layout_height="10dp"android:layout_marginLeft="10dp"android:background="@drawable/selector_point"android:button="@null"/><RadioButtonandroid:layout_width="10dp"android:layout_height="10dp"android:layout_marginLeft="10dp"android:background="@drawable/selector_point"android:button="@null"/><RadioButtonandroid:layout_width="10dp"android:layout_height="10dp"android:layout_marginLeft="10dp"android:background="@drawable/selector_point"android:button="@null"/></RadioGroup></RelativeLayout>

3.主界面内嵌的卡片视图布局：

<?xmlversion="1.0"encoding="utf-8"?><android.support.v7.widget.CardViewxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_margin="2dp"app:cardCornerRadius="8dp"><LinearLayoutandroid:id="@+id/chart_bar"android:adjustViewBounds="true"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><TextViewandroid:id="@+id/tv_title"android:textColor="@color/app_black"android:gravity="center"android:textSize="30sp"android:layout_width="match_parent"android:layout_height="wrap_content"/><LinearLayoutandroid:adjustViewBounds="true"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><LinearLayoutandroid:id="@+id/layout_data1"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:visibility="visible"android:orientation="vertical"><TextViewandroid:text="layout_data1"android:textSize="30sp"android:textColor="@color/colorPrimary"android:layout_width="wrap_content"android:layout_height="wrap_content"/></LinearLayout><LinearLayoutandroid:id="@+id/layout_data2"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:visibility="visible"android:orientation="vertical"><TextViewandroid:text="layout_data2"android:textSize="30sp"android:textColor="@color/colorPrimary"android:layout_width="wrap_content"android:layout_height="wrap_content"/></LinearLayout><LinearLayoutandroid:id="@+id/layout_data3"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:visibility="visible"android:orientation="vertical"><TextViewandroid:text="layout_data3"android:textSize="30sp"android:textColor="@color/colorPrimary"android:layout_width="wrap_content"android:layout_height="wrap_content"/></LinearLayout></LinearLayout></LinearLayout></android.support.v7.widget.CardView>

4.定义卡片之间切换的样式：

/***卡片之间切换的样式*/publicclassZoomOutPageTransformerimplementsViewPager.PageTransformer{publicstaticfinalfloatMAX_SCALE=0.9f;publicstaticfinalfloatMIN_SCALE=0.8f;@OverridepublicvoidtransformPage(Viewpage,floatposition){position=position<-1?-1:position;position=position>1?1:position;floattempScale=position<0?1+position:1-position;floatslope=(MAX_SCALE-MIN_SCALE)/1;floatscaleValue=MIN_SCALE+tempScale*slope;page.setScaleX(scaleValue);page.setScaleY(scaleValue);if(Build.VERSION.SDK_INT<Build.VERSION_CODES.KITKAT){page.getParent().requestLayout();}}}

5.定义用于加载卡片视图的layout控件，方便自定义宽高比例：

importandroid.content.Context;importandroid.content.res.TypedArray;importandroid.text.TextUtils;importandroid.util.AttributeSet;importandroid.view.View;importandroid.view.ViewGroup;/***用于加载卡片视图*/publicclassRatioLayoutextendsViewGroup{privatefloatheightWidthRatio=0.325f;publicRatioLayout(Contextcontext){this(context,null);}publicRatioLayout(Contextcontext,AttributeSetattrs){super(context,attrs);finalTypedArraya=context.obtainStyledAttributes(attrs,R.styleable.RatioLayout);heightWidthRatio=getFloatFromString(a.getString(R.styleable.RatioLayout_height_width_ratio));a.recycle();}publicvoidsetHeightWidthRatio(Stringratio){heightWidthRatio=getFloatFromString(ratio);}publicstaticfloatgetFloatFromString(Stringsrc){if(TextUtils.isEmpty(src)){return0;}floatresult;try{result=Float.parseFloat(src);returnresult;}catch(Exceptione){}String[]strs=src.split("/");if(strs.length==2){try{floatmolecular=Float.parseFloat(strs[0]);//分子floatdenominator=Float.parseFloat(strs[1]);//分子result=molecular/denominator;}catch(Exceptione){result=0;}}else{result=0;}returnresult;}protectedvoidonLayout(booleanchanged,intleft,inttop,intright,intbottom){layoutChildren(left,top,right,bottom);}voidlayoutChildren(intleft,inttop,intright,intbottom){finalintcount=getChildCount();for(inti=0;i<count;i++){finalViewchild=getChildAt(i);if(child.getVisibility()!=GONE){finalLayoutParamslp=child.getLayoutParams();finalintwidth=child.getMeasuredWidth();finalintheight=child.getMeasuredHeight();child.layout(0,0,width,0+height);}}}@OverrideprotectedvoidonMeasure(intwidthMeasureSpec,intheightMeasureSpec){super.onMeasure(widthMeasureSpec,heightMeasureSpec);if(heightWidthRatio>0){intwidth=getMeasuredWidth();intheight=(int)(width*heightWidthRatio);setMeasuredDimension(width,height);intcount=getChildCount();if(count>=1){for(inti=0;i<count;i++){Viewchild=getChildAt(i);child.measure(MeasureSpec.makeMeasureSpec(getMeasuredWidth(),MeasureSpec.EXACTLY),MeasureSpec.makeMeasureSpec(getMeasuredHeight(),MeasureSpec.EXACTLY));}}}}}

6.卡片布局对应的activity：

publicclassFrHealthChartextendsFragment{publicstaticfinalStringDATA="_data";@BindView(R.id.layout_data1)LinearLayoutlayoutData1;@BindView(R.id.layout_data2)LinearLayoutlayoutData2;@BindView(R.id.layout_data3)LinearLayoutlayoutData3;@BindView(R.id.tv_title)TextViewtvTitle;@BindView(R.id.chart_bar)LinearLayoutchartBar;privateintposition;//用于标识选择的是哪个layoutpublicstaticFragmentgetInstance(intposition){FrHealthChartfrHealthChart=newFrHealthChart();Bundlebundle=newBundle();bundle.putInt(DATA,position);frHealthChart.setArguments(bundle);returnfrHealthChart;}@Nullable@OverridepublicViewonCreateView(LayoutInflaterinflater,@NullableViewGroupcontainer,@NullableBundlesavedInstanceState){Viewview=inflater.from(getContext()).inflate(R.layout.fragment_health_chart,container,false);ButterKnife.bind(this,view);Bundlebundle=getArguments();if(bundle!=null){position=bundle.getInt(DATA);initCard();}//加载卡片视图，控制宽高比例RatioLayoutratioLayout=newRatioLayout(getContext());ratioLayout.addView(view);ratioLayout.setHeightWidthRatio("67/52");returnratioLayout;}privatevoidinitCard(){switch(position){case0://显示layoutData1layoutData1.setVisibility(View.VISIBLE);layoutData2.setVisibility(View.GONE);layoutData3.setVisibility(View.GONE);initData();break;case1://显示layoutData2layoutData1.setVisibility(View.GONE);layoutData2.setVisibility(View.VISIBLE);layoutData3.setVisibility(View.GONE);initData();break;case2://显示layoutData3layoutData1.setVisibility(View.GONE);layoutData2.setVisibility(View.GONE);layoutData3.setVisibility(View.VISIBLE);initData();break;}}/***初始化数据*/privatevoidinitData(){switch(position){case0:tvTitle.setText("卡片内容"+"layout_data1");chartBar.setBackgroundColor(Color.parseColor("#6ddac6"));break;case1:tvTitle.setText("卡片内容"+"layout_data2");chartBar.setBackgroundColor(getResources().getColor(R.color.app_green_area));break;case2:tvTitle.setText("卡片内容"+"layout_data3");chartBar.setBackgroundColor(getResources().getColor(R.color.colorAccent));break;}}}

7.主界面的activity代码：

publicclassFrHealthextendsFragmentimplementsViewPager.OnPageChangeListener{@BindView(R.id.view_pager)ViewPagerviewPager;@BindView(R.id.group)RadioGroupgroup;@Nullable@OverridepublicViewonCreateView(LayoutInflaterinflater,@NullableViewGroupcontainer,@NullableBundlesavedInstanceState){Viewview=LayoutInflater.from(getContext()).inflate(R.layout.fragment_health,container,false);ButterKnife.bind(this,view);initView();returnview;}privatevoidinitView(){RadioButtonchildAt=(RadioButton)group.getChildAt(0);childAt.setChecked(true);viewPager.setPageTransformer(true,newZoomOutPageTransformer());//设置卡片之间切换的样式viewPager.setOffscreenPageLimit(3);//限定预加载的卡片个数ViewGroup.LayoutParamslayoutParams=viewPager.getLayoutParams();//layoutParams.height=AppUtil.dp2px(getContext(),400);floatscale=getContext().getResources().getDisplayMetrics().density;layoutParams.height=(int)(400*scale+0.5F);//计算高宽layoutParams.width=(int)(layoutParams.height*0.8);if(viewPager.getParent()instanceofViewGroup){ViewGroupviewParent=((ViewGroup)viewPager.getParent());viewParent.setClipChildren(false);viewPager.setClipChildren(false);}viewPager.addOnPageChangeListener(this);MyPagerAdaptermyPagerAdapter=newMyPagerAdapter(getChildFragmentManager());viewPager.setAdapter(myPagerAdapter);}@OverridepublicvoidonPageScrolled(intposition,floatpositionOffset,intpositionOffsetPixels){}@OverridepublicvoidonPageSelected(intposition){//根据监听viewPager的PageChangeListener获得选择的是哪个卡片，并把其对应位序的小圆点设置为选定状态RadioButtonchildAt=(RadioButton)group.getChildAt(position);childAt.setChecked(true);}@OverridepublicvoidonPageScrollStateChanged(intstate){}classMyPagerAdapterextendsFragmentPagerAdapter{HashMap<Integer,Fragment>map=newHashMap<>();publicMyPagerAdapter(FragmentManagerfm){super(fm);}@OverridepublicFragmentgetItem(intposition){FrHealthChartfragment=(FrHealthChart)map.get(position);if(fragment==null){fragment=(FrHealthChart)FrHealthChart.getInstance(position);map.put(position,fragment);}returnfragment;}@OverridepublicintgetCount(){return3;//卡片个数}}}

看完了这篇文章，相信你对“如何使用ViewPager+RadioGroup实现左右滑动卡片布局”有了一定的了解，如果想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！