Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.