How to use ViewPager+RadioGroup to realize left and right sliding card layout

Editor to share with you how to use ViewPager+RadioGroup to achieve left and right sliding card layout, I hope you will learn something after reading this article, let's discuss it together!

The effect is shown in the figure:

1. When you select an interface, the corresponding small circle is lit up:

Create dots through selector and change the color of dots when they are selected and not selected:

two。 Main interface layout:

3. Card view layout embedded in the main interface:

4. Define the style of switching between cards:

/ public class ZoomOutPageTransformer implements ViewPager.PageTransformer {public static final float MAX_SCALE = 0.9f; public static final float MIN_SCALE = 0.8f; @ Override public void transformPage (View page, float position) {position = position

< -1 ? -1 : position; position = position >

1? 1: position; float tempScale = position

< 0 ? 1 + position : 1 - position; float slope = (MAX_SCALE - MIN_SCALE) / 1; float scaleValue = MIN_SCALE + tempScale * slope; page.setScaleX(scaleValue); page.setScaleY(scaleValue); if (Build.VERSION.SDK_INT < Build.VERSION_CODES.KITKAT) { page.getParent().requestLayout(); } }} 5.定义用于加载卡片视图的layout控件，方便自定义宽高比例： import android.content.Context;import android.content.res.TypedArray;import android.text.TextUtils;import android.util.AttributeSet;import android.view.View;import android.view.ViewGroup;/** * 用于加载卡片视图 */public class RatioLayout extends ViewGroup { private float heightWidthRatio = 0.325f; public RatioLayout(Context context) { this(context, null); } public RatioLayout(Context context, AttributeSet attrs) { super(context, attrs); final TypedArray a = context.obtainStyledAttributes( attrs, R.styleable.RatioLayout); heightWidthRatio = getFloatFromString(a.getString(R.styleable.RatioLayout_height_width_ratio)); a.recycle(); } public void setHeightWidthRatio(String ratio) { heightWidthRatio = getFloatFromString(ratio); } public static float getFloatFromString(String src) { if (TextUtils.isEmpty(src)) { return 0; } float result; try { result = Float.parseFloat(src); return result; } catch (Exception e) { } String[] strs = src.split("/"); if (strs.length == 2) { try { float molecular = Float.parseFloat(strs[0]);//分子 float denominator = Float.parseFloat(strs[1]);//分子 result = molecular / denominator; } catch (Exception e) { result = 0; } } else { result = 0; } return result; } protected void onLayout(boolean changed, int left, int top, int right, int bottom) { layoutChildren(left, top, right, bottom); } void layoutChildren(int left, int top, int right, int bottom) { final int count = getChildCount(); for (int i = 0; i < count; i++) { final View child = getChildAt(i); if (child.getVisibility() != GONE) { final LayoutParams lp = child.getLayoutParams(); final int width = child.getMeasuredWidth(); final int height = child.getMeasuredHeight(); child.layout(0, 0, width, 0 + height); } } } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); if (heightWidthRatio >

0) {int width = getMeasuredWidth (); int height = (int) (width * heightWidthRatio); setMeasuredDimension (width, height); int count = getChildCount (); if (count > = 1) {for (int I = 0; I < count; iTunes +) {View child = getChildAt (I) Child.measure (MeasureSpec.makeMeasureSpec (getMeasuredWidth (), MeasureSpec.EXACTLY), MeasureSpec.makeMeasureSpec (getMeasuredHeight (), MeasureSpec.EXACTLY);}}

6. Activity for card layout:

Public class FrHealthChart extends Fragment {public static final String DATA = "_ data"; @ BindView (R.id.layout_data1) LinearLayout layoutData1; @ BindView (R.id.layout_data2) LinearLayout layoutData2; @ BindView (R.id.layout_data3) LinearLayout layoutData3; @ BindView (R.id.tv_title) TextView tvTitle; @ BindView (R.id.chart_bar) LinearLayout chartBar; private int position / / used to identify which layout public static Fragment getInstance (int position) {FrHealthChart frHealthChart = new FrHealthChart (); Bundle bundle = new Bundle (); bundle.putInt (DATA, position); frHealthChart.setArguments (bundle); return frHealthChart } @ Nullable @ Override public View onCreateView (LayoutInflater inflater, @ Nullable ViewGroup container, @ Nullable Bundle savedInstanceState) {View view = inflater.from (getContext ()) .propagate (R.layout.fragment_health_chart, container, false); ButterKnife.bind (this, view); Bundle bundle = getArguments (); if (bundle! = null) {position = bundle.getInt (DATA); initCard () } / / load the card view and control the width-height ratio RatioLayout ratioLayout = new RatioLayout (getContext ()); ratioLayout.addView (view); ratioLayout.setHeightWidthRatio ("67 private void initCard 52"); return ratioLayout;} private void initCard () {switch (position) {case 0Plus / display layoutData1 layoutData1.setVisibility (View.VISIBLE) LayoutData2.setVisibility (View.GONE); layoutData3.setVisibility (View.GONE); initData (); break; case 1 View.GONE / display layoutData2 layoutData1.setVisibility (View.GONE); layoutData2.setVisibility (View.VISIBLE); layoutData3.setVisibility (View.GONE); initData () Break; case 2 layoutData3 layoutData1.setVisibility (View.GONE); layoutData2.setVisibility (View.GONE); layoutData3.setVisibility (View.VISIBLE); initData (); break }} / * initialization data * / private void initData () {switch (position) {case 0: tvTitle.setText ("card content" + "layout_data1"); chartBar.setBackgroundColor (Color.parseColor ("# 6ddac6")); break Case 1: tvTitle.setText ("card content" + "layout_data2"); chartBar.setBackgroundColor (getResources (). GetColor (R.color.app_green_area)); break; case 2: tvTitle.setText ("card content" + "layout_data3") ChartBar.setBackgroundColor (getResources () .getColor (R.color.colorAccent)); break;}}

7. Activity code of the main interface:

Public class FrHealth extends Fragment implements ViewPager.OnPageChangeListener {@ BindView (R.id.view_pager) ViewPager viewPager; @ BindView (R.id.group) RadioGroup group; @ Nullable @ Override public View onCreateView (LayoutInflater inflater, @ Nullable ViewGroup container, @ Nullable Bundle savedInstanceState) {View view = LayoutInflater.from (getContext ()) .propagate (R.layout.fragment_health, container, false); ButterKnife.bind (this, view); initView () Return view;} private void initView () {RadioButton childAt = (RadioButton) group.getChildAt (0); childAt.setChecked (true); viewPager.setPageTransformer (true, new ZoomOutPageTransformer ()); / / set the style of switching between cards viewPager.setOffscreenPageLimit (3); / / limit the number of cards preloaded ViewGroup.LayoutParams layoutParams = viewPager.getLayoutParams () / / layoutParams.height = AppUtil.dp2px (getContext (), 400); float scale = getContext (). GetResources (). GetDisplayMetrics (). Density; layoutParams.height = (int) (400 * scale + 0.5F); / / calculate height width layoutParams.width = (int) (layoutParams.height * 0.8); if (viewPager.getParent () instanceof ViewGroup) {ViewGroup viewParent = ((ViewGroup) viewPager.getParent ()) ViewParent.setClipChildren (false); viewPager.setClipChildren (false);} viewPager.addOnPageChangeListener (this); MyPagerAdapter myPagerAdapter = new MyPagerAdapter (getChildFragmentManager ()); viewPager.setAdapter (myPagerAdapter) } @ Override public void onPageScrolled (int position, float positionOffset, int positionOffsetPixels) {} @ Override public void onPageSelected (int position) {/ / get which card is selected according to the PageChangeListener listening to viewPager, and set the dot of its corresponding order to the selected state RadioButton childAt = (RadioButton) group.getChildAt (position); childAt.setChecked (true) } @ Override public void onPageScrollStateChanged (int state) {} class MyPagerAdapter extends FragmentPagerAdapter {HashMap map = new HashMap (); public MyPagerAdapter (FragmentManager fm) {super (fm);} @ Override public Fragment getItem (int position) {FrHealthChart fragment = (FrHealthChart) map.get (position) If (fragment = = null) {fragment = (FrHealthChart) FrHealthChart.getInstance (position); map.put (position, fragment);} return fragment;} @ Override public int getCount () {return 3 / / number of cards} after reading this article, I believe you have a certain understanding of "how to use ViewPager+RadioGroup to achieve left and right sliding card layout". If you want to know more about it, welcome to follow the industry information channel, thank you for reading!