Android实现界面内嵌多种卡片视图(ViewPager、RadioGroup)
程序员文章站
2023-12-16 15:51:46
android实现界面内嵌多种卡片视图,具体内容如下
效果如图所示:
1.选择某个界面时,对应的第几个小圆点亮:
通过selector制造圆点...
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;//卡片个数 } } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。