Android实现界面内嵌多种卡片视图（ViewPager、RadioGroup）

android实现界面内嵌多种卡片视图，具体内容如下

效果如图所示： 

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

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

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:state_checked="true">
 <shape>
  <solid android:color="@color/app_green_area" />
  <corners android:radius="5dp" />

 </shape>
 </item>
 <item android:state_checked="false">
 <shape>
  <solid android:color="#fff" />
  <corners android:radius="5dp" />
  <stroke android:width="0.2dp"
  android:color="@color/app_line"/>
 </shape>
 </item>
</selector>

2.主界面布局：

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

 <linearlayout
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical"
 android:gravity="center"
 android:background="@color/app_gray_bg">
 <textview
  android: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.viewpager
  android:id="@+id/view_pager"
  android:layout_gravity="center"
  android:overscrollmode="never"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"/>
 </linearlayout>

 <radiogroup
 android: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">

 <radiobutton
  android:layout_width="10dp"
  android:layout_height="10dp"
  android:layout_marginleft="10dp"
  android:background="@drawable/selector_point"
  android:button="@null" />

 <radiobutton
  android:layout_width="10dp"
  android:layout_height="10dp"
  android:layout_marginleft="10dp"
  android:background="@drawable/selector_point"
  android:button="@null" />

 <radiobutton
  android:layout_width="10dp"
  android:layout_height="10dp"
  android:layout_marginleft="10dp"
  android:background="@drawable/selector_point"
  android:button="@null" />

 </radiogroup>
</relativelayout>

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

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.cardview xmlns: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">
 <linearlayout
 android:id="@+id/chart_bar"
 android:adjustviewbounds="true"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical">
 <textview
  android: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" />
 <linearlayout
  android:adjustviewbounds="true"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical">
  <linearlayout
  android:id="@+id/layout_data1"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:gravity="center"
  android:visibility="visible"
  android:orientation="vertical">
  <textview
   android:text="layout_data1"
   android:textsize="30sp"
   android:textcolor="@color/colorprimary"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content" />
  </linearlayout>
  <linearlayout
  android:id="@+id/layout_data2"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:gravity="center"
  android:visibility="visible"
  android:orientation="vertical">
  <textview
   android:text="layout_data2"
   android:textsize="30sp"
   android:textcolor="@color/colorprimary"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content" />
  </linearlayout>
  <linearlayout
  android:id="@+id/layout_data3"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:gravity="center"
  android:visibility="visible"
  android:orientation="vertical">
  <textview
   android: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.定义卡片之间切换的样式：

/**
 * 卡片之间切换的样式
 */

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; i++) {
   view child = getchildat(i);
   child.measure(measurespec.makemeasurespec(getmeasuredwidth(), measurespec.exactly), measurespec.makemeasurespec(getmeasuredheight(), measurespec.exactly));
  }
  }
 }
 }
}

6.卡片布局对应的activity：

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;//用于标识选择的是哪个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()).inflate(r.layout.fragment_health_chart, container, false);
 butterknife.bind(this, view);
 bundle bundle = getarguments();
 if (bundle != null) {
  position = bundle.getint(data);
  initcard();
 }
 //加载卡片视图，控制宽高比例
 ratiolayout ratiolayout = new ratiolayout(getcontext());
 ratiolayout.addview(view);
 ratiolayout.setheightwidthratio("67/52");
 return ratiolayout;
 }

 private void initcard() {
 switch (position) {
  case 0://显示layoutdata1
  layoutdata1.setvisibility(view.visible);
  layoutdata2.setvisibility(view.gone);
  layoutdata3.setvisibility(view.gone);
  initdata();
  break;
  case 1://显示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;
 }
 }

 /**
 * 初始化数据
 */
 private void initdata() {
 switch (position) {
  case 0:
  tvtitle.settext("卡片内容" + "layout_data1");
  chartbar.setbackgroundcolor(color.parsecolor("#6ddac6"));
  break;
  case 1:
  tvtitle.settext("卡片内容" + "layout_data2");
  chartbar.setbackgroundcolor(getresources().getcolor(r.color.app_green_area));
  break;
  case 2:
  tvtitle.settext("卡片内容" + "layout_data3");
  chartbar.setbackgroundcolor(getresources().getcolor(r.color.coloraccent));
  break;
 }
 }

}

7.主界面的activity代码：

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()).inflate(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());//设置卡片之间切换的样式
 viewpager.setoffscreenpagelimit(3);//限定预加载的卡片个数
 viewgroup.layoutparams layoutparams = viewpager.getlayoutparams();
// layoutparams.height = apputil.dp2px(getcontext(), 400);
 float scale = getcontext().getresources().getdisplaymetrics().density;
 layoutparams.height = (int) (400 * scale + 0.5f);//计算高宽
 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) {
 //根据监听viewpager的pagechangelistener获得选择的是哪个卡片，并把其对应位序的小圆点设置为选定状态
 radiobutton childat = (radiobutton) group.getchildat(position);
 childat.setchecked(true);
 }

 @override
 public void onpagescrollstatechanged(int state) {

 }

 class mypageradapter extends fragmentpageradapter {
 hashmap<integer, fragment> 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;//卡片个数
 }
 }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。