欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2023-12-16 15:51:46
android实现界面内嵌多种卡片视图,具体内容如下 效果如图所示:  1.选择某个界面时,对应的第几个小圆点亮: 通过selector制造圆点...

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

效果如图所示: 

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

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

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>

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

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;//卡片个数
 }
 }
}

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

上一篇:

下一篇: